Planning a Design system

Auto Layout is inspired by the power and versatility of flexbox. Layouts will ease your workflow. We will show you how to think when setting up your own Design system and how to plan your styles to work nicely with Tailwind CSS.

• Planning a Design System
• Setting up color styles
• Creating font styles for Tailwind
• Creating a button
• Hands on with Auto Layout & Variants

Tailwind Font styles

• text-sm
• text-base
• text-lg
• text-xl
• text-2xl
• text-3xl

Tailwind Color styles
Choose your own, use Grey 100 - Grey 900 etcetera

Create a button with Auto layout

1. Text tool, write "Get started" (I have choosen Font Poppins)
2. Choose font style: text-xl
3. Check auto height and auto width for the text
4. Group the text layer 
5. Make Auto Layout
6. Name the frame: Button
7. In the Auto Layout panel: padding: 17-45 -17 - 45
8. Make round corners
9. Fill color: turqoise
10. Make the button to a Component
11. Name the button: Button/Primary/Default/Playground

Variantes

1. Copy and paste the button to 4 variants
2. Change the look and feel so you will have Default, Hover, Focus, Disabled
3. Make these buttons into components - then select all of the and the variant panel will open
4. Combine as variants
5. Name them as Type, State, Collection

Download your own Figma Playground here
View recorded session here
Password: saaG^i41

Links & resources

Auto layout
https://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/

Sho Kuwamoto - the designer behind auto layout
https://www.figma.com/blog/announcing-auto-layout/

Working with Variantes
https://www.youtube.com/watch?v=cPISbCMt5to