Cleanup Guide template: Figma Effective Practices #20 about guides HOT 3 CLOSED

Create a Guide: Figma Effective Practices #20

Overview

We need to standardize our Figmas as well as encourage innovation to make the best use of the tool for teams. The guide will be informed by all teams current practices and ideas for how to improve.

Action Items

• Send proposed iconography to all teams to get feedback
  • Make relevant changes
• All figmas need the following
  • Cover sheet
  • Style Guide
    • Components
    • Colors
    • Typography
  • Icons for sections - if you have a lot of pages, putting icons on just the sections can help you keep it organized.
  • Visual representation of classes or classes defined in the Layers (layers is easier)
• Create an empty figma for people to use as a template with a sample page for each type of resource recomended

Proposed Iconography

Section and Page examples (we are providing all the icons for all potential pages, so that depending on which you have, you can use an icon consistent with other projects, so that we can make a guide).

• ✅ Final pages (if the site is small this might just be one page, if the site is large this is a section header for various features to have their final pages - see drafts section below for work in progress)
• 📔 Style Guide
  • 🏗️ Components
  • 🎨 Colors
  • T Typography
• ™️ Branding and Logo
• 📣 Press Kit
• ⭐ Social Media Preview
• 🛬 Landing Page
  • 📃 About Us
• 📐 Drafts

Resources/Instructions

Emojipedia
Cover sheet and icons on sections example from 100 Automations

[100 Automations Figma file ]https://www.figma.com/file/zGyhV8Z6sLohatYAnFoxQm/100Automations-Project-Board

Link to Issue #20

from guides.

Train of Communication So Far

"I sent the following message to the #design-systems team, please check in on them to see what they said Bonnie 9:22 AM
Hi Design Systems team. I am working with the #guides team to develop a tracker for all the guides across the org and develop our ideation to publication pipeline. During this time I am cleaning up some guide issues that are not formatted like the rest (they were early). I cam across this one, and wanted to know how this material fits into the design system you all are building. hackforla/product-management#20"

"waiting on response, checked again 8/8/2021. Spoke to Hana 8/10/2021 and she was going to add it to the agenda but I still don't see it, so I have written her in slack channel again 8/13/2021. Added it to her agenda hackforla/design-systems#53"

Hana and Danielle said:

"At this stage we are not covering this in our guide however will note that there is a separate guide on how to set up your Figma file effectively. Potentially this Figma Effective Practices guide can link out to our Design Systems Figma file as an example of how a Design System can look."

from guides.

1. Create a Guide: Figma Effective Practices hackforla/product-management#20.
   At this stage we are not covering this in our guide however will note that there is a separate guide on how to set up your Figma file effectively. Potentially this Figma Effective Practices guide can link out to our Design Systems Figma file as an example of how a Design System can look.

Bonnie Response : Please show me what you are creating at our next meeting.

• Update: Hana Showed me. Interestingly enough they have utilized their own icon schema to navigate their Figma Doc. It is my belief that they will eventually start adding icons to the Design Systems template that they will build as the template for other projects

from guides.