FIGORA
Open Figma library
Design system · v1.2.1 Figma library + React components

Every screen, built from the same figures.

FIGORA is one standard for tokens, components, patterns and AI experiences — designed in Figma, shipped in React, and tested for accessibility at every step.

Verified Pro In review Beta
var(--fg-color-action-primary) var(--fg-space-4) var(--fg-radius-xl) var(--fg-font-family-sans) 392 tokens
AI suggestion Summarise this thread into three action items. 3 sourcesNeeds review

One library for design and code. Counted, not estimated.

{{s.value}} {{s.label}}
Principles

How FIGORA is designed

Four rules every token, component and template answers to — for the people who design with it and the agents that build with it.

01

Consistent by default

Every value is a token and every component is reused, never detached. Change one variable and it travels through all 621 components and 35 templates.

02

Accessible for everyone

Contrast is checked in light, dark and high-contrast themes. Every React component is rendered and tested with axe against WCAG 2.2 A and AA — 645 tests, all passing.

03

Built for people and AI

Agents follow the same rules as designers: an intent-to-component map, AI components that show sources and provenance, and explicit human approval before anything consequential happens.

04

One source, design to code

793 of 804 Figma components map to React, with 802 Code Connect templates validated against every variant — what you specify is what ships.

Foundations

The primitives under every component: 10 variable collections, 25 text styles, 7 effect styles and 184 icons.

{{t.label}}
{{t.label}}
Theming

One system. Four brands. Every theme.

Semantic tokens sit between your brand and your components. Swap the brand ramp or the theme and every surface, action and focus ring follows — light, dark, system and high contrast.

Brand · {{brandName}}
Theme
Team planBilling · Workspace settings
Current
Seats used12 of 20
Usage alerts
Upgrade plan Manage seats

--fg-color-action-primary → {{brandHex}}

Develop

Design and code speak the same language.

React 19 and TypeScript components styled with plain CSS on FIGORA tokens. Each one has an example, a Storybook story and a Code Connect template pointing back to its Figma source.

  • @figora-ds/react623 components
  • @figora-ds/tokensCSS, DTCG JSON and TS
  • @figora-ds/icons184 icons
Upgrade.tsx
import { Button, Card } from "@figora-ds/react"; export function Upgrade() { return ( <Card> <Button variant="primary"> Upgrade plan </Button> </Card> ); }

How FIGORA grew

Full changelog