thejunboy
thejunboy
  • 29
  • 242 557
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
Переглядів: 13 055

Відео

Figma Tips ⚡ - Colour styles vs variables
Переглядів 13 тис.Рік тому
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,7 тис.Рік тому
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 ⏩ ua-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
Переглядів 18 тис.Рік тому
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 ⏩ ua-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,3 тис.Рік тому
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 ⏩ ua-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
Переглядів 674Рік тому
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
Переглядів 10 тис.Рік тому
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
Переглядів 15 тис.Рік тому
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
Переглядів 7 тис.Рік тому
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
Переглядів 9 тис.Рік тому
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,8 тис.Рік тому
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
Переглядів 350Рік тому
Figma Tips ⚡ - 4 updates not to be missed in 2023
Figma Tips ⚡ - Overlap with Autolayout
Переглядів 15 тис.2 роки тому
Figma Tips ⚡ - Overlap with Autolayout
Figma Tips ⚡ - 3 tricks to design faster in 2022
Переглядів 4,6 тис.2 роки тому
Figma Tips ⚡ - 3 tricks to design faster in 2022
Figma Tips ⚡ - Tidy up vs Auto layout
Переглядів 1,8 тис.3 роки тому
Figma Tips ⚡ - Tidy up vs Auto layout
Figma Tips ⚡ - Multiple strokes
Переглядів 13 тис.3 роки тому
Figma Tips ⚡ - Multiple strokes
Figma Tips ⚡ - Auto layout with spacers
Переглядів 9 тис.3 роки тому
Figma Tips ⚡ - Auto layout with spacers
Figma Tips ⚡ - Layout grids as padding - Part 2/2
Переглядів 9 тис.3 роки тому
Figma Tips ⚡ - Layout grids as padding - Part 2/2
Figma Tips ⚡ - Layout grids as guides - Part 1/2
Переглядів 8 тис.3 роки тому
Figma Tips ⚡ - Layout grids as guides - Part 1/2
Figma Tips ⚡ - Swapping Button Icons using Variants [old]
Переглядів 31 тис.3 роки тому
Figma Tips ⚡ - Swapping Button Icons using Variants [old]
Figma Tips ⚡ - Autolayout Buttons
Переглядів 1,5 тис.3 роки тому
Figma Tips ⚡ - Autolayout Buttons
Figma Tips ⚡ - Scale Tool
Переглядів 4,2 тис.3 роки тому
Figma Tips ⚡ - Scale Tool
Figma Practice ✏️ - Apple Watch Fitness App Display
Переглядів 2,2 тис.3 роки тому
Figma Practice ✏️ - Apple Watch Fitness App Display
Figma Design 🔥 - Donut Charts
Переглядів 7 тис.3 роки тому
Figma Design 🔥 - Donut Charts
Figma Tips ⚡ - Frames or Rectangles
Переглядів 29 тис.3 роки тому
Figma Tips ⚡ - Frames or Rectangles

КОМЕНТАРІ

  • @marzuqsyed9846
    @marzuqsyed9846 10 днів тому

    I am currently in an iOS programme, I was bummed when I couldn't get the premium version but i gotta deal with it.. Overall great video :))

  • @intracerebrally
    @intracerebrally 11 днів тому

    Thanks!

  • @mtc1516
    @mtc1516 28 днів тому

    Love your videos ❤❤can you keep making them 😢Are you doing ok?? Been waiting for updates

  • @DidierAllafi
    @DidierAllafi Місяць тому

    Yes, i need the next process

  • @aul0s
    @aul0s Місяць тому

    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.

    • @thejunboy
      @thejunboy Місяць тому

      Glad to hear it was helpful :)

  • @kxp1996
    @kxp1996 Місяць тому

    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.

  • @stacybeen3771
    @stacybeen3771 Місяць тому

    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.

  • @mustofa2509
    @mustofa2509 2 місяці тому

    thank you, you are truly amazing

  • @imtotallyseriously
    @imtotallyseriously 2 місяці тому

    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.

  • @kylehuang8455
    @kylehuang8455 2 місяці тому

    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

    • @thejunboy
      @thejunboy 2 місяці тому

      Glad it was helpful! Appreciate the kind words!

  • @HaniyeYazdaniNezhad
    @HaniyeYazdaniNezhad 2 місяці тому

    very easy and usefull. ty

    • @thejunboy
      @thejunboy 2 місяці тому

      Glad it was helpful!

  • @esthernwaogu592
    @esthernwaogu592 3 місяці тому

    i like shorter videos and i like the video

  • @Fug0r1
    @Fug0r1 3 місяці тому

    Too much yap yap.

  • @indusgod12
    @indusgod12 3 місяці тому

    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

    • @thejunboy
      @thejunboy 3 місяці тому

      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: ua-cam.com/video/QMK3gypuqPE/v-deo.html

  • @seantatalovich9760
    @seantatalovich9760 3 місяці тому

    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

    • @thejunboy
      @thejunboy 3 місяці тому

      Yes Figma is not perfect - but a fun lil hack.

  • @Benjamin93578
    @Benjamin93578 3 місяці тому

    i think now its possible to overlap with a negative - using the latest update

    • @thejunboy
      @thejunboy 3 місяці тому

      Yes!! totally possible which is awesome!

  • @Osicapa
    @Osicapa 3 місяці тому

    You sabi this thing, no worry! Perfect explanation. 💯

    • @thejunboy
      @thejunboy 3 місяці тому

      Appreciate that

  • @nikhildhaka4912
    @nikhildhaka4912 4 місяці тому

    You save my life. Thank you very much. Please make a playlist of tutorial of beginner prototyping or advance prototyping.

    • @thejunboy
      @thejunboy 4 місяці тому

      Appreciate the comment - have a browse through Figma's own youtube channel! If you can't find anything on my own :)

  • @ToyoStation
    @ToyoStation 4 місяці тому

    This is sooooo helpful! Thanks so much for sharing!

    • @thejunboy
      @thejunboy 4 місяці тому

      You are so welcome!

  • @TheZuzuTunes
    @TheZuzuTunes 4 місяці тому

    The looks really promising but I cant seem to set the string variable onto the "button state"? Could this be due to Figma updates?

  • @sharonedwin1403
    @sharonedwin1403 4 місяці тому

    I couldn't access condition as I am using the free plan. What do I do?

    • @thejunboy
      @thejunboy 4 місяці тому

      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!

  • @drewbeck1000
    @drewbeck1000 5 місяців тому

    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.

    • @thejunboy
      @thejunboy 4 місяці тому

      Really appreciate the feedback - yea a lot of updates have happened since these videos!

  • @oZenakos
    @oZenakos 5 місяців тому

    Thanks for sharing

  • @nicodishiznit
    @nicodishiznit 5 місяців тому

    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.

    • @thejunboy
      @thejunboy 4 місяці тому

      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"

  • @gregorylorei1674
    @gregorylorei1674 5 місяців тому

    This was excellent. Thank you so much!

    • @thejunboy
      @thejunboy 4 місяці тому

      Glad it was helpful!

  • @Christian-ql4vw
    @Christian-ql4vw 5 місяців тому

    Fanatic

  • @samduss4193
    @samduss4193 5 місяців тому

    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 ?

    • @thejunboy
      @thejunboy 4 місяці тому

      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.

  • @samduss4193
    @samduss4193 5 місяців тому

    to summurize is use rectangle if you waht to make funn shape otherwise FRAME

    • @thejunboy
      @thejunboy 4 місяці тому

      Practically yes!

  • @jameskalu
    @jameskalu 6 місяців тому

    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)

    • @thejunboy
      @thejunboy 6 місяців тому

      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 :)

  • @stevenjones22
    @stevenjones22 6 місяців тому

    This video is fantastic. Short and to the point. Made all the difference in my project.

    • @thejunboy
      @thejunboy 6 місяців тому

      Great to hear! All the best with your project!

  • @DuongNguyen-ju1nl
    @DuongNguyen-ju1nl 6 місяців тому

    Very helpful thank you sir!!!

    • @thejunboy
      @thejunboy 6 місяців тому

      Most welcome!

  • @saalimkhan1765
    @saalimkhan1765 7 місяців тому

    You can select and create create multiple components instead of selecting single icons and then make component

    • @thejunboy
      @thejunboy 6 місяців тому

      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!

  • @heryseptiansyahti-a9817
    @heryseptiansyahti-a9817 7 місяців тому

    thankyou bro

    • @thejunboy
      @thejunboy 7 місяців тому

      Happy to help

  • @axelsosa5973
    @axelsosa5973 7 місяців тому

    Bro, you save my life. Amazing video, thanks a lot!

    • @thejunboy
      @thejunboy 7 місяців тому

      Glad it helped!

  • @OniiHvH
    @OniiHvH 7 місяців тому

    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

    • @thejunboy
      @thejunboy 7 місяців тому

      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.

  • @Ms_Chu_
    @Ms_Chu_ 7 місяців тому

    This explanation literally better then all freaking tutorials from official Figma channel I`ve seen, omg... I'm so thankful!

    • @thejunboy
      @thejunboy 7 місяців тому

      Wow, appreciate the comment thanks! You might want to try learning Variables which is the new way to do this. ua-cam.com/video/ovqmg1hQhlg/v-deo.html

  • @abrahamrojo7407
    @abrahamrojo7407 7 місяців тому

    Thank you so much, was difficult to find this type of content that shows exactly how it works on internet. It really helps.

    • @thejunboy
      @thejunboy 7 місяців тому

      I am so glad you found it helpful to you!

  • @yutani2225
    @yutani2225 8 місяців тому

    Very Helpful thx a lot!

    • @thejunboy
      @thejunboy 7 місяців тому

      Glad it helped!

  • @jefff.5863
    @jefff.5863 8 місяців тому

    What about some parts of the head overlap outside the circle?

    • @thejunboy
      @thejunboy 8 місяців тому

      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.

  • @tedmatsushita1542
    @tedmatsushita1542 8 місяців тому

    Just what I needed, a very simple example to help me understand the concept and apply it to my projects. Thank you!

    • @thejunboy
      @thejunboy 8 місяців тому

      Glad it was helpful!

  • @lalogreiner
    @lalogreiner 8 місяців тому

    I loved this video. I've seen it twice and I get into a zen state when watching it! Claaaaaaaarity!

    • @thejunboy
      @thejunboy 8 місяців тому

      thanks for the feedback!

  • @designerdavid1
    @designerdavid1 8 місяців тому

    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.

    • @thejunboy
      @thejunboy 8 місяців тому

      I am glad you found it helpful! All the best :)

  • @tehSeaNx
    @tehSeaNx 8 місяців тому

    Thank you SO MUCH! Straight to the point and great explanation

    • @thejunboy
      @thejunboy 8 місяців тому

      Thanks for the feedback!

  • @tripleedgedesign5534
    @tripleedgedesign5534 9 місяців тому

    fantastic tutorial mate......learn't so much about Frames v Rectangles.....Just starting out using figma.

    • @thejunboy
      @thejunboy 8 місяців тому

      Really appreciate the feedback! All the best with your design journey!

  • @MarcSchmid-he2tg
    @MarcSchmid-he2tg 9 місяців тому

    very good explanation and not to fast like others do...

    • @thejunboy
      @thejunboy 9 місяців тому

      Glad it was helpful!

  • @williamvargas4179
    @williamvargas4179 9 місяців тому

    thanks so much bro, really appreciated the tutorial and learned a lot! God bless you

    • @thejunboy
      @thejunboy 9 місяців тому

      No dramas, glad it was useful for you!

  • @tracyy6619
    @tracyy6619 9 місяців тому

    I miss Sketch

    • @thejunboy
      @thejunboy 9 місяців тому

      What do you miss about Sketch? I've used it once and found Figma much easier to grasp and use.

  • @theblowupdollsmusic
    @theblowupdollsmusic 9 місяців тому

    Thank you so much for putting this video together and explaining the differences clearly.

    • @thejunboy
      @thejunboy 9 місяців тому

      You're very welcome!

  • @damoonarabali7507
    @damoonarabali7507 9 місяців тому

    Many thanks for sharing this useful video (Prototype). I enjoyed your explanations.

    • @thejunboy
      @thejunboy 9 місяців тому

      You are so welcome! Appreciate the feedback!

  • @That_One_Phil
    @That_One_Phil 9 місяців тому

    Hey there, I am protoyping an app developers in our company need to build and this has helped me so much, thanks.

    • @thejunboy
      @thejunboy 9 місяців тому

      I am so glad you found this useful!