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.](https://cdn.sanity.io/images/599r6htc/regionalized/6fc5dbcdb91b4c56b1a1ffb2af7b7e0d5f36d09d-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Trusted by teams at
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.](https://cdn.sanity.io/images/599r6htc/regionalized/ec829ed4e31550b087b55e0869f75ae382c9bcd6-1560x1249.png?rect=1,0,1559,1249&w=780&h=625&q=75&fit=max&auto=format)
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.](https://cdn.sanity.io/images/599r6htc/regionalized/a2106da9cb52e0d9da9c348f4baee3926503d293-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
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 Mode](https://cdn.sanity.io/images/599r6htc/regionalized/7ace83429446da553d16eddb3d6900eb142bb205-1080x864.png?w=780&h=624&q=75&fit=max&auto=format)
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.
![A developer’s cursor near color styles for an e-commerce website design system.](https://cdn.sanity.io/images/599r6htc/regionalized/87a21162ebf76abd4de9c6f624aad67590bca9d7-1080x864.png?w=540&h=432&q=75&fit=max&auto=format)
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.
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.
![A project workspace in Visual Studio Code.](https://cdn.sanity.io/images/599r6htc/regionalized/dd9455290499b002fbd265cad9fd0158ba8bb319-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
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.
Previously, developers had to inspect each element. Now, we can auto-generate code from the designs.
Saurabh Soni, Head of Design at Razorpay
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.](https://cdn.sanity.io/images/599r6htc/regionalized/8244c56cf528cb567ce0b673c04470084968ea11-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Dive into Dev Mode
Learn more about Dev Mode and how it facilitates design to developer handoff.
![A developer cursor selecting a green circle and viewing hex codes for brand colors in a design system library.](https://cdn.sanity.io/images/599r6htc/regionalized/5552ea22fc3ac3b07f7dbac6c96f6fe5b53c6d8c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Get handoff best practices
Read a collection of best practices from the experts.
![The Figma logo in the process of being selected by a green cursor.](https://cdn.sanity.io/images/599r6htc/regionalized/3fd439980ffa346a4ffd308a95d0c6c699ed6f0b-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
How Figma uses Dev Mode
Learn how the Figma engineering and design teams use Dev Mode for handoff.