Figma plugin

Theme UI

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

by LekoArts

users
7.1K
likes
85
saves
4.7K
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v6 · Dec 24, 2021
First published
Jan 9, 2020
Publisher
LekoArts
On this page
Overview

About Theme UI

Theme UI is a free Figma plugin published by LekoArts in 2020. It works in Figma Design and has 7,141 users and 85 likes on the Figma Community.

In the developer's words

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

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

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

Changelog

What's new

Version 6 · released Dec 24, 2021

  • Update image
Trust

Permissions and privacy

Network access

This plugin's manifest doesn't declare its network access, which is common for older plugins. Figma shows a warning on the Community page for plugins like this.

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest. Questions about data handling go to the developer's support page.

Compare

Theme UI alternatives

  1. 1

    html.to.design

    by divRIOTS

    2.7M users39KFree + $18/mo upgrade

    Convert any website into fully editable Figma designs

    View details
  2. 2

    Figma to HTML

    by Figma2HTML

    688K users7KFree

    Convert Figma design to HTML

    View details
  3. 3

    Convertify Sketch/Adobe/Google

    by Hypermatic

    539K users5.3KFree + paid features

    Export to Sketch, XD, After Effects, PSD, InDesign — or — Import XD, Illustrator, PSD, InDesign, PDF

    View details
  4. 4

    TinyImage Compressor

    by Hypermatic

    527K users4.7KFree + paid features

    Export/downsize compressed JPG, PNG, SVG, WebP, GIF, WebM, MP4, AVIF and PDF image files from Figma

    View details
  5. 5

    Pitchdeck Presentation Studio

    by Hypermatic

    502K users6KFree + paid features

    Turn your Figma designs into animated slide decks or export them to PowerPoint/PDF

    View details
  6. 6

    PDF to Figma

    by Gautham 🌶

    337K users2.7KFree

    Import a PDF file into Figma as an image

    View details
FAQ

Theme UI FAQ

What does Theme UI do?

Use your Theme UI config to quickly create color and text styles. It's a Figma plugin by LekoArts that runs in Figma Design.

Is Theme UI free?

Yes. Theme UI is free to install and run from the Figma Community, with no paid tier listed.

How do I install Theme UI?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to Theme UI?

By user count, the closest alternatives are html.to.design, Figma to HTML and Convertify Sketch/Adobe/Google.

For developers

Built this plugin?

Use this page as a landing page for Theme UI: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Theme UI on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/theme-ui/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Theme UI on figmaplugins.co" width="220" height="48"></a>

Want it featured on figmaplugins.co? Submit it for review