motifXD Design Token Generator

About this plugin

This is DesignOps and handoffs between designer to dev just got a whole lot easier! Designers create and update their styles in Figma, we translate those styles and create an API, all while the devs sit back and get it in directly into their codebase.

----------

Adding New Tokens

Add tokens from anywhere in your figma file. Our plugin will automatically add it to your custom Design System page.

1. Navigate to either the Color or Text tab at the bottom of the Tokens page.
2. Use the add to add a new token.
3. Give the token a name*
4. Select the token properties

• For Color, select a color from the color picker.
• For Text, select the font family, font weight, font size, and line height. Line height - set it to 0 for auto.

Editing Tokens

1. Navigate to either the Color or Text tab at the bottom of the Tokens page.
2. Hover over the token and press the edit icon.
3. Any changes you make will be reflected in that token.

Deleting Tokens

1. Navigate to either the Color or Text tab at the bottom of the Tokens page.
2. Hover over the token and press the delete icon.

Visualize your tokens

Our plugin creates a custom Design System page, located at the top of the Pages list on the left sidebar. Here, you can visualize all your tokens in one place. 

Note: Use the plugin to do the actual adding and editing of the tokens.

Naming your tokens

To play nice for the developers, we will use dashes in place of spaces and slashes. For example, instead of "primary purple", we will use "primary-purple". Instead of "primary/purple", we will use "primary-purple". 

Note: When editing, use the name with dashes.

----------

🎯 TEMPLATE

We have a starting template that has a small set of tokens for you to begin with.

Template:

https://www.figma.com/community/file/1176585897297925520

WHAT'S NEXT

• Deploy feature: Generating an API to get these tokens to your devs.
• Design dashboard: See all your deployments in one place.
• Browser Testing inside Figma: See your tokens in action and run testing before they get to your devs!

----------

Feedback? Questions? Feature request?

• Leave a comment
• 💻 motifxd.com
• ✉️ [email protected]