loomiui

LoomiUI Pro for Figma

Move from theme tokens to design decisions without losing the code contract

Import the same variables your application uses, work in light and dark modes, and hand developers component choices that map cleanly to LoomiUI.

See the setup Browse presets
FFintech / ColorLight · Dark
primary/500--loomi-primary-500
surface/base--loomi-surface
text/muted--loomi-text-muted
10radius/md--loomi-radius-md

Know what the importer does

The included offline plugin creates local Color and Size & Style variable collections. It does not generate finished Figma components or a published .fig team library; the kit includes blueprints and assembly guidance for that work.

About five minutes

Import a theme preset

You only install the development plugin once. Rebuilding or replacing the extracted kit updates the local files it reads.

  1. 01Open Figma Desktop

    Local development plugins are installed from the desktop app, not the Figma web app.

  2. 02Import the manifest

    Choose plugin/manifest.json from the extracted LoomiUI Pro Figma kit.

  3. 03Choose a preset

    Run LoomiUI Pro Theme Importer and import one of the 12 generated themes.

  4. 04Design in both modes

    Use the Color and Size & Style collections, then switch between Light and Dark.

Choose this file when Figma asks for a manifest plugin/manifest.json

Inside the customer kit

Everything needed to keep design and code aligned

The exports are generated from the Pro theme package, so the token names and preset modes stay traceable to production.

12 variable collections

Color, spacing, radius, typography, density, and component tokens for every preset.

Component blueprints

Core and Pro JSON specifications with names and variants that map back to code.

Layouts and screens

Auto-layout patterns plus Admin, SaaS, CRM, and Analytics screen specifications.

Library guidance

Documentation, states, text styles, effects, changelog, and library assembly instructions.

A shared naming system

The design handoff already speaks LoomiUI

Figma variables map to CSS custom properties, while component variant names map to element attributes such as type, size, and color.

FigmaButton · type=primary · size=regular Code<loomi-button type="primary" size="regular">

Included with LoomiUI Pro

Start from the same system in design and code

Get the generated Figma kit, all theme presets, templates, private packages, and future updates.

View Pro licenses