FISYCO keeps your design in Figma and the code your product ships in agreement. It delivers icons, illustrations and tokens from Figma to your repository as pull requests, and it reads your React code to show where it has drifted from the design. This page explains how the pieces fit together and where to start.
Two sides of one design system
A design system usually exists twice: once in Figma as components, variables and assets, and once in code. Each copy changes on its own, and the difference between them has no owner. FISYCO works on both sides:
- From Figma to code. Libraries read a Figma file and deliver what changed as generated files in a pull request.
- From code back to the design. The design system in code reads your repository, matches its components with the components in Figma and shows where they disagree.
Every change FISYCO makes to your code arrives as a pull request. Your team reviews it and decides whether to merge.
How the pieces fit
Workspace
When you sign up, you get a personal workspace and become its owner. Everyone you invite gets a role: owner, admin or member. The role decides what they can manage. A Figma or repository connection can serve the whole workspace or a single project.
Project
A project does not sync anything by itself; its libraries do. On the project page, the Design system in code card sits under From code, and the project's Libraries are listed below it.
Libraries
Each library links one Figma file to the project and keeps a record of its contents. It remembers what has already been delivered, so every sync shows exactly what changed since then.
A library syncs when its file is published in Figma, and you can also start a sync by hand. Token variables can also come from the FISYCO plugin for Figma. The changes go out as a pull request when you click Create PR. In the library settings you can turn on Automatically create a PR after each sync instead. Once the pull request is merged, the library treats its contents as delivered.
Design system in code
The design system in code reads the folder where your ui-kit lives and the React code that uses it. It matches code components with your components library from Figma. Your icons, illustrations and tokens libraries become its sources, so it can see which of them the code actually uses.
From that it shows:
- Design system health: a score out of 100 for how closely the code follows the design and the tokens.
- Differences: where the code and the design disagree, and who takes the next step, FISYCO or you.
- AI agents: what the design system gave AI coding agents that connect through the FISYCO MCP server, and what they could not find.
It also checks every pull request in the connected repository and leaves one comment with design system notes.
The librarian does the work behind these tabs. It indexes the repository and finds bypasses, such as colours written past the tokens. On GitHub it can prepare a fix and open it as a pull request. How far it goes on its own is set by autonomy: Off, Suggests or Acts on its own. It starts at Off.
FISYCO reads your repository through your Git provider's API. It never runs your code and does not store your source code, only an index of components, props and where they are used. A fix FISYCO cannot prove is never shipped.
Libraries work without the design system in code. Connecting it does not change how they sync or deliver.
What you need
- A Figma account with access to the files you want to sync.
- A repository on GitHub, GitLab (gitlab.com) or Bitbucket Cloud, for pull requests.
- A React codebase for the design system in code: it reads
.tsxand.jsxfiles.
Where to go next
- Set up the workspace and invite your team.
- Connect Figma, so libraries can read your files.
- Connect a repository, where pull requests arrive.
- Connect the design system in code to compare your code with the design.
- Read the differences and decide what to fix first.