Syncing Figma Dev Resources

Developers being unsure of what components in their Figma designs are from the Design System is a common issue I've seen across multiple organizations. They often ask "What coded component is this?". This is where I think Dev Mode is valuable.

I've noticed product developers rarely use Dev Mode to its full potential. Many don't read the docs, as they're more concerned with building their feature on a tight deadline. I feel for them! They may not know how to tell which UI Kit a Figma component comes from or how to go to the main instance of a component. Their skillset is writing code and most have only surface-level knowledge of how to use Figma. Once again, I totally feel for them and understand why that is.

These questions continue to come up, across multiple organizations and engineering levels:

"Where does this component come from?"

"Is this component already built?"

"Do I need to build this myself?"

"Is this a Design System component?"

"Is there documentation or links to where I can find/use these components in code?"

This is where I've been experimenting with Figma dev resources. They provide a great way to add supplemental links to your Figma components to help answer these questions. Not only are they useful on their own, but they also encourage developers to use Dev Mode, which can help them learn more about its features. Which in turn, will likely improve the design and developer process and communication — that's the goal, at least. Especially if your organization is already paying for Dev Mode seats. May as well put them to good use!

With dev resources in place, developers can view your designs in Dev Mode and click through the components. When they come across a component with available resources, they'll see the links in the Dev Mode panel. The panel gives them more information and resources around implementation. I find dev resources especially helpful for Design System components, showing how to assemble smaller building blocks together to build larger parts of the UI.

You can manually add dev resources to any component via Figma's UI, but I believe making code the source of truth and using their API is a slightly better process. Admittedly, both paths are laborious and time consuming, but once it's all in place, your consumers will appreciate them. And will hopefully be low maintenance after the initial investment.

But having them defined in code means that when changes are made to a component via a pull request, the developer can also update the dev resources that would be helpful to Design System consumers in the same PR. It means designers aren't manually adding resources to components without developers knowing and gives Design System developers more control and insight on how to best fulfill the needs of other developers using the system.

So how do we write these resources to Figma? Their API.

Figma has great documentation on their /dev-resources endpoint.

By keeping code as the source of truth, it means we can programmatically create, update, and delete resources. You can check out the code I wrote for this process.

But here's the gist:

• Fetch all existing resources from Figma's API.
• Keep a list of resources in code associating the Figma node ID to the links we want associated to that node/component.
  • We link to Storybook and the component's source code in GitHub.
• Using the local list of resources as our source of truth, compare against the ones returned from Figma's API. Bucket them into new resources, resources to update, and resources to delete.
• Hit Figma's endpoints (POST, PUT, DELETE) with these bucketed items.
  • Create (POST) and Update (PUT) allow for batching node IDs, but deleting does not. The link I have above has some delays to ensure you don't get rate limited. If this happens, you'll get a 429 response status code and have to wait a while before making more delete requests.

With dev resources in place, your consumers can use Dev Mode to get more information about the Design System components and how to use them in code via your documentation. It'll help ease the design to development handoff, by providing more information to your developers.

Wiring up Code Connect is up next for me. It's a bigger fish to fry. So sit tight and I'll share my experiences there as well!

Want to sync more things between Figma and code? Check out my syncing Figma variables to CSS variables article.