Theme UI

Use your Theme UI config to quickly create color and text styles.

Why only build consistent, themeable React apps when you can also bring the power of contraint-based design principles to Figma? You'll just need to import your Theme UI config and see the styles created.

Instructions

You'll need to convert your existing Theme UI config into a valid JSON file so that you can later import it. A minimal config to create color styles (e.g. in a colors.json) looks like this:

{ "colors": { "text": "#000", "brand": { "primary": "#f4f4f4", "secondary": "#f3f3f3", }, }, }

Once you loaded the plugin, load the file and press Apply Changes. You can optionally only import parts of the config (if available).

Notes

• Please note that the config file needs to be in a specific form: https://github.com/LekoArts/figma-theme-ui#usage. Otherwise it won't work
• If you have problems feel free to create an issue on GitHub.

If you want to help maintain/improve this plugin I'd highly appreciate issues/PRs!

Theme UI: https://theme-ui.com/