Getting Started

Get setup, become familiar and start designing with our design system.

Setting up

Figma access

We use Figma for designing and prototyping at BA. You can request access through corporate directory by searching for “Figma”. If you’re a stakeholder, please request viewer access.

Request Figma access

Use our Figma structure

To ensure consistency across design files, please duplicate and use our defined Figma file structure and move any working files into your relevant projects.

Duplicate the template file

Add the library

Add the AirFrame library to your file to stay up to date with the latest design system styles and components.

Link to access the library

Airframe

AirFrame is the name for our umbrella system of systems. It covers iterations of our brand, multi-themes and has deep level primitive tokens embedded throughout. It leverages variables and modes in Figma to easily switch between these for whatever version you’re designing for.

Learn more about AirFrame for Web

Our fundamentals

Get setup, become familiar and start designing with our design system.

Styles

Styles are the fundamental elements of our design system. They serve as the boiler plate for everything else.

View styles

Components

A clean and minimal user interface is a pillar of our visual language. Minimalism, however, should never be at the cost of the user's experience. Form always comes after function.

View components

Patterns

Patterns are best practice layouts and interactions for specific user tasks that use components as their building blocks. Patterns flex with the requirements for each product and are not fixed.

View patterns

Content

Our content guidelines cover our voice and tone, and other ways to describe information.

View content
GitHub Storybook Figma library Version 3 release guide Release history BAgel helper QA process