Skip to main content

Getting started

In this section you’ll find everything you need to know to get up and running with the PIE design system.

Use our Foundation libraries

Make sure you always use the styles defined in our Foundation libraries. This will help ensure you’re aligned with the PIE design system and enhance consistency across our products and files.

Also make sure you’re using the right Foundation library when applying colour, typography, elevation or radius (among others) to your designs. For example, if your file uses the PIE 2.0 Light Theme, make sure you are pulling the styles from our PIE 2.0 Foundations – Light.

The image above shows that the colour token selected for the Notification component is pulled from the PIE 2.0 Foundations – Light library

Keep your libraries up to date

Make sure you are working using the latest version of our component and Foundation libraries. This will ensure your files use components and styles which are up to date and are consistent with other teams.

When a library has a new update you’ll get a notification on the bottom-right corner of your Figma workspace. Tap on update to bring up the Updates modal, where you will be informed of any changes and updates that have been made to the library.

To check whether you’re working from the latest version of a library, select the Library icon in the Assets panel. Then click on the Updates section to check whether there are any pending updates from our libraries.

Example of a library update notification in Figma.

Stay informed with PIE comms

We share updates and news through a variety of communications and Slack channels. These will keep you up to date with what’s happening in the Design System, where are we heading to and what changes or updates have been made to the system.

You can find a list of the Slack channels we use in our Support section.

The image above shows one of our usual PIE communications: The PIE monthly slice.

Use Auto Layout

To ensure your designs adjust to the layout and are able to scale, try using Auto Layout when designing your product. This will ensure you create designs that grow to fill or shrink to fit your screens, accommodating longer text strings, maintaining alignment with our grid and ensuring the structure of your designs isn’t compromised as they evolve.

The image above shows Figma’s Auto layout controls.

We use a variety of plugins to enhance and speed up the way we work in the PIE team. These are just suggestions and are not mandatory, but we think they can be helpful when using PIE foundations and components within your designs.