Mal and Akbar discuss ways to bridge the gap between designers and developers.

A new plugin from Meng To turns Figma designs into production-level code with the power of Claude AI and GPT-4o. I mentioned it in the last newsletter, and it looks very promising so far. The plugin is free, but you’ll need to bring your own API keys.

Watch the video where Meng explains his Figma to SwiftUI code workflow.

v0 from Vercel is a ​“generative chat interface with in-depth knowledge on modern web technologies. It can provide technical guidance while building on the web, generate UI with client-side functionality, write and execute code in JavaScript and Python, build diagrams explaining complex programming topics, and more”. v0 supported sketches and screenshots as a starting point for generation for quite some time, but now paid users can also import designs from Figma.

Erez Reznikov argues that in the next generation of design tools, designing and building digital products will have to abide by the constraints of the platform in which they are coded and tested. ​“The right tool will have to be built for a collaboration. A true collaboration, not a handoff. With developers, because complex products (which will be the vast majority) need them. There’s no avoiding that with dreams of magic AI fairy dust and no-code, no-dev narrow builders, empowering as they may seem.”

“Code Connect Version 1.2 launched this week and includes support for design systems written in Angular, Vue, and HTML, an improved getting started wizard for the command line tool, and expanded configuration options for React icons.”

I came across this wildly popular plugin as I dabbled into Tailwind CSS this week. Seeing a free (supported by Creator Fund) open-source plugin for generating code in a few common formats (HTML, JSX, Tailwind, Flutter, and SwiftUI) is refreshing.

Tailwind Sync is a free plugin for Figma that synchronizes variables to Tailwind code, enhancing the design-to-dev handoff with speed, consistency, and scalability.

Describing design details with plain text is a nice way to communicate the intent to developers.

Zigma connects your design system to the production code, directly syncing design variables from Figma into your GitHub projects. Made by the NextUI team.

Ana Boyer on creating a component API — a process of defining how you will approach constructing and naming your components across all of your libraries and documentation that will be consumed by your design and engineering teams.

Ridd noticed that designers who can code spend more time sketching their ideas and less time in Figma. This approach isn’t common because it still takes too long to code designs, but AI will change that. What if instead of generating polished mockups from text prompts we used AI to turn wireframes into frontend code, applied our design system, and tweaked the visual direction based on the provided mood board? (This is just one of the ideas explored in the new section of Dive.) 

Not a new article, but a good one by Josh Comeau. ​“Scope cuts are generally decided by product managers, but they don’t make that decision alone. It often starts with a conversation between the designer and the developer. If these two people trust each other, the process is collaborative, cordial, and productive. They figure out the best solution under the current constraints, taking development time and user experience into account, and then pitch it to the PM. If the PM trusts the designer and developer, and their proposed solution works from a product perspective, it’s typically approved without any fuss.”

Elliot Tu from Zeplin interviewed me for their Design-to-Dev community interview series last week. We chatted about working on Figmalion, my new role, collaborating with developers, the future of design-to-dev tools, and how I use AI in my work.

Even while the new Dev Mode replaced the old Inspect panel, all information is still available regardless of your plan, seat type, or file access. This tutorial covers inspecting designs in Figma, depending on your plan and access level.

Developer Advocate Jake explains some of the reasons why product experience can be misaligned between design and development. He points out that the source of truth can vary depending on the scenario, from the design system to the code in production to the design files. To find the truth, we have to ask a few questions: ​“What do we want?”, ​“What do we have?” and ​“What is the difference?”

“After finalizing and polishing their work in Figma, designers often expect developers to magically make sense of it. However, as that’s not usually the case, things can end up looking pretty grim. What’s going wrong?” The authors blame the outdated handoff mindset and suggest the four steps that can turn the handoff process from a potential headache into a smooth collaboration.

Developer Advocate Jake shows Jason Lengstorf how to bring your code into Figma with Code Connect.

“Code Connect is a tool for design systems and engineering teams to bring component code into Dev Mode. When inspecting a component with connected code snippets, developers will see design system code from their libraries instead of auto-generated code.” Currently in beta. Available on Enterprise or Organization plans only.

Tokenbase is a free tool for creating, managing, and distributing design tokens. Easily create your design systems and export tokens to code in a few clicks. It’s currently in beta, and I wonder if importing from Figma is on the roadmap?

Jason Lengstorf from Learn with Jason talks to Figma Developer Advocate Jake Albaugh about how Dev Mode improves the design handoff and how the Figma plugins API enables more powerful customization.