We Tested Figma’s Dev Mode And This Is How It Went

Two weeks ago, at Config 2023, Figma announced significant changes for the product development industry, including updates like auto layout wrapping, advanced prototyping, variables, and the much-anticipated dev mode. We’ve been on the Figma hype train for a while now, actively using it within our team, so we decided to give the new updates a go right away. To test the Figma updates, especially the dev mode, from both designer’s and developer’s perspectives, our lead designer and front-end developer hopped on designing and building a simple page. And here’s how it went for them.

Figma Updates In The Designer Experience

Variables

Before I dive into the nitty-gritty of my experience with the new features, just a general note: I'm genuinely impressed with how Figma's digital product design strategy operates and prioritizes relevant solutions. Ok, let’s go.

For the test run, I took a simple contact page for our website with fillable forms and a simple CTA button. Plus, a section for the contact card with an image and contact details for one of our business developers. And I did both light and dark modes for the page.

Personally, I was most enamoured by the variables feature. Enabling the variable options across the platform allows us to rapidly build tokens and apply them to designs, which will significantly increase our workforce capacity and process efficiency in general.

I built the variables for colors and spacing one by one and applied them to the designs. There is an option to group and organize the colors (or any other variables) under a particular semantic/another group.

I was able to create the general spacing options as numbers in the list and then apply them to the particular value (e.g. spacing - L).

The output was literally amazing - with one set of functions, I created the value that could be applied/changed across the entire design. And that was for a tiny contact page.

Putting this feature into a large project’s perspective, aka the workload we would usually face in the agency, significantly reduces the time and effort spent on a given project. This time-saving aspect is particularly valuable when dealing with a substantial number of objects.

What’s great is that in the near future, as it’s announced, we should expect to discover other types of variables (image, text) supporting some additional properties like stroke, opacity, etc. This development journey has the potential to generate industry unicorns and, looking ahead 4-5 years might pave the way for a new design paradigm.

Dev Mode

Maintaining consistency across tools is critical for a smooth delivery process when working on large projects. And one of the biggest challenges and pain points is the need to frequently switch between different screens and then navigate back, often requiring meticulous mapping of your progress (even within Figma pages) and so on.

Such efforts often demand excessive attention, significantly impacting overall performance and leaving a wider space for error. You’ll be surprised how much time is wasted in-between pages and screens, not to mention the ruining of the attention flow.

With Figma's latest updates, we can see that they’re on the path of tackling workflow synchronization and consistency, which greatly benefits the DesignOps process. Integrations with tools like Jira, Github, etc. and the status changing and playground options are some features that hint at a transformative change in the design and development workflow, enabling enhanced synergy and a more efficient product development process.

What I would love to see in the future is a similar integration with project management tools within Design mode as well. Currently, I manually copy and paste task lists from project management sources and follow checkpoints. And since our entire design team heavily relies on Jira, I assume this use case applies to other design teams whose workflow is equally intertwined with a project management tool. I was happy to discover the design status concept “ready for development”, so here’s to hoping we get to integrate the actual place of work with the source where we track those tasks and progress.

To sum up, with the introduction of variables and dev mode, the gap between design and front-end development is gradually shrinking and sharing changes and updates with developers is becoming more and more seamless and straightforward, which will only move the overall product development process forward.

Figma Updates In The Developer Experience

On my part, I wanted to run through a few features that stood out in the process of building the page, so I’ll touch upon each of them a bit and give my two cents. First of all, when I got the designs and switched on the dev mode, I had to set up a few things, so let’s start by running through that process together.

Onboarding

The first time you open dev mode, the onboarding widget asks you for which platform you are building and which size units you are using to generate code appropriately in CSS, SwiftUI or Compose.

If you need to change these configs down the line, don’t panic, this is not set in stone and can be altered later on.

CSS and Typography

In dev mode, when you click on any frame, the sidebar starts to show the box model so that you can see the width and height of that block, whether it has a border, padding and so on.

And it also shows the styles written in the language you chose while onboarding, which is quite cool. You can change that here (by clicking on CSS dropdown). Speaking of the generated CSS, it's not something new, but it's much better than it used to be.

I'd say you can copy and paste CSS to your code, but the thing to be careful about is that it throws flex at everything, even a paragraph element. So keep that in mind.

What you can copy and paste in your code, though, is typography styles, which is even cooler. It shows you if any of the properties are determined by a constant, so you won't have to search through all the variables in your root CSS.

It also shows if the text object is of a certain style (in this case, of the style called main title) declared in Figma, which means that you know you'll also be able to reuse some CSS styles.

Component Playground

Component Playground is another new feature I really enjoyed, which lets you browse different states and variants of a given component.

Click on a component in a file and then find the "Open in playground" button in the sidebar on the right. It opens a modal with very Storybook-like features: you can change the type, see how it looks in different states, and maybe it even has an optional icon.

Instead of looking at several different looks of a single component stacked together in a Figma file, now you can just change props and see how it transforms itself. Again, very cool.

Tracking Changes

Ok, now it gets more interesting. Dev mode introduces the ability to track changes on a file. It's like git for Figma, and it is amazing.

When you click on the layer in Figma, it shows you a little "Compare changes" button at the top of the sidebar. When you click on it, it opens a modal which looks like the "Files Changed" section of a Pull Request: you have two versions of the file side by side - the old one on the left and the current one on the right.

The Layer section on the bottom shows you a list of changes, and when you click on a layer, it displays exactly what was changed there. If you aren't sure you can clearly see the changes this way, you can click "Overlay", which puts both layers on top of each other, and while changing the opacity of the one below, you'll catch the changes.

It's a very convenient feature because imagine tracking a border-radius change in a huge Figma file. We know the struggle of looking at an updated section and wondering, "ok, what’s different?". Now you’ll actually get the answer.

Figma for VS Code Extension

Another giant new feature is an extension for VS Code.

When you install the extension in VS Code, a Figma icon will appear in the sidebar. Click on that, choose the file you are working with, and you will get this screen:

It opens Figma... in VS Code ? And it shows all the necessary stuff you need - box model, layout styles, typography styles, assets and so on.

From now on, you don't need to have Figma and your code in separate windows and can also avoid switching between them every second. That’s very much following the shift towards workflow synergy Mariam discussed before.

Now, I hate to be a killjoy, but while it all sounds nice when working on a laptop with limited screen real estate, my personal preference is to keep different apps in different windows because if the screen is split, VS Code, code and tabs get wrapped in an ugly way and navigating in and between files becomes a bit of a burden. Again, my apologies.

As cool as this feature is, I'll probably keep things the old way.

Assets

Getting all the digital assets from a Figma file was easy before, but it just got an upgrade. You can click a frame and scroll down in the sidebar to the Assets section, and there you are. You can download single/several assets in the format you want from here too.

One of the best features of dev mode I found during testing is this: When you want to download an asset from the Figma extension in VS Code, it automatically finds the destination folder and lets you change the name of the file.

So a 3-step flow that existed before (download > unzip > add to the project in VS Code) got shrunk to just one step - download.

Conclusion

Dev mode is an excellent add-on to Figma's core product for developers because it helps us navigate the sea of designs and keep in sync with updates to components; sometimes, it even writes code for us.

It's a great product for a beta release, and it's a pity it isn't free forever. As for Figma, we love the direction the product is heading and look forward to even more synergies between the different tools we do the actual work in and those we use to keep tabs on it.