Emily Brody, Product Marketing Manager at Figma, writes about the go-to-market strategy for the Dev Mode and how the team prepared for the launch and triaged bugs, requests, and feedback during the first two weeks.

Christine Vallaure wrote about one of the most under-the-radar new features of the Dev Mode — units conversion. Now, you can design with pixels and then translate them to rem or other relative units in code. (Thanks for sharing the friend link with Figmalion, Christine!)

CSS Evangelist Kevin Powell made a video walkthrough of the new Dev Mode specifically for other developers. Share it with your team!

An insightful thread about Dev Mode from Joel Miller, a Product Designer on Dev Tools at Figma: ​“It’s the culmination of an ~18-month journey, filled with countless riffs, prototypes, reviews, PRDs, and PM mocks. Here’s my story of how we got here.”

Linear wins the most over-the-top plugin page award. The new plugin enables designers and engineers to collaborate seamlessly without the need to switch tools or context by creating and linking to issues directly from Figma, navigating design tasks in context, and collaborating across teams and tools.

If you’re ready to dive in, this help article is a good introduction to starting using Dev Mode.

“The Figma for VS Code extension lets you navigate and inspect design files, collaborate with designers, track changes, and speed up design implementation — all without leaving your development environment.”

An in-depth session with practical perspectives on how designers and developers can leverage brand new Figma capabilities to unlock tighter collaboration with one another, prepared by four Figmates — Developer Advocate Jake Albaugh, Group Product Manager Avantika Gomes, Designer Advocate Lauren Andres, and Software Engineer Jenny Lea.

This playground is an interactive guide to the Dev Mode, made with two audiences in mind. Designers will get to know how to set up files for handoff, connect design and code, and explain Dev Mode to developers, while developers will learn how to track design status and changes, inspect designs, get relevant code snippets, and use plugins to extend and connect workflows.

Kris Rasmussen, CTO of Figma, answers a question of how a design tool can work better for developers by introducing Dev Mode, ​“a new workspace in Figma that’s designed to get developers what they need, when they need it, harnessing the tools they use every day.” Something I didn’t expect: ​“Today, we know that on our paid plans more developers visit Figma than designers.” With this in mind, it’s great to see new plans for developers: ​“Starting in 2024, you’ll have an option to purchase Dev Mode access only for $25 per seat per month on Organization, and $35 per seat per month on Enterprise.”

(If you’re curious about what developers think about Dev Mode, check out comments on Hacker News. While that community tends to be overly negative, it’s interesting to see what kind of problems Figma is addressing with this launch.)

A new feature page for the Dev Mode, a space in Figma for developers offering features that help translate designs into code faster. This is a great overview to learn about inspecting designs, exporting variables as design tokens, generating production-ready code snippets, integrating Figma into your development workflow, bringing design files into the VS Code, adding structure to the handoff process, and comparing changes. Dev Mode is currently in beta and free to use through 2023.

Dylan’s recap of all the updates from the keynote, in a brand-new blog. ​“Our vision is to build a new kind of design tool — one that is designed for the entire product development team. Today’s launches reimagine how design and development come together in Figma. I’m excited to introduce three ways we’re doing this: making developers feel at home in Figma with Dev Mode, connecting design to the language of code with variables, and putting a step in between a 2D design and a shipped product with advanced prototyping.”

If you have time for only one thing this week, this should be it. First, Figma CEO Dylan Field introduces new features — variables, auto layout updates, and advanced prototyping. Then, CTO Kris Rasmussen talks about rethinking product building from the ground up and how the new Dev Mode is bringing design and engineering closer together. In the end, Dylan talks about file browser refresh, font previews, and what AI could look like in Figma — wrapping things up by announcing the acquisition of Diagram.

I watched every Config keynote over the years, and this year’s announcements were the most anticipated and ambitious ever. It’s incredible to see how Figma is growing in depth and breadth at the same time, now providing incredibly advanced tools while covering an entire product-building process from brainstorming to design to development. Exciting time to be a maker.

Mal shows hot updates to the new FigJam app for the iPad! It got the new native toolbar with a fresh look and feel. The app was optimized for Apple Pencil, and now it supports a responsive experience for multitasking.

Latest diagramming improvements in FigJam:

• Choose from over 10 new drag-and-drop shapes including star, plus, and hexagon
• Straight line connectors now anchor to the center of objects for more visually streamlined flows
• Swap between shapes quickly as you build diagrams

“Grab teammates’ attention in stickies or any text in your FigJam files by typing @ followed by their name.”

Charli Marie with ten tips on how you can get the most out of FigJam.

Mal with a quick demo of Shaper, Magic Marker, and A Selector plugins.

After adding screen readers support to Figma prototypes last year, now it’s introduced to FigJam. With this update, screen reader or keyboard users can move focus around the canvas, as well as between different menus and screens, to create, edit, and read out content. I love how these improvements make FigJam better for everyone: ​“Users can now navigate FigJam files using the Tab key to jump between objects on the canvas, as well as between text nodes for efficient editing. Hold Shift-Tab to tab in reverse.”

The accessibility team also shared a few tips on making FigJam files more accessible: provide ​“alt” text to images, use Sections to group content, numbered lists to describe order, and underscores to communicate fill-in-the-blanks.

A big update to FigJam — custom templates for your team, stamp your teammates’ faces to files and tag them with @mentions, emoji picker opens by typing a colon (“:”), custom color palettes (coming soon), UserTesting and Great Question integrations, Productboard widget, and new tunes! Also, explore new world-class teams’ templates and see a thread by Cai on the Figma design team’s rituals and templates they use in daily work.