Get Started: Figma Variables in 3 Minutes
Вставка
- Опубліковано 9 лип 2024
- In this tutorial we cover the basics of Figma Variables in just 3 minutes.
📕 Show Notes 📕
➡️ Figma File: www.figma.com/file/Nyoktvj4BB...
➡️ Master Figma With This Playlist: • Crash Course: Master F...
➡️ Subscribe To The Channel: / @timgabe
Timecodes
0:00 - Introduction
0:03 - Explanation of Figma Variables
0:10 - Accessing the Variables Menu
0:14 - Design Tab and Variables Menu Navigation
0:26 - Explanation of Collections
0:31 - Creating a Collection and Variables
0:42 - Defining Base Variables (Primitives)
0:51 - Usage of Base Colors and Sizes
0:57 - Linking Variables to the Base Layer
1:05 - Creation of Color Themes
1:18 - Creating an Alias for Variables
1:26 - Adding a Dark Mode
1:36 - Limitation: Modes Availability on Figma Pro Plan
1:45 - Creating a Collection for Sizes
1:59 - Explanation of Language Variables
2:09 - Working with English and Swedish Modes
2:21 - Single vs Multiple Collections Usage
2:27 - Application of Variables in Designs
2:29 - Example with a Card Layout
2:38 - Linking Colors in Designs
2:47 - Theme Swapping in Designs
2:50 - Best Practices for Linking Colors
3:01 - Demonstration of Theme Swapping
3:04 - Editing Colors in Primitives Collection
3:12 - Language Swapping in Text Elements
3:18 - Linking to the Languages Collection
3:20 - Swapping Padding, Corner Radius, and Spacing
3:28 - Linking Spacing Variables
#figma #figmatutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
Finally!
Been waiting for a pro to explain this to me in simple terms.
I'll be tuning in!
5 months later, here i am answering your comment, my brother!! thanks for supporting 🤩
I was waiting for your videos. Because it's always easy to understand. Thank you, Tim As always a great tutorial ❤
thank you for the nice comment, sayekat! 💜
Still figuring out what “primitives” mean. Well done Tim
thank you for the comment, ikenna! and here i am, replying 5 months later 😅 catching up on youtube comments, finally...
@@TimGabe it’s fine, everyone is busy with life😄
Hey, Tim! I was wandered around UA-cam searching for some kind of quick start in Figma. The main interface is clear as well as many other obvious details. And I tried a number of 50 - 120 min various videos until I came across your video about constraints, thus I opened your Crash course. All divided into the topic that I actually was searching for. No water, can get straight to what you currently work on in design project. I only watched a couple from the playlist, but already
much appreciated! 👍
that's amazing to hear, jay!! thank you for sharing! 🙏
That's cool, thank you!
thank you!!
Hi! Thanks for this tutorial. I was wondering if you have a more detailed (for more than 3 minutes...) tutorial about Figma properties? Thanks again!!
i don't... yet! hoping to cover this one more when i get back to figma tutorials in 2024
Hello, I just discover your channel, and it is really awesome !! You are in my opinion one of the best Figma teachers on UA-cam !! One question, where do you find all the great images you use, do you generate them with Midjourney? If you plan to do a Figma course one day, I want to be the first to enroll ! Until the next one .... have a great day !
really appreciate this kind comment, my friend! i'm currently creating a framer course, but maybe a figma course could be something for the future.
regarding the images: yes, midjourney! 😃
Thank you!🎉
thank you!! 😃
I’ve been waiting for you to drop this video. 🤲🏽😅
that's great man, hope it didn't disappoint! 🙏
Thank you for the video! It will be nice if you make another video with creating a landing page or e-com store to show us this new Figma feature in actual designing process
maybe something for me to look into once i'm back with figma tutorials!
I was waiting for your video Tim! I'm still struggling to understand how to use this or if is useful at all for me... it looks too complicated for my brain!
variables are indeed complicated.... thanks for the comment, andres!
It's great video. Would you please make a bigger video and explain variables in depth.
i've paused making figma tutorials, but as soon as i'm back i'm sure i'll be covering this!
Can this functionally replace, in a way, the “Styleguide” page?
it depends on what you have on your styleguide page, but certain parts of it, yes!!
New to Framer, is this the latest on variables, Tim? Thanks
this is figma! 🙏 however, if you meant to write figma, i do believe 95%+ of this still applies although they've released some new things recently!
It looks to me that this feature is just making things more complicated. I would love to see this in a real project, in action, where you have hundreds of frames and versions.
i think for bigger teams and projects it's super helpful, but definitely not as useful for smaller things
Can you talk more about the Mix Collection you talk on 2:17 - 2:26 ?
maybe something for a future video!!
This seems time consuming. Can you show how Variables can benefit (or detract from) Design System creation in Figma, and its integration with Storybook or other front-end framework? How does it affect the CSS code in Figma?
this might be something for a future, more in-depth tutorial!
hi tim , can a company hire me only as a UI designer?
definitely!! although it's more common that they hire someone with a diverse skillset (ux + ui)
Don't bother to upgrade. I'm on Pro plan and the new features rarely work. Figma is still the pinnacle of buggy.
that sucks to hear!
Way too complicated and unnecessary imo. You'll waste as much if not more time on this than when doing it directly during development..
if you have a huge project, then it can be very beneficial... for smaller projects, not so much probably!
Nah, it is was bit fast. You need to bit slow to make us understand properly.
roger that, thanks for the feedback!!