Skip to main content

Best Practices

Theemo is built for theeming in mind (hence the name) was developed with some workflows in mind, it is best to use them like that.

As a Free User

Setup:

  • One file per theme
  • One file for design system and product components

Theme File

  • Define design tokens
  • Define contexts
  • Create references
  • Use context switchting to select a published context for your theme
  • Publish styles (Figma will prompt you)
  • Create theme in Themer (or update existing one)

Component File

  • Update imported styles (Figma will prompt you)
  • Open Themer
  • Select theme and apply it to the page

Workflow for switching the context in your component library:

  1. Theme document:
  • Open Theemo plugin
  • Switch context
  • Publish styles (Figma will prompt you)
  1. Component document:
  • Update imported styles (Figma will prompt you)

As a Pro User

Setup:

  • One file per theme
  • One or more files for your design system components
  • Multiple files for your product related work

Theme File

  • Define design tokens
  • Define contexts
  • Create references
  • Use context switchting to select a published context for your theme
  • Publish styles (Figma will prompt you)

Component File

  • Use swap library to change your theme
  • Publish components branded with your theme

Product File(s)

  • Import branded components

Multi-Themed Components

Imagine this setup:

  • 2x Themes (red and blue)
  • 1x Component Library
  • 2+ consuming projects

Ideally, when working on each of these products, you import the component library + the related theme for that particular project. Unfortunately Figma doesn't allow this, but they offer a workaround for you.

Multi-themed Figma components