V4 Migration

Foundations

Variables & styles

Variables

Given the introduction of Figma variables, we decided to migrate everything that can be migrated to variables meaning that:

  • Colors
  • Spacing
  • Sizing

Styles and units are now variables!

Styles

Things that cannot be migrated as variables like:

  • Text Styles
  • Effects

Are still kept as styles in the library, as new types of variables are being added in the future, we will keep migrating things eventually.

Deprecated styles

All styles from previous versions of our Design System are now marked with a ❌[DEPRECATED] tag, this doesn't mean you need to change it right away! This is just a tag to let you know that those styles are not from V4.

New styles

Colors

For colors, we moved from styles to variables; apart from a different name, variables are pretty much used the same as styles; you can find the new variables by typing color when trying to add a color variable/style to an element.

Spacing

We now have spacing variables for designers to use; please, when doing anything related to spacing, like gaps or padding in auto-layout, we highly encourage you to use our spacing variables!

Missing styles

When updating existing things to new styles you might find that its color variable is missing, for example, you were using ui/card/border/default for a border, and now, there is no card variable, that is because we hid all UI variables in V4

Why tho?

As mentioned in our token structure documentation, UI variables are only scoped to the component they're meant to, so in the previous example ui/card/border/default was a style only meant for the Card component of our core library.

That way, we avoid having 300+ variables all showing to the designer when some things are only meant for a specific component.

Then, how can I update my UI styles?

We highly encourage you to start using our new variables.

Although they are not a 1:1 match in the name, every single color that we were using for the UI styles can be found there!

If you have some questions about when to use a specific varaible or styles, please reach out to the design system!

Components

All components from our Core library will be automatically updated with the new styles.

 

Detached styles on Core components

You might find that all core component don't show their text and effectsstyles like so:

We purposely hid the text styles of these components so they cannot be used outside of them.

As mentioned in the Token documentation, our UI variables are only scoped to the component to which they were added.

Don't worry! If the developer uses the coded component that matches the core component in Figma, the styles will be already applied without them needing to do anything.