Framework: Beneath the surface of Verizon’s approach to variables

In this session, Verizon’s design systems team will provide an overview of how their design system allows them to pursue accessibility and brand priorities, and how Figma’s variables enable them to streamline processes, unlock greater consistency, and achieve time-savings.
Everything we launched at Framework → www.figma.com/blog/what-we-la...
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
X (formerly Twitter): / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

[@ravirajputdesigner]

Thanks team, great information. "Deprecation Mode" is the most useful if team needs to identify and make the changes.

[@godling_jin]

Nice questions from the host. Deprecation flow is seldom shared.

[@anotherone5415]

This interviews are so inspiring. Here a young man in 30’s being so overwhelmed by the vast knowledge of UX while also hopeful of dreams
Thanks so much for this content friends from Figma! ❤️

[@MaxWeir]

Great overview of their system and learnt so new methods I’ll definitely be trying too.
Was interested in why they used the lightness value to name the primitive colours, it’s seems slightly odd to do it that way as there’s no real consistency to naming them. Say you create a light background notification box for various states e.g info, success, warning and danger - it wouldn’t be that easy to know value from each colour step to use.

[@Jdpoz]

That’s just the bottom layer.
You shouldn’t be using those colors directly in components ever. they should be referenced through aliasing in other abstracted system layers like the semantic one or if you have something like a component variable layer beyond that. So “Branding/Blue/37” in the “Colors/Primitives” variable set is aliased and used by “Colors/Semantic” for the “Light” mode “Brand/Primary/Surface” and then that color is aliased and used for say “Colors/Components/Button” for the “Background” color.
Figma videos cover this kind of stuff really well. Highly recommend watching some of their introduction to variables videos. The stage presentation where the 2 guys introduced it showcased this principle well.
Naming the colors this is really good because it provides absolute information for every primitive color. You know that the low number colors are going to be darker than the high number ones and if you need to insert new colors potentially “between,” it allows you to more cleanly inject them in with without having to go with arbitrary naming conventions like “extra dark blue” or now we need an “extra extra dark blue” or having to replace a superlative like “darkest blue” with an even darker “no really this is the darkest blue” or something similarly silly.

[@Jdpoz]

TL;DR - you don’t use the primitives directly. Number-based names for the primitives provide inherent context and allow for in-between values to be added without creating confusing naming principles.

[@Jdpoz]

I totally had a “Leo DiCaprio point at the TV” meme moment when I saw the HSL lightness value number being used for the naming convention in your palette primitives. 😂
I literally thought to do the exact same thing in our company’s variable driven design system. I did have to make sure that the engineers knew that it was “HSL” and not “HSB” though since the values are often VERY different depending on the color.
Also, I love the .DEPRECATED ❌ mode setup. I might steal that for our system since I foresee that it will allow for a lot of future headaches aligning with the devs (and Figma fanatic PMs who like to drag and drop elements into their own design ideas) to be reduced.
One question for the Verizon guys :
In addition to the semantic and primitive color variable sets, have you guys thought about anything like a “class” based color system as well? We have one in ours that allows for there to be a class like “primary” or “tertiary” or things like “disabled” that are then assigned through an additional variable driven set of modes.
Also, have you guys used variables to replace things like radio button sets yet or checkbox selections? Are you still using the variant spaghetti matrices?
Clarification :
www.figma.com/community/file/1315101413130968434/radio-and-multi-button-group

[@MyDigitalHub]

Figmazing!

[@AlexRest106]

Thanks for this! How do Verizon's devs implement dark mode on a section or tile level? Any other examples of design systems moving away from the "on dark" approach? Tips on how to convince teammates to move away from "on dark"? XD