- 29
- 239 871
thejunboy
Australia
เข้าร่วมเมื่อ 29 ส.ค. 2021
Figma Tips ⚡ - Change variants in prototypes with variables
In 8 minutes, learn how to create an interaction that changes variants in your Figma prototypes.
By using string variables with values that match your component set variant names.
Time Stamps ⏱️
00:00 Introduction
00:08 Artboard walkthrough
01:29 Set up component sets
03:38 Set up string variable
04:52 Set up interactions
07:15 Prototype review
07:44 Like, comment, subscribe fam
Got a question about frames, figma, or the UX/UI industry?
Any suggestions for topics you would like me to cover?
Leave a comment below.
Support my work at:
paypal.me/thejunboy
#ui #userinterface #figma
By using string variables with values that match your component set variant names.
Time Stamps ⏱️
00:00 Introduction
00:08 Artboard walkthrough
01:29 Set up component sets
03:38 Set up string variable
04:52 Set up interactions
07:15 Prototype review
07:44 Like, comment, subscribe fam
Got a question about frames, figma, or the UX/UI industry?
Any suggestions for topics you would like me to cover?
Leave a comment below.
Support my work at:
paypal.me/thejunboy
#ui #userinterface #figma
มุมมอง: 12 718
วีดีโอ
Figma Tips ⚡ - Colour styles vs variables
มุมมอง 13Kปีที่แล้ว
Use colour variables as much as possible Learn about their differences in properties and use cases Time Stamps ⏱️ 00:00 Introduction 00:21 What are colour styles and variables? 00:53 Colour variable properties 01:38 Colour style properties 02:47 Benefit of variables - Alias 04:54 Benefit of variables - Prototyping 05:08 Benefit of variables - Variable modes 07:03 Limitation of variables 08:46 C...
Figma Variables Pt2 ⚡ - Checklist prototype with number variables using count
มุมมอง 2.6Kปีที่แล้ว
Unlock the power of number variables using a count for this checklist prototype 1️⃣ 17:57 Individual checkbox - Number & string variables 2️⃣ 31:24 'Select All' checkbox - Number & string variables watch the tl;dr version ⏩ th-cam.com/users/shorts5kDlTFmd7RI Key takeaways • String can be used to change text and change variants in other component sets • Ensure the variant value matches one varia...
Figma Variables Pt1 ⚡ - Login screen prototype with string and boolean variables
มุมมอง 18Kปีที่แล้ว
Follow this login screen build as we explore prototyping with string and boolean variables 1️⃣ 19:13 Error message - Colour, string and boolean variables 2️⃣ 23:58 Text fields - String variables 3️⃣ 36:01 Log on CTA - String variables watch the tl;dr version ⏩ th-cam.com/users/shortsrAigQ-yjYwk Key takeaways • String can be used to change text and change variants in other component sets • Ensur...
Figma Tips ⚡ - Build an auto layout chatbot
มุมมอง 2.2Kปีที่แล้ว
Follow this chatbot build as we explore auto layout including the two new features: 1️⃣ 21:56 Minimum and maximum dimensions 2️⃣ 25:12 Auto layout wrap watch the tl;dr version ⏩ th-cam.com/users/shortsxncAUbKnOyI Time Stamps ⏱️ 00:00 Showcase 00:15 Introduction 00:40 Exercise objectives 01:18 Exercise components 02:07 Exercise styles 03:19 Chatbot structure 08:31 Header design - absolute positi...
Figma Tips ⚡ - Building your own typescale
มุมมอง 661ปีที่แล้ว
Learn the tools to build your own typographic scale in Figma Time Stamps ⏱️ 00:00 Introduction 00:35 Why do you need a type scale? 03:33 Connecting type with musical scales 04:39 Google's type scale 07:08 Apple's type scale 09:12 Picking the right type scale 11:21 ⭐️ Building a type scale in Figma 18:09 Like, comment, subscribe fam Resources 📌 spencermortensen.com/articles/typographic-scale/ m3...
Figma Tips ⚡ - Sections to organise and prototype
มุมมอง 10Kปีที่แล้ว
Overloading your pages wireframes? Sections are the key to organising your Figma files Time Stamps ⏱️ 00:00 Introduction 00:13 Sections vs Frames 03:53 Section use cases 04:56 Create prototyping states 06:52 Prototype demonstration 08:02 Section contents widget 09:46 Like, comment, subscribe fam Got a question about figma, or the UX/UI industry? Any suggestions for topics you would like me to c...
Figma Tips ⚡ - Swapping Button Icons using Instance Swap
มุมมอง 15Kปีที่แล้ว
Need to swap out an icon in your button? Learn all about the new and improved component properties: Instance Swap Time Stamps ⏱️ 00:00 Introduction 00:35 What is instance swap? 03:36 Icon library principles 04:29 Building an icon library demonstration 08:03 Creating component with instance swap 11:24 Set preferred instances, detach and delete 15:51 Like, comment, subscribe fam Got a question ab...
Figma Tips ⚡ - Reset Instance Component Properties
มุมมอง 7Kปีที่แล้ว
Made a mistake? Need to link a property back to your main component? Resetting instance component properties could not be easier. Time Stamps ⏱️ 00:00 Introduction 00:19 Reset whole instance component 00:57 Reset element within the instance component 01:50 Reset any property of the instance component 04:22 Like, comment, subscribe fam Got a question about figma, or the UX/UI industry? Any sugge...
Figma Tips ⚡ - Precise exporting with the slice tool
มุมมอง 9Kปีที่แล้ว
Need to export elements with greater control? Use slice to export any elements with extra padding, precision and in portions. Time Stamps ⏱️ 00:00 Introduction 00:12 What is the slice tool? 01:07 Three use cases for slice 01:55 Export elements with extra padding 03:29 Export large elements in smaller portions 04:02 Export precisely instead of native screenshot 04:43 Like, comment, subscribe fam...
Figma Tips ⚡ - Add dark overlays and master fills
มุมมอง 2.8Kปีที่แล้ว
Add colour overlays or underlays by using multiple fills. Here is everything you would ever need to know to master fills in Figma. Time Stamps ⏱️ 00:00 Introduction 00:08 Colour overlays 01:40 Colour underlays 02:41 Transparency shortcut on keyboard 03:48 Fill vs Layer transparency 05:47 Background blur to create Glass Neumorphism trend 07:31 Opacity controls in groups 09:24 Pass through vs Nor...
Figma Tips ⚡ - 4 updates not to be missed in 2023
มุมมอง 349ปีที่แล้ว
Figma Tips ⚡ - 4 updates not to be missed in 2023
Figma Tips ⚡ - 3 tricks to design faster in 2022
มุมมอง 4.6K2 ปีที่แล้ว
Figma Tips ⚡ - 3 tricks to design faster in 2022
Figma Tips ⚡ - Layout grids as padding - Part 2/2
มุมมอง 9K3 ปีที่แล้ว
Figma Tips ⚡ - Layout grids as padding - Part 2/2
Figma Tips ⚡ - Layout grids as guides - Part 1/2
มุมมอง 8K3 ปีที่แล้ว
Figma Tips ⚡ - Layout grids as guides - Part 1/2
Figma Tips ⚡ - Swapping Button Icons using Variants [old]
มุมมอง 31K3 ปีที่แล้ว
Figma Tips ⚡ - Swapping Button Icons using Variants [old]
Figma Practice ✏️ - Apple Watch Fitness App Display
มุมมอง 2.2K3 ปีที่แล้ว
Figma Practice ✏️ - Apple Watch Fitness App Display
Love your videos ❤❤can you keep making them 😢Are you doing ok?? Been waiting for updates
Yes, i need the next process
Thanks a lot for this tip! I was struggling to work out how to do this without a whole mess of variants on the canvas. Now I've got a different issue with this part of my project but I feel more confident now I'll figure out a solution or workaround somehow lol.
Glad to hear it was helpful :)
Does this method work with those community UI Kits (Bootstrap)? Currently working with Bootstrap 5 UI Kit and there are no variables only styles but I do see samatic style {i guess) Not sure how to leverage variable in this case.
Junboy, thank you so much for the idea, it helps me with very difficult component behavior a lot! I've also found out, that it works if the "checkbox" is placed inside the "button": it can be useful for lists with checkboxes and opened panels.
Glad it helped!
thank you, you are truly amazing
Wow, thank you!
Thanks for sharing this. But how do you make this design developer-friendly? An HTML CSS dev is not going to split rings and move the circle between the two half-ring layers.
I am glad that I found this video. That question really stuck me. The video is way much better than the gpt explanation. I bet you are an excellent teacher in the daily life
Glad it was helpful! Appreciate the kind words!
very easy and usefull. ty
Glad it was helpful!
i like shorter videos and i like the video
Too much yap yap.
i have a challenge for you now make a frame where you have 4 instances of those arrow buttons you can differentiate between them through color and the check box should change the active/default state of all the arrow button instances
Appreciate the challenge! it does sound like the logic of a checkbox list, where a select all checkbox triggers multiple instance changes. You can watch it here: th-cam.com/video/QMK3gypuqPE/w-d-xo.html
Man that is A LOT of work. Please copy things from Sketch that are simpler and mature. I am coming from Sketch because I have to use Figma and a lot of things take more steps
Yes Figma is not perfect - but a fun lil hack.
i think now its possible to overlap with a negative - using the latest update
Yes!! totally possible which is awesome!
You sabi this thing, no worry! Perfect explanation. 💯
Appreciate that
You save my life. Thank you very much. Please make a playlist of tutorial of beginner prototyping or advance prototyping.
Appreciate the comment - have a browse through Figma's own youtube channel! If you can't find anything on my own :)
This is sooooo helpful! Thanks so much for sharing!
You are so welcome!
The looks really promising but I cant seem to set the string variable onto the "button state"? Could this be due to Figma updates?
I couldn't access condition as I am using the free plan. What do I do?
Unfortunately a lot of these features are on paid plans only! Not to worry though. In reality, I would be spending at most 5% of my time doing prototyping and the rest of the time designing the screens themselves - so keep practicing at that!
Super useful video! I really appreciate the work you put into communicating the different layers of hierarchy. Very clear and clarifying. I'll note that today it looks like they do now support variables in effects! You can select from your libraries when choosing an effect color.
Really appreciate the feedback - yea a lot of updates have happened since these videos!
Thanks for sharing
My pleasure
I'm trying this all day.. When my "Select All" button is check all my 10 checkbox is on too. But when it's the other way around, when I select all the 10 checkboxes the "Select All" box doesn't on.
Hey - I touch on this in the video at 20:34. You need to add a conditional action to the individual checkbox. The theory: When you check (+1) or uncheck (-1) a checkbox it changes the Count. Condition: When you check (+1) a checkbox and you make the Count = Total, then I want the "SelectAll" checkbox state to change to "Checked"
This was excellent. Thank you so much!
Glad it was helpful!
Fanatic
for people who code, should i design in figma the way i would setup in CSS code ? like container with min and max width and flexbox.. i just need to get used to figma and as long as reach result ok ?
If you're working for a firm, depends how they use Figma in practice. You can do it that way, but it can be time intensive to set up. Otherwise you can just treat Figma as a communication tool to communicate your designs to developers.
to summurize is use rectangle if you waht to make funn shape otherwise FRAME
Practically yes!
Is there any other way to achieve this without using Local variables as it offers only 4 modes for professional account and 1 mode for free figma account? (Q=i want to swap a component variant on the page while changing another variant running on figma prototype)
Variables was brought in recently to enable quicker prototype methods. The original method would be to design every variation of a screen and link them all together - very tedious process. I would argue that prototyping screens should only be reserved as one form of communicating designs, so focus more on the designs and concept rather than in making a perfect fully fledged clickable prototype :)
This video is fantastic. Short and to the point. Made all the difference in my project.
Great to hear! All the best with your project!
Very helpful thank you sir!!!
Most welcome!
You can select and create create multiple components instead of selecting single icons and then make component
100%. This feature probably came after I made this video. But yes you can select multiple frames and make multiple individual components at the same time!
thankyou bro
Happy to help
Bro, you save my life. Amazing video, thanks a lot!
Glad it helped!
I've been trying to recreate something very similar, except have it animate where you can set the progress to 0% and goes to 100%. Any idea on what I can do? Any responses are appreciated :) Thanks in advance
Thanks for the comment. Ideally you would want to link the 'sweep' value (which is a % out of 100) to a Figma Variable which you can control, but I don't think Figma has that functionality. To make a make-shift version you could try make a rotating ring with a layer on top that crops the visuals if below 100% and then prototype different variants together.
This explanation literally better then all freaking tutorials from official Figma channel I`ve seen, omg... I'm so thankful!
Wow, appreciate the comment thanks! You might want to try learning Variables which is the new way to do this. th-cam.com/video/ovqmg1hQhlg/w-d-xo.html
Thank you so much, was difficult to find this type of content that shows exactly how it works on internet. It really helps.
I am so glad you found it helpful to you!
Very Helpful thx a lot!
Glad it helped!
What about some parts of the head overlap outside the circle?
You just need to play with the frame and the clipping to get the effect you are after. You can have an object out of the circle but keep the frame size the same so they are evenly spaced.
Just what I needed, a very simple example to help me understand the concept and apply it to my projects. Thank you!
Glad it was helpful!
I loved this video. I've seen it twice and I get into a zen state when watching it! Claaaaaaaarity!
thanks for the feedback!
Thanks for this. I am working on selecting multiple check boxed within multiple checkboxes and so on. This is a great start to helping me.
I am glad you found it helpful! All the best :)
Thank you SO MUCH! Straight to the point and great explanation
Thanks for the feedback!
fantastic tutorial mate......learn't so much about Frames v Rectangles.....Just starting out using figma.
Really appreciate the feedback! All the best with your design journey!
very good explanation and not to fast like others do...
Glad it was helpful!
thanks so much bro, really appreciated the tutorial and learned a lot! God bless you
No dramas, glad it was useful for you!
I miss Sketch
What do you miss about Sketch? I've used it once and found Figma much easier to grasp and use.
Thank you so much for putting this video together and explaining the differences clearly.
You're very welcome!
Many thanks for sharing this useful video (Prototype). I enjoyed your explanations.
You are so welcome! Appreciate the feedback!
Hey there, I am protoyping an app developers in our company need to build and this has helped me so much, thanks.
I am so glad you found this useful!
Thank you so much for ❤
You're welcome 😊. There is a new way to do this using variables. I have demonstrated it here, if you want to check it out! th-cam.com/video/ovqmg1hQhlg/w-d-xo.html
Very Helpful!! Thank you!
Glad it was helpful!