After getting a few queries from designers about the new Figma Dev Mode, I decided to dive deeper into how it could help solve design handoffs or just help with our engineering process.

Mark sections as ‘Ready for development‘

There seems to be built in tags for “Ready for development’ while selecting a section (a group of frames). In the past, designers used to create components to mark each frame as “Ready for development”, which is very similar to how Figma has done it but the official way now is probably much better!

Marking it ready for development also has another perk: for engineers, we can see a nice list of ready for development frames that can be used to quickly jump around the Figma page. This makes it easier to find these frames.

Inline design tokens

If designers tokenise variables such as the spacing (Number variable), we could see it inline while we hover. Here you could see the “Spacing/Small” token while hovering.

Description for components

If designers add descriptions to a component, we could also see it on the sidebar. This could potentially serve as a mini functional specification or simply hold some information for design handoffs.

The Component Playground

Similar to how we have Storybook for components when developing. I think this is a pretty nice interface and it works automatically if you use component props on Figma. We can play with the props and see the different states of a component.

Version history

I’m thinking this might be difficult to formalise into a process for proper version tracking, but at the very least, it’s a good use case if designers make a few minor changes and engineers want to easily see what has changed using the version history. Things such as text changes after client feedback, or certain minor styles changes would be easier to spot.

Dev resources

I’m not sure how linked design and engineering should be, but as a developer, we can also add links to the figma component. The link could be a linear issue, storybook link, github PR (designers need to have access thought), etc.

I’m not too sure of the use case yet, but I think we could keep this in mind.

Changing Dev Mode preferences

If you were like me and picked a wrong setting, you can change it by making sure you’re on Dev Mode, then press “Esc” until you have selected nothing. You should see your Dev Mode preferences on the top right

Plugins

I haven’t explored the plugins yet, but I’ll be sure to keep a lookout for how it can help streamline design handoffs or benefit developers!