Just UX
Just UX
  • Видео 9
  • Просмотров 78 539
Design Systems 101: How to create a button component in Figma with variants and component properties
Today's video is all about how to design buttons in Figma, leveraging variants and component properties to build a truly flexible component.
Please make sure you download the design system foundation file before you begin to make it easier to follow along:
www.figma.com/community/file/1201584963637804246
00:51 Mapping structure and states
02:45 Designing the buttons
09:01 Configuring the properties
14:48 Create your button types
19:23 Testing your component
Просмотров: 4 837

Видео

Design Systems 101: How to create a text input component in Figma
Просмотров 3,8 тыс.Год назад
In this tutorial we'll kick off a new series, covering how to design some commonly used design system components in Figma. This video is all about text inputs. Learn how to use variants, and Figma's component properties to make the component as flexible and easy-to-use as possible. Timestamps: 00:00 - Introduction 00:36 - Mapping out the component 02:01 - Designing the component 13:26 - Configu...
How to create an interactive sidebar menu in Figma using interactive components ⚡
Просмотров 59 тыс.2 года назад
In this tutorial we're going to go through the process of building a fully interactive sidebar navigation menu in Figma. Learn how to bake in hover and active states to your components and see the sidebar in action, ready to integrate into your high fidelity prototypes. Download the Figma file, with extra styles for free here: www.figma.com/community/file/1074372837992992401/Interactive-Sidebars
Figma tutorial: Designing a mobile audio book application [part 2]
Просмотров 3162 года назад
It's the final part of this week's UI design-a-long tutorial. We'll be building out four of the potential screens and experimenting with a dark themed app, with simple bold type and imagery. Download link for the design assets and Figma file: www.figma.com/community/file/... 🔌 Plug-ins used for this tutorial are: Iconify: www.figma.com/community/plugi... Unsplash: www.figma.com/community/plugi...
Figma tutorial: Designing a mobile audio book application [part 1]
Просмотров 5092 года назад
Today's video is another design-a-long tutorial video, where I'll be creating a quick concept for a mobile audio book application. We'll be building out four of the potential screens and experimenting with a dark themed app, with simple bold type and imagery. Download link for the design assets and Figma file: www.figma.com/community/file/1064889310213851998/Audio-Book-Mobile-App 🔌 Plug-ins use...
The Best 5 Figma Plug-ins in 2021
Просмотров 7432 года назад
New to Figma, wondering what plug-ins you should install? No worries, we'll run you through the top five plug-in for Figma in 2021. 🔌 Plugins: Unsplash: www.figma.com/community/plugin/738454987945972471/Unsplash Autoflow: www.figma.com/community/plugin/733902567457592893/Autoflow Tailwinds Color Palettes: www.figma.com/community/plugin/853905984020840743/Tailwind-Color-Palettes Iconify: www.fig...
Figma Tutorial: How to design a mobile banking app [part 2]
Просмотров 1,5 тыс.2 года назад
We're back for part two. Finishing the dashboard, and adding the intro screen for our banking app concept. 🔌 Plugins: Using Tailwinds color palette, iconify plugin and unsplash plug in. 🧑‍🎓Figma basics: www.youtube.com/watch?v=jk1T0... 🗃️ Download Link to the .fig file www.figma.com/community/file/1049762268632387743/Banking-App-Mockup 🎹 Music from: Domino Beats - Like that Ofshane - Sunset n B...
Figma Tutorial: How to design a mobile banking app [part 1]
Просмотров 8 тыс.2 года назад
Today we're designing a simple mobile banking application. Nothing crazy, just a clean simple UI focussing on clarity and simplicity. Apologies for a bit of a random structure, I'll try and refine my rambling conversational style as we record more. Hit me up with any comments or questions below and feel free to request new topics or video themes. 🔌 Plugins: Using Tailwinds color palette, iconif...

Комментарии

  • @whitneywilson1991
    @whitneywilson1991 9 дней назад

    You might not see this comment or respond, but i'm following along and having issues with my icon only button - the button size is smaller in width even though i fixed it to 40x40 fixed in the tutorial like you did. Any thoughts?

    • @JustUXChannel
      @JustUXChannel 7 дней назад

      That's a weird one! Feel free to email me a screenshot of the properties panel justuxchannel@gmail.com and I can probably understand better.

  • @olya4384
    @olya4384 Месяц назад

    Good😍

  • @cherryayu2881
    @cherryayu2881 2 месяца назад

    Simple things like that eats your brain fking out, i been trying it like whole damn evening without watching any tuto, finally gave up & cool down a bit & decided to watch your video for the practice I'm doing, But made me realize the simple things you think you know, sometimes they torture you damn bad, & dont let you rest in peace ( :

  • @mutohirmarklee9187
    @mutohirmarklee9187 2 месяца назад

    Thank you so much

  • @8yearsgang
    @8yearsgang 3 месяца назад

    Great, but the elevator background music is too much :)

  • @adrianozuna875
    @adrianozuna875 3 месяца назад

    Hey man thank you so much for this video. I definitely learned a lot,

  • @s.durbar1294
    @s.durbar1294 6 месяцев назад

    RIP "Combine as Variants" option on the right menu

  • @deipty222
    @deipty222 6 месяцев назад

    how to show the toggle effect ?(when one is selected/turns blue the rest should remain in default state) Thanks!

  • @moatterkhalid732
    @moatterkhalid732 6 месяцев назад

    thank you it was great help, please lower down the background volume for next videos, music in this one was really distracting

  • @yes6799
    @yes6799 7 месяцев назад

    hey man, just wanted to say that it was great to stumble upon someone who just makes quality material, straightforward, step by step, everything described. Cheers!

    • @JustUXChannel
      @JustUXChannel 7 дней назад

      Thank you! Sorry for the slow response I have been neglecting checking on here

  • @raziehsharifi-cd5zu
    @raziehsharifi-cd5zu 7 месяцев назад

    Hello, How did you put arrow in the layer naming section?

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

    I notice you don't use .base component. Just curious about why that is? I'm trying to set up our button components using a .base and running into some boolean property issues and wondering if that's why.

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

      With the component properties, it became less necessary to have base components, which make the components harder to maintain ime. With boolean properties / toggling on and off icons etc I've found it's easier to build them without base components. Some other more complex components can still be useful to build with a base component but I'd say it's safer to build buttons without them. Hope that helps :)

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

      @@JustUXChannel Helpful, indeed! Thanks for your response. :)

  • @SH-ny8by
    @SH-ny8by 9 месяцев назад

    Nice :-) would be interesting to a see a pt 2 that considers variables and best practices of using them with button components

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

    I found these Figma videos really helpful. Where can I find full course videos? Really excited to see more content like this.

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

      Hey mate - sorry I've had so many work projects I haven't had time to do anything. Hopefully things will quieten down at work soon!

  • @oposkainaxei
    @oposkainaxei 11 месяцев назад

    Thumb down for the annoying music. Couldn‘t watch to end.

    • @JustUXChannel
      @JustUXChannel 11 месяцев назад

      Hey man, it's true the music is way too loud, I just can't retroactively change it. Hopefully it's better on newer vids.

  • @jwlynch
    @jwlynch Год назад

    Awesome tutorial! This was genuinely the most helpful and to-the-point guide I came across during my research before starting my work on a new design system. Really love your setup to make all the variants and properties editable/toggleable from that original "master" button. Makes everything so clean and easy to understand for both designers and non-designers. Looking forward to watching some of your other tutorials. Cheers man! 🤘

    • @JustUXChannel
      @JustUXChannel Год назад

      Thanks so much! Really appreciate the kind words and glad it was helpful for you :)

  • @michaelatmore3891
    @michaelatmore3891 Год назад

    Great tut mate! Very easy to follow. thanks!

  • @barakatnocode
    @barakatnocode Год назад

    The background music is a huge distraction.

  • @michaeltrotta841
    @michaeltrotta841 Год назад

    Super helpful. Glad you went through the trouble in spite of the headaches. Thank you

    • @JustUXChannel
      @JustUXChannel Год назад

      Thanks Michael! Really appreciate it :)

  • @jordyreformerassalaam8851
    @jordyreformerassalaam8851 Год назад

    Great tutorial! Thank you mate this is very useful 🙌

  • @diogosilvestredoregovalenc7
    @diogosilvestredoregovalenc7 Год назад

    Song too loud bro. but thx for the video ;)

    • @JustUXChannel
      @JustUXChannel Год назад

      Yeh I wish I could change the audio now :D Thanks for the comment!

  • @lorrainekanana3094
    @lorrainekanana3094 Год назад

    Super helpful thank you

  • @anonimoxd8896
    @anonimoxd8896 Год назад

    I got this error using ExportKit and I really need to use it: Component set for node has existing errors. This happens when you have invalid/duplicate variant(names). I changed every name but that doesn't fix anything. Pls help

  • @alexnguyen4406
    @alexnguyen4406 Год назад

    Thank you! This video helps me a lot. But for me, the background music was equaly volumed with your voice.

  • @obiomaajoku7233
    @obiomaajoku7233 Год назад

    i think you can use one component and make an active and passive state for it and use it in your side bar and just rename them lol except you want to always know the page you on

  • @Nick-oz1ex
    @Nick-oz1ex Год назад

    Wish this didn't have the loud music over it

  • @muhammadriaz9137
    @muhammadriaz9137 Год назад

    Thank You !

  • @geecee5195
    @geecee5195 Год назад

    Brilliant - thank you for this

  • @sharonchigorom9248
    @sharonchigorom9248 Год назад

    Very insightful video but after creating these components and prototyping them, how are you taken to thier individual screens? For instance, when I click on audio, and it becomes active, how do I get to the audio screen ?

    • @JustUXChannel
      @JustUXChannel Год назад

      Hey you'd have to create the screens and then manually set up prototype connections from each link to the respective screen. Hard to describe in comments but will try and make a quick video on this :)

  • @ronithk9241
    @ronithk9241 Год назад

    i wish this video was without music...:(

    • @JustUXChannel
      @JustUXChannel Год назад

      sorry mate, next one I'll sort the levels out better!

    • @ronithk9241
      @ronithk9241 Год назад

      Thank u.... will look forward for more tutorials...

  • @entrinsek9230
    @entrinsek9230 Год назад

    🤩 very amazing i will watched again again while i will create the same think to be famlliar with it, you will be a creat youtuber soon, nice topic, please do more videos like this i am bulding my website these days

    • @JustUXChannel
      @JustUXChannel Год назад

      Thanks so much for the kind words mate! Good luck with your website! I hope I'll have time soon to make more videos

  • @jowjowdrums
    @jowjowdrums Год назад

    Thank you for this! I have a question though: What happens if you click let's say "Audio Devices button" once, and then click the "Locations button" right after? Is it going make those 2 buttons have an active state at the same time? If so, how are you going to prototype the "Audio Devices button" going back to its default state after you click another button? Much love!

    • @JustUXChannel
      @JustUXChannel Год назад

      Hey Joshua great question! Currently there isn't conditional formatting in Figma, so you would have the unnatural state of having two active links in the menu. You could overcome this by building screens connected with each section. E.g. Audio device screen (Then set the related menu link active via the component properties) You can then do this for all areas in the menu and then connect them via prototype connections. If you just want to test a few screens and avoid the rest of the nav, I'd de-connect them in the prototype settings so you could essentially restrict the users navigation to the areas you want to test. Hope that makes sense, sometimes hard to describe more detailed stuff here!

    • @jowjowdrums
      @jowjowdrums Год назад

      @@JustUXChannel Will try to do that! Thanks so much! Appreciate your reply =)

  • @ajaygovinds
    @ajaygovinds 2 года назад

    Insightful ..thanks 💙

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Thanks Ajay! I'll try and do a new one soon to factor in the new Figma features that make this kind of work super quick

    • @ajaygovinds
      @ajaygovinds 2 года назад

      @@JustUXChannel Appreciate the effort you put to support the Design community bro...

  • @sahrulamir5130
    @sahrulamir5130 2 года назад

    this video is better than figma official tutorial, wish you upload more figma videos.

  • @vikrampataskar1531
    @vikrampataskar1531 2 года назад

    Everything is fantastic, including your presentation and skill, but your background music is pitiful and irritating. Man Because of your background music, most of the words are difficult to understand. Please work on that, or watch other youtube videos.

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Hey Vikram, noted. Will definitely use much quieter music in the future, thanks for the feedback :)

  • @QamarAmin
    @QamarAmin 2 года назад

    Absolultely love this . Thank you so much for the tutorial, it was really helpful

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Thank you! Made my Friday!

    • @QamarAmin
      @QamarAmin 2 года назад

      @@JustUXChannel You deserve 100K subs

    • @JustUXChannel
      @JustUXChannel 2 года назад

      @@QamarAmin Thank you bro! Let me know if there's anything you want to see covered in the future :)

    • @QamarAmin
      @QamarAmin 2 года назад

      @@JustUXChannel I think you should work on Prototyping becuase many poeple are covering general things . Be specific and It will help you stand out from the rest and imrpove your channel growth

    • @QamarAmin
      @QamarAmin 2 года назад

      @@JustUXChannel Maybe something like. Different Prototyping hacks , tips and tricks

  • @hendrix6241
    @hendrix6241 2 года назад

    You were more than helpful with that tutorial !

  • @patrickjohnson3143
    @patrickjohnson3143 2 года назад

    A few tips: 1. If you select all the components, you can 'create multiple components' from the component dropdown in the top bar. 2. If you created one component for all your icons (or use a font icon) Then create one component for your menu item - then create variants - one hover state, one selected state and one default state. Then use overrides to change the icons and text.

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Not sure what you mean about multiple components? Is this the same as 'variants' I use them here for the nav links to define the interactive states

    • @bigtutos5804
      @bigtutos5804 2 года назад

      Very true, I will just need a component set of icons, then 1 menu item component with 2 other variants.

    • @namuh87
      @namuh87 2 года назад

      @@JustUXChannel there's an option for multiple components. so instead of choosing 1 by 1, you just have to select them all and theres an option to create multiple components.

    • @JustUXChannel
      @JustUXChannel 2 года назад

      @@namuh87 Ah yes I know what you mean, would have saved me some time for sure XD

    • @jmilr
      @jmilr 2 года назад

      Being used to using 'base components' made this hard to watch 😅 Great video otherwise! To add to Patrick's tip around creating multiple components; you can create prototype connections without configuring them then configure them in bulk afterwards in the sidebar - makes it much easier to adjust & test until it feels right. Might be enough for a whole separate video with the new variant property types (e.g. to override the icons & labels).

  • @gsharma1
    @gsharma1 2 года назад

    Thank you so much for this tutorial-very helpful and timely for how I'm trying to learn Figma! Two questions came to mind: 1) What if I wanted the default state to be pre-selected to the top item in the left nav (let's assume it's the home page), then how would I need to do anything differently in the interactive component? Or would I just simply choose the active state in the prototype when I'm starting? 2) What would be your suggestion for how to keep only one left nav item selectable at a time?

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Hey so glad you liked it :) Thanks for the feedback! 1) In the main sidebar component you can select the link you want to be active and then switch its state to active in the properties panel. Then every instance of the sidebar itself will have this item active as default. Check the Figma community file, as it'll be easier to understand with the source file. 2) I don't have a great answer for this one as there is still no conditional logic to Figma prototypes unfortunately. However when you build out a prototype, if every navigation link is connected to a unique page in the prototype, it will behave like you described, as each click will jump to the related page and the connected nav link will be active.

  • @vitab4384
    @vitab4384 2 года назад

    Really enjoy your videos, thanks for the effort you're putting into them. I am slowly transitioning into UX as well as learning about UI and find your videos very helpful. I appreciate when you make comments on why you choose to do certain things in your design and even mention how it would influence the User Experience when done in a different way. Nowadays, it is pretty hard to find videos with great explanations and I am glad I found your channel! :)

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Ah thanks that really means a lot. I hope I can make better videos as I learn and continue, but your comment really made my day! If you need any tips or help with your transition let me know :)

  • @kizelozt
    @kizelozt 2 года назад

    Love your Tutorial. I'm enjoy your videos Big Thanks :)

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Thanks! Really appreciate it, I'll have more time to create new ones soon.

  • @rohanyadav9783
    @rohanyadav9783 2 года назад

    I am new to UX/UI designing. Your 2 part tutorial really helps me learn some different approaches to design my own app. 🤗

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Thank you Rohan! Is there anything you particularly want to learn about or struggle with? It would be great as inspiration for new videos :)

    • @rohanyadav9783
      @rohanyadav9783 2 года назад

      @@JustUXChannel can you create a tutorial for responsive design. Whenever I try to design for a screen and use the same design in another screen it won't work as I thought. It would be really helpful if you give tips and tricks for responsive design 😅

    • @JustUXChannel
      @JustUXChannel 2 года назад

      @@rohanyadav9783 Definitely! Thanks for the idea :) I know responsive can be a tricky one!

  • @Xoxoroorlopdk
    @Xoxoroorlopdk 2 года назад

    Heey you probably busy but keep going and upload some moreee 😭

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Will do asap, should have some ready to drop by end of next week :)

  • @Xoxoroorlopdk
    @Xoxoroorlopdk 2 года назад

    Sub, hope you will continue this whole series ! Great work ✋🏻

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Thank you so much! I have a bunch of videos in the work, just been hectic switching jobs the last couple of months :)

  • @BigBlackCrypto
    @BigBlackCrypto 2 года назад

    subscriber # 9 my friend.... much love from a far thank you ever so kindly🥂

    • @JustUXChannel
      @JustUXChannel 2 года назад

      Thanks for the sub! 🥂 Appreciate it :)