The design system in code is the second side of a project. FISYCO reads your ui-kit from the repository, matches its components against the components library from Figma, and shows where code and design differ. This page connects it and explains what FISYCO reads.
Before you start
- You're a maintainer of the project, or a workspace owner or admin.
- The project has a repository. See Connect a repository. On GitHub, the wizard lists every repository the FISYCO app can access, so the ui-kit may live in a separate repository. On GitLab and Bitbucket, it offers the project's repository.
- The project has a components library: the design the code is compared with. See Components library.
- Your components are written in React. FISYCO reads
.tsxand.jsxfiles.
Run the setup wizard
- Open the project. Under From code, find the Design system in code card and click Connect.
- Repository: choose where to read the code from, then click Next.
- ui-kit folder: FISYCO lists folders that look like a ui-kit, each with a confidence score and the reasons. Pick one and click Connect and index.
- Design: click Attach on at least one components library, then Next. Without one there's nothing to compare the code with.
- Sources: attach the tokens, icons and illustrations libraries to take into account, then click Next.
- First index run: progress updates on its own. When the index is built, click Open the design system.
The branch is shown above the folder list: the project's Target branch, or main when that field is empty. On this step FISYCO reads only paths, not file contents.
If no folder looks like a design system, the ui-kit usually lives in another repository. Click Back and choose that one.
Start without a repository is also an option. The design system then follows component changes in Figma and reports breaking ones. Matching with code, differences and patches need a repository.
Sources: the libraries the design system reads
A library counts only once it's attached. Nothing is picked up by default.
The audit skips an attached library's output folder, and the library sees how it's used in code. The library itself doesn't change: it keeps syncing and delivering as before. To change sources later, open the design system, then Settings, and use the switches in Design and Sources.
Product repositories
When the ui-kit ships as a package, the products that use it live in other repositories. Add them in Settings → Product repositories: paste the repository address and click Connect.
- FISYCO reads them with the project's access. On GitHub, the FISYCO app installation must include each repository.
- Only usage is collected there: which components are called, where and how often. Imports are matched by your ui-kit's package name, taken from the nearest
package.jsonat or above the ui-kit folder. - They're read after each index run of the design system. Each row shows its status and last indexed commit, or why reading failed.
What the first index does
The first run reads the repository tree, takes a snapshot from Figma, reads the code files and saves the index. Along the way:
- Files in the ui-kit folder are read in full. Up to 600 other
.tsxand.jsxfiles are read; tests, stories and configs are skipped. - Components are indexed: names, props, variant axes and values, and styles per variant.
- Code components are matched to the design, and structural differences are found.
- Bypasses are counted: colours written past the tokens, inline SVG instead of library icons, duplicate components.
- Usage of attached libraries and the health score are calculated.
In Settings, the Index card shows the ui-kit folder and branch, the last run and its commit, the components found and the files scanned. Reindex starts a run by hand.
After that, the index stays current. A push to the tracked branch that touches the ui-kit, .tsx, .jsx or package.json files starts a new run. FISYCO also checks the branch every 30 minutes in case a webhook stays silent.
What FISYCO reads, and what it never does
FISYCO reads your repository through your Git provider's API: the tree of paths, the ui-kit folder, other .tsx and .jsx files, and the root package.json.
It never runs your code. Nothing is built or rendered: everything comes from parsing the files.
The index keeps names, paths, line numbers, props, variant values, style values and usage counts. It never keeps the text of your code: no function bodies, no string literals, no call-site lines. The last 30 index runs are kept.
Delete the design system in Settings removes everything derived from the repository. Your libraries stay.