← Back to work
Own product · Design-systems tool

Uiprism

A tool that turns wireframes, screenshots, URLs and Figma files into design-system components, checked against the code repository and written back into Figma.

Role
Design & development
Access
Public
Product site
Visit Uiprism
01 Starting point

Source material and the system drift apart

Wireframes, screenshots and URLs arrive in every shape, and someone translates them into design-system components by hand. The same gap came up across teams, most recently at a construction-industry cost-management platform with its own software and no design system.

Import screen: choose a screenshot, URL, repository or Figma file as the source
Token analysis: extracted colors and type sizes, each with a confidence label
The import screen, and the colors and type sizes extracted from a source, each with a confidence level.
02 Approach

The repository as source of truth

Uiprism reads the source and cross-references every element with the connected repository: Tailwind tokens, shadcn/ui components, React props. Uiprism interprets layout with AI assistance and writes the result back into Figma as structured components, with Storybook as a further target.

Component mapping: detected organisms with their source, one chart card expanded as preview
Figma plugin after sync: components, text styles and color styles created in the file
Component mapping, and the result synced into Figma.
03 Result

Components, text styles and color styles in Figma

Uiprism was built first to maintain Figma design systems day to day.

  • Import from images and through the Figma plugin
  • Written back into Figma, checked against the repository first

  1. Read the wireframe

    Uiprism reads sketches, wireframes or stakeholder screens as input and breaks them down into UI parts.

  2. Compare with the repository

    Uiprism checks every element against the repository as source of truth, in the context of the existing design system.

  3. Sync to Figma

    Uiprism writes the result back into Figma as structured components that follow the design system.