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.
If your team is saying goodbye to Dev Mode this week 😭, here are a few free plugins to help fill in the gap!
— Molly Hellmuth (@molly_hellmuth) February 1, 2024
..at least until you’re ready to upgrade (if you can swing it, I highly recommend)!
👇👇👇
I’ve seen a lot of confusion over the removal of the Inspect panel and the introduction of Dev Mode, so happy to see a detailed walkthrough of the free viewer experience recorded by Tom Lowry. Pretty much everything from the old Inspect panel is still available for free, and Dev Mode builds on top of that foundation. While some will inevitably label Dev Mode as a “money grab”, I won’t be surprised if many teams will save money by converting full Design seats to standalone Dev Mode seats.
I recorded a quick overview of the free/viewer experience in @figma since I've seen a lot of questions from the community about what you can/can't do. I hope this helps!
— Tom Lowry (@negativespaceca) January 31, 2024
(I am a bit sick, please excuse the nasally voice 😅) pic.twitter.com/Dx04WVPH4n
Always love deep dives from people behind the features! Product Designer Oscar Nilsson explains how Annotations came to be — for both design and development. On why annotations are in the Dev Mode: “We wanted one dedicated space to curate a spec for developers and call out necessary details or areas of confusion, so we ultimately decided that designers should go to Dev Mode to annotate. In doing so, designers would see exactly what their developer counterpart sees while annotating, and they could share a link to Dev Mode when they’re done. Our goal is not for Dev Mode to silo developers once a designer’s work is done — but to engage the broader team in the product development process, with annotations being a first, crucial step.”
On positioning in context: “Testing and iterating on our positioning logic became an adventure on its own. We explored a direction in which annotations hide until you click on a corresponding frame. That felt right in theory, but once we actually tried it, we realized that it was still easy to miss out on important annotations if you were just looking at a frame without actively selecting it. We then iterated on different versions of automatically expanding annotations based on zoom level and position, and it immediately felt more intuitive.”
Dev Mode moved out of beta last week, and in this article, the Figma team talks about their product philosophy, how they’re improving the experience for developers and designers, and what’s coming next. There are new features that bring design and code closer together, including annotations in Dev Mode, along with improvements to compare changes, plugins, and the Figma for VS Code extension.
How it started: “We needed a team that lived and breathed development like we did design, so in 2021, we acquired Visly — a team of eight designers and engineers who built a tool for developing UI components in React. […] The Visly team brought with them years of hands-on experience and months of research on developer tooling — in other words, they had the developer “intuition” we were looking for.”
How it’s going: “Dev Mode aims to make you more productive by connecting the tools you use and your code components to the design file. There’s no one way to work, which is why we built Dev Mode to adapt to a variety of tools, processes, and workflows. Whether you’re looking to link design and code with Storybook, ensure accessibility with Stark, or streamline project management with Jira, Linear, and GitHub, plugins allow you to extend Figma’s functionality to flex however your team works.”
Loved Tom Lowry’s thoughts on designer-developer collaboration in this thread. I think most teams agree that the traditional process of throwing designs over the wall to engineers is broken and we need better tools, but I’m also cautiously skeptical of designers working directly with the source within the design tools. While this is already possible for marketing websites (hello, Webflow and Framer!), products and design systems bring a whole new level of complexity and challenges. This iteration of the Dev Mode seems like a first step in the right direction to me, but the road ahead is lengthy but bright.
Totally agree that the traditional handover “throw stuff over the wall” to eng is broken—it's not a good way to work. I think the future is both disciplines investing in understanding one another’s craft—and knowing each discipline has different concerns and ways of working.
— Tom Lowry (@negativespaceca) January 25, 2024
An interesting take from Jacob, a co-founder of Pierre — one of the dev tools I’m most curious about. “Figma is where I go to approximate a finished product. World-class Product teams collaborate here on rough sketches with components built to track their perfectly engineered counterparts. […] Instead would love to see Figma start building their creative suite. Specifically, imagine a Figma engineering tool? Built from the ground up? With the same Figma principles? And built to be interoperable with their design tool…”
Imo the source of truth for the visuals of your app isn’t design files anymore. It isn’t in figma. It’s code. Specifically design systems.
— Jacob (@fat) January 25, 2024
The best product teams in the world aren’t sweating pixel perfect mocks or handoffs. They’re staffing up and wrangling design systems. https://t.co/3CWxVpaXrh
After being introduced at Config 2023 last June, Dev Mode will move out of free beta on Wednesday, January 31. Last week, Figma showed improvements and features they’ve been wrapping up before the release. Annotations are a big one — “designers can share additional context, specs, and measurements that are connected directly to designs, and developers can easily see designers’ notes as they work, ensuring that they don’t miss any crucial callouts during handoff.” Teams that did this manually will save a ton of time and effort. (As the top comment on Reddit suggests, flow arrows are a missing piece for annotations and something I’d love to see brought from FigJam.)
The compare changes modal was redesigned to show diffs both visually and in code. This is one of my favorite features, and I wish it wasn’t limited to the Dev Mode. I duplicate frames to riff on ideas all the time, and the compare view is an incredible tool for reconciling the differences between the two versions.
Enterprise customers can set plugins to run by default in Dev Mode for all files in their organization — “for example, you may want to check that you’re using a design system correctly, show links to design systems documentation, include information about internal APIs to use, or confirm whether a design uses components that already exist in your codebase.” Finally, the Figma for VS Code extension was redesigned to run plugins and improve the navigation and discoverability of design files. Instead of having to pan around a large canvas, you can easily select from a grid of frames and see frames individually with a focused view.
Common keyboard shortcuts for developers to perform actions like zooming, dragging the canvas around, copying the link to a specific screen, selecting the parent of your selection, exporting selection, and toggling a layout grid.
A new code plugin from Jake, Figma Developer Advocate: “This plugin allows you to write and generate code snippets for Figma nodes, which are rendered in the Inspect Panel in Dev Mode. You can make these code snippets dynamic, by referring to parameters provided by the plugin. Doing this for your component library will bring accurate code snippets to any project that incorporates your design system.”
The Dev Mode team shares their early pivot away from a codegen-first approach, the acquisition of Visly that accelerated their efforts, and what it means to break down the handoff wall.
“Join this learning session where we will share tips and address questions around how to onboard your engineers to Dev Mode. We’ll cover how to adjust your workflows to get the most of our new features, setting up your files and design system, and onboarding your developers.”
Jake Albaugh and Emil Sjölander discuss using AI-based code generation (codegen) tools for augmenting your design to development process, not automating it. “Codegen isn’t just an automated, hands-off replacement for translating design to code; it’s best as an augmentation for you to more quickly understand design changes, and to keep your team in sync.”
Molly with step-by-step instructions for using rem units in your text properties. The developers on your team will be grateful for using the same units as they do when it comes to the handoff time!
💡 Figma tip: Switch between PIXEL and REM units in dev mode!
— Molly Hellmuth (@molly_hellmuth) September 8, 2023
Why does it matter?
✅ Helps you understand scale and sizes
✅ Smoothens collab with your dev team
✅ Brings flexibility & precision to your design workflow
Keep reading for step-by-step instructions.. pic.twitter.com/d4QDHUDctb
In the last 2 months Figma quietly shipped more than 200 updates to the Dev Mode workspace 🤯 This article goes through the most important 35 changes and improvements.
Molly shares her 3 favorite tips from the Config talk “Designer and developer workflows unlocked using Dev Mode” — using “Compare changes” (my favorite as well, and the first thing I showed my team!), testing components in the Playground, and switching between the design and Dev Mode by pressing the Shift‑D shortcut.
💡 Start using Figma's new dev mode with these 3 tips!
— Molly Hellmuth (@molly_hellmuth) July 28, 2023
Config's deep dive on dev mode with @Avantika789, @laurenbandres, @jennylea_, and Jake Albaugh is CHALK FULL of amazing tips!
Keep reading for my favorite 3.. pic.twitter.com/xf8dM6nYfb
“In this livestream, Jake, Lauren, and Emil dive into Dev Mode, the newest space in Figma built for developers.”
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.”
Today is a big day! Dev Mode launches in @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. 🧵 pic.twitter.com/SLfxT0viyi
— Joel Miller (@joeltalksdesign) June 21, 2023