Skip to main content

DESIGN SYSTEMS FEATURES
A design system for everyone on the team

Create shared assets and libraries that the whole team can access. Use Figma's web-first, multiplayer platform to easily scale your design and development.

Toggles, shapes, letters, and bounding boxes layered over a grid as part of a design systemToggles, shapes, letters, and bounding boxes layered over a grid as part of a design system

Trusted by teams at

Puma logoKimberly-Clark logoStripe logoThe New York Times logoNetflix logoSpotify logo

Drive design consistency

Figma makes it easy to collaborate together on reusable assets, helping you create design systems that drive creativity and consistency across all your teams.

Open and accessible

Publish design assets in team libraries so everyone you work with has easier access. Now, all the standardized, branded design elements you need will only be a drag and drop away. Learn more.

Easily scale your designs

Create powerful design systems that are adaptable for all use cases.

Switch between design themes

Create multiple modes for different themes like light and dark, desktop and mobile, and more with variable modes. Learn more.

A library of icons, colors, typeface styles, and spacersA library of icons, colors, typeface styles, and spacers

Manage styles, components, and more

Standardize styles, variables, and components so that everything from color to padding scales seamlessly across your products and brands.

An inspect view of API codeAn inspect view of API code

Automate workflows with the REST API

Use Figma’s variables REST API to create and manage variables in bulk—saving you time while scaling your design systems. Learn more.

Design in dev-friendly systems

Streamline the product development process with assets that are aligned across design and code.

A light mode and dark mode view of app product shots for exportingA light mode and dark mode view of app product shots for exporting

Design tokens

Export variables into a format that's compatible across design and development.

A cursor choosing from a menu of custom variables for a buttonA cursor choosing from a menu of custom variables for a button

Connect components to code

Use component properties to make components more customizable and map to React properties.

The Dev Mode interface in FigmaThe Dev Mode interface in Figma

Inspect your design system

Deep dive into designs with Dev Mode, a developer-friendly mode for component documentation, inspecting designs, and other helpful code-based insights. Learn more.

Track design analytics. Optimize your systems.

When you know how your team uses assets, you can improve them. Figma gives you the tools to analyze assets—for optimal adoption and impact.

A graph showing the usage analytics of a component libraryA graph showing the usage analytics of a component library

Measure usage metrics

Check out the frequency and usage of your team's components and variants with design system analytics. Use the data to flag assets that need help to become more efficient and usable. Learn more.

Explore more features

Three layered shapes filled with patterns are layered over one another in bounding boxesThree layered shapes filled with patterns are layered over one another in bounding boxes

Design

Design, riff, and get feedback in real time to build and ship the best products.

Explore design features

Four shapes in bounding boxes connected as a prototypeFour shapes in bounding boxes connected as a prototype

Prototyping

Create and test interactive, no-code prototypes right alongside your designs.

Explore prototyping features

Transparent shapes are layered, creating solid shapes and patterns within the negative spacesTransparent shapes are layered, creating solid shapes and patterns within the negative spaces

Dev Mode

Translate designs into code faster with Dev Mode, a new space for developers in Figma.

Explore development features

Learn what four behaviors successful teams adopt to build the best products