Je dois faire tous ces changements et les mettre dans un grand plus grand.
Je vais faire un grand plus grand pour les récoltes.
Et je me suis dit que c'est ridicule.
Pourquoi ne ne nous n'avons pas juste quelque chose où nous poursuivons cette information dans un seul endroit
et que les plateformes puissent s'en servir.
Bonjour, bienvenue au DevTools FM Podcast.
C'est un podcast sur les tools de développement des personnes qui font les choses.
Je suis Andrew et je suis ma co-host, Justin.
Salut tout le monde.
Aujourd'hui, nous allons parler de personnes qui travaillent.
Et dans un partenariat de la stack, vous ne pourrez pas avoir que l'expérience.
Quand vous faites un système de design pour plusieurs plateformes,
vous vous rendez super appareil que la solution de la base de la base est nécessaire.
Et c'est un problème plus difficile que vous pensez.
Vous voulez vous interroger?
Je suis Kelly Harop et je suis un ingénieur de la Ux.
Je suis un ingénieur de la Ux.
Et je travaille sur notre team de design de la base de la base de la base de la base de la base.
Je suis un des des des des.
Et je aide les designers et les développeurs de la base de la base de la base
et les équipes de la base de la base de la base de la base.
Je suis Danny Banks.
Je suis un technologiste de design à Amazon.
Je suis maintenant dans l'organisation de la 3e partie de la salle.
Je travaille sur la mobile app,
que les 3e partie de la salle utilisent pour vendre les choses sur Amazon.
J'ai aussi créé des libraries de 2 points de source,
style dictionary et constructeur de sketch.
Je suis aussi en train de changer les jobs,
mais ce n'est pas officiellement,
donc ça va arriver bientôt dans les prochaines quelques semaines.
Je vais vous le donner.
C'est un symptôme de quarantaine que les gens veulent laisser leur travail.
Je ne vais pas laisser Amazon,
donc je vais rester à Amazon en changeant les équipes.
Je pense que c'est intéressant de vous deux,
que nos autres guests ne sont pas réveillés,
que vous êtes des designers et des technologistes de design
et pas des scientifiques de computer.
Comment vous endvez en un rôle comme ça ?
J'ai toujours été intéressé.
Techniquement, je suis entrain d'être un designer de UX à Amazon,
et puis j'ai transporté à être un technologiste de design,
parce que j'étais en train de faire un code en fin,
et de coder le truc que j'avais en train de designer.
Je me suis toujours voulu construire les choses que j'ai designées,
et j'ai voulu créer les choses que les utilisateurs ne voient,
car les utilisateurs ne voient pas un file sketch,
ou un file Figma, ils voient HTML et CSS,
ou Objective-C et Java.
C'est vraiment pourquoi je suis gravité
à la position de design technologiste et de design engineer.
Mon background est un peu similaire à Danny's.
J'ai commencé en design,
et mon premier travail de temps,
j'étais un designer,
et après que j'ai rempli mon premier task de design,
ils me demandaient si je vais coder le truc,
et je me suis dit,
oui,
donc beaucoup de la nuit,
je ne faisais pas de les Google,
Fuelショ,
et toujours j' villains des farks et des zdet lasers.









J'ai eu desgue wet,
mon principal装,
de trouver beaucoup de différentes manières pour faire des choses et de tenter de savoir
quel est le plus acceptable qui change de année en année.
J'ai une question sur ce rôle.
J'ai travaillé avec des designers dans le passé qui, je pense,
serait probablement mieux détenu, c'est ce rôle des technologistes en design qui
sont assez multifaceted et peuvent faire beaucoup de choses.
Je suis juste inquiétant de votre travail de jour en jour,
et surtout quand vous êtes en train de faire des choses,
de faire des designs pour les construire,
avez-vous des outils que vous avez mis à l'aise ou que ça a été plus difficile?
Parce que je vais vous le faire en ce contexte.
Parfois, dans un de mes premiers travail, je vais vous montrer des gens vraiment techniques
et des gens de ma team de design.
Hey, ici sont ces components réactifs.
Ils me disent, wow, ce n'est pas mal.
Mais ils peuvent s'y mettre dans la pince de la code et construire un pixel
parfait, responsable, comme HTML, CSS, et même des choses d'exemple.
Mais ils peuvent le faire.
Je suis juste inquiétant de votre travail et de comment ça fait de plus facile,
plus difficile que de plus fort.
Je m'adore Figma et comment c'est super collaboratif.
Il y a moins de temps pour les hands-off,
et vous n'avez pas besoin de redline.
Il y a plus de plugins et des outils qui sont à l'aise
que je ressens chaque semaine.
Ça vous permet d'utiliser des components de code
dans ces outils de design.
Et à l'heure, j'ai vu beaucoup de différents outils
qui font ceci ces jours.
Il y a FramerX, c'est un travail très bon,
parce que vous vous en faites beaucoup.
Beaucoup de différents outils,
surtout les outils d'intégration avec le livre de la histoire,
ont aussi été vraiment utiles.
J'adore la transparence
pour faire sure que tout le monde
utilise la même terminologie
et comprendre si un changement de design
a l'impact de la développement et de la flow.
C'est un bon travail.
C'est une direction que...
Il y a plus de...
Il y a tout le monde parfait,
et puis, il y a des codes de code,
et c'est plus d'un effort joint
pour que ce soit pas...
J'espère que ce soit pas aussi destructif
de changer les choses
quand vous interviendrez et essayez de les faire.
Je pense que nous nous sommes en une bonne direction
en tant que industrie.
Je pense que pour moi,
ce qui est intéressant et très promisant
est de voir les outils de développement
et les outils de développement
vers le autre côté.
Donc, des choses de la histoire,
c'est-à-dire le playroom,
ou les outils graphiques
avec des components de rack,
ces types de outils
pour que c'est plutôt que Figma
essayant d'exporter quelque chose.
Le design et le développement
travaillent dans le même espace,
mais avec différents visages.
C'est une des choses que j'ai essayé
de mettre dans ma organisation,
d'être en train de mettre un outil de développement
pour que le toulage soit le plus rapidement possible.
Il y a des cas où un design
peut juste me dire que je veux une page
et que c'est un banner,
un texte et un bouton.
On n'a pas besoin d'une review de design,
on n'a pas besoin de créer
quelque chose de Figma et de Sketch.
On peut juste commencer à construire ça
et puis, intervier sur les compagnies de production
et de la production.
Donc, de pouvoir s'en prendre
en tant que code,
et plutôt que je pense que Jean a dit
que en sortant de la gaffe,
juste de remettre la gaffe
entre le design et le développement,
comme ces types de
ingrédients et des tools sont vraiment
intéressants.
Je pense que c'est un bon futur
pour le design, le développeur,
l'interface, et quelque chose comme ça.
Oui, je vois que
votre travail est de designer technologiques.
Tu as vu que, hey, je pourrais être un des designers
plus bonnes par designer
plus près de la plateforme, je suis en train de le délivrer.
Et beaucoup de ces tools de développeurs
sont en train de faire la même
de la même logiciel que
avec Figma.
Ce que tu designs,
tu designs pour un target web,
donc ça fait que c'est très facile
de le transmettre de l'un à l'autre,
alors que si tu es dans la sketch land,
c'est
comme un petit shop de photos
qui est comme,
bien sûr, tu es en train de le design
pour le web, mais ça ne t'en prend pas
la main de ta main, et c'est vraiment
intéressant de voir le tool et aller de cette façon.
Oui, c'est ça.
Donc, ça transmette
très bien au sujet suivant.
Depuis que tu es plus en train de designer
pour ta plateforme, c'est presque naturel
que faire vos propres tools
est le prochain step après ça.
Tu as déjà voulu payer plus de la stack,
c'est un tool ou deux, plus.
Qu'est-ce que tu as fait
pour créer un style de dictionnaire
ou même approcher le concept
des tokens de design ?
Oui, c'est drôle.
En fin de la fin,
l'application mobile que je travaillais
sur Amazon a commencé, c'était un petit team
de 5 ou 6 personnes,
très scrap, même, pour les standards Amazon.
Et
je me souviens que je faisais un peu de
des trucs, c'était avant que nous
compétions notre whole application.
Et il y avait juste des times
où je faisais des choses, mais aussi
jouer en un petit peu de la base Android
et de l'IOS code.
Et il y avait des times où je
pourrais voir que je voulais changer
la couleur de fond.
Et je pourrais se faire
changer ceci du file objective,
ce file objective,
ce file de playlist,
ce file Java,
ce file de ressource Android.
Je dois faire tous ces changements
et les mettre dans un grand pull request.
Et je me souviens que c'est
ridicule, pourquoi ne ne nous
pas avoir quelque chose où nous
nous protéger cette information
dans un seul endroit
et que les plateformes puissent
utiliser ça.
Et c'est le genre de genre de
Como️ ?!
J'ai commencé tout de suite
pour notre équipe
mais en meio
ethn하신 et
j'ai analyester
ce genre depektif
on l'a créé Ghош
et la nihter
qui nous termine
par exemple un 쓰�
si j'avais besoin
d' reconquistations
dans un histoire overlookede
occasionnée dans Amazon
puis après mais
internal, conferences et tout comme ça.
Mon now co-maintainer a basically approached me
et m'a dit que ça serait un projet d'opinion,
donc on va essayer d'opinion,
et on a pris un peu de mois et on a fait ça
dans le public et dans la restée de la history.
Alors, pendant que vous avez fait ça,
est-ce qu'il y avait d'autres alternatives
qui étaient disponibles à la fois?
Pourquoi avez-vous choisi de faire votre propre en ce cas?
Pas à mon avis.
C'est vraiment intéressant.
Théo et Style Dictionary
étaient probablement tous les mêmes.
Théo a été disponible avant Style Dictionary,
mais ils étaient tous, je dirais,
en fonction des temps différents,
entre 2015 et 2016.
Je pense que l'on est en Style Dictionary
à la fin 2017,
et Théo a été disponible au début de 2017
pour faire un projet d'opinion,
mais il était environ le même temps.
Donc il n'y avait pas,
à moins de mon avis,
quelque chose d'autre qui a résolu ça.
Et c'est intéressant.
On avait tous été venus avec des paradigmes
comme des formes et des formes,
et on les a tous appelés,
ce qui est un peu bizarre et malheureux.
Je ne sais pas comment ça s'est passé, mais ça a été.
Il n'y avait pas vraiment
quelque chose qui a fait exactement ce que j'ai voulu.
Il y avait des choses très spécifiques
qui se sont misent de l'un à l'autre,
ou qui se sont faits d'une très pareille integration.
Mais je le vois, et les créateurs de Théo
aussi ont vu un problème morphogénérique
qui ne serait pas solide
par faire une integration spécifique.
Et ça a besoin d'être plus flexible
pour un point de vue de la suite
et d'objectif en Java et en Kotlin,
et tout autre qui pourrait être imaginable.
Donc, c'est le même chose que Style Dictionary
qui s'est produit dans un format très consumable.
Comment arrive-tu à ces implementations ?
Parce que, comme vous l'avez dit,
votre technologie de design n'est pas un scientifique de computer.
Donc, le right de former vos tokens pour iOS
contre Android, c'est beaucoup de
un knowledge spécifique.
Comment arrive-tu à cette knowledge ?
Je dirais que j'ai mis le problème
parce que j'ai construit un moyen
de savoir que je ne serais pas un expert iOS
ou un expert Android
ou même un expert web
et de construire Style Dictionary
dans un moyen où
un utilisateur de consommateur
peut définir comment ils veulent transformer
et former les tokens pour leur application.
Ils sauront que mon application Android
semble comme ça.
Et donc, j'ai besoin de mon tokens
pour être consommé de cette façon.
Et mon application iOS
semble comme ça,
et elle doit être consommée de cette façon.
Donc, quand Style Dictionary a été construite,
on a un couple,
ici, c'est un format d'objectif C,
un format de Syngleton Static.
Et ici, c'est un Swift.
Mais l'intention est toujours
que les équipes qui utilisent ça
ont découvert leur propre format
pour comment ils voulaient consommer
parce que, A,
je ne suis pas un expert iOS
ou un expert Android.
Et B, même si je suis
comme ma version de la meilleure
façon de consommer des tokens
en un environnement iOS,
ce n'est pas nécessairement le seul moyen.
Et on ne voulait pas le faire,
mais c'est la façon de faire les tokens
sur iOS.
Donc, on veut vraiment
construire ça comme
une plateforme
qui est pour s'exprimer
et customiser vers la décision
de la compétition.
C'est la façon de la réunition
d'une sorte de travail.
C'est un sort double,
et ça
s'ouvre beaucoup de applications
pour utiliser,
mais c'est plus difficile
de se faire sur-border
que quelque chose
qui est comme
ce qui est exactement
comment vous définissez les couleurs
et comment vous consommez
les tokens sur iOS
parce qu'il n'y a pas
une façon canonique
nécessairement
de faire ça avec un style
de la décision.
Qu'est-ce que vous avez expérimède
avec ce style de la décision?
Est-ce que le style de la décision
a été flexible
suffisamment
pour les nécessaires de design?
Une des choses
que nous avons vraiment
essayé de construire
et quand
les gens me demandent
comment
vous feriez ce truc?
Et je me dis
que je vais toujours dire
ce que vous voulez
être comme
ce que vous voulez
le code à l'air
vous voulez des propriétés customes

Vous voulez des classes de CSS
de l'aide?
Vous voulez un objectif JavaScript?
On va travailler
en arrière-bas
et ensuite on peut
créer de cela.
Un peu de gens me demandent
est-ce que je fais
quelque chose?
Est-ce que je fais
ce truc correct?
Est-ce que je fais le setup correct?
Et en général,
il n'y a pas de
de l'auteur de la décision
si ça fonctionne pour vous
et que c'est le right de la décision.
Et j'ai
appris beaucoup de choses
par parler de
la team de Kelly.
Il y a beaucoup de choses
que je ne savais pas
que vous pourriez faire
avec le style de la décision
que
Kelly a appris
et d'autres teams
que j'ai rencontrés.
C'est donc très intéressant
de voir toutes les différentes
manières
que vous pouvez
intégrer
et créer
de l'amixem de l'autre
parce qu'il y a beaucoup de choses
que je m'apprécie
d'autres gens
sur comment faire
des trucs cool
avec le style de la décision
et en fait
ma team
de l'implementation
de l'application


est très simplifiée
en comparaison
à l'intuit
et à d'autres companies
qui utilisent le style de la décision
et qui ont ces études
qui font tous ce genre de trucs cool
notre setup est très simple
et satin en comparaison.
Oui, j'ai aidé à contribuer
à l'intuit
de l'utilisation de la décision
de la décision
et nous avons
d'ailleurs un code
qui se passe là.
Comme nous
nous sommes en génération
des types de CGS,
des ESM
comme nous le faisons tout.
C'était
un test
assez fun
pour travailler,
c'est vrai.
J'ai une question
relative
sur ce que je veux
de vous donner
une forehead
nasze
J'ai refermer
cestick



metric about adoption of this tooling.
Does it make that any easier?
I think it has made kind of adoption of using design tokens.
I think easier.
It was a journey to get there.
And like what I did with my internal team is I like kickstart that process.
And like when I first built some dictionary and first built our tokens, I did the initial.
OK, I'm just going to do a find and replace this hex value to this token and this other
hex value to this token and this size to this token.
And then getting that initial piece and the whole application was on design tokens
in one big commit.
But getting it in there, allow developers to start seeing, oh, like we're using this.
It's my objective.
See, we're actually using macros, which is probably like really gross and weird, but it works.
And so once like developers start saying, like, oh, for now, this color, I just have this objective
c macro and for this size, I have this other macro.
And now when I'm looking at pull requests, I'm seeing developers using those things and being
able to see that adoption just through, I guess, osmosis of learning.
No, I don't need to define like this hex value or this size when I'm designing my component
or my interface for this second part of the question.
Like in terms of having metrics for the adoption or kind of when tokens are being used.
That's not something we've explored yet.
We are like, our team is actually going to be going through a rebrand this year.
So we'll actually have a good kind of metric slash stress test of are we using tokens to the
best extent, because when we do this refresh, if there are certain things that aren't using
the tokens, then we'll need to make them use the tokens or else they'll fall out of sync.
All right.
So before we get too much further into it, why don't we take a step back a little bit and just
talk about what a design token is and why someone who's interested in DevTools might care.
I like to think of a design token in kind of two ways.
There's design tokens as like a methodology and design tokens as an implementation.
So you could be using design tokens without using design token framework, like style
dictionary or Theo, you could just be using CSS custom properties or SAS variables or
Android resources.
And as a methodology, it's about systematizing your design decisions so that rather than
thinking about each styling, each component in isolation, you're thinking about the whole
system and creating relationships between colors and sizes and icons and fonts so that when
you want to support dark mode or when you want to change your branding or enable multiple
themes, you can make these changes in a way that makes sense and is reflective in the
system.
And so you can do that without using a framework or doing anything kind of cross
platform or multi-platform.
And then sign tokens as an implementation is really that like multi-platform piece.
It's getting those design decisions in a platform agnostic format so that you can then
kind of output them to each platform and language and use them in your applications across
different platforms and languages, however you want to consume them.
And design tokens generally are a lot of colors, font sizes, paddings, borders.
But really, they could be a lot more than that.
They could be SVGs that use that reference design tokens within them.
They could be UI strings with localization.
They could be binary files like font files, shadows, animation, basically anything that
you could think of to use or style in your design system could probably be a design
token.
Yeah, to add on to that, I love that design tokens offer a way to provide constraints so
you don't have to guess what's available.
They just come naturally out of the box.
And one of my favorite applications is using utility CSS.
And I just, I love Tailwind.
I love having a preset defined list of things that I can reference.
I don't have to think about it.
It's already established and I can use either semantic tokens that describe the
relationship and that's something vague that I think a lot of companies and teams
really need to put more focus and establish what those are because anyone can just say,
All right, I want this thing to be blue.
But what does blue mean in your system?
When should we use out versus when shouldn't we use that?
And you see a lot of products these days and you see UI elements and you're going,
why is that one purple and why is that green?
And why is that blue?
And if you don't have that structure in place, if you're not taking the time to assign
the meaning behind your design tokens, you just run into the wild west of these applications.
And that's actually something that our team currently is looking at is how do we map
those things more strategically so that an end user, they don't even have to think about it.
They know the usage, they assign the usage and then all of the colors and the typography
and the spacing that comes for free.
And I think that lets teams accelerate their work a lot more and work more efficiently.
Yeah, you might not know it when you start out, but having a set of sizes
really helps accelerate you.
Like just coming up with, oh, what's a four spacing for us?
That takes time.
And then the amount of times that you repeat that little bit of code throughout
your code base is going to make design refreshes a nightmare.
Kelly, in your mind has having designed tokens as a first class citizen
in the design system helped with updating designs,
with keeping into its products looking fresh.
Yeah, it's nice to have it all centralized in one place.
One thing that is not fixed by design tokens,
because a lot of people just assume, oh, you're using design tokens, everything's easy.
The implementation part gets really tricky because let's say I have a token out of the box,
there's no way to know how that's being leveraged.
Like, I don't know someone's using that spacing token to do something wild
and they could be, you laugh, but I've seen some really creative usage
or like, who cares about the name, I just want the value.
So they just plug in any token that matches that value
and then we go to update the value later on and they're like, whoa, whoa, whoa,
why did it change?
I'm like, well, we're using the token.
Like, you use the token for the purpose, not the end value.
And what I think our next big assignment for tokens is figuring out that mapping
and seeing how they're being applied.
Because if we're going to be updating these design tokens to impact lots of folks,
we need to have a visual way to ensure that we're not just blowing people's components up
because one person's bottom padding is another person's bottom margin
and things, or a top margin even, and that's even worse.
That's something that we're hoping to accomplish through tooling.
And it's pretty exciting.
Like, I'd love to get to a place where, when, if we were going to update something,
there's a quick visual way to just double check and make sure everything works
across multiple repos, products, platforms.
And I think that'll be fantastic.
Yeah, on my own personal design tokens journey,
I first thought that that layer of indirection wasn't all that necessary.
But as time goes on and you look towards the future,
you really do realize that you need that second layer
that lives on top of your base token values.
Otherwise, your reds aren't going to be red someday.
There's always an intersection here that I like to think about.
It's just basically this conceptual notion of codifying
the language that we use to talk about something.
So as you're describing that, like, you want to use a thing for its context,
not for its value.
So maybe your design tokens has, I'll go to a classic example,
like this notion of a primary color,
which is to be used on primary button or interaction.
And it's easy to know when to pull that in.
But it's one of those reinforcing things
when you're talking about not just what is the color,
but what is the function of a thing that is often a conversation
that can get lost between design and engineering,
especially if there's a big gap.
Because if you have this ivory tower design,
the same thing that happens with ivory tower architecture
is you get a design and you just implement it to what it looks like.
But semantically, the context is all gone and it's not really right.
Yeah, and even if you do have that kind of nice semantic layer,
like color background primary, color font primary,
I mean, this is actually just bringing up,
I was looking at it at pull request, like even last week,
where there was some iOS change that was setting the label color of a UI label,
and it was setting it to color border primary.
And I was just like, that's the text color
and you're setting it to color border primary.
I was like, yeah, but it's the same color.
It's like, but if we were to change that,
like, why don't you use color font primary?
I was like, oh, I guess I could use that and change it.
But it is still, even if you do have that layer,
it's still, I think, a mindset change
from implementing interfaces in a way of like,
okay, I need to make this, this color and this, this size
and that abstracting those decisions away.
I think it's still kind of a mind shift change
that a lot of people still need to make
and it will take some time to get there for sure.
Yeah, it's another place where our tools are definitely helping us.
Like the big selling point for me on Figma
is the ability to create a design system in Figma
and have all of your tokens easily consumable
while you're designing.
Because if a designer can still just go off
and pick whatever blue they want for their button,
like, there's still gonna be a lot of friction
between design and developer.
I think one of my favorite things,
like in Slack when people ask, hey,
I noticed this thing is green.
How do I make it pink?
And a lot of it is like, is framed as,
how do I just get this to match
instead of the question of, hey,
maybe this doesn't follow our system
and maybe this shouldn't be this different color.
And I think just an understanding of what,
what should be configurable
versus what is set by the system,
I think is not really explicit sometimes.
And with using tokens,
I think that could help
because you are defining what's available
and those choices versus just an open-ended style object
overwriting the style.
Yeah, it's systematizing all of the decisions.
Like, do you wanna change the button color
for all of the buttons across all of the platforms?
Do you want it, do you want the button to be configurable
so that you can override the button color in your page?
Like, what's the context there?
Or maybe do you wanna change the brand color
from blue to pink?
And that has other changes as well.
They'll change the link color,
they'll change other colors as well.
Like, what is it that you're trying to accomplish?
And what part of the system do you want to change
or have an effect on?
Design tokens doesn't necessarily just solve that,
but I think it brings the conversation up a little bit
so that it's easier to have those conversations at that level.
I wonder if the conceptual notion of a design system
as a thing is still trying to ultimately ramp up to this
like where it's just easier to do the right thing
to pick the right constraint.
Cause like, tokens by themselves
are relatively simple to implement,
but hard to use in all your products.
And then y'all are both saying
you can easily pick the wrong thing.
Like, there's nothing stopping you,
but if you go up a level of abstraction,
you say, now we're just gonna give you a primary button
instead of the primary color and it's token.
And there's less control that you have over that,
but it's like more together.
I'm just curious from the design perspective
and you're thinking about systems
and like the tools that you provide.
I don't know, how do you make the right call
on what constraints should be there
or what shouldn't be there?
That seems like a hard problem.
Yeah, it's a very hard problem.
There's no like right answer objectively
across the board for every company.
I think one of the things that I have tried to do
like within like my team and organization is,
I'll never say no to anything,
but I will frame it as you could go off
and build this new banner component.
It'll probably take you eight dev weeks
to build and consume and use.
Or you could use our current banner component,
which looks like this, sounds like slightly different,
which would take a week to build
or we can have the discussion
to change the banner component
so that it would affect all banners.
That would take two or three weeks.
And so it's not framing it as like,
like I don't wanna say anything is right or wrong,
but I want to give the all the options
that are available.
And then hopefully if we've built the system
in a good way, the right way will come about.
Maybe it is the right decision for them
to build their own banner and spend eight weeks
because they have a very specific marketing need
or something.
Maybe the right decision isn't to do that,
but it's not.
I don't wanna make that decision for any team.
So I'm only there to help
and to help understand the options and constraints.
I really like that banner example
because it reminds me of something
that we worked on,
I've had into it and it goes back to
how composable are your components
and how customizable.
What level of chaos and destruction
is your tolerance level?
Honestly, when we're making these decisions
because you can definitely put in a lot of constraints.
And some of it has to do with
how strict is the design to dev connection.
Some of that I've seen before
where a design has two sizes for a component.
So does that mean a dev can put any size?
Is it constrained to those two sizes?
And I see a lot of that.
It's funny, different teams of different philosophies
on how strict to make it.
And then you have some folks like me,
I'm like, let's just let them have whatever, it's fine.
Make everything a child, it's okay.
That's what context is for.
And understanding everyone's philosophy on that
really helps take the edge off of making these decisions
because if you understand,
okay, this person really wants to make sure
that nothing breaks.
Okay, this person wants to make sure
that developers have flexibility.
And it's interesting to see all those opinions
come together to form essentially your component API.
And I've found, we're actually in the process now
of really documenting those decisions
and showing why we came to the decisions we make
so that as a prior developer,
they may not realize all the implications.
And if they see that context,
it's suddenly not, oh, why did they do it this way?
Don't they know that they could have made this a prop
instead of a named expert or things like that?
And what's interesting is when you document it,
there's that empathy.
It's, oh, they did think of that.
Oh, I see why they went in this direction.
So you can actually have a constructive conversation
instead of coming in with your own kind of,
you know, I had my own company would did this way,
so we should do it this other way.
And so I love just documentation.
I love, I'm a sucker for it.
I love MDX.
Just being able to write out my thoughts
as crazy as they can be and just get,
just get those thoughts out there.
Cause even if they're wrong,
I wanna be able to at least talk about it.
Cause I just, I love being able to explore
all these different solutions together
and coming up with something
where everyone feels like their voice is heard.
I've learned a lot.
I know Andrew taught me a lot about the values of tree shaking.
I think every conversation I have,
at least one tree is shaken.
And yeah, I love the ability to think through customization
and constraints, I think is really a cool topic.
I think that really ties back to your idea
of shame driven development.
It's like put the PR up, let me get the comments,
tell me what I'm doing wrong.
Like that helps you grow as a developer immensely.
Or you just cry.
I hope it's not shame.
Yeah, not real shame, just like helpful encouragement.
Okay Kelly.
So as a person central to the design systems effort
into it, what are some of the tools
that you and your team have helped build out
and deliver to help consuming design tokens
as cool as the problem they solve?
Yeah, so when we were first creating design tokens
and this whole design data system,
it was all JSON.
And we tried having designers get all set up
and clone the repo and pull it down
and run yarn and yarn build.
It didn't work.
I think I scared some of them off
and then some of them were just,
they were like, I'm interested, but maybe later.
And so that didn't work.
So I'm like, okay, well, we tried that.
What else we got?
So we already used Storybook for our component demos.
And so our designers, they love Storybook
and I saw, okay, well, if they like Storybook,
then we could maybe leverage that
to display our design tokens.
And so we created our own token Storybook
and a lot of thought went into
what's the best way to display it?
What do people need to know and see
and what can we leverage from our existing plugins
that we've already built
that displays our customizations?
So we built a custom Storybook.
Users can swap the product.
They can swap dark mode, light mode.
They can see those values, they can copy and paste.
One of our limitations currently
is that only the formats only show up in JavaScript.
And we wanna be able to show the variable names
and the other platforms
because on Android, you have XML
and it's like with underscores
and then you have other formats.
So that's where we wanna get to,
but I'm a Storybook fan girl.
I really like the way that you can use the add-ons
to just make it work for your use case.
And in addition to Storybook,
we also have this awesome VS Code extension
that Andrew wrote.
And it's amazing because in VS Code,
you can see a preview,
a visual preview of the token data.
So as you're filling out,
you're doing your CSS
and you're like, hey, I wanna use a spatial value.
So you just start typing in
and then you see all the spacings.
It's amazing.
There's light mode, dark mode values for hex values.
It's really cool.
And when I show people this,
they're just like, I'm excited about design tokens.
And so it's been a great learning tool
to show people that it's not just
that we have these design tokens.
It's like we're getting people excited
about using them in their day to day.
So thank you, Andrew.
I wasn't a leading question at all.
It's funny, you mentioned designers
not wanting to learn JSON stuff like that.
I remember when I was first showing designers
in my organization, I was like,
oh, here's a JSON file, some colors,
and here's what happens if you add something.
And then designers, I don't wanna learn JSON.
I don't know what that means.
I don't wanna do that.
I was like, oh, okay, that's cool.
And then so yeah, so I think design tokens,
it's really integration.


So I think it's a really important

that I think make it click for people.
So on the dev side,
the integration's into Android and iOS and web,
but also integrations into VS Code
or Storybook where you can see where that data
and where those decisions come out
I think is where it starts to really click for people
and get people really excited about design tokens.
Yeah, we got surprisingly far
on our teaching designers get journey.
Like people were actually making pull requests,
but then there was a merge conflict
and it all came crumbling now.
Merge conflicts are hard.
Yeah.
They are.
And I didn't wanna teach a designer how to resolve one.
Yeah.
Yeah, but now there's like a button that GitHub added
that lets you rebase, which is pretty neat.
Mess it up right on the web.
Yeah.
Make it easy for everybody.
Yeah.
Back earlier in my career,
I helped a team design a theme system at the time.
This is like before I had the conceptual understanding
and like design system,
maybe 2015, 2016.
And we build out this really complex workflow
and SaaS where it was like a bunch of nested SaaS objects
with like theme values and everything.
So the conceptual model works the same,
but I have so much regret for what I did
to those poor, poor designers.
Cause they ended up working in these like theme files
and it was not great and I am so sorry.
Anybody's out there listening to this?
I'm so sorry.
Kelly, when I was leaving into it,
I heard whispers of a Figma plugin
for the design tokens.
Has that gone anywhere?
Yes, we hired.
So I'm a SNUREX engineer
and we have a team of UX engineers.
We have two folks that joined us
and so one of them is focusing on Figma plugins
and part of that is a plugin related to design data.
So that's, it's been really interesting to see how
the different ways that we format our tokens
can manifest its way into Figma.
And a lot of that,
it's not just apply the token as a style.
That's just the first hurdle.
The bigger hurdle is understanding how designers are working,
whether it's a system designer or product designer.
Are they breaking apart the components?
How do they work with variants?
Are they using the primitive token
or are they using the semantic token
or are they using the component token?
So there are lots of,
there's a lot of tiers of knowledge
to obtain when you're working with tokens.
Right now we're just trying to get like a baseline understanding
of how people want to use them.
So we're doing interviews
and figuring out what's,
what the best workflow is for them
so that that will drive how the plugin UI works together
because even though you can do something,
knowing how it's actually going to be used
can maybe reduce some of the scope even
for some of the things we have planned,
at least for an MVP.
Nice, excited to see where that goes.
So I think that about wraps it up for the questions
and it's time to move on to tool tips.
So one big problem
that I encountered with my max native screenshot abilities
is that it shows it on screen for like 10 seconds
and usually I can be quick enough to grab that screenshot
and then post it to wherever
I'm going to post it in that 10 seconds.
But a lot of the time it'll just go away
and it's not the best user experience.
I'm really lazy, I'll just go back and re-screenshot the thing
cause I don't wanna go find wherever it put it on my system.
What clean shot is,
is a whole bunch of different tools
that make your screenshots feel a lot nicer.
So like for instance, when you take a screenshot,
it'll pin that screenshot to the edge of your screen
and it'll just stay there forever
until you dismiss it or choose to do something with it.
So now I can take a screenshot,
go type out my pull request description
and then add the image without any fumbling around
or trying to get the timing right.
Also has a bunch of other really cool little tiny features
like you can pin a screenshot on the screen
and it'll be above all your windows.
But it has definitely improved my life.
It's a paid app,
but I've gained a lot of value out of it
so I do highly recommend it.
Nice, nice, yeah, I'll go next.
So my tool tip for this week
or the first one is this site called Listen Notes.
It's a search engine for podcasts.
So if you wanna find anything,
if it's mentioned in the podcast text,
if it's in the title, if it's a person,
whatever, this is a great way to search
across all these index podcasts
and find a particular episode
that's talking about a very particular thing.
It's pretty amazing.
I was looking for some very niche elixir stuff
and I was able to find a bunch of different episodes
across a bunch of different podcasts
that had that exact topic.
C'est cool.
Oh, that seems like a super useful tool.
Like I could see students really benefiting from this,
like being able to search across all that data
that probably previously wasn't searchable.
Yeah, it's really awesome.
We're on there too.
Oh shit.
What a thunk?
So Kelly, I think this one's yours.
React flow.
Yes, I love React flow.
I don't really understand how it works.
It's just magical.
Seeing all the sliders and like is updating things
and you can put in all kinds of data.
Like the examples, the customizations are super cool.
And you can pretty much customize it the way
like for it to be however you wanna use it.
And so I thought this was a really great way eventually
to show how data flows through like a pipeline
or a repo and just get a sense of the complexities
around all these different data sources.
That's funny that you brought this one up
cause Adam was on last week
and he showed it off his own React graphing library
that had lots of the same features.
That's funny.
I think it was a different one though.
That's funny.
Well, we both work on very similar projects.
So there's a lot of overlap.
But it's like, hey, did you check this tool out?
And how can we use it for our projects?
We keep saying that we should just call it JSONRS
because that's what we're doing.
That's hilarious.
Yeah, it'd be interesting to see how the design tokens
look like, visualize like this.
It's a very pretty way to visualize it.
I can see all the kind of dependencies
and references and aliases and stuff like that
showing in a graph interface.
So next up, it looks like we have repel it.
Yeah, so this one's mine.
So part of my day,
I'll go and answer people's questions
about style dictionary.
And a lot of times I'll want to make a code example for them.
Like, how do I do this very specific thing?
And there are multiple ways to do it,
but here's a way I would do it.
And I never really found a great way
to write that code and post it for the person.
I've written gist sometimes,
but you can't really execute them,
and it's very static.
So I've done that and be like,
this code probably works.
I didn't test it, but something around there.
I can create a new GitHub repository.
That seems a bit heavy-handed
for just building a quick example.
Also similarly, you'd still need to pull it down
and run it and stuff like that.
And one of the things with style dictionary,
it's generating files.
Et pour l'exemple,
les gens veulent voir les files que c'est généré.
Donc beaucoup d'édits online,
comme code pen ou code sandbox,
peuvent générer des files
dans un script en NPM.
Les gens peuvent, et même si ils peuvent,
ne le montrent pas dans le file explorer.
Et j'ai demandé une question
sur un site de design technologique
sur Amazon.
Et j'ai posé une question,
je dois pouvoir faire ceci
et quelqu'un m'a dit
que je peux faire ça.
Vous pouvez faire un code en NPM
ou des scripts en BAS
comme les commandes CLI.
Et ils peuvent générer les files
et les montrer dans le file explorer.
Et vous pouvez les voir.
C'est la seule ligne de l'IDE
que j'ai trouvé,
qui permet de se faire.
Je n'ai pas vraiment été très profond
dans cette question.
Je me suis dit que c'est exactement ce que je dois
pour pouvoir faire ce demo 20 line
pour quelqu'un que j'ai été
spending 6 heures
parce que j'ai fait
6 différentes idées online.
J'ai été très excité
de voir ceci.
Oui, ça semble être très utile
pour vous,
car il y a beaucoup de differentes
ways de gérer un JavaScript
dans un environnement fidèle
sur le web.

d'autres types de codes,
pas beaucoup.
Oui,
les gens sont très proches
pour les phren et les développements.
Donc, vous pouvez construire
un web page en quelque façon.
Vous pouvez le faire super facilement,
mais si vous faites un CLI
ou un tool de construction
ou quelque chose qui génère
quelque chose qui n'est pas
une application de web,
vous êtes de l'exception
d'exception si vous utilisez le replete.
Évidemment,
c'est cool.
Oui,
c'est vraiment incroyable
de voir les features d'ad.
Et je vois que le fondateur
s'adresse à des enfants
en Indie
qui ne vont pas à l'école
parce qu'ils ont trop de fun
sur le replete.
C'est juste trop facile
de code
qu'ils ne veulent pas
aller à l'école n'importe quoi.
C'est génial.
Oui,
et c'est juste que
les outils qu'ils ont
pour commencer
avec une repository GitHub
et pour commencer un projet
et des trucs forcants,
je n'ai pas encore été
très profond à l'intérieur,
mais tous les outils
sont, je pense,
un grand
platform d'id online,
pour sûr.
C'est vraiment bon
pour les parents,
si vous êtes dans ce cas.
C'est bon pour la教ation.
Ma frère et mes frères
ont appris à apprendre
le C++
et j'ai aidé à apprendre
le replete.
Wow,
c'est génial.
C'est vraiment cool.
Vous pouvez juste être
comme, oh, vous avez un bug,
vous envoyez un lien,
je vais voir
ce que je peux
vous faire en sorte que
oui,
il y a un sort de
subjecte niche
que j'ai été
en train de
beaucoup ces jours.
Et ça commence
avec cette notion
de construire des applications
qui sont en ligne
en première,
donc en première local.
C'est un très difficile
chose à faire,
parce que si
c'est en première local
et que vous faites un change
et que quelqu'un
fait un change
en quelque part.
Vous devez savoir
comment résolver ça.
Et c'est pourquoi
le GIT est génial
parce que ça nous aide
à beaucoup de ces choses,
mais si vous êtes
construit en software
que vous n'avez pas besoin
d'avoir de la compétition
d'améliorer le conflit
et que vous devez
faire ce que vous devez faire
pour eux,
c'est difficile.
C'est un problème super
de notre
problème.
L'une des
les moyens
de se résolver
c'est qu'il y a un
structure spécifique
appelée CRDT.
C'est un...
Je ne sais pas
ce qu'ils sont
pour
conflire
quelque chose
de la carte
ou tout.
En tout cas,
oui,
conflit
libre
replicé de carte
il y a un grand.
Il y a
cette libraire
qui a été
développée
par
des folk
à
cette
lab de recherche
appelée
Inca Switch
qui, je pense,
que j'ai mentionné
précédemment
dans un autre épisode.
Mais
ça
vous aide
les CRDT
et vous aide
à
vous donner
votre frameworks
pour construire
les applications
qui sont
locales.
C'est
que
plusieurs gens
peuvent
faire des changements
à une fois
ou vous pouvez
avoir
des
changements
synchronisés.
C'est un
très, très
intéressant
de la libraire.
Il y a beaucoup
de très
bones
recherches
derrière ça,
si vous êtes
intéressés
dans cette chose
et en essayant
de figure
de comment
je vous recommande
de le voir.
Ouais,
c'est un problème
d'ingénieurs
que
les CRDT
sont en train de
se solider
pour

collaboratifs
et
l'amount
de
pensée
qui doit
se passer
est
incroyable
parce que
vous ne voulez pas
que les gens
résolvent
des conflits
sur les files de vidéo
dans notre éditeur
comme
il faut
venir
avec quelque chose
mieux que
ça.
Oh
Kelly
a réglé
ma dernière
je vais
faire
cette
Non, vous pouvez
vous...
Oh non, vous pouvez le faire.
Je ne l'ai pas
réglé
assez.
Vous êtes
l'expert de la réunion.
Ouais,
c'est
domevents.dev
et je suis un
sucre
pour
les tools d'éducation.
Quand je
1er
j'ai vu ça,
j'étais comme
c'est
une page
vraiment
fun.
Les couleurs sont vraiment
vibrantes.
Et
j'ai commencé
à cliquer
autour
et
quelqu'un
qui
n'a pas
de

de
pour
de
de


de
de
de


de
de
de
de
...

de
...
...
l'information sur ce qu'il y a et ce qu'il veut.
Il vous aide aussi de la terminology.
C'est un truc qui est fun de tinker avec,
apprendre un peu plus sur ce qui se passe derrière les scènes
parce que les tools peuvent être un peu scènes.
Ça fait un peu plus explicit et visuel.
C'est un truc cool qui me rappelle
qu'est-ce que le programme de l'enfant et le langage scratch ?
C'est comme si le visual du programme m'a fait un peu de remise
pour que l'on puisse graphiquement construire.
Qu'est-ce qui se passe quand ce programme fait ça ?
Ça a fait un truc cool.
Ils ont fait un bon travail de faire ça assez proche.
Je pense que j'ai vu des tweets par le développeur
que c'est en fait scripté après-effects.
En tout cas.
On voit que les après-effects sur cette page sont scriptés.
C'est fou.
Mais vous pouvez évidemment faire le script avec un javascript assez facile.
Donc, faites-le dans votre système de design.
On a une dernière et c'est des foods japonaises.
Si quelqu'un ne connait pas Nato,
il y a des soie-biennes fermentées au-dessus de la rèche.
Ça ressemble à ce que le snot.
Oui, je ne sais pas le fruit.
Mais c'est un libraire intéressant.
C'est similaire à ce que Kelly a dit en réc.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.

C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.



C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.


C'est un truc de la rèche.
C'est un truc de la rèche.







C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.


C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
C'est un truc de la rèche.
Merci d'avoir regardé la vidéo
et d'avoir regardé la vidéo sur Youtube.
Merci et bonjour.
Bye.