Figma for design systems
A design system for everyone
Create shared assets and libraries that the whole team can access. Figma enables design system adoption for more consistency and efficiency.
![Toggles, shapes, letters, and bounding boxes layered over a grid as part of a design system](https://cdn.sanity.io/images/599r6htc/regionalized/246319d65944dcc65370c1dd8863ef9ba2ecbc3c-1108x1108.png?w=540&h=540&q=75&fit=max&auto=format)
Trusted by teams at
Design systems that scale
Collaborate together on reusable assets to create a design system that enables consistency and innovation across teams and products.
![A library of icons, colors, typeface styles, and spacers](https://cdn.sanity.io/images/599r6htc/regionalized/3f1bfae9ff0fba1b956c69af93cb1b4f33b6381a-1080x864.png?w=780&h=624&q=75&fit=max&auto=format)
Create structure for faster innovation
Standardize styles, variables, and components so that everything from color to padding scales seamlessly across your products and brands.
Share libraries for more consistency
Publish assets in team libraries so the latest approved design elements are always a drag and drop away.
Scale your design systems as your product grows
Powerful design systems capabilities, like variable modes, help you scale across use cases, themes, and more.
Explore design system features
Streamline the product development process with a design system that’s aligned across design and code.
![A light mode and dark mode view of app product shots for exporting](https://cdn.sanity.io/images/599r6htc/regionalized/8aba504f624298af854a8e5a4ce2b4c1d4a25746-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
Implement design tokens
Use variables and modes to implement design tokens for you design system. Use color tokens to swap between light and dark modes, or typography tokens to change fonts between brands, and so much more.
![A cursor choosing from a menu of custom variables for a button](https://cdn.sanity.io/images/599r6htc/regionalized/b528ac7dc506552ca7bc36117786f9798c82d135-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
Map components in Figma to code
Use component properties to make components more customizable and map to React properties.
![An inspect view of API code](https://cdn.sanity.io/images/599r6htc/regionalized/4718e38ae8ef3190a4115e5b561ce6a53a02a80a-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
Keep design systems in sync
Use Figma’s variables REST API to create and manage variables in bulk—saving you time while scaling your design system.
![A graph showing the usage analytics of a component library.](https://cdn.sanity.io/images/599r6htc/regionalized/371d2f6ab148c305241db44219d4add125c7d009-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
Track usage analytics
Check out the usage of your team's components and variants with design system analytics.
There was a night and day difference after we transitioned to Figma. It acted as a catalyst for building out our design system.
James Davis, Lead Designer at News UK
![](https://cdn.sanity.io/images/599r6htc/regionalized/c0409f4dd0804c5da99663f2331648567e207df7-720x721.png?rect=0,1,720,720&w=360&h=360&q=75&fit=max&auto=format)
About Spotify’s cross-platform design system
Read how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components.
![Salesforce, Spotify, GitHub, and Atlassian logos.](https://cdn.sanity.io/images/599r6htc/regionalized/e66c0135b18d0b8cf72e01aa70ff9e8862c15974-721x720.png?rect=1,0,720,720&w=360&h=360&q=75&fit=max&auto=format)
Explore open design systems from leading brands
Get access to open design systems—from brands like Github, Atlassian, Salesforce, and more.
![An ascending graph on a lavender background.](https://cdn.sanity.io/images/599r6htc/regionalized/af629f67f59dd2047351715a55c7467d49f18452-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
5 ways to make the most of design system analytics
Design system analytics give teams the context they need to make better decisions and drive adoption.