“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.

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.

In case you said goodbye to Dev Mode last week, Molly Hellmuth recommends a few plugins to help fill in the gap — Annotate It, Print Variables, Frame History, EightShapes Specs, and Handoff Notes.