High Fidelity Prototypes in Figma pt2

Demonstrate how design systems can be used to organize, standardize, and enhance designs.
Understand the role of design critique sessions and feedback while iterating on designs.
Learn how to hand off finished design projects to engineering teams.

Transcript

1. Create High Fidelity Prototypes in Figma @bethanyjep
2. Bethany Jepchumba • Academic Cloud Advocate at Microsoft for AI&ML 🥑 • Freelance Designer - on break 🔔 • @bethanyjep 📫
3. What did we learn yesterday?
4. What we will cover today. Demonstrate how design systems can be used to organize, standardize, and enhance designs. 01 Understand the role of design critique sessions and feedback while iterating on designs. 02 Learn how to hand off finished design projects to engineering teams. 03
5. Design Systems • Design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company. • It's usually hosted online as a website (public or internal).
6. Components of a Design System • Visual Design elements: colour palettes, typography and iconography • UI Patterns: group of elements for example buttons or forms • Guidelines: clear rules on how components and styles should be used • Supporting code for developers
7. Let's Explore Some Design Systems
8. Build Your own design system
9. Feedback Feedback is on your work, not you as a person.
11. Design Critique Sessions Dedicated sessions to give and receive feedback. Participants: Facilitator, presenter or a viewer
12. Design hand-off • Handing off to Engineers • Handing off to recruiters and hiring managers
13. Thank You.