hackforla / hackforla/knowledgebase-content

Create a Guide/Template: Figma Effective Practices

Offen
#25 7 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Complexity: Missing CoP label: checked CoP label: shortcuts added CoP: Design CoP: Product feature : guide creation Folders Checked Phase: 1 - Gather Examples Solo Ready for Bonnie Triage size: missing status: 1.1 needs wiki examples
Vorherrschende Sprache
Keine Sprachdaten
Sterne
2
Forks
1
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### 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](https://github.com/hackforla/guides/wiki/How-to-Gather-Examples:-Solo) (open in a new tab)
- [ ] [Gather Examples Collaboratively](https://github.com/hackforla/guides/wiki/Phase-2-%E2%80%90-Gather-Examples-Collaboratively)
- [ ] [Create a Guide Draft](https://github.com/hackforla/guides/wiki/How-to-Draft-a-Guide)
- [ ] If needed, create a template
- [ ] [Have your guide peer reviewed](https://github.com/hackforla/guides/wiki/Peer-Reviews-for-Guides)
- [ ] [Present your guide for leadership review](https://github.com/hackforla/guides/wiki/Submitting-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](https://drive.google.com/drive/u/0/folders/1hsR1ZnHeMdX5YKT1_uucqj6peXhSli77)
- [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)

### Projects to Check
### Tasks
- [ ] This is where you will copy instructions from the wiki page for the step you are currently on.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit den verlinkten Wiki-Seiten zum Sammeln von Beispielen, zum Erstellen eines Entwurfs, zur Peer-Review und zur Prüfung durch die Führungsebene, und prüfe anschließend den Google-Drive-Ordner und die aufgeführten Figma-Beispiele. Schließe den Leitfaden ab, der Deckblätter, Abschnittssymbole, Einrückung, Emoji-Kompatibilität und Anforderungen des Designsystems abdeckt; als erledigt gilt die Aufgabe, wenn die Aufgaben dokumentiert, einem Peer-Review unterzogen und zur Prüfung durch die Führungsebene eingereicht wurden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Bereich
design, documentation
Issue-Typ
Dokumentation
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.