search

hackforla / knowledgebase-content

GNU General Public License v2.0
1 stars 0 forks source link

Create a Guide: Figma Effective Practices #25

Open ExperimentsInHonesty opened 4 years ago

ExperimentsInHonesty commented 4 years ago

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.

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 Screen Shot 2020-10-30 at 9 46 43 AM 100 Automations Figma file Hack for LA website Figma file Design Systems team

Projects to Check

Tasks

ExperimentsInHonesty commented 3 years ago

Working on sorting out some details on the civic tech index project. Project Figma should be updated to add classes soon

ExperimentsInHonesty commented 3 years ago

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 commented 3 years ago

A search I performed once: How to add a font to figma

Olivia-Chiong commented 3 years ago

How to add more people to the Figma without paying

ExperimentsInHonesty commented 3 years ago

Previous issue Description/Top portion

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

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).

Resources/Instructions

Emojipedia Cover sheet and icons on sections example from 100 Automations Screen Shot 2020-10-30 at 9 46 43 AM 100 Automations Figma file Hack for LA website Figma file

aymarmsba commented 6 months ago
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 - [ ] Gather examples of how other Hack for LA projects have done, adding each example as a link in the resources section - [ ] Once done, remove the "TG: Gather Examples" label and add the "TG: Draft Template" label - [ ] Create a draft template, either in markdown format in this issue or a google doc in the ~[old product management google drive](https://drive.google.com/drive/folders/1lO8k_0Z1UejkuRlNMYlUl2xlqgyBmvrF?usp=sharing)~ [new product management google drive>Product Management Guides](https://drive.google.com/drive/folders/1u9YOTWevHwEiHP8-r8d00rlqOn6q8e-5?usp=sharing) - [ ] Once done, remove the "TG: Draft Template" label and add the "TG: Create Guide" label - [ ] Create a guide on how to use the template - [ ] Once done, remove the "TG: Create Guide" label and add the "TG: Review Guide" label - [ ] Review the guide with product management communities of practice - [ ] Once done, remove the "TG: Review Guide" label and add the "TG: Leadership Review" label - [ ] Present to Hack for LA leadership team for sign off - [ ] Once approved, remove the "TG: Leadership Review" label and add the "TG: Place Guide" label - [ ] Possibly create an issue template on .github - [ ] Include link to template under resources if you add it as a template in .github ### Resources - Refer to hackforla/knowledgebase-content#106 for how to write a guide and the guide template - Update issue hackforla/knowledgebase-content#104 with the name of item you are working - [Former writeup of issue](https://github.com/hackforla/knowledgebase-content/issues/25) ### 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](https://emojipedia.org/) - [ ] 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 ![Screen Shot 2020-10-30 at 9 46 43 AM](https://user-images.githubusercontent.com/37763229/97734084-ecc95980-1a95-11eb-80a8-3d8cd6af487e.png) [100 Automations Figma file ](https://www.figma.com/file/zGyhV8Z6sLohatYAnFoxQm/100Automations-Project-Board) [Hack for LA website Figma file](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=2009%3A26149) [Design Systems team](https://www.figma.com/file/UvUJ0zT2EEIOoDQVdn6ApN/Design-Systems-Team-Figma?node-id=2%3A2)

aymarmsba commented 6 months ago
Assignee, Labels, Project Board Placement, and Milestones for this issue in the Product Repo:

![image](https://github.com/hackforla/product-management/assets/155505760/212f58da-8201-4353-ae9f-8c00d1c486a9)