Skip to main content

Figma for DESIGN HANDOFF

Simplify design handoff

Figma enables a design handoff experience that keeps designers and developers on the same page. Communicate better, deliver consistency, and build great products.

Shapes and symbols representing Figma’s Dev Mode, including the Dev Mode toggle, a CSS box model, cursor chat, height dimensions, and a bounding box.Shapes and symbols representing Figma’s Dev Mode, including the Dev Mode toggle, a CSS box model, cursor chat, height dimensions, and a bounding box.

Trusted by teams at

Puma logopatagonia logogithub logoStripe logoThe New York Times logoNetflix logoSpotify logo

Bridge the gap between design and development

Improve communication and collaboration between designers and developers, so that what gets designed is what gets built.

Two teammate cursors using annotations to document design notes for engineering on an e-commerce product page.Two teammate cursors using annotations to document design notes for engineering on an e-commerce product page.

Minimize misinterpretations

Easily annotate design files with additional information and measurements—increasing clarity and speeding up development.

A developer comparing the current and previous versions of an “Add to Basket” button component on an e-commerce product landing page.A developer comparing the current and previous versions of an “Add to Basket” button component on an e-commerce product landing page.

Reduce back-and-forth

Developers can easily compare a frame to its previous version to see exactly what changed.

A screen shows sections ready for development in Dev ModeA screen shows sections ready for development in Dev Mode

Communicate what’s ready for dev

Use section statuses to clearly denote which screens are ready for your dev partners to work on.

Explore features built for better design handoff

A view for developers

Invite developers to collaborate from the start and to weigh in on design decisions. Offer them a dedicated view—Dev Mode—to inspect, compare, and implement designs.

Learn more about Dev Mode

A developer’s cursor near color styles for an e-commerce website design system.A developer’s cursor near color styles for an e-commerce website design system.

Align design systems to code

Easily create, maintain, and share components and styles. Use the same language across design files and code with tokens —and view other developer resources right in your design file.

Learn more about design systems

Inspect and grab code snippets

Get details like measurements, specs, and styles. Generate production-ready CSS, iOS, or Android code snippets from your design. Or, export assets with a single click.

Learn more

A project workspace in Visual Studio Code.A project workspace in Visual Studio Code.

VS Code integration

Our extension for VS Code brings the design file into the text editor. Inspect Figma files, collaborate with designers, receive notifications, and get code suggestions—all from VS Code.

Set up integration

Previously, developers had to inspect each element. Now, we can auto-generate code from the designs.

Saurabh Soni, Head of Design at Razorpay

razorpay logo
Read the story

Learn more about design handoff best practices

A coral background with green, yellow, and black overlapping, development-related shapes, such as the Dev Mode toggle.A coral background with green, yellow, and black overlapping, development-related shapes, such as the Dev Mode toggle.

Dive into Dev Mode

Learn more about Dev Mode and how it facilitates design to developer handoff.

Explore Dev Mode

A developer cursor selecting a green circle and viewing hex codes for brand colors in a design system library.A developer cursor selecting a green circle and viewing hex codes for brand colors in a design system library.

Get handoff best practices

Read a collection of best practices from the experts.

Get the guide

The Figma logo in the process of being selected by a green cursor.The Figma logo in the process of being selected by a green cursor.

How Figma uses Dev Mode

Learn how the Figma engineering and design teams use Dev Mode for handoff.

Read the article

FAQs