Migration guide for designers

Hello 👋 welcome to the migration to Warp! If you are just getting started with migrating your Finn Fabric files to Warp you are in the right place.

Checklist to get you migrated

• Read through our getting started guide & migration guide
• Familiarise yourself with the Tori brand
• Create a new file to start rebuilding your designs
• Enable the Warp libraries
• Create another file for your Tori versioned screens
• Make the switch!

The design migration, step by step

TIP

For a more visual introduction, check out the 'Start here' file in Figma.

1. Get the component and token libraries

1. Turn on the libraries by navigating to the Main menu in Figma and selecting Libraries from the list.

   • In the library modal turn on the library called: Warp component library
     You can have as many libraries as you want turned on but we suggest that you turn off the Fabric core library and any Tori library you might have access to while migrating.

2. Turn on the Warp Icons library to get access to the Warp icons

2. Create a new empty file in Figma

1. Name it something with FINN so you remember that it’s the FINN theme 🙂
2. In the file, turn on the following libraries:
   • Warp component library
   • Warp icon library
   • Finn - Design tokens

3. Recreate your screens using Warp components

You can search for components in the assets menu in Figma. The component will be placed in the Warp components section. In the beginning you will find mostly Fabric or Blocket in the search results components (if you haven’t turned those libraries off) since Figma remembers what you’ve worked with before. You can also copy and paste components directly from the Warp components overview if you prefer that.

We strongly recommend that you recreate your screens with the FINN theme in place to make sure you get a 1:1 experience of your screens. If you find that you can’t create the same design since you have made something custom, try to find components that you can use instead. If you can’t, reach out to us!

4. Duplicate your FINN styled Warp file

Name the file something with Tori so you remember that it’s the Tori themed file 👏

5. Apply Tori tokens to your components

1. Click the “Assets” tab in the left side panel in Figma
2. Click the book icon in the top right corner in the panel
3. Click the “>” chevron all the way to the right, next to “FINN - Design Tokens”
4. Click the “Swap library button” in the lower right corner of the modal
5. Click “Choose library” in the top right corner, and select “Tori - Design tokens”
6. Click “Swap library.”

And, voila – now you should have something that looks like Tori!

Colors in Warp

In Warp Design System we are changing the whole concept of working with colors. We are no longer picking primitive colors from a palette (like text-blue-600), but instead we use semantic colors based on their purpose (like text-primary). This is something that is needed in order to support brand theming and dark mode.