Troubleshoot Figma Variables Created/Synced to Design Tokens Using Tokens Studio | Variables Series

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

Просмотров 4,2 тыс.

50% 1

In this video SamIam_Designs walks you through theme switching, applying tokens as variables or styles, and shows the differences between applying tokens, variables and styles.
You will learn how to troubleshoot common issues creating and applying variables that are synced to your design tokens using the Tokens Studio plugin for Figma.
-------------------------------------
💡 Install on Figma: www.figma.com/community/plugi...)
💬 Join our Slack: tokens.studio/slack
🚀 Subscribe to our channel: @TokensStudio
📄 Docs at: docs.tokens.studio
ℹ️ More information on www.tokens.studio
-------------------------------------
The Variables series features step-by-step instructions on creating and maintaining Variables in Figma using the Tokens Studio plugin.
00:00 Topics overview
00:43 Playground file walkthrough
01:12 Inspect tokens
01:36 Variables requirements
02:09 Create variables menu issues
02:23 Styles not creating properly
02:46 Error Figma plan 1 mode
02:51 Create styles
03:11 Apply variables via Figma
03:18 Styles vs variables in Figma at a glance
04:04 Apply variables via Tokens Studio
04:30 Apply styles via Tokens Studio
05:04 Apply tokens as variables or styles
06:17 Theme switching in Tokens Studio
07:05 Theme switching variables in Figma
07:35 Theme switching styles vs variables
08:16 Apply tokens vs styles or variables
08:27 Delete variables & styles
08:40 Detaching variables after deleting
09:04 Broken variables and styles
09:46 Tokens applied with plug-in remain intact
10:37 Recreate variables new theme colors
11:21 Auto-apply new variables
11:55 Flexible tokens vs fragile variables
12:27 Flip tokens styles or variables
12:54 Styles theme groups off
13:45 Variables theme groups on
14:03 Theme switching plug-in vs Figma
14:55 Plug-in inspect icons

Наука

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

30 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

from this video I didn't really understand the added value of exporting your tokens as variables/styles. Doesn't this show that it's better to just keep everything in Tokens Studio?

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

Thats a personal choice depending on the needs of you, your project and your team. If you want other people to start to use variables or styles that are connected to your tokens, then it makes a lot of sense. If not, then it might not be worth the extra effort to do so. - Sam

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

We love the Tokens Studio plugin, but it needs about 10 minutes to start. Each refresh (or editing) is really painful. We have a multi-brand theme. What are we doing wrong? It is also confusing to have an option to create variables, but you are showing us that there is no additional value in that (just more work, actually). Are you suggesting that having ONE theme and multiple sets is better? Or multiple themes with fewer sets?

@TokensStudio 4 месяца назад

For the performance issues, joining our slack community so we can properly troubleshoot is the best way we can support you. Some folks want to use variables that are managed by their tokens, so we are showing how to accomplish that. If your team is already using tokens, its not necessary you use variables, indeed, it might be extra work. (: If you want to use mode switching in variables, you need to have multiple sets created. - Sam

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

Nice video. But that pointer got me :)

@user-xp7mr8zm7i 5 месяцев назад

I cannot find the Variables Playground file mentioned in this video. Can you provide a link?

@TokensStudio 4 месяца назад

We are doing some updates to variables which are being released soon so you can expect updated community files and docs for the big release. - Sam

@kindnessorimolade641 5 месяцев назад

It seems if you don't have the paid version of figma, the themes eg light and dark mode created with the plugins wouldn't show right

@TokensStudio 4 месяца назад

The plugin's feature or not dependent on you Figma plan. The only feature that is however dependent on your Figma plan is the amount of variable modes you can create.

@kindnessorimolade641 5 месяцев назад

Is there a video where you create the tokens from scratch to better understand this

@TokensStudio 4 месяца назад

Hey! You can have a look at Eric's quickstart video wherein he showcases a detailed token setup: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7utmznIOWLU.html&pp=ygURdG9rZW5zIHF1aWNrc3RhcnQ%3D. - Keegan

@bw.bagaswibowo 5 месяцев назад

Is create variabel is disable now, i cant acess

@TokensStudio 4 месяца назад

Hey! You need to be a Pro user to gain access to the create variables feature. Once a pro user, you also need to setup themes to be able to create variables. You can go through our docs page which briefly describes this process: docs.tokens.studio/variables/creating-variables . - Keegan