TrueUI Help Guide
Set up your AI provider, map your design system, generate cleaner editable Figma screens, and restyle existing frames using your mapped system.
Recommended path
Connect
Add Claude or OpenAI.
Map
Add context, then run Smart Map
Build or style
Generate screens or restyle a frame
Quick start
Follow these steps to get your first useful generated or restyled screen.
TrueUI works best when setup is treated as part of the design process. The goal is not to make AI guess your file, but to give it enough reviewed system context to build from.
Add one AI provider key in Settings or during the first setup step.
Select or draw a Figma frame and keep Build inside frame enabled.
Open the Mapping Wizard and start with a fresh file scan.
Add industry and product context, then let Smart Map suggest the first useful setup.
Review the suggestions, save the useful ones, and check Mapping Health before serious Studio runs.
Generate one focused screen using Studio, Free, or Mockup.
Current build: TrueUI uses Free, Studio, Mockup, and Style Your Frame. Studio works best after the system context has been mapped and reviewed.
What TrueUI is
TrueUI is a Figma plugin for product designers and design-system teams. It turns your design system into AI-ready context, generates editable Figma screens from the reviewed setup, and can restyle selected frames to better match the mapped system.
Not only prompt-to-design
The prompt is the request. The mapped system is the context.
Not a replacement for judgment
TrueUI creates controlled starting points. You still review hierarchy, density, content, and interaction logic.
The strongest use case is a team with a real Figma system: shared libraries, custom product widgets, variables, icons, slots, and product rules that generic AI tools do not understand by default.
Projects & Workspaces
Use connected Figma files as one working system. A workspace lets TrueUI read shared libraries and product files together, and you choose which file wins when the same component appears in more than one of them.
Project file
A Figma file that contains useful components, styles, icons, blocks, or product-specific UI patterns.
Workspace
A connected group of project files TrueUI reads together when mapping and generating, with priority and duplicate rules so the right component wins.
Use Projects and Workspaces when foundations, product components, and feature patterns live in separate files. You can export your setup to a file so another designer can import the same projects, priorities, and mappings.
API keys
TrueUI uses your own Claude or OpenAI key. Your key is stored locally in Figma and sent only to the provider you choose.
Recommended setup
Open the Settings tab.
Paste one provider key first, either Claude or OpenAI.
Save the setting.
Run a tiny prompt to confirm the connection before doing a serious Studio run.
Claude
Recommended for many design tasks because it tends to handle structure and instruction following well.
OpenAI
Useful for shorter prompts and alternative generation behavior. Test with your own file.
Security note: Do not show personal API keys during a screen share. Treat them like production credentials.
Build tab
The Build tab is where generation and frame restyling happen. It combines frame targeting, mode selection, prompt input, reference images, and generation actions.
Build inside frame keeps generated UI inside the selected frame.
Prompt box describes the screen, role, goal, content, layout type, and constraints.
Dark mode style is available in Free mode as a style direction.
Reference image helps when structure or visual hierarchy is hard to describe.
Tips opens the better-results guide directly inside the plugin.
Style Your Frame restyles the selected frame with mapped colors, typography, and container rules.
One useful screen beats one giant prompt that tries to design an entire product.
Style Your Frame
Use Style Your Frame when you already have a Figma frame and want it to feel closer to your mapped design system. It works well for captured pages, imported layouts, rough AI outputs, and Free-mode explorations.
Select one existing Figma frame. Captured pages, imported layouts, rough AI results, or Free-mode outputs are the best candidates.
Click Style Your Frame in the Build tab, then press Generate.
TrueUI keeps the structure and aligns solid colors, typography, and containers to your mapped design system.
Your typed prompt is saved while this mode is active and restored when you exit.
Use Studio when you want real mapped components. Style Your Frame does not replace captured regions with components.
Review gradients and complex visuals manually. Gradients may remain local because Figma cannot bind them like standard color variables.
Best use: turn flat or captured frames into system-aligned Figma layouts while preserving the original structure.
Modes
Pick the mode based on the amount of design-system control you need. Style Your Frame is a separate action for existing frames, not a generation mode.
Free
Loose exploration. Good for early ideas and quick layout thinking, then optional frame restyling.
Studio
Main professional mode. Uses mapped components, variables, style context, and system rules to generate new screens.
Mockup
Greyscale wireframe generation for structure before visual styling.
Fix and Redo are not modes, but important actions. Use Fix for targeted improvements and Redo for a fresh generation from the same idea.
Smart mapping
Smart mapping is where TrueUI turns your Figma file into usable AI context. It suggests a practical setup, then lets you review the important decisions before generation.
How to map
Open the Components tab.
Click Refresh Components so the plugin sees the current file.
Run Smart Map to get suggested matches.
Review suggestions before saving them.
Manually adjust important components, and open Variant defaults on a mapped card to lock the variant that should be used every time it is placed.
Basic
Buttons, inputs, badges, chips, avatars, toggles and checkboxes.
Advanced
Page headers, sidebars, table rows, charts and higher-complexity components.
Blocks
Larger reusable sections inserted as one unit, including multi-blocks you capture from real compositions.
Custom
Project-specific components and categories.
Banned
Deprecated, misleading, experimental or unsafe components.
Map the system you actually want Studio to use. A small accurate setup beats a large noisy one.
Slots and icons
Slots, icons, and blocks help Studio work with real product composition instead of flat screenshots. Keep them organized so generation can use the right assets without polluting the main component map.
How to prepare them
Keep icon families or icon frames organized under a clear Icons area when possible.
Refresh components so TrueUI can separate icons from regular UI components.
Map components with slots where content should be inserted inside a card, row, modal, toolbar, or layout block.
Review slot usage and icon suggestions before serious Studio runs.
Manually correct important icons, custom slot components, and reusable blocks that Auto-map does not classify correctly.
Slots
Nested areas where Studio can place content inside a mapped component. Useful for cards, rows, panels, modals, and blocks.
Icons
Visual symbols should be discovered separately from regular components so Studio can use them without confusing them with UI families.
Blocks
Larger reusable structures can combine mapped components, slots, icons, and style rules into one predictable pattern.
Custom
Project-specific slot components or icon sets that need manual review.
Banned
Deprecated icons or experimental components that Studio should avoid.
Do not let icon frames pollute the main component map. Icons should support generation, not compete with buttons, cards, tables, and layouts.
Multi-blocks
Multi-blocks capture a real composition of mapped blocks and reuse it as one unit. Find and manage them in the Blocks tier of the Components tab.
Capture from selection
Select a frame on the canvas, then capture it as a multi-block of its mapped blocks. The arrangement is saved, not a flat copy.
Suggest multi-blocks
Let TrueUI scan the page for frames that combine two or more mapped blocks and propose them for you to keep.
Members and placement
Expand a multi-block to edit each member. Every member has its own mapped component, its own variant defaults, and a placement of Fixed, Repeat, or Optional.
Independent and reusable
A Reused tag marks a member whose component is also mapped elsewhere. Editing a member here never changes that component in other places.
Build a saved composition onto the canvas from the multi-block header, re-capture it from the source frame, or remove it when it is no longer needed.
Mapping Health
Mapping Health helps you review whether the setup is ready for generation. It focuses on gaps that can affect output instead of turning the page into a noisy checklist.
Important component roles that are not mapped.
Duplicate or confusing mappings.
Important setup choices that may need review.
Useful elements that may need a better mapping area.
Deprecated or unsafe items that should be moved to Banned.
Good habit: fix the setup source, not only the generated result. Better mapping improves future runs.
Style mapping
Style mapping gives TrueUI visual context for generation and for Style Your Frame. It helps align colors, typography, surfaces, borders and radius without turning the setup into a noisy checklist.
Global
Page background, text color, base radius, base border width and style direction.
Card
Radius, gap, padding, background, border and shadow.
Buttons
Primary and secondary button shape, border and padding logic.
Inputs and surfaces
Fields, modal surfaces, dividers and supporting UI patterns.
Do not map every color just because it exists. Curate the colors and styles you want generation to use.
Settings and usage
Settings include provider keys, projects and workspaces, import/export, backups, advanced behavior, and usage reporting. Keep changes intentional and easy to trace.
Change one major setting at a time.
Run a tiny test after changing provider or model settings.
Export your setup to a backup file before heavy changes, and to share it so another designer can import the same projects, mappings, and styling.
Use the run report to inspect component usage, token usage, icon behavior, warnings, and errors.
Use run history and cost reporting to understand what happened, not just whether the canvas looks okay.
Tips for better results
TrueUI performs better when your prompt describes a product decision, not just a visual wish. The clearer the intent, the less the model has to guess.
One screen at a time
Start with one form, table view, detail page, modal, or dashboard section.
Describe the purpose
Give design intent, not only layout. Purpose tells TrueUI what matters.
Name the user role
Admin, analyst, support agent and customer screens should behave differently.
Define the screen type
Say dashboard, form, settings panel, modal, drawer, table view or empty state.
List content, not counts
Give fields, columns, sections, actions, statuses, and states.
Fix with precision
Say exactly what to change: density, alignment, hierarchy or component choice.
Prompt template: Create a [screen type] for [user role]. Goal: [what the user needs to complete]. Include: [sections, fields, table columns, actions, statuses, states].
Reference images
Reference images are useful when layout is easier to show than describe. They are guidance, not a pixel-copy contract.
Overall layout structure.
Section hierarchy.
Density direction.
Relative placement of navigation, tables, cards, and panels.
Use the attached screenshot for structure only. Rebuild it as a B2B billing settings page using mapped components where possible.
Fix and Redo
Use Redo when the idea is wrong. Use Fix when the idea is close but needs a targeted correction.
Replace text-only statuses with mapped badges.
Reduce card height and tighten table density.
Move destructive actions away from primary actions.
Align row controls center and keep buttons at normal content height.
Use mapped dropdowns and inputs instead of fake rectangles.
Bad Fix prompt: make it better. That gives the model no useful direction and often changes things that were already fine.
Troubleshooting
Check that the relevant component families are mapped, then rerun in Studio. Say explicitly that fields, buttons, dropdowns, checkboxes, toggles, and badges should use mapped components where possible.
Confirm you are using Studio, not Free or Mockup. Review Mapping Health and make sure key roles are mapped before expecting DS fidelity.
Use a specific Fix prompt: remove fixed button heights, hug content vertically, keep controls aligned center, and use normal form-row spacing.
That is expected sometimes. Correct the mapping manually and keep project-specific components as custom types when needed.
Use one focused screen, reduce reference material, avoid giant prompts, and check the usage report.
Check provider key, model selection, network access, selected frame, and whether a previous run was stopped.
Start with one focused screen.
Map what matters, choose the right mode, and use precise Fix prompts when the first result is close.