Documentation
Flex Design System is intuitive and user-friendly, but understanding its structure will help you get the most out of it. We recommend exploring the resources on this page to familiarise yourself before diving in.
Change Log
What changed in each version of Flex Design System, newest first.Read more
Requirements
Check which Figma plan and software you need to use Flex Design System.Read more
Installation
Download, import and publish Flex Design System as a Figma library.Read more
AI Guidelines
Set up the guidelines files that help Figma's AI agent design with Flex Design System.Read more
File Structure
See how the Flex Design System file is organised into pages, components and variables.Read more
Libraries
How Figma libraries work and how to publish and enable the Flex library.Read more
Variables
How Figma variables work and how Flex organises them into collections and modes.Read more
Design Tokens
What design tokens are and how Flex maps primitive values to semantic tokens.Read more
Components
How Flex components use variants and properties, and how to customise instances.Read more
Slots
Which Flex components have slots and how to add your own content to them.Read more
Grids & Spacing
How the responsive grid and spacing variables work across breakpoints.Read more
Typography
How text styles and tokens make Flex typography change with screen size and theme.Read more