1
Connect to Figma
Generate documentation site from your Figma design system, display all the styles, variables and components.
Let your agents document what they've built and anyone on your team to prototype with your design system.
Foundations
A focused palette for building consistent product surfaces, documentation, and brand moments.
100
#E5F1F9
200
#CCE4F4
300
#99C9E9
400
#66ADDE
500
#3392D3
600
#0077C8
700
#005F9E
800
#00497A
900
#00395F
100
#E7EDF5
200
#CEDBEB
300
#9DB8D6
400
#6D94C2
500
#3C71AD
600
#0B4D99
700
#093E7C
800
#07305F
900
#052243
100
#E7F5F7
200
#CFEBEE
300
#9FD6DE
400
#70C2CD
500
#40ADBD
600
#1099AC
700
#0D7D8C
800
#0A5C67
900
#073F46
100
#E6F0F1
200
#CDE1E3
300
#9CC2C8
400
#6AA4AC
500
#398691
600
#076775
700
#065460
800
#05434D
900
#03333A
100
#E7E8EE
200
#D0D2DE
300
#A1A5BC
400
#71789B
500
#424B79
600
#131E58
700
#101A4C
800
#0E163F
900
#0A102E
Expose your tokens, components, and docs to agents through a purpose-built MCP server.
Your agents keep the docs alive. Your whole team - engineers, designers, PMs - builds on top of them.
Purpose-built for design systems, not a knowledge base that happens to hold your components.
Prototype
Handoff documentation gives anyone on your team a promptable design space for exploring product ideas with approved components, tokens, and brand patterns already built in.
Opens the Handoff demo in a new tab.
How it works
1
Generate documentation site from your Figma design system, display all the styles, variables and components.
2
Automatically create React or any other component library documentation pages with live preview, properties, tokens, etc.
3
Use agents to create new component pages, write usage guidelines, make sure that system is up to date - with your approval.
FAQ