By building a design system you’ll be able to keep consistency in your designs, build new designs faster by using reusable components, and easily change styles across all of your existing designs if needed.

It can feel like a daunting task, especially if you already have an existing design. That’s why in this video we’re using a design from Dribbble and taking you step-by-step to show you how to start organizing your styles and components.

By the end of the video, you should be able to take what you learn and finish the rest of the project or apply it to your own designs.

Huge thanks to the Slab Design Studio team on Dribbble for the original Figma project: https://dribbble.com/shots/10058339-FIGMA-FREEBIES-Data-warehouse-homepage

🗂 DOWNLOADS 🗂

https://gum.co/MGbHq

⏰ TIMESTAMPS ⏰

Add the Local Styles: 0:48

Create the Atoms for the Atomic Design System: 18:00

Create the Molecules for the Atomic Design System: 36:19

Create the Organisms for the Atomic Design System: 48:23

🔗 HELPFUL RESOURCES 🔗

Figma: https://www.figma.com/

Atomic Design: https://bradfrost.com/blog/post/atomic-web-design/

#WebDesign #Figma #WebDesigner

#figma #webdesign #webdesigner