In this free Figma tutorial, learn how to build a design system from an existing website using atomic principles. This lesson is a free sample of our premium design system course.

Check out our design system course, where you can learn how to build design systems in Figma.
👉 https://bit.ly/shipwright-design-syst...

Segments:
00:00 - Design System Project Introduction
01:08 - Setup a New Figma File
01:50 - Begin Component Capture Process
02:40 - Components in Different States
03:15 - Organizing Components in a Design System
03:44 - Buttons
06:40 - Tabs
0:7:40 - List Items
09:25 - Menus, Atoms, Organisms
10:30 - Lists, Dividers, Icons, Avatars
11:40 - Cards
13:45 - Gallery
15:10 - Pagination
15:20 - Footer
17:40 - Scroller
18:00 - Tokens, Colors, and Type Styles
22:00 - HTML to Design Plugin
23:58 - Next Steps
24:45 - Design System Course

#designsystems #figmatutorial #webdesign