Design System Basics Figma Plugin

Build your basic page structure based on the atomic design system. Compile your components with the draft page.

Atomic design pages to be created with the plugin;

Design System [Welcome]

Foundations [Title]

• Colors
• Typography
• Icons
• Rules

Component [Title]

• Buttons
• Navigations
• Cards
• Menus
• Data Table
• Date Pickers
• Lists
• Text Fields
• Selection Controls
• Sliders
• Sheets: Bottom
• Tabs
• Snackbars
• Dialogs
• Tooltips
• Alerts
• Other

Modules [Title]

• Header
• Footer

Pages [Title]

• Web Site
• Application
• Draft

There is also an Frame design where you can edit your variant and components thanks to the plugin.