If you’re a developer that’s frustrated always having to meet designers in their workspace, keep reading because you’re not alone. Phase One Ventures visited San Francisco for Figma’s 2023 Conference. Alongside the other 8500 guests that attended, we heard firsthand about their latest update, Dev Mode, and witnessed a live demonstration of it. Here’s the recap of all the new features. 

Figma was originally a design tool created to optimize artists’ experience. The more popular the workspace became, the more its user base broadened. Figma reports that on their paid plans, developers visit it more than actual designers. In order to create the best collaborative tool for product development, they needed to understand the various pain points and wants of this different audience.

“So far we built Figma for the design end of the spectrum, but we think it’s time to focus on the development end as well because 30% of our weekly active users at Figma today are already developers. That’s the same percent as designers and yet we haven’t really optimized for their needs.” - Kris Rasmussen

Jake Albaugh, Lauren Andres, Avantika Gomes, and Jenny Lea dive into the creation of Dev Mode in their session “Designer and Developer Workflows Unlocked Using Dev Mode”. Read on to hear about their goals for Dev Mode, how and why it was created, and the unique features just released this week.

Meeting Devs Where They’re At

Goal #1: Provide clarity on what is important

The process of design to build is never really a linear process which is why the first challenge Figma tackled in their new Dev Mode is reducing uncertainty. Landing in a free form design file can be unclear, confusing, and not straightforward. Dev Mode solves this issue by creating a new workspace completed with sections. Sections organize frames which are the screens designers create. These sections improve in-file navigability while tracking the progress status. These will tell developers what is ready for work or not. 

Another feature that instantly provides clarity are comparison changes. Dev Mode tells you when the last edits to a screen was made as well as what those changes were. “Compare Changes” in your right hand control panel allows devs to compare those edits side by side or overlaid. Multiple versions of files can be accessed and named in this feature as well.

‍

Goal #2: Bring design and code closer together

In an effort to reduce friction in the hand-off process, Figma has released new features such as better selection and icon design heuristics, redlines on hover, inferred autolayout, variables, and component playground. These features will give the developers a wireframe that minimizes the time spent on aligning the design with the implementation.

Developers will never again relate to the struggle of trying to select an icon thanks to icon design heuristics. Redlines help lay out the spacing, distance, and order. Redlines have also been automated so whenever you hover over a component, it is easy to see, define, and adjust in the control panel.

Figma has brought to Dev Mode the long awaited tokens in the new form of variables. Variables are packed bits of UI info that describe various elements in design. Now devs can reference these and also add links to objects. These variables will make prototyping in real time smoother and quicker. According to Figma, “these variables are adaptable for many use cases:

• Color, number, text, and boolean variables that store reusable values and can be applied to designs for theming and tokens

• Aliasing and scoping support to contextualize variables for the whole team

• Variable modes with different values (e.g. light and dark) that can be toggled to change between design themes

• Plugin and REST API support for variables to help you scale creation and management”.

‍

Goal #3: Allow customization for every developer

Dev Mode improves the overall baseline of inspecting a file but each dev uses different tools, frameworks, and conventions based on each project. This means that each dev has different expectations and priorities. Figma solves this issue by making Dev Mode customizable for each devs’ preferences and needs.

Dev Mode is complete with plugins like Jira, Linear, and GitHub making you more productive and your work efficient. Coming in a few weeks is also codegen plugins like Anima, AWS Amplify Studio, and Google Relay. 

Devs can switch between languages for their needs that show code instead of styles and properties. You can use APIs, request external information, and use AI too.

Goal #4: Meet users where they are

Based on our experience, we understand that Figma cares about giving the devs exactly what they need. 

Another extension you can add into your workflow is VS Code extension to stay updated on notifications while continuing to edit and review designs all in the same space. This plugin with over 40,000 downloads from the time this article was written, provides live design files, real-time collaboration, code suggestions from design layers, and immediate Figma asset downloads for local development. VS Code will also autocomplete your code based on the inspected design relieving some of the burden from your shoulders. 

Parting Thoughts

The Figma 2023 Conference unveiled Dev Mode, presenting exciting opportunities for Phase One Ventures' developers. With enhanced clarity, design-code integration, and customization, Dev Mode allows Phase One Ventures' team to work more efficiently and creatively. As Figma expands its focus to developers, we eagerly anticipate harnessing these innovations to drive our continued growth and success. Our devs tested out the new workspace and are becoming increasingly excited for the 2024 launch. It’s about time we showed our developers some love.