“How do Replit & Linear approach designer to developer collaboration? We’ll talk to two high-performing teams about streamlining design-to-code handoff for shipping better products. Learn insights on effective collaboration and ideal workflows with Figma’s Dev Mode, Linear, and Replit.”
A guide to Dev Mode, updated with all new features and available for both the previous and new UI.
“Now in Dev Mode, new statuses like Edited and Completed make it easier to communicate what’s changed and ready — supporting a more fluid development process.”
“When it comes to design handoff, communication is key. As designs change, designers need to be able to iterate while still providing clarity to developers about what’s new and what’s ready to build.”
Code Connect is out of beta: “Today, we’re excited to make Code Connect generally available, alongside improvements like surfacing connected code snippets in the component playground, a new tool to streamline setup, and support for React, React Native, iOS, Android, and more to come.”
“Our new Ready for Dev View cuts down on the noise and helps developers, designers, and other stakeholders know exactly what’s needed to drive projects forward. And with Focus View and the ability to mark designs as dev complete, developers can stay in the flow while staying in sync with their collaborators.” See also a short reelof all the latest updates.
“We are starting to roll out an easier way to mark frames ready for dev. Select a frame to see the </> icon appear at the top right, then click. You’ll see the ready for dev status also reflected in your selection actions.”
Bumble, GitHub, and HP discuss the challenges their design systems teams face in connecting design to code and share first impressions of Code Connect.
Code Connect delivers code from your design system to Dev Mode, helping developers build with consistency and speed. In this session, Jake Albaugh, Figma Developer Advocate, shares an overview of Code Connect and some tips on how to get started.
Jacob Miller, a Product Manager for Design Systems at Figma, gives an overview of everything launched at Framework — Code Connect for developers, typography and gradient variables, and the new Library Analytics API. All of the above is designed to drive design system adoption across the teams because “building a design system is only half the battle — the real challenge is getting it adopted by both designers and developers.” If you missed the event, that’s one summary you need.
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.
The new Dev Mode plugin for instantly generating React components from selected nodes. See how it works and why Vijay made it in the Twitter thread.
Lauren Andres shows how Dev Mode, although built for developers, can also be a game-changer for designers and help drive organizational alignment, consistent product quality, and team efficiency.
An interview with Figma’s CTO Kris Rasmussen about Dev Mode and targeting developers. His take on low-code and no-code tools, like the two featured above: “…we’re actually really supportive of Locofy and also Anima — another example of one of these plugins on the Figma ecosystem. So we’re definitely thinking about their needs as well, as we continue to evolve.“ He added that Figma itself is looking at similar problems, but “at different ends of the spectrum”: “So we’re very much focused on helping to make the actual design process, the act of essentially visualizing what’s in people’s heads and aligning around it, more accessible and easier for the organization to participate in.”
“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!
Figma acquired Dynaboard, a collaborative low-code IDE for developers building full-stack web apps.
Here is what stood out to me in one of the interviews with Dylan Field I shared last week: “Dylan considers using this fee to do more strategic mergers and acquisitions in the future, and has an insightful way of thinking about what kind of products that could be: “Let’s figure out the value chain of what it takes to think about, get buy-in for, design, code, ship, and measure software. How do we complete that value chain?”
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.”
I keep seeing complaints about the removal of code generation from the free view-only mode, and want to point out this section of the “Dev Mode is out of beta: what admins need to know” article. CSS, iOS, and Android codegen is still available but now is in the copy/paste menu when you right-click a layer and choose “Copy as code”. For an overview of the other collaboration features available on the free plan, see Use the right sidebar with view-only access help article.