Create a Guide: How to use Figma effectively on open source volunteer teams

[ExperimentsInHonesty]

Dependency

https://github.com/hackforla/product-managment/issues/20

Overview

We need to create a guide for How to use Figma Effectively so that volunteers can get up to speed quickly on making designs to be used by team and understand effective practices for communicating between design/product/development

Action Items

The phases in the guide-making process are listed below. Each phase displayed in blue is linked to a wiki page with instructions on how to complete that phase. Open the wiki page in a new tab, copy the instructions for each part into the section labeled 'Tasks' at the bottom of this issue, and complete each task listed.

• Gather Examples Solo (open in a new tab)
• Gather Examples Collaboratively
• Create a Guide Draft
  • If needed, create a template
• Have your guide peer reviewed
• Present your guide for leadership review

Resources/Instructions

Projects to Check

Tasks

• This is where you will copy instructions from the wiki page for the step you are currently on.

Resources/Instructions

Google Drive Folder for this Guide’s documents and shortcuts (to documents in other locations)
0128 How to use Figma effectively on open source volunteer teams

Part of Design system: NO
Original version of this issue: #128
Hack for LA figma for the Hack Nights Page

[ExperimentsInHonesty]

One of the lessons from HfLA site team and others is that when you add items to a page in figma, the following is important:

• Emoji if possible
• Clear name
• Add content from left to right, putting a box around the latest version. When you start working on the next version, start a new line and remove the box from the last row so that when someone reads the page, they can see easily what is most recent.
• If you have several people working on a version of a page (not recommended), have them work in different figma pages with the name of the designer after the name of the page.
• If you are working on different pages in the same work flow and there will be many (like a10 step process), then build from left to right and down. And add a note section at the top that explains.

[JesseTheCleric]

Prior version of issue

Dependency

https://github.com/hackforla/product-managment/issues/20

Overview

We need to create a guide for How to use Figma Effectively so that volunteers can get up to speed quickly on making designs to be used by team and understand effective practices for communicating between design/product/development.

Action Items

• Gather examples of how other Hack for LA projects or volunteers have done this (if applicable), adding each example as a link in the resources section below
  • Once done, remove the "Guide: Gather Examples" label and add the "Guide: Research" label
• Research existing information about [name of item] in [relevant resources, articles, etc.]
  • Once done, remove the "Guide: Research" label and add the "Guide: Draft Guide" label
• Create a draft guide, either in markdown format in this issue or a google doc in the ux/ui google drive
  • Once done, remove the "Guide: Draft Guide" label and add the "Guide: Review Guide" label
• Review the guide with UX/UI community of practice
  • Once done, remove the "Guide: Review Guide" label and add the "Guide: Leadership Review" label
• Present to the Hack for LA leadership team for sign off
  • Once approved, remove the "Guide: Leadership Review" label and add the "Guide: Place Guide" label

Resources

Update issue hackforla/product-management#15 with the name of item you are working on

Resources/Instructions

Part of Design system: NO
Original version of this issue: #128
Hack for LA figma for the Hack Nights Page

[JesseTheCleric]

Assignee, Labels, Project Board Placement, and Milestones for this issue in the UI/UX Repo: