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

• [ ] 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: https://github.com/hackforla/UI-UX/issues/40#issuecomment-905588360 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.