Create a Guide/Template: 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

[tarang100]

@daniellex0 and @ExperimentsInHonesty to discuss in the meeting on 23rd March

[ExperimentsInHonesty]

Original text from issue

Overview

We need a guide for designers at HfLA to encourage efficient use of the team structure and their time.

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

Action Items

• PM
  • define a good example of a page design from beginning to end
• UI/UX
  • Make a draft guide that communicates the process from ideation to design ready for development with desktop and mobile responsiveness.
  • This guide issue needs to be updated on our Guide Tracking sheet

Resources/Instructions

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.