Figma Foundation Design and Research

[allthatyazz]

Overview

We need to build tutorials and templates so that HfLA's projects have a way to guide themselves in the building of consistent and effective Figma files for their team.

Details

HfLA’s Design Systems (DS) team has conducted a series of audits on 22 HfLA projects’ main Figma files since November 2021. The audits revealed a lack of consistency in the way each team creates and maintains their Figma files. In response to the needs of HfLA’s Executive Director (Stakeholder) and with the aim of creating consistency across the organization, the DS team proposed a guide called Figma Foundations. Figma Foundations includes a set of instructions and templates for current and future teams at HfLA to adopt.

Note from ED: When all the templates and tutorials are completed, it can collectively be known as Hack for LA's Figma Foundations and will all use the same Design System, so the experience is consistent. But each resource that we produce (i.e. cover page, tutorial, template) must stand alone as a usable resource, being both self-explanatory and useful without the other resources.

Action Items

• Create a new issue with the following template of Action Items and Resources. Repeat for each section of Figma Foundations:
  • Cover page
  • Start page
  • File menu
  • Plugin library
• Add the created issues to the list of issues at the bottom of this comment

### Action Items
- [ ] Each issue gets the label "**feature: [section]**"
- [ ] Each issue gets the milestone "**Figma File Foundations**"
- [ ] Copy issue templates from https://github.com/hackforla/design-systems/issues/396
- [ ] Tutorial & Template: [section]
  - role: design
  - size: 1pt
- [ ] Example [section]
  - role: design
  - size: 1pt
- [ ] Plan the [section] usability test
  - role: research
  - size: 5pts
- [ ] Give feedback on [section] usability test plan
  - role: design
  - size: 1pt
- [ ] Usability test the [section]
  - role: research
  - size: 1pt

### Order to conduct work
- Create Tutorial & Template
- Create Example Page
- Create a Usability Test plan
- [ ] Design team informs the research team they are ready for the pilot to be conducted
- Usability research plan review feedback from Design Team
- Design Team provides researchers feedback on the Usability Test Plan using the FigJam file (e.g., if a designer has a specific question that hopes to find an answer through user's feedback.) 
- [ ] Research Team incorporates the designers' feedback into Test's script (see Usability Test Plan)
- [ ] Design performs the last review to ensure their goals are met.
- Conduct user research
- Analyze the usability findings

 
### Resources/Instructions
- [Figma Foundations]( https://www.figma.com/file/5NacfOm45QlrWgr6wWEg4k/Design-System-Template-for-HfLA?node-id=2%3A7) 
- [FigJam to exchange feedback between research and design](https://www.figma.com/file/mmvbxZ6lctjQneEeqTjC8O/UX%2FUI-Discovery-FigJam?node-id=0%3A1)
- [Google drive contains Usability Test plans](https://drive.google.com/drive/folders/1U7f9yH0VZgZPxtpAru5RL1LmIJo9ghfz?usp=sharing)

Resources/Instructions

Figma Foundations
FigJam to exchange feedback between research and design
Google drive contains Usability Test plans

List of issues

• Cover Page Usability Test, Overview #392
• FF: Section Work Overview: Start page