Design Tokens on Asana's Design Systems Team - Jina Anne, Ainsley Wagoner, Ivy Wang (Schema 2021)

Подписаться 531 тыс.

Просмотров 60 тыс.

50% 1

This talk is about how the Asana Design Systems team uses design tokens to get designers and engineers working at the same level of abstraction. Jina Anne (Product Design Manager), Ainsley Wagoner (Product Designer), and Ivy Wang (Software Engineer) talk about how Figma’s design system tooling, along with design tokens, enables them to make the redundant parts of designing more streamlined so that they can focus on solving design problems.
Schema is an online conference about design systems by Figma. For more info, check out schema.figma.com/
#figma #schema #schema2021 #design #ProductDesign #FigmaDesign #DesignSystems #Asana #AsanaDesign

Наука

Опубликовано:

9 ноя 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 28

@rajeshsatyarthi 2 года назад

Design System Enthusiast here - " You guys are just awesome " Building my first design system for enterprise clients and the way you guys define, name, and nest Design Tokens are just so brilliant. Thanks from the bottom of my heart for sharing such great content.

@TheHennes36 2 года назад

This is AWESOME! I have searched around for ages to get someone ACTUALLY showing how exactly one might implement Design Tokens and I finally found what I've been searching for! THANK YOU 🙏

@projektowe 2 года назад

Everything you said makes loads of sense, that's a very smart approach. Appreciate you sharing this with us. The quickly coloured version of Asana also looked cool!

@uipetals 2 года назад

Brilliant and great. The token names are nicely created for both light and dark themes.

@bootbhai 2 года назад

Thanks, to share your valuable information to helps designer like me.

@TerekkiTerekki 8 месяцев назад

Thanks for sharing very useful insights in this video

@lonewulf611 Год назад

This is really incredible. Very informative!

@mohammadakbarhossain1105 Год назад

Brilliant presentation.

@dragos1 Год назад

that button squeak is oddly satisfying

@kiromell Год назад

Hi , great content. Loved it 😍 I have a question, where can we get Paul's formula about colors? It would be so nice to know more about it

@playbak Год назад

I've been searching multiple company systems for this (or similar) formulas as well with no luck thus far. All explain their method but stop short of sharing actual calculations

@danielsolbergdesigns Год назад

I love (mostly) everything about this! Although after watching this many times as a reference, to this day I still have some trouble wrapping my head around the 'prominence' piece of the token. Aren't classifiers like "default, weak, medium, strong" etc way too subjective and ambiguous to be meaningful (and consistent) across a full team of designers who each might think of their own definitions of what each of those words means to them? All the other pieces of the token make total sense to me, but yeah that 'prominence' piece has always been sort of a fuzzy piece in the puzzle haha.

@intelone814 Год назад

yes, it's. you can change it by: 1, 2, 3, 4 which is less subjective and more understandable, as long as there's a reference for "1" being the weak, "5" being the default and "9" being the strongest. or whatever explanation you want, just document it. we also use: xxs, xs, sm, base, md, lg, xl, xxl .. etc

@fayemidavid186 3 месяца назад

i'm so glad I came across this comment, because I'm still struggling with it.

@radarx3707 Год назад

Now I really want to meet Paul XD

@gabrielrosado6536 2 года назад

So I still don't get how designers access different colours by using the same token name in Figma. Do they have different colour styles set up? For eg. light mode text and dark mode text?

@insannurjaman Год назад

That's right we use 1 global set for storing all color. And using New set like Light set and Dark Set and renaming the token color group with aliases such , danger color, success color etc. We also use Design Token Figma Plugin

@niazihamza788 2 года назад

HELLO, IF YOU ARE A DESIGNER THEN ON YOUR DASHBAORD SEE YOUR FIRST COLOUR ON THE TOP LEFT WHERE IS THAT GOING

@rhlrathee Год назад

What sentiment does "Selected" represent ? I mean what does "Selected" mean ? I am confused between active and selected.

@zezorzan 6 месяцев назад

From my understanding, Selected is a sentiment because, for Asana, there is a specific hue for this state, so people associate the hue with the meaning. The Active state is more of a modifier of any state (just like Hover), so it doesn't have a specific hue.

@guidobw Год назад

Where is Paul?

@Jeffjesaja 2 года назад

Question. Why is selected-text-strong white?

@adrianwach7096 2 года назад

I guess because it's displayed on selected-background-strong which has blue color defined (#4573D2)

@sunx2024 Год назад

This is the confusing part to me as well. Because actually prominence is a relative concept, white can be strong on dark background, but it is not strong on light colours. When you have a few prominence levels for both background and text colours in the same sentiment, things are getting confusing - text-strong, text weak, background-strong, background-weak...should a text-strong be combined only with background-strong? How does text-weak look on background-weak? I feel some more rules are needed here.Maybe I didn't get it. Can someone explain?

@brownnutter Год назад

I think it should have been default-text-selected. 😂

@pikselowopraca2304 2 года назад

Design systems are useful and great but they limit creative freedom, so is only exciting at the beginning, later on seems like a design admin job.

@user-ti9zc1xv2b Год назад

Making consistently looking software at scale is incredibly hard, sometimes even impossible... so no they do not limit creative freedom since the bounds can be infinite with a design system; you clearly are a junior talking.