File Structure

Overview

Before getting started, take a moment to familiarise yourself with the structure of the Flex Design System library.

Flex Design System is divided into the following sections, with subsequent pages and components ordered alphabetically.

Configuration

Contains an intro section, a copy of the license and a handy guide about how to customise the variables, tokens and modes.

Templates

A selection of reusable examples to demonstrate what you can build using the components from Flex Design System.

Device

Common device UI elements that you might need to use in your designs. You can also use the official Apple and Google resources that are available in Figma if you wish.

Base

A collection of base components and styles that are used within the main components.

Components

A collection of responsive, themed components, with variant, overrides and support for common states such as hover and focus.