Apply variables - Convert applied styles to variables

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

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

50% 1

Already have your variables set up and want to bulk apply them to your work? You can swap styles with variables or apply variables that match raw number values to elements in any file with access to your variables collections!
🧩 Try the Apply variables plugin for Figma: www.figma.com/community/plugi...
▶️ Playground File:
www.figma.com/community/file/...
👀 Video Topics
00:00 - Intro to Apply Variables Plugin
00:33 - Swap styles how it works
00:48 - Apply matching variables how it works
00:59 - Instructions walkthrough
01:02 - 1 Access to variables
01:18 - 2 Select elements
01:26 - 3 Run plugin
01:35 - 4 Select Library
01:41 - 5 Select collection
01:47 - 6 Where to apply variables
01:57 - How to install plugin
02:11 - Run the plugin
02:45 - Variables structure walkthrough
03:08 - Swap styles to variables explained
03:26 - Demo swap styles via plugin
04:19 - Apply matching number variables (autofix)
06:07 - Component number value walkthrough
06:57 - Command line plug-in notes
07:16 - Demo apply matching variables via plugin
07:52 - Check which variables applied
08:17 - Duplicate variable logic
09:11 - Demo non-local variable libraries
09:36 - Shared library access
09:53 - Variables mode switching
09:54 - Multi-brand swap styles
--------------
💡 Install Tokens Studio for Figma: www.figma.com/community/plugi...)
🚀 Subscribe to our channel: / @tokensstudio
💬 Join our Slack: tokens.studio/slack
📄 Docs at: docs.tokens.studio/
ℹ️ More information on www.tokens.studio

Наука

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

12 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@shannamiddleton1944 16 дней назад

nice!

@ux-mpaiva 10 месяцев назад

Loved this plug-in! Thanks Tokens Studio ❤

@_hraymond 10 месяцев назад

Great video Sam! For the selection issue you were encountering, if you hold down the CMD key on a Mac or Ctrl Key on a PC, and then click and drag, you'll be able to select more easily without moving the position of the parent container (a Section in this instance). Also, once you've run the plugin in the Quick Actions menu you can press Tab to edit your previous commands so you don't have to start from scratch. Hope that helps!

@SamIam_Designs 10 месяцев назад

Whoa! THANK YOU SO MUCH! 🫶 Sometimes I just struggle through things not working properly because I have a bit of a reputation of being an "edgecase queen". The moving of the frames is so annoying to me so this is going to save me a ton of headache. Adding these to my Airtable of protips. 🙏 Thanks again for taking the time to help me out! You're a gem. 💎

@_hraymond 10 месяцев назад

Anytime! Let me know if anything else comes up like that, there’s a fair few hidden things we should try and do a better job of exposing so welcome to feedback.

@mash312 10 месяцев назад

This is amazing, thank you 🙌

@megaroeny 10 месяцев назад

Thanks Sam! Fantastic

@mkdvln 10 месяцев назад

This is awesome! After you replace the style with brand B variables, could you for instance change it to a brand C collection in another remote library? Or once the swap to variable is done once that’s it since there is no more style?

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

Oooh thats a great question. The way we implemented the plugin at launch as you see it in the video it would not be able to do that. However, Jan has been working hard on the next iteration which is about to be published which would allow you to do this! Sneak peak for you "Swap variables by name: We now support variable to variable swaps. So far this only works on color variables, but you can effectively swap out one collection with another where the names of variables match.This also brings an improvement for those that want to fix broken references. If you had variables that appear as broken, their name can still be detected and used to swap with another collection's variables with the same name" I'll have a new and improved video next week showing this. - 🫶 SamIam

@AlexDsage 10 месяцев назад

Like swap instance but for Variables. I love this❤

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

I tried same example, I got 2 issues, 1. Width is not matching. 2. There is no mode selection (light - dark) for non-local

@danbutterworth4278 9 месяцев назад

Great video Sam, can I ask a question about How it works with Tokens Studio. I'm noticing if I have token sets set to Source (like my component set) which reference my Semantic set, will it apply the Semantic variable it references? I'm having some trouble in this area, it seems to only work for numeric values at the moment, my color values all look like hex values (even though they are still linked to tokens)

@user-ho6uv1xq2c 8 месяцев назад

Same issue... And I also tried to contact them but nothing happened

@user-ho6uv1xq2c 8 месяцев назад

Fouln the answer... it's in the paid version. You have a dropdown menu with tools and varaibles is disabled. Do you use the free version?

@narchie 10 месяцев назад

❤This is awesome! Can you also swap local variables with a remote collection of variables?

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

At the moment this is not possible yet, but we will add a feature request for this, since we do see the added value of this

@narchie 10 месяцев назад

@@TokensStudio Yeah! Looking forward to it.😊Thank you for your fantastic work!

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

I'm going to ask a really dumb question probably, Why use variables over styles? I've googled it and nothing really comes up. They seem to the same to me but clearly they aren't if this is an option. I'm a recent adobe Xd to Figma convert and some of these things seem very odd to me, I'm trying to learn the best practices but it isn't always obvious.

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

This is a good question actually! If you are comfortable and happy with styles, it might not be the best idea to move to variables. There are some variable types that there aren't styles for, which allow for semantic names for reusable values which can help with consistency, like border radius, size and spacing for example. - Sam

@Belarusdds 9 месяцев назад

Pls, fix bug: Auto fix change "Auto" space to random token. Also don't change 0 to 0 token

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

thanks for reporting! Can you give some more context about the issue? You can leave that information in a report via the link below: t.ly/hTJBR Afterwards we can forward the issue to our development team :)