Repository navigation
Create a Guide/Template: Figma Effective Practices #25
Description
Overview
We need to create a guide to how to use emojis, indentation and coversheet in your figma file so that it is easy for team members to find what they are looking for.
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 labelled '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) 0025 [DRAFT] Figma Effective Practices
- Former writeup of issue
Requirements
- All figmas need the following
- Cover sheet
- Icons for sections - if you have a lot of pages, putting icons on just the sections can help you keep it organized.
- Get and confirm icons are cross platform compatible Emojipedia
- see design system team for additional requirements
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
Examples
Cover sheet and icons on sections example from 100 Automations
100 Automations Figma file
Hack for LA website Figma file
Design Systems team
Projects to Check
Tasks
- This is where you will copy instructions from the wiki page for the step you are currently on.
Activity
ExperimentsInHonesty commentedon Jan 2, 2021
Working on sorting out some details on the civic tech index project. Project Figma should be updated to add classes soon
ExperimentsInHonesty commentedon Jan 5, 2021
Overview
In addition to some basic setup above, we also need guidance on how to use styles, etc in order to be able to create /export .css or .scss files
Articles to read
Two articles I found sounds like they have sorted out how material and Figma should be used together to make styles:
Plugins and other export tools
Here are some tools that we should try, so that we can see what happens when we export now, and be able to check if our changes in what ends up being exported
No plug in needed:
Figma SCSS Generator (these links might be the same thing, or two different tools that look the same)
Plug ins
Here are some plugins for converting from figma to scss or css that might be worth experimenting with:
UIKIT to SCSS
CSSGen
figma-sass-less-plugin
ExperimentsInHonesty commentedon Jan 5, 2021
A search I performed once:
How to add a font to figma
Olivia-Chiong commentedon Feb 12, 2021
[-]Figma Effective Practices Guide[/-][+]Create a Guide: Figma Effective Practices[/+]ExperimentsInHonesty commentedon Aug 30, 2021
aymarmsba commentedon May 2, 2024
Prior version of issue
Overview
We need to create a guide to how to use emojis, indentation and coversheet in your figma file so that it is easy for team members to find what they are looking for.
Action Items
old product management google drivenew product management google drive>Product Management GuidesResources
Requirements
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).
Examples
Cover sheet and icons on sections example from 100 Automations
100 Automations Figma file
Hack for LA website Figma file
Design Systems team
aymarmsba commentedon May 2, 2024
Assignee, Labels, Project Board Placement, and Milestones for this issue in the Product Repo:
17 remaining items
[-]Create a Guide: Figma Effective Practices[/-][+]Create a Guide/Template: Figma Effective Practices[/+]