How to Design an Interactive Button in Figma: For Beginners
HTML-код
- Опубликовано: 2 июл 2024
- 🔥 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 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 #InteractiveButton #FigmaUIKitSeries
⏱️Timestamps:
0:00 - Intro
0:39 - Getting Started
1:54 - Creating Components & Variants
7:34 - Adding Interactions
8:33 - Adding Icon Turn on/off Property
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDesignXstream 😅
Do you have 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 button design, Learning UI/UX design, Step-by-step Figma guide, Creating interactive components, Figma 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 buttons, Figma interactive elements, Figma component tutorial, Introduction to UI/UX with Figma, Learn Figma basics, Figma tutorial for beginners, How to create buttons in Figma, Understanding interactive design in Figma 
Наука
![Eminem - The Death of Slim Shady [Album Trailer]](http://i.ytimg.com/vi/X0HIrS6kUYI/mqdefault.jpg)
📌Links
Join the community here 👉 bit.ly/DX-Community
Download the freebie here 👉 designxstream.gumroad.com/l/DX-Interactive-UI-Kit
You actually made it sound so easy and quick! Loved it, thank you
Glad you liked it! Cheers ✌🏼😇
Thank you so much. Your videos are very helpful. Easy and quick.
Glad you found them helpful! Cheers ✌🏼
Thank you so much.. working with buttons is the hardest part for me.. you made it so easy.. Thank you a lot.
Glad that you found it helpful! Cheers & happy learning! ✌🏼
Thank you so much your video has been easy to understand and detailed! Hope you create more contents
Thanks for sharing your feedback! More videos coming soon.
great video! easy to understand and follow
Glad you found it helpful! Cheers ✌🏼
Do you have any online course? I really need it, you are very accurate in your explanation, and go straight to the point! Very nice.
No I don't sell any courses. Glad you found it helpful.❤️ More videos coming soon ✌🏼
Learned actually a lot on 10 min well done
Glad to know that! Cheers ✌🏼😃
Thanks for this tutorial, so help full and thanks also for the kit
Hey Fitiavana, I'm Glad you found it helpful! Stay tuned for the upcoming videos on this series! ✌🏼:)
I open you’re video from mobile just to give u big big like you are the best 🙏🏻👍🏻👍🏻👍🏻👍🏻 🇸🇦🇸🇦
Thanks buddy! That means a lot ✌🏼
Love you man!
Cheers buddy! ✌️
Great man! Thanks
Glad you like it! Cheers buddy ✌🏼😃
Thank you so much!!!
Glad you liked it! Cheers ✌🏼
Thank you! New subscribers here. 👍🏽
Cheers! ✌🏼
In the search of gold I found the diamond 💎
Thankyou so much it was very helpful ❤️
That means a lot! Glad you found it helpful ✌🏼 :)
Thank you!!!
Cheers! ✌🏼
Thank you
Cheers buddy ✌️
Thank you so much
Cheers ✌🏼 :)
Very helpful thank you so much. however I have a issue that when I use the button on another frame and change the size of the button. When I present/play it the button works however it reverts to the smaller height size so is not the actual size I changed it to
Only if you reset the properties of the component instance it will revert to the default size. Otherwise it remains in the state you set it.
Thanks
Cheers ✌🏼 :)
Thank you so much for the video, I wished I had found series earlier. At 0:34, on the right panel, you have Size, State, Type, Left Icon, Right Icon, and Text. How did you get Size and Text, and what does Size do?
Figure the Text one out, due to your Interactive Dropdown video. It's a text property. Unsure as was the Size is/does though.
Some design systems also have Size as a parameter. Like they use buttons in different scenarios like on a open screen, or it can be used inside a card component, etc. So when it is inside a card component they expect it to be smaller in size. So for such scenarios you can also have size a parameter.
Can someone tell me if we change the icons in different variants then how to fix its color property according to theme of the button?
Yes you can change the icons. The UI kit has different icons that can be used. If you need new then you need to add it into the component library to be able to use it.
Hello. How can I use these interactive elements and make me navigate to another frame when clicked?
You can add multiple actions to a trigger. So you just need to tap on prototype mode and add a new action 'Navigate to' and the frame.
@@DesignXstream i tried to but it doesnt work and provide this error : "this interaction will not be triggered as interaction on instances are triggered before inherited internal interactions"
@@ahzaazraei9323 You need to add it in the same trigger. You can add multiple actions on a single trigger.
hooked,
Glad you like it! Cheers ✌️
what about search bar and responsive menu
Good suggestions I'll try to cover these components in the next videos.
Bro can do one vid for styles
Now styles is moving away.. Figma is focusing on variables!
how export the button to powerbi?
Hey Mathias, I suppose powerbi has its own set of controls to stylize buttons. You cannot use Figma to export and put it there. However you can use it for reference as a design and inspect the properties on figma and apply them on your powerbi dashboard.
File link?
The UI kit is here: designxstream.gumroad.com/l/DX-Interactive-UI-Kit
I don't see any freebies here. Anyways, thanks for nothing!
😄 Pls check the description... you will find the link to the Free UI Kit.
the audacity of this dude
Thanx, Really helpful
Glad it helped! 🤩
Thank you
Cheers! ✌️