Figma Simple Design System
What Figma Simple Design System is
Figma Simple Design System (SDS) is a free design system project that connects Figma design assets with a React codebase. It shows how Figma Variables, Styles, Components, and Code Connect can work together across responsive design and code. SDS is intended as a starting point for a new project or as a set of examples of design system practices, with room to customize designs beyond a basic theme layer. Its codebase includes React primitives, layouts, hooks, providers, utilities, icons, and example compositions. Code Connect examples cover individual primitives and compositions built from them. The repository also includes Storybook stories and links to a published Storybook. Scripts can retrieve icons, variables, and styles from Figma and generate code assets. Using Code Connect requires a Figma API token with the `file_code_connect_scope:write` scope; some example integrations may require additional scopes. The README identifies SDS as alpha. The project is distributed under the MIT License. Figma was founded in 2012 and is headquartered in San Francisco.
Who it suits
SDS suits teams starting a React project who want examples connecting Figma design assets and code. It also suits developers exploring responsive design systems, reusable components, and design customization beyond theming.
What it does well
- Connects Figma Variables, Styles, Components, and Code Connect with React.
- Includes responsive design and code examples.
- Provides React primitives, layouts, hooks, providers, and utilities.
- Includes Storybook stories and a published Storybook link.
- MIT-licensed, with scripts to generate code assets from Figma.
What to know first
- The README identifies the project as alpha.
- Code Connect requires a Figma API token with a write scope.
- Figma variable API scopes are Enterprise-plan only.
- Some example integrations may require scopes an organization cannot access.
Limits
The project is marked alpha. Figma's `file_variables:read` and `file_variables:write` API scopes are Enterprise-plan only; some example integrations may require additional scopes that an organization cannot access.
Getting started
- Open the project at https://github.com/figma/sds.
- Install the dependencies with npm.
- Use the repository's commands to run the app or Storybook locally.
- For Code Connect, provide a Figma API token with the `file_code_connect_scope:write` scope.
Verdict
Pick Figma Simple Design System if you want a free starting point or examples for connecting Figma assets with a customizable React design system. Look elsewhere if you need a project beyond alpha or cannot obtain the API scopes required for the integrations you plan to use.
Questions
How much does Figma Simple Design System cost?
It is free, with a free plan.
What platform does it support?
The listed platform is web.
Is the project open source?
It is distributed under the MIT License.
What does Code Connect require?
It requires a Figma API token with the `file_code_connect_scope:write` scope. Some example integrations may need additional API scopes.
Are Figma variable API scopes available on every plan?
The README says the `file_variables:read` and `file_variables:write` scopes are Enterprise-plan only.
Who makes Figma Simple Design System?
It is a Figma project. Figma was founded in 2012 and is headquartered in San Francisco.
Facts from Figma Simple Design System's own pages
- Additional scopes
- Some example integrations may need extra API scopes that an organization may not have access to. · github.com, 7 Oct 2026
- Authentication requirement
- Using Code Connect requires a Figma API token with the file_code_connect_scope:write scope. · github.com, 7 Oct 2026
- Code Connect
- SDS includes Code Connect examples for both primitive components and compositions of those primitives. · github.com, 7 Oct 2026
- Components
- The codebase includes compositions, hooks, icons, layout components, primitives, providers, and utilities. · github.com, 7 Oct 2026
- Customizability
- SDS aims to reflect its implications in code while allowing design customization beyond a simple theming layer. · github.com, 7 Oct 2026
- Design and code
- SDS aims to bridge gaps between design and development while allowing design customizability beyond a simple theming layer. · github.com, 7 Oct 2026
- Developer tools
- The README provides commands to run the app and Storybook locally after installing dependencies with npm. · github.com, 7 Oct 2026
- Figma API
- The provided scripts can retrieve icons, variables, and styles from Figma and generate code assets. · github.com, 7 Oct 2026
- Figma API access
- Code Connect requires a Figma API token with the file_code_connect_scope:write scope; optional scripts may require additional scopes. · github.com, 7 Oct 2026
- Intended use
- The repository says SDS can help start a new project or provide examples of design system best practices. · github.com, 7 Oct 2026
- License
- The repository is marked as MIT licensed. · github.com, 7 Oct 2026
- Maker
- Figma's company background document states that Figma was founded in 2012 and is headquartered in San Francisco. · static.figma.com, 7 Oct 2026
- Maker location
- Figma's GitHub organization profile lists San Francisco, California. · github.com, 7 Oct 2026
- Plan limitation
- The README says reading and writing file variables through the listed API scopes is Enterprise plan only. · github.com, 7 Oct 2026
- Project status
- The README identifies Simple Design System as alpha. · github.com, 7 Oct 2026
- Purpose
- Simple Design System is a base design system showing how Figma Variables, Styles, Components, and Code Connect can work alongside a React codebase. · github.com, 7 Oct 2026
- React components
- The codebase includes React primitives, layouts, hooks, providers, utilities, and example compositions. · github.com, 7 Oct 2026
- Responsive design
- The project demonstrates a responsive web design system spanning design and code. · github.com, 7 Oct 2026
- Storybook
- The repository provides Storybook stories and links to a published Storybook. · github.com, 7 Oct 2026
Where Figma Simple Design System stands on Freedom251
- UI Kit Libraries#11 of 26