This result is based on an exported PNG, so plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.

Jake Albaugh and Emil Sjölander discuss using AI-based code generation (codegen) tools for augmenting your design to development process, not automating it. ​“Codegen isn’t just an automated, hands-off replacement for translating design to code; it’s best as an augmentation for you to more quickly understand design changes, and to keep your team in sync.”

Export icons from Figma straight to React, Vue, or Svelte components.

Something new is coming up in October 👀 The landing page is a smart way to give a peek! ​“Builder​.io is the only headless CMS that gives developers, marketers, and product managers the freedom they need to ship fast, flexible, multi-channel experiences without overwhelming your backlog.”

Rad product and home page! ​“ShaderGradient is a design tool to create beautiful moving gradients. Make stunning visuals by adding natural movements and effects to the gradient. It’s available on your favorite tools, like Framer, Figma, and React.”

This is a short but comprehensive checklist. Worth reviewing before sharing your next file!

The introduction of wide gamut Display P3 colors to the design tools ​“broke” the familiar hex notation that all of them have been relying on. The transition to modern notations will be painful and take time. I share some context in this thread, but the main takeaway is to NOT use the #RRGGBB values for hand-off or external tools when working with P3 colors.

Andrey Sitnik (author of PostCSS and Autoprefixer, used on pretty much every website) goes a little deeper into platform-independent (CSS) vs. platform-specific (Figma, Photoshop) implementation of P3. He also added ​“Figma P3 hex” as one of the accepted formats to OkLCH Color Picker, which makes using Figma values in OkLCH much easier.

During Maker Week, Rogie built a handy plugin for attaching files to the Figma document for hand-off. Great tool for sharing fonts, high-resolution pictures, or other assets with developers.

Ridd shares a free annotation components library to help designers communicate more effectively and nail down the handoff process. Comes with a video lesson on organizing Figma files using the helpers library.

Christine Vallaure wrote about one of the most under-the-radar new features of the Dev Mode — units conversion. Now, you can design with pixels and then translate them to rem or other relative units in code. (Thanks for sharing the friend link with Figmalion, Christine!)

Fantastic post by Developer Advocate Jake Albaugh on how component properties can be translated and aligned between design files and coding frameworks to help designers and developers work better together. ​“Implementing components as a designer in Figma differs from implementing as a developer in a codebase. When you optimize for the developer or designer experience with a component, it is tailor-fit for that specific purpose — even if it shares a name with a component in another environment.”

Codejet converts designs to production-ready code. Create a project in Figma, and Codejet will convert it into React and TypeScript code. Was voted Product Hunt’s Product of the Day on July 13th.

Linear wins the most over-the-top plugin page award. The new plugin enables designers and engineers to collaborate seamlessly without the need to switch tools or context by creating and linking to issues directly from Figma, navigating design tasks in context, and collaborating across teams and tools.

An in-depth session with practical perspectives on how designers and developers can leverage brand new Figma capabilities to unlock tighter collaboration with one another, prepared by four Figmates — Developer Advocate Jake Albaugh, Group Product Manager Avantika Gomes, Designer Advocate Lauren Andres, and Software Engineer Jenny Lea.

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.