Design system assurance · Figma × React
The design system you approved is the one that ships.
FISYCO reads your Figma and your React code, finds where the product drifted from the approved system, and brings back pull requests that prove the fix.
Free during the public beta. No card. GitHub, GitLab and Bitbucket.
acme / web · main
PR #482
The gap
Your customers don’t experience your design system. They experience what shipped.
Two copies of one system. Nobody owns the difference.
Design decides in Figma. Engineering rebuilds it in code. A colour here, a variant there: the copies drift, nothing breaks loudly, and the cost arrives later.
Rework
Teams rebuild decisions that were already made.
Release risk
Small inconsistencies pile up until fixing them is a project.
Brand
Customers see the implementation, not the design you approved.
How it works
From two copies to one system, without a migration.
01
Connect. Nothing to migrate.
GitHub, GitLab.com and Bitbucket Cloud. FISYCO reads one commit through your provider’s API and writes only through pull requests. Self-managed GitLab on request.
Repositories
GitHub
GitLab.com
Bitbucket Cloud
Reading commit 4f2ab91 through the API · source is not stored
02
Build the baseline.
Figma libraries on one side: components, tokens, icons and illustrations. Your React design system and the apps that use it on the other.
Design system · sources
Figma
Components · 38
Tokens · 412
Icons · 819
Illustrations · 64
Code
ui-kit · Button.tsx
ui-kit · Card.tsx
web-app
admin
03
Rank by consequence.
Every difference gets a severity and a reach: how many places in your own product it actually touches. The queue sorts itself.
Differences · ranked by reach
- Low
Card radius changed in the design
design-change · radius 8 → 12
9
- High
#0F172A written instead of brand.primary
token-bypass · #0F172A
146
- Medium
Inline SVG duplicates the Search icon
asset-duplicate · Search
34
- High
Button size xs missing in code
structural-drift · size
88
Difference
Reach
04
Fix with proof.
The librarian prepares the patch and proves it by values. Your code is never executed, and nothing reaches your default branch without a reviewer.
fix(tokens): use color.brand.primary
fisyco-bot → main
Proven by values
Code was not executed.
Repositories
GitHub
GitLab.com
Bitbucket Cloud
Reading commit 4f2ab91 through the API · source is not stored
What it finds
The drift nobody files a ticket for.
FISYCO indexes your React code on every push to the design system’s branch and compares it with the design. Five kinds of difference, each with its own proof.
A raw value where a token exists.
// Checkout.tsx · 37 places
color: "#0F172A"
color: "brand.primary"
Colours, sizes and scales written by hand but equal to a token. The fix swaps the literal for the token in every place.
An icon pasted instead of imported.
// SearchBar.tsx
<svg viewBox="0 0 24 24">…</svg>
<Search />
Inline SVG that matches an icon from your library, found by the drawing itself.
A copy built beside the system.
<SaveButton />
<Button variant="solid" />
Home-made components that repeat one you already have.
Variants out of step.
Figma: size = xs · sm · md
React: size = sm · md
xs
Figma has a size or a state the React component doesn’t, or the other way round.
Approved, not yet delivered.
Card · radius
8px
12px
A component changed in Figma and the code hasn’t caught up.
Proven patches
Pull requests that prove themselves.
Every patch carries the values it changes: design on one side, code after the change on the other. A patch that can’t be proven doesn’t ship, not even as a draft.
How far it goes
Patches wait in the queue for one click from you.
fix(ui): Button size xs from the design
fisyco-bot → main · Button.tsx
Proven by values
Code was not executed.
Design system health
One number the whole team can read.
Health for the whole system and for every component, made of parts you can check: matched to code, in sync, used through the system, free of bypasses.
Design system health
acme / ui-kit · 4f2ab91
81
of 100
+5 since the last index
Design matched to code
25%
91%
Matched and in sync
25%
88%
Usage through the design system
25%
84%
Free of bypasses
15%
46%
Free of duplicates
5%
93%
Variants actually used
5%
77%
Recomputed on every index of the design system’s branch.
Differences now
- High
#0F172A written instead of brand.primary
waiting for you
146
- High
Button size xs missing in code
pull request #491 open
88
- Medium
Inline SVG duplicates the Search icon
waiting for you
34
- Medium
SaveButton rebuilds Button
waiting for you
19
- Low
Card radius changed in the design
pull request #488 open
9
Difference
Reach
Example data. Reach is counted in your own code.
On every pull request
A reviewer that knows your system.
One comment per pull request, updated as it changes. Hard-coded values, deprecated components and home-made copies get a concrete replacement. Run it as advice or as a blocking check.
fisyco-bot
commented
3 notes in this change:
#64748B→fg.muted· Pay.tsx:42<OldModal>→Dialog· Settings.tsx:18<PrimaryCta>→<Button variant="solid">
For AI agents
Your agents use your system, not their guess.
A remote MCP server gives coding agents your components, tokens and team rules, and checks their UI code before review. A monthly report shows how agents used the system.
› find_component("primary action button")
Button · variant="solid" · 96% match · ui-kit/Button.tsx
› check_ui_code("src/Pay.tsx")
line 42 #2563EB → accent.solid
line 57 <PrimaryCta> → <Button variant="solid">
2 fixes, applied before review
Delivery
Publish in Figma. Receive a pull request.
Icons
As React components, a sprite or a package.
Illustrations
In the formats and scales you set.
Tokens
Variables and styles, with a Figma plugin when your plan doesn’t expose variables.
Your code
Read, not kept. Changed only through review.
Source is not stored
FISYCO keeps an index of facts, not your files. AI analysis sends one component file at a time to the model and keeps only the result.
One commit, read-only
Code is read through your provider’s API at a single commit.
Access log you can see
Every read of your code is listed for you for 90 days.
Changes only as pull requests
Nothing lands on a branch without your reviewer.
Roles and scoped tokens
Workspace and project roles. Personal tokens limited to what they need.
Disconnect means gone
Turning the design system off deletes everything derived from your code.
Start
See what your organization is actually shipping.
Connect one product and get the first index of your design system. Free during the public beta.