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.

A reminder that Framework is happening on Tuesday, April 16th. Figma published the schedule for this 3‑hour-long event, which will be a great fit for anyone interested in variables, design systems, and design-to-code handoff.

Christine makes a point that we can move beyond the rigid structure of fixed responsive breakpoints with modern CSS layouts, crafting flexible and dynamic designs that seamlessly adjust to different screen sizes. In this article, she covers responsive column-based design vs. modern CSS layout, CSS Flexbox and Grids, and questions if we still need breakpoints.

This plugin re-imagines local variables export, offering a beautifully formatted JSON output. Supports selecting a color format (hex, RGB, HSL, or CSS-friendly formats), including an alpha channel, flexible collection selection, intelligent grouping, customizable naming convention, and more. See a quick demo on Twitter.

“Swizzle is a multimodal, low-code tool for making web apps. Use natural language, visual aids, or just code to build faster than ever before. Deploy to GCP in one click.” Won 2nd Product of the Day at Product Hunt.

“Locofy Lightning converts Figma designs to frontend code in 1‑click, powered by LocoAI’s Large Design Models (LDMs). Get responsive, interactive designs & reusable code components with better class names.” Won 1st Product of the Day at Product Hunt!

“Effective product development hinges on a well-defined process and seamless team communication. However, implementing these concepts can be more challenging in practice.” AMA discussion hosted by the team of advocates — Lauren Andres, Akbar Mizra, Mallory Dean, and Anthony DiSpezio.

Replit Vice President of Marketing and Design David Hoang talks about how AI is reshaping the future of product design and development, and the role it’s playing in the company’s team and products. On synergy between design, engineering, and AI: ​“Whether you currently work more in engineering or design, AI offers augmentation for you to do both. Engineering and design are on a course to become one tightly woven discipline.”

On hiring with regards to their Artificial Developer Intelligence (ADI) strategy: ​“At Replit, we’ve always leaned towards hiring multidisciplinary designers who understand the technical depth it takes to create software and bring it into the world. Each designer has the output of three to five designers that you’d ordinarily work with. They code, prototype, review pull requests, do unit testing, facilitate research sessions, and run workshops, too.”

More Figma-to-code solutions: ​“Trace helps you convert your Figma designs to live SwiftUI prototypes within minutes. You can also preview, view code, edit, export, etc. on the fly. Trace uses AI to write SwiftUI code and compile the entire project within minutes.”

Replit launched an experimental Figma plugin that converts designs into runnable React code. ​“Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.” Read more about this experiment in their blog post.