This playground is an interactive guide to the Dev Mode, made with two audiences in mind. Designers will get to know how to set up files for handoff, connect design and code, and explain Dev Mode to developers, while developers will learn how to track design status and changes, inspect designs, get relevant code snippets, and use plugins to extend and connect workflows.

A new feature page for the Dev Mode, a space in Figma for developers offering features that help translate designs into code faster. This is a great overview to learn about inspecting designs, exporting variables as design tokens, generating production-ready code snippets, integrating Figma into your development workflow, bringing design files into the VS Code, adding structure to the handoff process, and comparing changes. Dev Mode is currently in beta and free to use through 2023.

Kris Rasmussen, CTO of Figma, answers a question of how a design tool can work better for developers by introducing Dev Mode, ​“a new workspace in Figma that’s designed to get developers what they need, when they need it, harnessing the tools they use every day.” Something I didn’t expect: ​“Today, we know that on our paid plans more developers visit Figma than designers.” With this in mind, it’s great to see new plans for developers: ​“Starting in 2024, you’ll have an option to purchase Dev Mode access only for $25 per seat per month on Organization, and $35 per seat per month on Enterprise.”

(If you’re curious about what developers think about Dev Mode, check out comments on Hacker News. While that community tends to be overly negative, it’s interesting to see what kind of problems Figma is addressing with this launch.)

A new plugin from Bravo Studio for setting up your design files to be converted into a native app.

A solid round-up of recommendations from Pedro Morais on organizing Figma mockups and communicating important details to your team.

Developer Advocate Jake and Designer Advocate Lauren have an insightful conversation about strengthening relationships between designers and developers. I love Jake’s point that trust is essential and we don’t need to understand every part of each other’s work to collaborate effectively. (Let’s hope Figma Detached is a new series, as I want more!)

Tru Narla, Software Engineer at Discord, shares some quality tips on using Figma as a developer — Inspect panel, copying code snippets, and exporting full-sized assets.

FTE is an open-source tool for creating an automatic communication channel between design decisions (represented as design tokens) and code. The main objective of the tool is to simplify the standardization and update of these decisions throughout all the digital products sharing a Design System. Its creator Daniel Casado shows how to install, configure, and use the FTE to transform design tokens (either as Figma styles or from Token Studio) into CSS styles.

From the author of the new EightShapes Specs documentation plugin: ​“This post describes how the plugin works, what it outputs, how teams adjust and style based on their preferences, and a bit of the background of how I got here. As you read, keep in mind: the plugin is great for specs but also proved unexpectedly useful for designers to audit in-progress Figma work for quality and completeness and critique their component with teammates.”

Google’s Material Design team introduced Relay, a new process to transform Figma components into Android UI code. Designers can now use the Relay for Figma plugin to document and package UI component designs that can be sent directly to the developer. No more tedious design specs or back and forth to ensure details are right in implemented code.

A new plugin from Figma Developer Advocate Jake Albaugh for inspecting component properties as they would look in code. It currently supports the definition and instance code for Angular, React, Vue, and Web Components.

Mizko with a new video comparing the design hand-off process using Figma vs Zeplin.

Christine Vallaure highlights some of Figma’s features and possibilities to help you build a design that aligns with code as much as needed and improve your teamwork.

I’m not familiar with the Specify app, but this use case is something I’ve been thinking of automating myself. Happy to see that there is an existing solution! As Sun Tzu once said, ​“If you wait by the river long enough, the Figma tools and plugins you need will float by.”

A short overview of the most important parts of Figma for developers.

“We’re excited to talk about yet another awesome new feature: Component properties. Join us as product manager Jacob Miller and designer advocate Chad Bergman share more on how you can reduce variant explosion in your design systems and improve developer handoff.”

Ridd warns that using component properties introduces a new type of responsibility for designers and explores what the most effective handoff deliverable actually looks like.

Four templates that may help ease the pain of the design handoff process — a table of contents, detailed specs, mockups, and flow templates.

New Storybook plugin for Figma that lets you connect variants to stories.

Figma Designer Advocate Luis Ouriach talks to the UX Lead at Wix​.com Domas Markevičius about how they embed a culture of collaboration and communication between designers and developers.