Theme UI

by LekoArts

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

FreeFigma

Performance report Open in Figma

Installs

4,714

Likes

Users

7,178

Views

15,452

About this plugin

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.

InstructionsYou'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).

NotesPlease note that the config file needs to be in a specific form: https://github.com/LekoArts/figma-theme-ui#usage. Otherwise it won't workIf 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/