Quick Start

Get your first design system components generated in Figma within minutes using the UI Lab plugin.

Prerequisites

Before you begin, ensure you have:

Figma desktop app or web browser access
UI Lab plugin installed (see Installation)
Basic familiarity with Figma interface

Your First Design System

Step 1: Open the Plugin

Open any Figma file or create a new one
Navigate to Plugins in the main menu
Select UI Lab from your installed plugins
The UI Lab panel will open on the right side

Step 2: Generate Your Color Palette

Click on Design System Generators in the plugin panel
Select Color Palette Generator
Choose a base color (e.g., #3B82F6 for blue)
Click Generate Palette
Your semantic color variations will appear in your Figma file

Step 3: Create Typography Scale

Navigate to Typography Generator
Select your preferred font family
Choose a scale ratio (1.25 for moderate scaling)
Click Generate Typography Scale
Typography styles will be created in your Figma styles panel

Step 4: Generate Spacing System

Go to Spacing Generator
Set your base unit (8px recommended)
Choose your scale multipliers
Click Generate Spacing System
Spacing tokens will be available for layout work

Step 5: Add Your First Component

Navigate to Component Library
Select Core Components > Button
Choose your preferred variant
Click Add to File
Customize using your generated design tokens

What’s Next?

Explore Design System Generators in detail
Learn about Component Library customization
Review Best Practices for design systems
Check out Theming and Modes for advanced usage

Common First Steps

Setting Up Team Library

Generate your complete design system
Publish components to team library
Share with your design team
Establish usage guidelines

Migrating Existing Work

If you have existing design work, see our Migration Guide for step-by-step instructions on incorporating UI Lab into your current projects.

Getting Help

Edit this page on GitHub