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

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

Step 2: Generate Your Color Palette

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

Step 3: Create Typography Scale

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

Step 4: Generate Spacing System

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

Step 5: Add Your First Component

  1. Navigate to Component Library
  2. Select Core Components > Button
  3. Choose your preferred variant
  4. Click Add to File
  5. Customize using your generated design tokens

What’s Next?

Common First Steps

Setting Up Team Library

  1. Generate your complete design system
  2. Publish components to team library
  3. Share with your design team
  4. 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