With Figma’s Dev Mode in full (beta) force, plugins designed for the design-to-code handoff are popping up right and left. And while many of these plugins still have a ways to go in terms of quality of code output, we’re excited to see so many tools catered to improving design-development collaboration.
As plugin makers ourselves, we’ve been on the hunt for the Figma plugins that can help get the most out of Dev Mode. So take note: here’s our roundup of some great plugins that are ready to plug-and-play with Figma’s Dev Mode…
(Ordered alphabetically)
Figma to Code
Made with the support of Figma’s Creator Fund grant, Figma to Code is a great addition to Dev Mode. This free, open-source plugin generates accurate and clean code in adherence to best design and programming practices. You can select between HTML, Tailwind, Flutter and SwiftUI; see a responsive preview of your designs and then instantly grab top-notch code to use in development.
Github for Dev Mode
Github for Dev Mode is a must-have if you want to connect design and code. With this plugin you can link GitHub files, issues and pull requests to Figma components and designs, so you always have the context you need in one place. It’s great for when developers are implementing designs and need to know whether a component already exists in the codebase, or so designers can easily track the implementation of designs.
Jira for Figma
If your team is using Atlassian, this is a great plugin for connecting your Jira issues directly to designs, either entire Figma pages or specific layers, so you always have the relevant context you need. Similar to Github for Dev Mode, Jira for Figma helps developers have all the right information when implementing designs, without switching between apps. It also allows you to create Jira issues directly in Figma, streamlining handoff.
story.to.design
story.to.design imports your components from Storybook to Figma and brings any code updates into Figma in a click. And now with Dev Mode, it’s easier than ever to take your component changes from Figma to code. story.to.design also works with Dev Mode and lists all properties and code specs developers might need to code a component.
Tokens Studio for Figma
If you’ve been using Tokens Studio to set up your design tokens in Figma, you can now use the same plugin in Dev Mode, too. It’ll give you the tokens of any component or design to be applied in code, ensuring greater consistency between Figma and code.
As Dev Mode improves and develops, we’re sure to see tons more plugins in this space, too. What Dev Mode plugins would you add to this list? And what actions would you like a Dev Mode plugin to help with? Share them with us 👉 on @story_to_design or our Discord chat.
Originally published at https://story.to.design on September 15, 2023.
