Theme UI

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.

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/