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.

Designer Advocate Lauren Andres shares tips on how to streamline handoff when it’s a constant stream of WIP designs, communication, and collaboration. Her advice involves using annotations in Dev Mode, adopting a shared language, organizing your files with sections and ​“Ready for dev” statuses, archiving old designs, and leaning on components.

Dualite converts Figma designs and prototypes to React and HTML/CSS. ​“Create reusable code components with semantic naming from Figma variants in a single-click. Use tagging for turning static layers to external links, input fields, buttons and embeds.”

Erez Reznikov shows some examples of the divergence between how code and visual design tools treat interactive elements and components in general, then suggests an alternative to the handoff process. ​“Construct tools and processes for designers and developers that will make it much harder to not be on the same page. Suppose a design tool would be made out of real elements, with an already existing, verified structure, that is backed by code beneath it all. You mainly see web builders do it today, like Webflow and Framer. When you use an element like a checkbox in these apps, it’s a real, working checkbox.”

I’ve seen Penpot 2.0 being brought up in some Dev Mode conversations, and while their support for CSS Grid Layouts is something I’d love to see in Figma, I do not think one-off copy-pasting HTML/CSS snippets is the way to go. It’s a ​“no man’s land” between no-code solutions and framework-specific codegen plugins that could be customized for the organization’s needs and connected directly to the components in code. (Thanks Christine Vallaure for sharing the video!)