Figma Design System and Handoff to Webflow or Developers

Short answer: A handoff is clean when the Figma design system and the build share the same structure. Components in Figma become components in Webflow or in code, variables for colors, fonts and spacing transfer one to one, and names follow a fixed convention. On top of that come documented states, breakpoints and a clear release status. You can spot a good agency by whether it can explain these points before the start, not only at sign-off.

The key points:

• A design system is more than a component library: it consists of rules, variables, components and documentation.
• Figma and Webflow both have variables with collections and modes, but not the same types. The mapping has to be planned.
• The "Ready for dev" status shows developers what is released. It does not replace a specification of states and behavior.
• In Webflow, components with props, slots and variants plus a class convention like Client-First are the counterpart to the Figma library.
• Check the handoff on one concrete building block, not in a presentation.

Contents

• What belongs in a design system?
• Figma: components, variables and Dev Mode
• Webflow: variables, components and libraries
• Figma and Webflow compared
• Handoff to other developers and systems
• The handoff in seven steps
• Checklist: Is the handoff clean?
• Five questions for every agency
• Common mistakes
• How we do it
• Frequently asked questions

What belongs in a design system?

A design system is a shared language between design and development: the same colors, fonts, spacing and building blocks, with clear rules for when to use what. The library in Figma is only one part of it.

A usable system for a company website has four layers:

Layer	Content	Example
Foundations	Colors, typography, spacing, radii, shadows, grid	Primary color, heading level 2, large spacing
Building blocks	Reusable components with states	Button (default, hover, focus, disabled), card, navigation
Patterns	Combinations of building blocks for recurring tasks	Hero, case study grid, FAQ block, footer
Rules	When, where and how to use something	One primary button per section at most, contrast, image formats

If you only hand over a Figma library, you leave the rules to guesswork. If you only hand over a PDF, you leave the structure to chance. The best handoff has both: a clean library and short, readable rules, ideally in the same document.

For most company websites, a lean system is enough. A corporation with several brands and teams needs more governance, while a mid-sized company with one website mainly needs consistency. A UX and UI agency should be able to explain both. You can find more in the guide Choosing a UX/UI agency.

Figma: components, variables and Dev Mode

Variables, collections and modes

Figma variables store reusable values. According to the Figma help center, there are six types: Color, Number, String, Boolean, Timing and Easing. Variables live in collections, which organize related values and can be split into groups. One collection holds up to 5,000 variables. A mode is a list of values, one value per variable, for example for light and dark color schemes, different languages or device sizes (Figma Help: Variables, Collections, Modes).

For the handoff, this means: if a designer has set up colors only as styles or, worse, as loose hex values, the link to the variables that developers need later is missing. Good practice is a two-tier setup. The first tier holds raw values like blue-500, the second gives them meaning, like color-primary or text-default. Components only use the second tier.

Components and variants

Components in Figma have variants and properties. Developers see them in the Inspect panel, including the information about variants and the changes compared to the main component (Figma Help: Dev Mode). For a component to be translatable, it needs:

• a descriptive name with a fixed pattern, such as Button/Primary or Card/Case Study,
• all states as variants: default, hover, focus, active, disabled, wherever they exist,
• clean properties for text, icons and visibility,
• layout that grows with its content, meaning Auto Layout instead of fixed-position layers. Texts get longer, screens get narrower.

Dev Mode and "Ready for dev"

Dev Mode is the developer workspace in Figma. There you can inspect properties and code snippets, export assets, compare changes and manage the handoff. Designers mark components, frames and sections with the status "Ready for dev", and developers with a matching seat are notified when a design is marked as ready again (Figma Help: Dev Mode). Dev Mode is available on the Professional, Education, Organization, Government and Enterprise plans. The product page also lists the "Compare changes" feature and Code Connect (Figma: Dev Mode).

Code Connect links Figma components to real production code, so developers see that code instead of generated snippets. It is meant for teams that maintain a design system in code, for example in React. For a classic Webflow website without its own component code, it does not matter.

Important: Dev Mode shows what is in the design. It does not show what is missing from the design. A hover state that nobody designed does not show up there. That is why the status does not replace a specification.

Webflow: variables, components and libraries

Variables

According to its help center, Webflow has five variable types: Color, Size, Percentage, Number and Font family. Size covers spacing, font sizes, radii, widths and more. Variables live in collections (the default is "Site variables"), and modes allow several values per variable. Modes can be assigned to a breakpoint (tablet, mobile landscape, mobile portrait), applied manually to classes, or used as themes (Webflow Help: Variables).

The difference from Figma is obvious right away: Webflow has no String, Boolean, Timing and Easing types, but it does have the Size type with units and Percentage. That is not a problem as long as you know it in advance. A Figma variable "Spacing/large" becomes a Size variable, and a font family becomes Font family. Boolean variables that show and hide layers in Figma have no counterpart in Webflow and are solved with component properties or variants.

Components

According to its help center, Webflow components have three levers (Webflow Help: Components):

• Properties (props) link text, links, images or videos to the instance without changing the structure or design. They can be connected to CMS fields.
• Slots are placeholders into which other components are inserted. Each instance can hold something different there.
• Variants are styling options, for example a button as solid or outline. All variants inherit styles from the base variant.

Changes to the main component apply to all instances, except elements with assigned props. A component has only one variant property, but the number of variants is not limited. That is the practical limit to keep in mind when you cut a Figma component: a Figma component with four variant properties often has to be cut differently in Webflow.

Shared libraries

With Shared Libraries, teams share components, variables and assets across several websites. Updates are not forced: each designer reviews and accepts changes on their own (Webflow: Shared Libraries). This matters when a company runs several websites under the same brand, such as a main site, a careers site and country sites.

Class structure

Variables and components are not enough if the classes underneath are a mess. A convention like Client-First defines how sections, containers and classes are named. The benefit shows at handoff and when teams change: Finsweet describes the goal as being able to hand a project over to another agency or another Webflow developer without friction (Finsweet: Client-First Intro).

Webflow University offers a beginner course on design systems in Webflow. According to the course page, it takes about 20 minutes and covers variables, components and templates. At the time we looked at it, some lessons were still marked "Coming soon" (Webflow University: Design systems in Webflow).

Figma and Webflow compared

This is how the building blocks map to each other. The "Note" column lists the pitfalls.

Figma	Webflow	Note
Variable Color	Variable Color	direct match, carry over values and names
Variable Number (spacing, radii)	Variable Size	define the unit, in Webflow you often work in rem or em
Variable String (font name)	Variable Font family	the font must be available in Webflow (upload, Google, Adobe)
Variable Boolean	Prop or variant	no direct counterpart
Timing, Easing	Interactions, custom code	not a variable type in Webflow
Mode (light/dark, language)	Mode (theme)	modes per breakpoint or as a theme
Component with variants	Component with variants and props	Webflow allows one variant property per component
Text style, effect style	Class with variables	class name follows the convention
Auto Layout	Flexbox, Grid	test the behavior as content grows
Ready for dev	Sign-off in the project	clarify who signs off and when

What can be transferred automatically: Webflow offers the plugin and app "Figma to Webflow". According to the Webflow help center, it turns Figma variables into Webflow variables, with units selectable in px, em or rem, and turns text and effect styles into classes. Frames and components with Auto Layout become Webflow components and elements, and images and vector icons land in the Assets panel (Webflow Help: Figma to Webflow). Since the update of September 24, 2025, according to Webflow, you can select multiple variable collections and modes, aliases are carried over as aliases, and more typography styles with variable references come along (Webflow Updates). The help page still lists limits: variants are not supported, layers need Auto Layout, custom fonts are lost if they have not been uploaded to Webflow beforehand, and the Safari browser is not supported. Neither page says exactly which variable types come along. So the plugin saves typing but does not replace checking: verify the result on the building block, variable by variable.

Example: A button from Figma to Webflow

A button shows what the mapping looks like on the smallest building block:

1. Figma: The Button component has the variants Primary and Secondary, each with the states default, hover, focus and disabled. Colors, font size, padding and radius are bound to variables like color-primary, spacing-m and radius-s.
2. Webflow: The same variables exist as Color and Size variables with the same names. The button is a Webflow component with one variant property (Primary, Secondary), one prop for the text and one for the link.
3. Classes: The button follows the convention, for example a base class button with a combo class for the variant, as Client-First describes it.
4. Sign-off: Check side by side: spacing, font, colors, hover and focus, on desktop, tablet and mobile.

If this test runs cleanly for button, card and navigation, the system carries the whole website. If not, it shows exactly where the handoff needs rework.

Documentation that actually gets read

Long documents go unread. Three short pages are usually enough:

• Foundations: a list of variables with names and purpose, typography levels, grid and breakpoints.
• Components: for each building block, one sentence on use, the variants and what is not allowed.
• Maintenance rules: who may change components, how new pages are created and what editors had better not touch. The guide Maintaining your Webflow CMS yourself covers the question of roles.

A design system only stays alive if someone maintains it. After launch, plan a fixed date, for example once a quarter, to review new patterns and remove legacy items.

Handoff to other developers and systems

Not every handoff goes to Webflow. The basic rule stays the same, the details differ:

Target	What also matters
Webflow	Variables, components, class convention, CMS structure
WordPress (theme or block editor)	Patterns as blocks, design tokens in the theme, maintainability in the editor
TYPO3	Components as Fluid templates, editorial elements, multilingual setup
Custom code (React, Vue)	Code Connect, token export, Storybook or similar documentation

For all targets: ask the developer early, not only at handoff. A short meeting during the design process in which development reviews the component structure and variables saves more time later than any rework. That is also why splitting work between a design agency and a development agency only works with a clear interface. You can find more in the guide Design and development from one team.

The handoff in seven steps

1. Agree on a shared vocabulary. What are colors, spacing and components called? One naming convention for Figma and Webflow, ideally the same one.
2. Set up variables in Figma cleanly. Separate raw values from the meaning layer, and use modes only where they truly apply.
3. Build components with all states. Default, hover, focus, active, disabled, plus empty and error states for forms.
4. Design the breakpoints. At least desktop, tablet and mobile, plus the behavior in between. Webflow works with breakpoints, and modes can apply per breakpoint.
5. Document the behavior. Hover, scroll effects, transitions, the order of reveals, and also motion that is removed for reduced motion.
6. Run a dev review before release. Development reviews the component structure, variables and open questions. Then "Ready for dev".
7. Sign off on the building block. Not the page as a whole, but individual components are checked against Figma: spacing, typography, states, breakpoints.

Checklist: Is the handoff clean?

Design

• ☐ All colors, font sizes and spacing are variables, not single values
• ☐ Components have all states as variants
• ☐ Names follow a fixed pattern, without "Copy" or "Frame 123"
• ☐ Auto Layout instead of fixed-position layers
• ☐ Breakpoints are designed, not just desktop
• ☐ Motion and hover behavior are described

Build

• ☐ Figma variables exist in Webflow as variables, with the same names
• ☐ Recurring building blocks are components with props and slots
• ☐ Class names follow a convention like Client-First
• ☐ The Navigator is readable: sections have descriptive names
• ☐ Spacing and font sizes are not set on every element individually

Handoff to you

• ☐ You get access to the Figma file and the Webflow project
• ☐ There is short documentation: variables, components, rules
• ☐ Your team has been trained and knows what it may change itself
• ☐ It is clear who maintains the design system after launch

Five questions for every agency

1. Show me one building block in Figma and in Webflow side by side. If names, variants and spacing match, the system is real.
2. How are variables transferred and who checks that? Good answers name a concrete method, bad ones talk about "taking it over from the design".
3. Which class convention do you use? If your team or another agency is supposed to keep building the project later, the answer is a must.
4. Who maintains the system after launch? A library nobody maintains goes stale within months.
5. What happens if we switch agencies? You should keep the Figma file, the Webflow project and the documentation.

How to compare quotes overall is covered in the guide Comparing web agency quotes.

Common mistakes

• A library, but no rules. Components without guidance on when to use them get combined wrongly.
• Variables only half introduced. Some of the spacing is variable, the rest is fixed. Then the system breaks at the first change.
• Design and development don't talk to each other. Designers build variants that are awkward to rebuild in Webflow.
• Only desktop is designed. Tablet and mobile get improvised in the build.
• "Ready for dev" as the finish line. The status is a signal, not a guarantee. States and behavior must be documented.
• Too much system for too little site. A ten-page website does not need a corporate design system. A lean set with clean variables and twelve components can be enough.

How we do it

At Webwavers, design comes before development. According to our process page, we start with three moodboards, then the first three homepage sections in Figma, then the homepage and subpages, and development in Webflow, Framer or WordPress begins after your final approval. A personal training session is part of the launch. You can find more on design and build on the pages UX/UI design and Web development.

Conclusion

A clean handoff is not a question of tools but of structure: the same names, the same variables, the same components on both sides. Figma and Webflow offer matching building blocks for this, but not identical ones. The mapping belongs at the start of the project. Check an agency on one concrete building block, and ask what happens after launch.

Frequently asked questions

What is the difference between a design system and a style guide page? A style guide shows colors, fonts and building blocks. A design system also includes rules, variables, reusable components and maintenance. A style guide is often a slice of it.

Do I need a design system as a mid-sized company? A lean one, yes. Variables for colors, fonts and spacing plus a handful of well-built components are enough for most company websites. A comprehensive system pays off with several brands, teams or websites.

How do I transfer Figma variables to Webflow? Figma has six variable types, Webflow has five. Colors map directly, spacing and radii become Size variables, fonts become Font family. Booleans and Easing have no direct counterpart. For the transfer, Webflow offers the "Figma to Webflow" plugin, which takes over variables, text and effect styles, and layers with Auto Layout. Component variants are not transferred this way. Always check the result on the building block.

What does "Ready for dev" mean in Figma? It is a status for components, frames and sections that shows developers a design is ready to be built. Developers with a matching seat are notified when a design is marked as ready again. The design still has to cover states and behavior itself.

Can my team extend the design system later on its own? Yes, if variables, components and classes are built consistently and your team has been trained. The guide Maintaining your Webflow CMS yourself explains which rights editors have in Webflow.

Does this also work with WordPress or TYPO3? The principle does: variables become design tokens, components become blocks or templates. The build differs by system. Ask the developer early about how the components are cut.

How can I tell a handoff went badly? The team changes a color and has to adjust it in many places one by one, spacing differs from page to page, and nobody knows which class is for what.

Sources

• Figma Hilfe: Dev Mode (Figma Help: Dev Mode)
• Figma: Dev Mode
• Figma Hilfe: Variables, Collections und Modes (Figma Help: Variables, Collections and Modes)
• Webflow Hilfe: Variables (Webflow Help: Variables)
• Webflow Hilfe: Components (Webflow Help: Components)
• Webflow: Shared Libraries
• Webflow Hilfe: Figma to Webflow Plugin und App (Webflow Help: Figma to Webflow plugin and app)
• Webflow Updates: Mehrere Variablen-Collections und Modes aus Figma synchronisieren (Webflow Updates: Sync multiple variable collections and modes from Figma)
• Webflow University: Design systems in Webflow
• Finsweet: Client-First Intro
• Webwavers: Prozess (Webwavers: Process)

Author: Edip Kilinc, founder of Webwavers. Last updated on October 31, 2026.

Change log: October 31, 2026, first publication.