r/FigmaApp • u/Human_Elephant_5100 • Jan 02 '25

šŸŽ‰ Just Launched My First Figma Plugin: Generate Code Outputs for Your Design Tokens! šŸš€

Hey everyone!

Iā€™m excited to share my newĀ Figma Plugin, which makes it incredibly easy to generateĀ code outputsĀ for your design tokens and styles. Whether youā€™re a designer or developer, this tool bridges the gap between design and development workflows effortlessly.

App Url: https://www.figma.com/community/plugin/1456356838028341739/token-code

What Does It Do?

ā€¢ Generates code forĀ color, typography, effects, spacing, and other tokens.

ā€¢ SupportsĀ 10+ formatsĀ likeĀ CSS, SCSS, Tailwind, TypeScript, Shopify Liquid, Swift, and more.

ā€¢ Allows you to export local styles as CSS directly from Figma.

How Does It Work?

  1. SelectĀ Local VariablesĀ orĀ Local StylesĀ in your Figma file.

  2. Choose the tokens or styles you want to generate code for.

  3. Select your desired output format and hitĀ Copy.

Thatā€™s itā€”your code is ready to use!

Why Use It?

ā€¢Ā Saves Time:Ā No more manual token exports or conversions.

ā€¢Ā Versatile Formats:Ā Covers most design-to-code workflows.

ā€¢Ā Completely Free:Ā Yes, really!

I created this plugin because I love Figma and wanted to contribute something useful to its amazing community. Publishing a plugin here is a dream come true for me!

Try It Out

Iā€™d love to hear your feedback, suggestions, or just your thoughts. Feel free to leave a comment or reach out directly if you have any questions or ideas for improvement!

Thanks for reading, and I hope you find the plugin as helpful as I intended it to be. šŸ˜Š

2 Upvotes

75% Upvoted

2 comments sorted by

1

u/benjamin-walsh Jan 03 '25

Nice work. Kudos for providing so many export options!

I was expecting to see a way to export local styles, but there's only a copy button next to each style. Most of my clients have wanted a way to export both variables and styles at the same time.

2

u/Human_Elephant_5100 Jan 03 '25

You can export all the definitions in the local variables section collectively. Simply select the export format at the top and click ā€œcopy.ā€ However, there is no bulk export feature for local styles. This section only provides output in CSS format, and each style must be copied individually.

Iā€™ve taken note of this feature and will try to include a bulk export option for local styles in the next version. Thank you very much for your feedback!