How to Design an Interactive Radio Button in Figma | Beginners Tutorial

Тәжірибелік нұсқаулар және стиль

🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 FREE Figma UI Kit Download → designxstream.gumroad.com/l/D...
🔗 Join our design community here → bit.ly/DX-Community
Join me in this beginner-friendly tutorial on How to design an interactive Radio Button component in Figma. We'll start from scratch, so even if you're a beginner in Figma, you'll be able to follow along easily.
New to Figma? Then I recommend you start with this video first: • Figma for Beginners | ...
#Figma #InteractiveRadioButton #FigmaUIKitSeries
⏱️Timestamps:
0:00 - Intro
0:49 - Component Demo
1:24 - Getting Started
3:51 - Creating Components & Variants
5:35 - Adding Interactions
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDesignXstream 😅
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ LinkedIn - / designxstream
↪︎ Instagram - / designxstream
↪︎ Facebook - / designxstream
↪︎ Twitter - / designxstream
↪︎ Website - DesignXstream.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: Figma for beginners, Interactive Radio Button design, Learning UI/UX design, Step-by-step Figma guide, Creating interactive components, Figma Radio Button tutorial, UI/UX design tutorials, How to use Figma, Beginner's guide to Figma, Designing with Figma, Basics of Figma, Figma design process, Making interactive Radio Button, Figma interactive elements, Figma component tutorial, Introduction to UI/UX with Figma, Learn Figma basics, Figma tutorial for beginners, How to create Radio Button in Figma, Understanding interactive design in Figma

Пікірлер: 18

  • @kyalesd9062
    @kyalesd906215 күн бұрын

    THIS REALLY HELP ME ON MY ASSIGMENT

  • @DesignXstream

    @DesignXstream

    15 күн бұрын

    Glad you found it helpful! Cheers buddy ✌️

  • @ketchup9355
    @ketchup93554 ай бұрын

    Very Helpful, Thankss!!

  • @DesignXstream

    @DesignXstream

    4 ай бұрын

    Cheers! ✌🏼

  • @soyeesoyee
    @soyeesoyee10 ай бұрын

    Thank you! This is easy and simple to follow!

  • @DesignXstream

    @DesignXstream

    10 ай бұрын

    Glad it was helpful! Cheers ✌🏼

  • @KulwantSingh-ic8uz
    @KulwantSingh-ic8uz13 күн бұрын

    It's indeed a utterly helpful video...thanks for all your efforts...but how we can add hover effect on the radio button...plz make it clear with a video or explanation..thanks!

  • @DesignXstream

    @DesignXstream

    4 күн бұрын

    For that it needs a new state and then smart animate. which happens on trigger on Hover.

  • @waleedel-safty9709
    @waleedel-safty97092 ай бұрын

    this is great , but how to change the text of the options in the final frame ? , all Options will remain "Option1,Option2,Option3, ..Etc

  • @DesignXstream

    @DesignXstream

    2 ай бұрын

    We can use text variables to assign the options with a variable and then give it values such that it reflects in all.

  • @awesomehyperbole5600
    @awesomehyperbole56003 ай бұрын

    Radio button sets should always have one option that is selected. There is never an instance of a radio button set with all options deselected.

  • @DesignXstream

    @DesignXstream

    3 ай бұрын

    Excuses for No Default Selection Not knowing what users want or do: In this and any design situation, it behooves us to know our users and what they want and need, and do most often. Presumptuous or alienating choice: This is probably the most valid reason for not selecting a radio button by default. But consider whether you need to ask for the information at all, or whether you can use a different UI control to capture the data you need. Safety net: Catch people, ensure they see and actively select a choice: There is probably a more elegant way to design the interaction than to expect the user to miss a command and catch him with an error message after the fact. Seek an alternate method to direct the users’ attention.

  • @lissyjoy3424
    @lissyjoy3424 Жыл бұрын

    💯✌

  • @DesignXstream

    @DesignXstream

    Жыл бұрын

    🙏🏼🙏🏼🙏🏼

  • @updates4043
    @updates404311 ай бұрын

    Nice bro. These exercises are awesome to develop our skills. In this video, you started from 2 (2 options). I started doing the same exercise from one (1 option). I created one active and non active radio button, duplicated it and tried to add one more by duplicating the duplicated radio button. But, I was not able to add auto layout to the instance and the duplicate of the instance. I tried again like how you did. ie, I started from 2. This time everything worked perfectly. What is the issue when we start from one?

  • @DesignXstream

    @DesignXstream

    11 ай бұрын

    Am not sure if I got your query correctly. But you cannot add auto layout to elements inside an instance. You can do it only on the main component.

  • @ravidrewett1488
    @ravidrewett1488 Жыл бұрын

    Promo*SM

  • @DesignXstream

    @DesignXstream

    11 ай бұрын

    👍🏽👍🏽

Келесі