Documentation
How to set up FISYCO libraries, connect Figma and your repository, and ship design assets to code.
Getting started
What FISYCO does
How FISYCO keeps Figma and code in agreement: the workspace, projects, libraries and the design system in code, and where to start.
Workspace, project and team
Create a project, invite people by email, and learn what owners, admins, members, maintainers, contributors and viewers can do.
Connect Figma
Connect a Figma account, choose the files your libraries read, and publish them so components and styles sync.
Connect a repository
Connect GitHub, GitLab or Bitbucket to a project, choose the target branch for pull requests, and see how FISYCO keeps its webhooks healthy.
FISYCO plugin for Figma
Install the plugin, sign in with a code, pick variable groups for a tokens library and send Figma variables to code without Figma Enterprise.
Libraries
Figma components in the design system
Where Figma components live, how to connect and check the file, and how each change is classified as breaking, additive or cosmetic.
Review changes and pull requests
See what changed in a Figma library, review pending changes and history, and ship them as pull requests. FISYCO tracks each pull request until your team merges it.
Icons in React
Turn icon components from Figma into React components, an SVG sprite or a package, and get them in your repository as a pull request.
Icon generation settings
Every setting in the Generation tab of an icons library, with the input SVG, the file it generates and where that file lands in your repository.
Illustrations: formats and scales
Export Figma illustrations as SVG, PNG, WebP or AVIF in one or more scales, and see how FISYCO names the files and delivers them by pull request.
Tokens in CSS, SCSS and TypeScript
Formats, naming, modes and units for a tokens library: what FISYCO writes to DTCG, JSON, CSS, SCSS, TS and JS files, with examples of the real output.
Design system in code
Connect the design system from code
Connect your ui-kit to FISYCO: pick the repository and folder, attach sources, add product repositories, and see what the first index reads. FISYCO never runs your code.
Design system health
One score from 0 to 100 shows how closely your code follows the design and the tokens. See what it's made of, what would raise it, the trend and each component's health.
Differences
Read the Differences screen: who moves next on each row, why it matters, and how to fix it now, hand it to an agent or dismiss it with a reason.
Components: comparison with the design
How the Components tab pairs your ui-kit with Figma, how to read the design and code schematics and layer trees, and how to fix a variant mapping by hand.
Patches and autonomy
Choose how far FISYCO may fix differences on its own, per class of change, and see how each edit is proven before it arrives as a pull request.
Design system check in pull requests
What the review checks in every pull request, how the FISYCO design system check works, how to make it blocking and how FISYCO answers in its own pull requests.
AI agents
Connect an agent through MCP
Give Claude Code, Cursor, Copilot or Windsurf your design system through the FISYCO MCP server: setup, sign-in, the tools agents get and the agents report.
Agent rules and the agents report
Set the rules AI agents get from your design system through MCP, and see what agents took from it and which components they could not find.