1
Connect to Figma
Generate documentation site from your Figma design system, display all the styles, variables and components.
Handoff gives people and AI agents access to your design system, with a shared standard for what gets built.
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