The Components tab of a design system in code lists every component of your ui-kit next to its pair in Figma. Open a component, and FISYCO draws the design and the code side by side from their values. It shows where they differ and lets you correct how design variants map to props.
Before you start
- The design system in code is connected and its first index run has finished. See Connect the design system.
- A components library is connected as the design side. Without it, no component has a design pair to compare with.
The component list
Open the project, then Design system in code under From code, then Components. The cards at the top count Components in code, Matched, Diverged and No pair in code.
Each row is one component found in the ui-kit folder:
The filters above the table narrow it to Diverged, Not in the design or Mapping questions. Below the table, In the design, not in the code lists Figma components that have no counterpart in code.
Pairs are derived again on every index run. If a component has no pair, the drawer suggests renaming it so the match becomes obvious.
The comparison
Click a row to open the component drawer. Its header shows the state, the number of usages, the health score and two links: Open in the repository and Open in Figma. The Compare tab opens first.
Visual difference draws two schematics: Design from the Figma variant, Code from what the component renders for the same props. FISYCO computes the code side statically during indexing. It never runs your code. Switch between Side by side, Overlay and Slider, and use Fit to scale both sides together.
Red numbered markers point at differences. The same numbers appear in the Differences list below, property by property. Click a layer in either schematic to keep only that part in the list. Click it again to clear the selection.
Layer trees
Under each schematic is its own tree. Design layers shows Figma layers with their type: component, frame, instance, text or shape. Code elements shows tags, slots and ui-kit components. Hover a row and its pair lights up on the other side. When there is no pair, the other tree says This layer is not in the code or This element is not in the design.
A component made of parts, such as a menu with items, is one row in the list. Click an instance of a part and the props panel shows that part under Part. Whole component takes you back.
Props and variant mapping
The panel to the right of the schematics lists Variant axes and Design properties. Pick a value of an axis there, and both schematics redraw in that variant.
Each axis shows its counterpart in code, for example "Figma Size ↔ prop size", and where that mapping comes from:
- by name: FISYCO matched the axis to a prop, and its values to the prop's values, by their names.
- AI · checked by values: an AI proposal that FISYCO accepted after drawing the code with it. Differences went down and none went up.
- manual: someone on your team set it.
An AI proposal that could not be checked stays a hint, AI suggests: …, and the axis remains open. An axis with no known counterpart reads Not matched: these variants are not compared. Values such as Hover are browser states and are not compared either. Only in code lists code props the design has no axis for, as switches.
A mapping question is not a difference. Variants without a known counterpart are left out of the comparison and the health score, and the header says Compared N of M variants.
Edit a mapping by hand
- Next to the axis, click Edit the mapping, or Match if the axis is open.
- Under Maps to, choose One prop, Per value or Not in code.
- For One prop, pick the Prop and a code value for each Figma value. For Per value, map each Figma value to a boolean prop, a browser state or the Default state. Any value can also be Not in code.
- Click Save.
The panel shows Recalculating until FISYCO rebuilds the index with your mapping. A manual mapping wins over the derived one, and AI does not touch it. If the code later changes so it no longer fits, the axis is marked the fix is out of date. Back to derived removes your edit.
Project maintainers and workspace owners or admins can edit mappings. Everyone in the project can view them.
Differences now
Under the comparison, Differences now lists the axes and values the code does not have and what the librarian is doing about each. Open the queue leads to the Differences tab. See Differences and Patches and autonomy.
Other tabs
- Health: the score, accessibility checks and the AI analysis. See Design system health.
- Usage: calls, files and repositories, including connected consumers. The five busiest files come first, linked to the indexed commit. Prop values in use counts calls per value and marks unused ones.
- History: one feed of design changes, code changes, queue events and patches, newest first. Filter it by Design, Code, Queue or Patches.
- API: props with their types, defaults and required marks, plus Usage examples linked to the call in the repository.
Nothing on this page changes your code. Fixes reach the repository only as pull requests your team reviews.