Open-source and Figma compatible

Extend your design system with automated design handoff and design tokens documentation.

Get Started
Type graphic
Type graphic icon

Accelerate development cycles & streamline onboarding of new team members.

Colors graphic
Type graphic icon

Reduce technical debt and cost of future maintenance.

Components graphic
Type graphic icon

Increase brand consistency with single source of truth.

One-click design tokens export for all components.

Automate design asset delivery and transformation and eliminate bottlenecks between design and development with Handoff. Empower your teams and stakeholders to preview and approve in one place.

Component settings

arrow down icon
arrow down icon
spacing icon
arrow down icon

Design decisions in Figma, try it out above.

16
16
30
16
add icon
16
Button Label
16
16
arrow right icon
30
16
48

Live component for QA and preview.

24

border-color: #f7f7f7

25

color: #fff

26

border-radius: 24px

27

padding: 16px 30px

28

font-size: 14px

29

background-color: #309CFF

Production-ready CSS mapped to component.

Design decisions in Figma, try it out above.

Live component for QA and preview.

Production-ready CSS mapped to component.

Design Once, Utilize Many

Everything you need to automate the design handoff process.

dividing lines
icon

Extract standardized design foundations and components from Figma.

icon

Transform design tokens to CSS variables (Bootstrap compatible).

icon

Automate, preview and ship with easy CI/CD integration.

Auto-updating documentation, works like magic

Self-contained, fully functional developer reference guide.

Enable design and development teams to always stay on the same page with live preview examples in a dedicated web app from approved design decisions in Figma. Effortlessly preview, copy, share all your front end standards.

View Demo
Documentation image frontDocumentation image mobile

Handoff is Open Source

Handoff is Free and Open Source Software under the MIT license

We're big believers in a collaborative approach to the challenges of design token usage. We'd really love to hear your feedback!

Anyone with basic coding and Figma knowledge can get Handoff running in a few minutes. Project documentation and a step by step guide is available here.

Handoff supports export native Bootstrap styles maps and previews. If you use a different frontend framework, you can customize the maps and previews to match you framework.

Feel free to submit issues and questions on our Git Hub page here. If you are looking for professional services work related to this project, please visit Convertiv.com .