Shadowing Practice: Tokens vs Variables in Tokens Studio for Figma | Variables Series - Learn English Speaking with Video
בחר מצב תרגול
כל מצב פותח חדר תרגול במסך מלא.
98 משפטים
אם המשפטים קצרים או ארוכים מדי, לחץ על ערוך כדי להתאים אותם.
1
Hi designers and tokens peeps!
2
Sam A.M here on behalf of the Token Studio team to talk about variables.
3
In this video, you'll learn about the differences between Figma's variables and design tokens, as well as the features in the Token Studio plugin for Figma
4
that allow you to create variables that are synced to design tokens.
5
This is the first video in a series where I'll walk you through all things variables
6
in Token Studio step by step using a community file I've created for you so you can follow along.
7
But before we get into the hands-on stuff, I want to take a step back
8
and think about what is a design token and how is that different from a variable?
9
Well, it depends on who you ask.
10
So if I give you a second to think about it, what do you think a design token is?
11
Me personally, I define a design token as a design decision.
12
That's a pretty simple response.
13
If you want to go deeper, I could say it has a human readable name and it follows a specific format and we use it in code.
14
But I was really curious, what does the community think?
15
So I sent out a little survey and I asked them, what is a design token?
16
If someone new on your team asked you, what would you say?
17
Well most of us agree that a design decision is a part of what a design token is.
18
A lot of people also mentioned this concept of design to code, or collaboration between development and design, which is pretty awesome.
19
And a small percentage of people mentioned variable, which is not exactly right.
20
But we're going to go over that in a sec.
21
It looks like we're all kind of on the same page about what a design token means, and that it has something to do with a design decision, but the rest of it is a little bit fuzzy.
22
And I think that's understandable given how new of a concept design tokens are.
23
You may be thinking, how new is it?
24
The term design tokens originated at Salesforce.
25
If you head to the Token Studio website under Getting Started, we've got more details on the design tokens origin story that you can check out.
26
In 2019, a group of people got together to form the Design Tokens Community Group.
27
They've created a draft of what they propose the web standards for Design Tokens should be.
28
They host these specifications on the W3C Community and Business Groups pages.
29
So, when you hear us token nerds talking about the spec, or W3C, or WC3 because we mix it up all the time,
30
we're talking about this document.
31
I'll drop the links to the most recent draft of the spec
32
and their Twitter page in the description below below in case you want to check that out.
33
But if reading a long technical document isn't your thing, don't worry, I got you.
34
So how does the W3C spec define a design token?
35
Design tokens are a methodology for expressing design decisions in a platform agnostic way so they can be shared across different disciplines, tools, and technologies.
36
They help establish a common vocabulary across organizations.
37
So I wasn't totally wrong when I said a design token is a design decision.
38
There's just some other things to consider as well.
39
And it turns out the community has a pretty solid understanding of what a design token is, which is awesome.
40
And now that we know what a design token is, we can look at variables from Figma.
41
So like I mentioned before, a variable variable is not a design token.
42
And actually, if you look at the Figma documentation for variables, they say a variable is a representation of a design token.
43
And here it says a variable is a way to create design tokens.
44
Over here it says a variable is a way to implement design tokens.
45
So to simplify this, I'm going to group these things together and say a variable is not a design token.
46
A variable is a representation of a design token.
47
Just like a style or even a design property can be a representation or an expression of a design token in Figma.
48
Alright, before we get our hands dirty and start working with tokens, I want to talk about the different names for the same things between variables in Figma and Token Studio.
49
Because the difference between collections and modes and themes and theme groups and theme switching and mode switching is all very confusing.
50
I don't know about you, but I must have called a variable a variant at least a million times.
51
We already know that a design token can be represented in Figma as a variable.
52
What you might not know is a design token is identified by its name.
53
So it makes sense that the name of a design token will match the name of its variable.
54
Now, there are some specifics about how you name your tokens so that they are grouped properly, which helps in organizing your tokens or variables.
55
And there are some specs on what can and cannot be included in a token's name, as well as a whole debatable conversation about how to name your tokens.
56
So I'll cover naming tokens and variables in a future video.
57
In Figma, variables live in collections, whereas in Token Studio, design tokens live in token sets which are grouped into themes.
58
So a theme group is actually the same thing as a collection.
59
And this is because, if you'll recall, that tokens are supposed to be platform agnostic and use a common language.
60
It means under the hood, design tokens live in JSON files.
61
The Token Studio plugin is essentially a no-code way to write a JSON file full of design tokens tokens
62
that can be transformed into any programming language using code.
63
In fact, you can edit your tokens via the JSON editor from within the Token Studio plugin
64
if you're faster at editing code.
65
I am not.
66
You can also sync your JSON files with code using one of our integrated sync providers.
67
We have design tokens living in token sets, which are grouped into themes.
68
And those theme groups will create collections of variables.
69
Now, what about modes for say, different brands?
70
In this example, I'm managing four different brands.
71
They all have a different brand color, but that's about the only thing that's different.
72
It's a pretty simple example.
73
So in Token Studio, I would create a token set for each brand.
74
They would have the same tokens with the same names, like brand color, primary default,
75
different values to reflect each brand's unique color.
76
When we create a theme group for brand colors, and we create different themes within that group, I'm going to create brand A as a theme, brand B as a theme,
77
brand C as a theme, and so on.
78
They will all live in the brand colors theme group.
79
We'll use the Token Studio plugin to create variable collections, and it will automatically use Figma's modes feature to allow for the variables with the same names,
80
which match the design tokens with the same name, to live in a collection with the same name as the brand colors theme group.
81
These are organized into modes.
82
The name of each mode matches the name of the theme.
83
So, token names match variable names.
84
Theme group names match collection names and the names of themes match modes in Figma.
85
It's important to remember that variables in Figma are still in beta.
86
They don't have variables to match every token type that exists.
87
In fact, there are many, many more types of tokens than there are variables.
88
I'll go through each variable type and their matching token types in their own videos.
89
So to recap, We learned that a design token expresses a design decision in a common language that is platform agnostic.
90
And a variable is not a design token.
91
A variable is a representation of a design token in Figma.
92
Design tokens follow the W3C spec
93
and you can use the Token Studio plugin to create variables that are synced to design tokens.
94
In Token Studio, design tokens live in token sets, which are a no-code version of a JSON file.
95
Tokens living in token sets are grouped into themes, and those theme groups can be used to create variable collections in Figma,
96
with modes that match the themes in Token Studio.
97
So, while a variable is not a design token, they do have a lot of similarities.
98
If you want to learn more about creating and syncing design tokens to variables, to variables, be sure to check out the other videos in the variables series.
הורד אפליקציה
כל מה שאתה צריך כדי לדבר בשטף
הגיית AIציון לכל משפט
תרגול IPAשלוט בכל צליל
אוצר מיליםבנה את מאגר המילים שלך
משחק אוצר מיליםלמד תוך כדי משחק
FOR YOU
המלץ על סרטון
C11
407 משפטים
Why AI Tokens are so Expensive - Computerphile
Daily ConversationUniversity StudentsWorking Adults
C11
393 משפטים
Know Before You Tell - The Three-Part Framework Every Communicator Needs
Daily ConversationUniversity StudentsWorking Adults
C11
254 משפטים
Figma Agent Skills | How to write skills you will actually use
Daily ConversationWorking Adults
B21
50 משפטים
Video
Daily ConversationUniversity StudentsWorking Adults
C17
110 משפטים
This is what LDS temple signs and tokens ACTUALLY mean
Daily ConversationWorking Adults
C11
293 משפטים
Is AI Killing Human Fashion Design? Who Will Shape the Future of Design? Fashion Tea #6
Daily ConversationUniversity StudentsWorking Adults
B22
188 משפטים
Dot Plots: How to Actually See What Your Users Are Doing
Daily ConversationWorking Adults
C13
84 משפטים
Crypto Coin vs Token (Differences + Examples)
Daily ConversationWorking Adults
C11
382 משפטים
Why trying to make the “best” choice can make you less happy
Daily ConversationUniversity StudentsWorking Adults
C11
64 משפטים
What Is Branding? 4 Minute Crash Course.
Daily ConversationUniversity StudentsWorking Adults
C11
74 משפטים
LangChain in 5 Minutes (Explained Clearly)
Daily ConversationUniversity StudentsWorking Adults
C12
112 משפטים
DFM And DFA Explained
Daily ConversationWorking Adults
אוצר מילים והערות הגייה לשיעור הזה
שיעור הדיבור הזה ברמה C1 מבוסס על הסרטון “Tokens vs Variables in Tokens Studio for Figma”. המילים שחוזרות הכי הרבה: token, design, variable, theme, Studio. בסרטון הזה יש 98 משפטים ו-1482 מילים לתרגול Shadowing. הדיבור נמשך 9:02. הדובר מדבר בקצב טבעי של כ-164 מילים בדקה, קרוב לשיחה יומיומית. רק 75% מהמילים נמצאות בין 3,000 המילים הנפוצות ביותר באנגלית, כך שאוצר המילים מאתגר.
אוצר מילים מרכזי בסרטון הזה
8 המילים המתקדמות ביותר בסרטון, עם ההגייה והמשמעות שלהן:
| מילה | הגייה | משמעות |
|---|---|---|
| token שם עצם | /ˈtoʊkən/ | אֲסִימוֹן, זִ׳יטוֹן |
| organize פועל | /ˈɔɹɡənaɪz/ | ארגן |
| spectacles שם עצם | /ˈspɛktəkl̩z/ | מִשְׁקָפַיִם \ משקפיים |
| similarity שם עצם | /ˌsɪm.ɪˈlæɹ.ɪ.ti/ | דִּמְיוֹן |
| confuse פועל | /kənˈfjuːz/ | בלבל |
| variant שם עצם | /ˈvæɹi.ənt/ | חלופה, הגוון |
| vocabulary שם עצם | /vəˈkæb.jə.lə.ɹi/ | אוֹצַר מִלִּים |
| transform פועל | /tɹænsˈfɔɹm/ | לשנות |
Phrasal verbs שתשמעו
| מילה | משמעות |
|---|---|
| check out פועל | בדק |
משפטים שכדאי לחזור עליהם
משפטים קצרים ושלמים מהסרטון שאפשר להשתמש בהם בשיחה יומיומית:
- If someone new on your team asked you, what would you say?
- You may be thinking, how new is it?
- In this example, I'm managing four different brands.
דקדוק בסרטון הזה
המבנים שהדובר משתמש בהם הכי הרבה, עם המילים המדויקות מהסרטון:
| מבנה | בסרטון |
|---|---|
| סביל (Passive voice) be + past participle — הדגש הוא על מה שקורה, לא על מי שעושה את הפעולה | are synced · can be shared · can be represented |
| משפטי זיקה (Relative clauses) who / which + clause — מידע נוסף על אדם או דבר | design, which is · variable, which is · sets which are |
| הווה מושלם (Present perfect) have/has + past participle — פעולה שקרתה בעבר ועדיין יש לה חשיבות או השפעה עכשיו | I've created · They've created |
הגייה ששווה לשים לב אליה
הדובר משתמש ב-22 קיצורים וצורות מקוצרות, כמו I'll, don't, I'm. אמרו אותם בצורה הקצרה, כפי שאתם שומעים אותם.
- הצלילים של “sh” ו-“zh”: speculation /ˌspɛk.jəˈleɪ.ʃən/, documentation /ˌdɑkjəmɛnˈteɪʃən/
- מילים ארוכות — שימו לב להטעמה: speculation /ˌspɛk.jəˈleɪ.ʃən/, debatable [dɪˈbeɪtəbəɫ], originate /əˈɹɪd͡ʒɪneɪt/, similarity /ˌsɪm.ɪˈlæɹ.ɪ.ti/, vocabulary /vəˈkæb.jə.lə.ɹi/
צלילים שדוברי עברית מתקשים בהם:
- /æ/ — פתוח יותר מה-“אֶ” העברית, לא כמו “a” ב-“cup”: similarity /ˌsɪm.ɪˈlæɹ.ɪ.ti/, variant /ˈvæɹi.ənt/, vocabulary /vəˈkæb.jə.lə.ɹi/, transform /tɹænsˈfɔɹm/
- /r/ — הלשון לא נוגעת בשום מקום, לא ה-“ר” הגרונית: organize /ˈɔɹɡənaɪz/, originate /əˈɹɪd͡ʒɪneɪt/, readable /ˈɹiː.də.bəl/, similarity /ˌsɪm.ɪˈlæɹ.ɪ.ti/, integrate /ˈɪn.tɪ.ɡɹeɪt/
- עיצור קולי בסוף מילה — /b/, /d/, /g/, /z/, /v/ בלי להפוך אותם לאטומים: organize /ˈɔɹɡənaɪz/, spectacles /ˈspɛktəkl̩z/, confuse /kənˈfjuːz/, propose /pɹəˈpəʊz/
איך לתרגל עם הסרטון הזה
- הקשיבו לכל הסרטון פעם אחת בלי לדבר, ורשמו את המילים שאתם לא מכירים.
- התחילו במהירות 0.75×, תרגלו Shadowing משפט אחר משפט, וחזרו למהירות רגילה כשזה מרגיש קל.
- הקליטו את עצמכם והשוו למקור, תוך תשומת לב למילים כמו token, organize, spectacles.
מהי טכניקת השאדואינג?
שאדואינג היא טכניקת למידת שפה מבוססת מדע שפותחה במקור להכשרת מתורגמנים מקצועיים ופופולרית על ידי הפוליגלוט ד"ר אלכסנדר ארגואלס. השיטה פשוטה אך עוצמתית: אתה מקשיב לאודיו באנגלית ילידית וחוזר עליו בקול רם מיד — כמו צל העוקב אחרי הדובר עם עיכוב של 1–2 שניות בלבד. בניגוד להאזנה פסיבית או תרגילי דקדוק, שאדואינג מכריח את המוח והשרירים בפה לעבד ולשחזר דפוסי דיבור אמיתיים בו זמנית. מחקרים מראים שזה משפר משמעותית את דיוק ההגייה, האינטונציה, הקצב, הדיבור המחובר, הבנת השמיעה ושטף הדיבור — מה שהופך אותו לאחת השיטות היעילות ביותר להכנה לIELTS Speaking ולתקשורת באנגלית בעולם האמיתי.