A components library reads the published components of one Figma file and records how they change from one sync to the next. It doesn't generate code or open pull requests. It is the design side of your design system: the side FISYCO compares your code against.
Before you start
- Figma is connected, and the file's components are published as a library. Sync reads published components only. See Connect Figma.
- Your project shows the Design system in code section. Components libraries live there, not in the project's Libraries list.
- You're a project maintainer, or a workspace owner or admin. Only they can create or edit libraries.
Create the library
- Open the project, then Design system in code.
- Click Create a components library. It's on the Design step of the connection wizard, and under Sources on the Overview tab while the project has no components library yet.
- General. Enter a Name and paste the link to the file into Figma file.
- Source. Pick the pages, then the components to track. If the file has no published components, there is nothing to pick: publish the library in Figma first.
- Click Create library. The first sync starts right away.
The first sync records the starting point, so it reports no changes. Changes appear from the next sync on.
What the library shows
The Browse tab is a grid of components. A component set carries a badge with its variant count, such as Set ยท 12. Filter by All types, Sets or Standalone, or search by name.
Click a component to open its details:
- Variant axes: each axis of the set with its values.
- Properties: each component property with its Type and Default.
- Variants: every variant, with a column for each axis.
- Last change: the most recent recorded change, if there is one.
- Technical: the Figma node, when the component last changed and how many changes are recorded.
For every variant, FISYCO keeps a snapshot of its layout, fills, strokes, typography and layers. Position on the canvas is left out, so moving a component is not a change. Editing a text label is not a design change either. A nested instance is stored with the variant it uses, so switching that variant counts.
How changes are classified
Each change gets one of three classes. A component with several reasons takes the most serious one.
Breaking means code that already uses the component can stop matching it. A screen that passes size="xs" is left without a variant once the xs value disappears from Figma.
Where changes appear
Pending lists the components that changed in the latest sync. Open one to see a modified or new badge, its class and what changed:
- A breaking change lists its reasons first, for example Variant value removed:
xs. - A table of Property, Before and After follows. Each row names the variant it belongs to.
- When a value is bound to a Figma variable, the table shows the token name from a tokens library in the same project, with the raw value under it. Without such a library, you see the values.
- AI Summary describes the change in words. It is built from the recorded facts. For larger changes, a model rephrases those facts without adding new ones.
- Change history lists every change recorded for the component, with its class and date.
There is nothing to approve. After each successful sync, the new snapshot becomes the starting point for the next one.
Syncs and run history
When Figma webhooks are connected, publishing the library in Figma starts a sync on its own. When the library header shows Check now or Sync now, that button starts a sync by hand.
History lists every sync run with its Status, Trigger, User, Started time and a Summary of added, modified and removed components. Diff opens a single run.
To hear about changes, open the project's Settings, then Notifications. The Components group has two events. Components changed covers any sync that found changes. Breaking design change fires only for breaking ones, so a channel subscribed to it stays quiet the rest of the time.
How it feeds the design system
The design system reads attached components libraries as its design side. Under Sources, an attached library is marked In the design system; one that is Not attached offers Attach. Several components libraries are read as one design, and a component name found in two files is reported as a conflict.
With a repository connected, FISYCO matches each Figma component to its counterpart in code and reports where they differ. See Components comparison and Differences. Without a repository, the library still tracks changes in Figma and flags the breaking ones.
The components library only reads Figma. It never writes to your repository. Fixes to your code arrive as pull requests your team reviews.