Namnso Ukpanah

My presentation at the Figma Nigeria Design Conference which was held on 27th January, 2018.

The topic was "Understanding Design Systems with Figma"

Transcript

1. Understanding Design Systems with Figma Namnso Ukpanah
2. First of all... My name is Namnso Ukpanah, I’m the Lead UX/UI Designer at hotels.ng. I create experiences and try to simplify complicated interfaces. Hoping to help build the Nigerian Design Community so we can be recognized as problem solvers. @namnsoukpanah
3. Systems design is the process of defining the architecture, modules, interfaces, and documentation for a system to satisfy specified requirements.
4. SO IMAGINE DESIGN SYSTEMS AS A LANGUAGE 1. MORPHEMES - meaningful smallest unit of a language. 2. SYNTAX - composed of morphemes arranged into meaningful structures 3. SEMANTICS - the meaning of a word, phrase or text. 4. PRAGMANTICS - social use of a language (context of use). 5. DISCOURSE - connected series of conversation. LANGUAGE STRUCTURE
6. COMMON EXAMPLES OF DESIGN SYSTEMS 1. Material Design - Google 2. Human Interface Design - iOS 3. Scooter - Dropbox 4. Service Manual - gov.uk 5. Nachos - Trello
8. Components
9. Principles
10. Documentation
12. Figma is the first interface design tool that is browser based with support for multi-player making it easier for teams to create awesomeness collaboratively.
13. HOW IS FIGMA HELPING US UNDERSTAND DESIGN SYSTEMS?
14. COMMON FEATURES OF FIGMA 1. Realtime collaboration 2. Design, review & prototype 3. Export & copy CSS, iOS or Android code 4. Export SVG & CSS codes from design files 5. Amazing vector networks 6. No more clunky design files (one less worry)
16. COMMON FEATURES OF FIGMA 1. Realtime collaboration 2. Design, review & prototype 3. Export & copy CSS, iOS or Android code 4. Export SVG & CSS codes from design files 5. Amazing vector networks 6. No more clunky design files (one less worry)
18. COMMON FEATURES OF FIGMA 1. Realtime collaboration 2. Design, review & prototype 3. Export & copy CSS, iOS or Android code 4. Export SVG & CSS codes from design files 5. Amazing vector networks & no more clunky design files (one less worry)
20. COMMON FEATURES OF FIGMA 1. Realtime collaboration 2. Design, review & prototype 3. Export & copy CSS, iOS or Android code 4. Export SVG & CSS codes from design files 5. Amazing vector networks 6. No more clunky design files (one less worry)
22. COMMON FEATURES OF FIGMA 1. Realtime collaboration 2. Design, review & prototype 3. Export & copy CSS, iOS or Android code 4. Export SVG & CSS codes from design files 5. Components & Constraints 6. No more clunky design files (one less worry)
25. COMMON FEATURES OF FIGMA 1. Realtime collaboration 2. Design, review & prototype 3. Export & copy CSS, iOS or Android code 4. Export SVG & CSS codes from design files 5. Amazing vector networks 6. No more clunky design files (one less worry)
28. THANK YOU!