Warp Design System

Appearance

WARP in Figma ​

Introduction to the WARP Design System workspace.

WARP Design System ​

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

Overview of design system file structure in Figma for designers

01. Get started ​

Guidance and onboarding to the WARP design system.

Start here: content here is already migrated to this page. This file will be removed soon.

Auto-layout Guidelines: learning resource for working with auto-layout.

Figma for Dummies: learning resource for using Figma.

Figma Dev Mode: learning resource for Figma's dev mode.

Overview of the "Get started" project in Figma for designers

02. Documentation ​

Component overview: component documentation. The content in here will be migrated from Figma to this page.

DataViz Guidelines (Beta): guidelines for data visualisation.

Overview of the "Documentation" project in Figma for designers

03. Libraries ​

WARP - Components: contains all tokens and themable components used for Schibsted Marketplaces.

WARP - Icons: icon library containing all supported icons.

WARP - DataViz (Beta): library with data visualisation colours and components.

WARP - Design Tools: standardised design elements that you can use in presentations, mockups, or to help organise things in your Figma files.

Overview of the "Libraries" project in Figma for designers

04. Examples ​

  1. Example pages: generic web/app designs showing brand specific tokens in play. You can use this to understand how tokens are used.

Overview of the "Examples" project in Figma for designers

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 Nordic Marketplaces organisation.

Figma library overview with 2 added WARP libraries "WARP - Components 2.0" and "WARP - Icons"

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

Figma dropdown highlighting the option "libraries"

2 Search and enable ​

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

Figma dropdown highlighting the option "libraries"

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.