---
url: /docs/get-started/designers/warp-in-figma.md
---
# WARP in Figma

Introduction to the [WARP Design System](https://www.figma.com/files/1308388678941179368/team/1148531441799778110) workspace.

## WARP Design System

These files contain all files and libraries for you to get started with designing for Vend.

![Overview of design system file structure in Figma for designers](/get-started/figma-warp-overview.png)

### 01. Get started

Guidance and onboarding to the WARP design system.

[Start here](https://www.figma.com/design/8q1w2m8ssGlrYTQUaehU0m/01.-Start-here?m=auto): content here is already migrated to this page. This file will be removed soon. 
[Auto-layout Guidelines](https://www.figma.com/design/exuWKnSlbdxvMBCRdyI6A9/Auto-layout-Guidelines?m=auto\&t=9n7H4cvMNGuOgEYS-6): learning resource for working with auto-layout. 
[Figma for Dummies](https://www.figma.com/design/OKVEGRzXQgQPmWIS4JTqcT/Figma-for-Dummies?m=auto\&t=9n7H4cvMNGuOgEYS-6): learning resource for using Figma. 
[Figma Dev Mode](https://www.figma.com/design/BP6InHzYBpcg3e4dk3uHcs/Figma-Dev-Mode?m=auto\&t=9n7H4cvMNGuOgEYS-6): learning resource for Figma's dev mode.

::: image-block
![Overview of the "Get started" project in Figma for designers](/get-started/figma-warp-get-started.jpg)
:::

### 02. Libraries

[WARP - Components](https://www.figma.com/design/oHBCzDdJxHQ6fmFLYWUltf/WARP---Components?m=auto): contains all tokens and themable components. 
[WARP - Icons](https://www.figma.com/design/yEx16ew6S0Xgd579dN4hsM/WARP---Icons?m=auto): icon library containing all supported icons. 
[WARP - DataViz](https://www.figma.com/design/jKb3gWUebdHyRBsK0naqB6/WARP---DataViz?m=auto): library with data visualization colours and components. 
[WARP - Design Tools](https://www.figma.com/design/pZ8kIMvs615cJfbIzatP03/WARP---Design-Tools?m=auto): standardised design elements that you can use in presentations, mockups, or to help organise things in your Figma files.

::: image-block
![Overview of the "Libraries" project in Figma for designers](/get-started/figma-warp-libraries.jpg)
:::

### 03. Examples

1. [Example pages](https://www.figma.com/design/mUsNZDskDWF8XB6ZqxO8l8/Example-Pages?m=auto): generic web/app designs showing brand specific tokens in play. You can use this to understand how tokens are used.

::: image-block
![Overview of the "Examples" project in Figma for designers](/get-started/figma-warp-examples.jpg)
:::

## Libraries

To speed up your multi-brand design flow, we've enabled the component and icon library whenever a new file is created within the Vend organisation.

::: image-block
![Figma library overview with 2 added WARP libraries "WARP - Components 2.0" and "WARP - Icons"](/get-started/figma-warp-libraries-added.jpg)
:::

## How to add libraries

A quick guide in case you need more libraries.

### 1 Open libraries

Go to your desired design file and open libraries.

Hotkeys

Mac: ⌥option + ⌘command + O

Win: ctrl + alt + O

::: image-block
![Figma dropdown highlighting the option "libraries"](/get-started/figma-dropdown-libraries.jpg)
:::

### 2 Search and enable

Search for the desired library and select "Add to file".

::: image-block
![Figma library viewer with “DataViz” as user search input and one result with the Warp - DataViz figma library and the option to add the library to the file."](/get-started/figma-libraries-dataviz.svg)
:::

## Removing other libraries

You might want to consider disabling other libraries to not accidentally pick any non-WARP components. All WARP libraries are marked with the "Warp"-prefix.