Designer Quickstart
Our Figma Libraries
Sky UI in Figma consists of multiple libraries. The Foundations and Component library are essential for any project you work on. Concept and Value Stream libraries can be used in addition to speed up the design process.
| Ownership | Platform | Code Parity | Use Cases | Change Governance | |
|---|---|---|---|---|---|
| Sky UI Foundations | Sky UI | Web & App | React | Globally | Yes, managed by Sky UI |
| Sky UI Web Components | Sky UI | Web | React | Globally across Web | Yes, managed by Sky UI |
| Sky UI Web Concept Components | Sky UI | Web | No | Globally across Web | No |
| Sky UI App Concept Components | Sky UI | App | No | Globally across App | No |
| Value Stream Libraries | Value Stream Design Lead | Web & App | No | Locally across Value Stream | Defined by Value Stream |
Foundations
The Sky UI Foundations library provides colours, text styles, grids, logos, icons and placeholders, and is used for designing for both Web and App.
Components (Web)
The Component library provides components and usage guidelines that have direct code parity. Components are built to be accessible and in line with best practices. Updates are planned and carried out in sync with Development and will be announced in the #sky-ui-design-system Slack channel.
Concept Components (App or Web)
The Concept libraries provide components that are used across all products but are only available in Figma. They have not been verified by development and can be changed without notice. Please provide handover notes for your developers if you decide to use them. Once concept components have been proven to work, they will be properly documented, moved into the relevant component library and added to the code base.
Value Stream libraries
These local libraries provide components that are only relevant to particular products. They are not managed by the Sky UI team and have no defined code equivalent, but are useful to speed up the design process. Components within this library can be completely new or may already be used in production.
Setting up your files with Sky UI
You can add libraries to design files by clicking on the library icon in the assets tab. In the modal, you can find the relevant libraries under Sky UI in the CX Digital tab. Add the relevant libraries to your file (either Web or App). Alternatively you can reach out to a member of the Sky UI team and they can help you.
Editing Sky UI libraries
Only designers within the Sky UI team can edit any of the files within the Sky UI Figma Team. If you have a request to make an edit, please message us in the #sky-ui-design-system Slack channel.
We have a very strict governance system in place in order to preserve the consistency between design and development.
Designing Bespoke Components and Patterns
If you cannot find the right component for a project, please design a bespoke solution. Once your solution has been tested and proven to work can it be considered for being added to the library.
Please see the page What is Sky UI for more details on our request workflow.
Composable Components
To keep components in Figma as flexible as their counterparts in React, we often rely on Composable Components. This is where we begin to treat certain areas of a component or pattern as a 'container' rather than a defined piece of content. That container can then be switched out for any content required, whilst still keeping the outside containers properties intact.
Look out for layers called 'Content Area', 'Replace Content Placeholder' or similar. This is the layer that can be replaced by a locally created component that holds the content you want to insert. Generally, any component layer can be replaced by another component, for example any icon component can be inserted into the Icon Button. These types of available switches are made clear in the usage guides in Figma.
The most obvious components that we use composable components for are Card, Radio Card and Modal, so that the content can be entirely flexible for the creator of the component however the container style remains consistent.
Detaching Components
We create all our Components and Patterns with the utmost flexibility in mind, so please don't detach them unless absolutely necessary. And if you do, we ask that you pop a message in the #sky-ui-design-system Slack channel with details on why you disconnected it so we can flow that feedback into the system.