The whole system, drawn for designers
The Rift DS kit is a free Figma file with a page for every one of the 178 components, built on variables named after the code's tokens. Themes and light and dark are variable modes, so one switch re-themes a whole page. Duplicate it from the Figma Community to start.
What is in the kit
A page per component
Every component has its own page: the component set, one sticker sheet of every state, the parts it is built from, and buttons to its docs page and Storybook.
Colour
The primitives and the semantic colours, with every swatch bound to its variable.
Typography
Every style on the type scale, set in the theme's own faces.
Icons
The Material Symbols the components use, as components you can swap into any icon slot.
Themes
A card for each theme in the kit, linking to its page on this site and to the playground. Figma caps how many modes a collection holds, so the kit carries some of the system's themes, not all of them.
AI chat
The chat widget docked, as an overlay and full screen, its placements, and a reply with its follow-ups.
Templates
Product screens from this site rebuilt from kit components at web and phone sizes, with each AI step of a flow as its own frame.
Backgrounds
The ambient field and every shader scene as real Figma shader fills, in light and dark.
Themes and modes
The kit has three variable collections. Primitives holds each theme's raw values and is hidden. Mode holds the semantic colours every component binds to, in Light and Dark. Theme holds each theme's colours, corner radii, sizes and typefaces, one mode per theme: Tide, Smoke, Blueprint, Signal and Forest, of the 13 themes the system ships. Frames are left on Auto, so setting the two modes on a page re-themes everything on it. The table shows what the variables hold in the theme and mode this site is in now.
| In Figma | Collection | In code | Smoke, Dark |
|---|---|---|---|
action/primary-bg | Mode | --color-action-primary-bg | #F1F1F1 |
bg/page-primary | Mode | --color-bg-page-primary | #050505 |
bg/container-primary | Mode | --color-bg-container-primary | rgba(14, 14, 14, 0.8) |
bg/container-border | Mode | --color-bg-container-border | #232323 |
text/primary | Mode | --color-text-primary | #F1F1F1 |
text/secondary | Mode | --color-text-secondary | #BCBCBC |
radius/pill | Theme | --radius-pill | 5px |
radius/300 | Theme | --radius-300 | 5px |
How it lines up with code
Names are shared on purpose. A variable is its token without the --color- prefix, a component set is named after its React component, and its variant properties are the component's props.
| In Figma | In code |
|---|---|
Variable bg/container-primary | Token --color-bg-container-primary |
Component set Button | Component Button |
Component description | The import line, how to use it and every prop |
A page's Docs and Storybook buttons | The component's docs page and its Storybook story |
A component's frame | The Figma button on that component's docs page |
Every prop that changes how a component looks is a property in the kit. Each enum prop is a variant property with the same name and values, each boolean state prop such as disabled is a boolean property, the label is a text property and icons are instance-swap properties. Hover, pressed and focus are CSS states rather than props, so they are a State property at most. Props that only change behaviour, such as callbacks, links and accessible names, have no look and are not properties; each component set's description lists every prop with the import line, and the component's docs page has the full contract.
| In code | In Figma |
|---|---|
An enum prop, such as variant, tone or size | A variant property with the same name and the same values |
A boolean state prop, such as disabled | A boolean property with the same name |
The label, or other visible text | A text property |
An icon, such as iconLeft or iconRight | An instance-swap property |
Hover, pressed and focus, which are CSS states and not props | A State property at most, never a prop the code lacks |
Callbacks, links, refs and accessible names, which have no look | Not a property; the component's description lists them |
tokens-primitives.cssRaw valuesA theme's stylesheetOne mode per themetokens-light.css and tokens-dark.cssLight and DarkComponent CSSBound to Mode variablesThe code leads
The code is the source of truth, and the kit follows it. When a component or a token changes, two agent skills bring the file in step: figma-parity compares the whole kit with the library and fixes the Figma side, and figma-tokens carries a token or theme change into the variables. A new component gets its page through new-figma-component. Nothing in Figma flows back into the code.
Any theme in your own file
Every theme, in or out of the kit, is published as DTCG token files, one per theme and mode, with semantic tokens kept as aliases of their primitives. Import one with a plugin that reads DTCG, such as Tokens Studio, to bring a theme the kit does not carry into your own file. The Schemas page lists every published file.
https://rift-ds.com/schema/tokens/<theme>.<mode>.tokens.json
# for example
https://rift-ds.com/schema/tokens/tide.light.tokens.jsonQuestions
Yes. Open it on the Figma Community and duplicate it into your own drafts at no cost. Your copy is yours to change.
None to install. Every face the kit's themes use, and the Material Symbols icons, are Google Fonts, which Figma has built in.
With nothing selected, the right panel shows the page's variable modes. Set Theme to a theme and Mode to Light or Dark. Every frame is left on Auto, so the whole page follows. Set the modes on a single frame to theme just that frame.
It is drawn from the code: the variables from the tokens, the variants from the props. Nothing syncs the two automatically: the kit is brought in step by hand after a change, so if they ever disagree, the code and the docs pages on this site are right.
Every prop that changes how a component looks is. Enum props are variant properties with the same names and values, boolean state props such as disabled are boolean properties, the label is a text property and icons are instance-swap properties. Props with no look, such as callbacks, links and accessible names, are not properties. Each component set's description in the kit lists every prop with its import line, and the component's docs page on this site has the full contract.
No. Code Connect needs a Figma Organization or Enterprise plan, so the kit has none. Each component's description in the kit carries its usage and props instead.
No. Figma caps how many modes a variable collection can hold, so the kit carries some of the system's themes as Theme modes, the ones listed under Themes and modes. Every other theme comes into Figma through its token files.
Sticker sheets are drawn once, in the default theme, because the variables do the rest. Switch the page's Theme and Mode and every sheet redraws in that look.
A component in the kit has the same name as its React component, and its variant properties are its props, so a design reads straight across. The component's docs page has the code, and every docs page has a Figma button that opens that component's frame.
Yes. Import that theme's DTCG token files into your file with a plugin such as Tokens Studio. Every theme is listed on the Themes page.