If an ongoing design uses a previous version of Spark, you can continue using that version, but we encourage you that, if you are creating something new, try using V4!
Foundations
Variables & styles
Check this video about variables!
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.