Style page sections and the hero
Set how page sections and the headline at the top of a page look, from your tokens.
Better UI, less fixing
Palette Tools
Try it on your own tokens
Contrast checker
Icon Library
Block library
Component library
Handbook
Create an account and sign in
Find your way around the editor
Start a new design system
Use the Design Wizard
Start from a template
Manage your design systems
Plans explained
Import from a website
Import a tokens file
Send from Figma with the plugin
Get your design system into Figma
Review an import
Set your colours
Choose your fonts and text sizes
Set spacing, corners, shadows and layout
Set how things move
Style your buttons
Explore your components
Style toggle buttons and segmented controls
Add a brand variant
Write your principles and tone of voice
Check your design system for problems
Set rules the audit checks
Save your team’s answers for AI tools
Review components from AI tools
Share your design system
Set up a team
Manage your account and plan
Export your design system
Connect an AI tool
Sync with Git
Host your Storybook
Build pages from blocks
Tell your team what changed
Storybook Live Sync & Hosting
Connect an MCP client
MCP setup guides
Connection diagnostics
Connect an AI assistant
From scattered styles to a system your team reuses
Simple, transparent pricing
Guides
What is a design system MCP server?
Figma's MCP server vs a design system MCP server
Frequently asked questions
Support
Privacy Policy
Terms and Conditions
End User Licence Agreement