Create a Guide/Template: Figma Auto-Layout

[daniellex0]

Overview

We need to create a guide for Figma Auto-Layout so that volunteers at HfLA can start utilizing industry-standard auto-layout capabilities in their designs

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

• Google Drive Folder for this Guide’s documents and shortcuts (to documents in other locations)
  0126 Figma Auto-Layout

• Comment: Hana and Danielle said: "This guide does not relate to what we are currently working on [Guide Systems]."

• No Auto Layout examples were found in the other projects besides the HFLA website project (Using methods 1,2 and 3 of Step 4).

• Sub Issue for easy Gathering of Examples: Gather Examples: Figma Auto-Layout - not sure that this sub issue is needed.

Projects to Check

• 100 Automations
• 311 Data
• Access the Data
• BallotNav
• Brigade Organizer's Playbook
• Civic Tech Index
• Civic Tech Jobs
  • Figma Auto Layout used on buttons(Duplicate the file so that you can experiment with it)
• Civic Tech Structure
• Data Science Projects
• Design Systems
• Engage
• Expunge-Assist (formerly known as Record Clearance)
• Food Oasis
• GreenEarthOS
• Guides
• HomeUniteUs
• Internship project
• Lucky Parking
• Open Community Survey
• TDM Calculator
• VRMS
• Hack for LA's Website
  • Auto Layout example found in Issues tab
• Youth Justice Nav

Tasks

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

[Eloks7]

Yes, I sent the message privately.

[ExperimentsInHonesty]

Summary of all communications to date (which we were able to find from the comments above)

100 Automations

• Slack thread no longer available
• Summary of Communication:
  • Team messaged that there is no designer on this team currently and Eloka asked for who he could talk to about Auto Layout, and no one on the team replied.
    • 2022-03-14 Eloka7 wrote: Hi, [@Cami](https://hackforla.slack.com/team/U018S4VQK3M) are you still the design lead for 100automations project? ( if Camila is not the lead anymore, can someone else on the team let me know who is?)
    • 2022-03-14 Bonnie replied: @Eloks7 this team currently does not have a design team member at all.
    • 2022-03-15 Eloka7 wrote: I am the product designer for the Guides team. I want to find out if your team has used Auto layout in the past and who can I talk to about it even if you haven't used it before.
• Next Steps: Reach back out to the team, to find out what the names of the prior designer were in order to follow up with them.

---

311

• Slack thread no longer available
• Summary of Communication:
  • Determined that the person listed on the Hack for LA website (Diana) was not the design lead anymore and that they don't have anyone currently.
    • 2022-03-14 Eloka7 wrote: Hi, [@Dana Chen](https://hackforla.slack.com/team/U0112KZPV6C) are you still the design lead for 311 Data project? ( if Dana is not the lead anymore, can someone else on the team let me know who is?)
    • 2022-03-14 Bonnie Replied [@Eloks7](https://hackforla.slack.com/team/U032QEFUPB9) We don't currently have any design team members on the project. We are looking.
    • 2022-03-15 Eloka7 wrote: I am the product designer for the Guides team. I want to find out if your team has used Auto layout in the past and who can I talk to about it even if you haven't used it before.
• Next Steps: Reach back out to the team, to find out what the names of the prior designer were in order to follow up with them.

---

Ballotnav

• Slack Thread no longer available
• Summary of Communication:
  • Reached the designers on the team and was planning on going to a meeting but its been postponed
    • 2022-03-14 Eloka wrote: Hi, @fedelandini are you still the design lead for Ballotnav project? ( if Federica is not the lead anymore, can someone else on the team let me know who is?)
    • 2022-03-14 Federica replied: Hi [@Eloks7](https://hackforla.slack.com/team/U032QEFUPB9) yes, together with [@Irina](https://hackforla.slack.com/team/U01A3MMN59U) and [@Jon Lam (EST)](https://hackforla.slack.com/team/U01N6C5GDA8)
  • 2022-03-14 Eloka7 wrote: I am a UI/UX Designer in the Guides team. I want to find out if your team has built anything using Auto Layout, do you have time to meet with me?
  • 2022-03-14 ?? replied Hi @Eloks7 yes we used Auto Layout for some elements.
  • Ballotnav (Thursday 8 pm PST) (Meeting was postponed)
• Next Steps:

---

Civic Tech Index

• Slack Thread no longer available
• Summary of Communication:
  • Wrote to team to confirm that Chali is the current designer. The Slack free trial is over and the last communication recorded in this issue is March 14. So if they did respond, its no longer available to find.
    • 2022-03-14 Eloka wrote: ``Hi, @Chali are you still the Design lead for project? (if Chali is not the lead anymore, can someone else on the team let me know who is?```
• Next Steps: Chali is the designer, try to connect with her. If she does not respond, talk to the Product Managers.

---

Civic Tech Jobs

• Slack thread no longer available
• Summary of Communication:
  • Eloka connected with current designer Jen and got a link to their figma
    • 2022-03-14 Eloka wrote: Hi, [@Jen Chung](https://hackforla.slack.com/team/U02A6H5PVAA) are you still the Design lead for Civic Tech Jobs project? (if Jen is not the lead anymore, can someone else on the team let me know who is?)
    • 2022-03-14) @jen Chung replied: Hi! Hope you are doing well. Yes I am.
    • 2022-03-15 Eloka7 wrote: Hi I am Eloka, a UI/UX Designer in the Guides team. I want to find out if your team has built anything using Auto Layout, do you have time to meet with me?
  • 2022-03-22 Jen Chung gave me a figma link showing how they have been Using Auto Layout.
• Next Steps: The link to their figma is just to the main page. Please document what you learned about how they use Auto Layout (video of interview with her, yoru notes, etc.). If all you got was the link to the figma but nothing else, define what you next steps will be.

---

Civic Tech Structure

• Summary of Discovery:
  • Couldn't find a Designer on the website.
• Next Steps:

---

Data Science Project

• Summary of Discovery:
  • Not on the HFLA website.
• Next Steps:

---

Design Systems

• Slack thread no longer available
• Summary of Communication:
  • The Slack free trial is over and the last communication recorded above is March 14th. So if they did respond, its no longer available to find.
    • 2022-03-14 Eloka wrote: Hi, [@Ryan Curtis](https://hackforla.slack.com/team/U01UPE4RNHZ) are you still the design lead for Design systems project? (if Ryan is not the lead anymore, can someone else on the team let me know who is?)
• Next Steps: Please start again.

---

Engage

• Slack Thread no longer available
• Summary of Communication:
  • Ryan Mayott is the Designer and they don't use Auto Layout.
    • See screenshot above for entire conversation.
• Next Steps:

---

Expunge assist

• Summary of Discovery:
  • No designers on the team.
• Next Steps:

---

Food Oasis

• Slack thread no longer available
• Summary of Communication:
  • Identified that Bryan Wu is the current design and that they have never used Auto Layout
    • 2022-03-14 Eloka wrote: ``Hi, @Bryan Wu are you still the design lead for Food Oasis project? (if Bryan is not the lead anymore, can someone else on the team let me know who is?)```
    • 2022-03-15 (aproximate date) Byran Wu said that they have never used Auto Layout.
• Next Steps:

---

Greenearth OS

• Slack thread no longer available
• Summary of Communication:
  • The Slack free trial is over and the last communication recorded above is April 3rd. So if they did respond, its no longer available to find.
    • 2022-03-14 Eloka wrote: Hi, [@María-Inés Montes](https://hackforla.slack.com/team/U027NG94TQB) are you still the Greenearth OS lead for design project? (if Maria is not the lead anymore, can someone else on the team let me know who is?)
• Next Steps: Maria is not the current designer, Natalia is, reach out to her

---

Home Unite Us

• Slack Thread no longer available
• Summary of Communication:
  • The Slack free trial is over and the last communication recorded above is March 31st. So if they did respond, its no longer available to find.
    • 2022-03-31 Eloka7 wrote: Hi, [@Rachel Bracker](https://hackforla.slack.com/team/U02JQLQ6YGY) are you still the Design lead for Home Unite Us project? (if Rachel is not the lead anymore, can someone else on the team let me know who is? 2022-03-14
    • 2022-03-31 Rachel Bracker replied Hi, I am!
    • 2022-03-31 Hi I am Eloka, a UI/UX Designer in the Guides team. I want to find out if your team has built anything using Auto Layout, do you have time to meet with me?
• Next Steps: Reach out to Rachel again and let her know you lost the thread, and remind her of your last message

---

Internship Project

• Slack Thread no longer available
• Summary of Communication: Susan Zhuang is replied that they don't use it yet because they have not started their design system.
  • See screenshot above for entire conversation.
• Next Steps:

---

Lucky Parking

• Slack thread no longer available
• Summary of Communication: The Slack free trial is over and the last communication recorded above is April 3rd. So if they did respond, its no longer available to find.
  • See screenshot above for entire conversation.
• Next Steps: Please start again.

---

Open Community Survey

• Slack Thread
• Summary of conversation: Bernard Adesina or Kevin Wang (formerly on the team) are the people to reach out to because MK (the current designer) didn't set it up and has not had a chance to review it.
  • Bernard reached out to Eloka in the channel and they were going to meet 2022-04-29, but it didn't seem to happen
    • See screenshot above for entire conversation.
• Next steps are to reschedule meeting with Bernard.

---

TDM Calculator

• Slack Thread no longer available
• Summary of Communication:
  • The Slack free trial is over and the last communication recorded above is April 3rd. So if they did respond, its no longer available to find.
    • See screenshot above for entire conversation.
• Next Steps: Please start again.

---

VRMS

• Slack Thread no longer available
• Summary of Communication: The Slack free trial is over and the last communication recorded above is April 3rd. So if they did respond, its no longer available to find.
  • See screenshot above for entire conversation.
• Next Steps: Please start again.

---

Youth Justice Nav

• Slack Thread no longer available
• Summary of conversation:
  • Daniel is no longer the lead, its now Chali
    • See screenshot above for entire conversation.
• Next Steps:
  • Reach out to Chali the current designer

[juliagab56]

Hello! We’re currently doing an audit and updating all of our UI/UX resources.
If you would like to continue working on this issue, make sure you follow these guidelines.
Thank you!

[JesseTheCleric]

Prior version of issue

Overview

We need to create a guide for Figma Auto-Layout so that volunteers at HfLA can start utilizing industry-standard auto-layout capabilities in their designs

Action Items

• Gather examples of how other 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 Auto Layout 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 Tracker: Templates & Guides #97 with the name of item you are working on
• Comment: Hana and Danielle said: "This guide does not relate to what we are currently working on [Guide Systems]."
• No Auto Layout examples were found in the other projects besides the HFLA website project (Using methods 1,2 and 3 of Step 4).
• Sub Issue for easy Gathering of Examples: Gather Examples: Figma Auto-Layout - not sure that this sub issue is needed.

Projects to check

• 100 Automations
• 311 Data
• Access the Data
• BallotNav
• Brigade Organizer's Playbook
• Civic Tech Index
• Civic Tech Jobs
  • Figma Auto Layout used on buttons(Duplicate the file so that you can experiment with it)
• Civic Tech Structure
• Data Science Projects
• Design Systems
• Engage
• Expunge-Assist (formerly known as Record Clearance)
• Food Oasis
• GreenEarthOS
• Guides
• HomeUniteUs
• Internship project
• Lucky Parking
• Open Community Survey
• TDM Calculator
• VRMS
• Hack for LA's Website
  • Auto Layout example found in Issues tab
• Youth Justice Nav

[JesseTheCleric]

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