Juxync - Figma to Jux

A Figma to Jux Plugin

Creating a good color tokens system is a complex task. If already done with Figma variables, use Juxync to import your variables to Jux to use as design tokens.

Juxync will variables your token collections, groups and modes into token sets, while maintaining all the relationships between them.

🔗 Link to our plugin

How does Juxync work?

  1. Juxync scans Figma color variables in your chosen file.

  2. The plugin auto maps the tokens into core, and other semantics sets (see tutorial below)

  3. Sync the tokens into the Jux token management, allowing developers to view and use these tokens via our CLI (see reference link).

Next up: (or Future features)

  • Sync Assets (SVG)

  • Dimensions tokens

  • Typography styles

  • Check out the roadmap for more information


Tutorial

  1. Login to your Jux account. Copy the ‘Secret Key’ from Jux editor. The ‘Secret Key’ is located at the top right context menu in the top navigation.

  2. Open the Figma file where all your color variables are stored and run the plugin. Paste in this screen your Secret Key.

  1. The plugin will map your collections to token sets automatically. Jux token management is organized in sets. ‘Core’ is a mandatory set. Other sets are added to reference the core tokens as semantic (light/dark) or specific tokens. Every collection that has only one mode will be recognized as a ‘core’ collection. Collections with more then one mode will be mapped to the semantic sets saving their reference to the core set. Groups will be exported to Jux under each set exactly as they are in the Figma file. Make sure each collection / group / mode of variables are mapped correctly to the target sets in Jux.

  1. Confirmation screen. Go to Jux to start tokenizing your components and share them with you development team.

Follow us on the community as well

Note: Juxync, currently does not support multi-mode core collections, such as multi brand variables system.

Last updated