“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.
“Create a FigJam board during or outside of a Google Meet call to jam remotely or in person.”
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.
A short explainer on navigating a FigJam file — panning and zooming, keyboard shortcuts, and navigation hacks. I use FigJam for presentations, and navigating sections with a Tab or Shift-Tab keys is my favorite!
Now you can use the power of AI to generate and expand mindmaps and create visual timelines in FigJam. See examples in the gallery of ready-made FigJam AI prompts.
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.
Fast Company calls Figma one of the “most innovative companies in applied AI” for boosting creativity and digital collaboration with the OpenAI-powered Jambot plugin for FigJam. Wild to think that it was born out of an internal two-day AI hackathon just eight months ago. (For additional context, see the above interview with Nilay Patel.)
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!
Jenny Wen is the founding designer at FigJam and the person who brought it to market. In this interview with Ridd, she shares invaluable insights about FigJam’s product strategy, adding delight to software, and attacking ambiguity early in the process.