Flash DS Elements

About this plugin

Generate Production-Ready Design Systems

Flash DS Elements creates complete design systems with 37+ modern UI components. Configure design tokens (colors, typography, spacing) before generation or update them anytime. Add components all at once or incrementally as your system grows.

Key Features

Configure Design Tokens

20+ semantic colors (primary, secondary, destructive, muted, accent)

Typography system with 10 sizes and 6 weights

17-point spacing scale (4px grid)

7 border radius options

5 shadow presets

37+ UI Components

Buttons (6 variants), Inputs, Cards, Badges

Forms: Checkbox, Radio, Switch, Select, Slider

Navigation: Tabs, Menus, Breadcrumb, Pagination

Overlays: Dialog, Sheet, Drawer, Popover, Tooltip

Feedback: Alert, Toast, Progress, Skeleton

Data: Table, Calendar, Chart, Avatar

Layout: Accordion, Carousel, Scroll Area

Flexible Workflow

Create New: Generate complete system from scratch

Update Existing: Modify tokens on existing systems

Incremental: Add components one at a time

Automatic Figma Integration

Variables collection (colors, spacing, radius)

Color, text, and effect styles

Variable binding for easy theme updates

How It Works

Configure design tokens (or use defaults)

Select components you need

Generate

Your design system is ready with all components, variables, and styles.

Why Use This Plugin?

Fast: Generate systems in minutes, not hours

Flexible: Update tokens anytime, add components incrementally

Developer-Ready: Variables and naming match modern component libraries

Consistent: All components use the same token system

Technical Details

Figma Variables for all design tokens

Component variants included

TypeScript/React codebase

Works offline

10-30 second generation time