How to Design an Interactive Button in Figma: For Beginners

Рет қаралды 76,035

Күн бұрын

Пікірлер: 84

@DesignXstream Жыл бұрын

📌Links Join the community here 👉 bit.ly/DX-Community Download the freebie here 👉 designxstream.gumroad.com/l/DX-Interactive-UI-Kit

@singhswets Жыл бұрын

Thank you so much.. working with buttons is the hardest part for me.. you made it so easy.. Thank you a lot.

@DesignXstream Жыл бұрын

Glad that you found it helpful! Cheers & happy learning! ✌🏼

@geirgaseidnes7809 2 ай бұрын

Super clear instructions, great pacing. Well done, sir.

@DesignXstream 2 ай бұрын

Cheers! I'm glad you found it useful 🙌🏼

@marioskasolas9210 10 ай бұрын

Learned actually a lot on 10 min well done

@DesignXstream 10 ай бұрын

Glad to know that! Cheers ✌🏼😃

@Ane-genius 6 ай бұрын

I open you’re video from mobile just to give u big big like you are the best 🙏🏻👍🏻👍🏻👍🏻👍🏻 🇸🇦🇸🇦

@DesignXstream 6 ай бұрын

Thanks buddy! That means a lot ✌🏼

@maghomaaxel 4 ай бұрын

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.

@DesignXstream 4 ай бұрын

No I don't sell any courses. Glad you found it helpful.❤️ More videos coming soon ✌🏼

@izzajanjua555 Жыл бұрын

You actually made it sound so easy and quick! Loved it, thank you

@DesignXstream Жыл бұрын

Glad you liked it! Cheers ✌🏼😇

@abdelrahmanmorsy4944 Ай бұрын

mate i was lost ...thank u very much very simple and easy way to teach

@DesignXstream 22 күн бұрын

Glad you liked it! Cheers ✌🏼

@nareshkuppi5792 23 күн бұрын

Just what i needed. Thank you.

@DesignXstream 22 күн бұрын

Cheers! ✌️

@mominakhalid7125 10 ай бұрын

Thank you so much. Your videos are very helpful. Easy and quick.

@DesignXstream 10 ай бұрын

Glad you found them helpful! Cheers ✌🏼

@monikapatnaik317 Жыл бұрын

In the search of gold I found the diamond 💎 Thankyou so much it was very helpful ❤️

@DesignXstream Жыл бұрын

That means a lot! Glad you found it helpful ✌🏼 :)

@niluseneviratne3709 5 ай бұрын

great video! easy to understand and follow

@DesignXstream 5 ай бұрын

Glad you found it helpful! Cheers ✌🏼

@ustymhanuliak4554 3 ай бұрын

Love you man!

@DesignXstream 3 ай бұрын

Cheers buddy! ✌️

@emina-shii Жыл бұрын

Thank you so much your video has been easy to understand and detailed! Hope you create more contents

@DesignXstream Жыл бұрын

Thanks for sharing your feedback! More videos coming soon.

@VolaconCarmen 6 ай бұрын

Thank you!!!

@DesignXstream 6 ай бұрын

Cheers! ✌🏼

@fitiavanarazakandrainy8728 Жыл бұрын

Thanks for this tutorial, so help full and thanks also for the kit

@DesignXstream Жыл бұрын

Hey Fitiavana, I'm Glad you found it helpful! Stay tuned for the upcoming videos on this series! ✌🏼:)

@OvienSuccess 3 ай бұрын

Thank you

@DesignXstream 3 ай бұрын

Cheers! ✌️

@PremnathPrabhakaran-o9t 3 ай бұрын

Thank you

@DesignXstream 3 ай бұрын

Cheers buddy ✌️

@gstephanie5944 9 ай бұрын

Thank you so much!!!

@DesignXstream 8 ай бұрын

Glad you liked it! Cheers ✌🏼

@lens8714 8 ай бұрын

Thank you! New subscribers here. 👍🏽

@DesignXstream 7 ай бұрын

Cheers! ✌🏼

@aaron4820 Ай бұрын

A summary for this tutorial, it will teach you how to make components for buttons, such as style, icons, and how they behave visually when you hover / click on them. It does not teach you how to link up what happens to buttons after you click them if that's what you're after.

@DesignXstream 22 күн бұрын

Perfectly described 😅

@amwalonline 11 ай бұрын

Thanks

@DesignXstream 11 ай бұрын

Cheers ✌🏼 :)

@darshandakshapanchal2051 Жыл бұрын

Great man! Thanks

@DesignXstream Жыл бұрын

Glad you like it! Cheers buddy ✌🏼😃

@figmaLearnerEnthusiast 8 ай бұрын

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?

@figmaLearnerEnthusiast 8 ай бұрын

Figure the Text one out, due to your Interactive Dropdown video. It's a text property. Unsure as was the Size is/does though.

@DesignXstream 7 ай бұрын

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.

@suliatadebayo5586 11 ай бұрын

Thank you so much

@DesignXstream 11 ай бұрын

Cheers ✌🏼 :)

@bhavanireddy7565 8 күн бұрын

How did you changed that style for button it's so fast I didn't got it plzz explain once again...

@DesignXstream 8 күн бұрын

Can you mention the duration exactly so that I can see it and explain.

@chloehobbs7029 Жыл бұрын

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

@DesignXstream Жыл бұрын

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.

@AliRoomi 6 ай бұрын

what about search bar and responsive menu

@DesignXstream 6 ай бұрын

Good suggestions I'll try to cover these components in the next videos.

@aquadragon2785 3 ай бұрын

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?

@DesignXstream 3 ай бұрын

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.

@ahzaazraei9323 10 ай бұрын

Hello. How can I use these interactive elements and make me navigate to another frame when clicked?

@DesignXstream 10 ай бұрын

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.

@ahzaazraei9323 10 ай бұрын

@@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"

@DesignXstream 9 ай бұрын

@@ahzaazraei9323 You need to add it in the same trigger. You can add multiple actions on a single trigger.

@TechySatvik 4 ай бұрын

hooked,

@DesignXstream 3 ай бұрын

Glad you like it! Cheers ✌️

@KarthikReddy-xi7pz 6 ай бұрын

Bro can do one vid for styles

@DesignXstream 5 ай бұрын

Now styles is moving away.. Figma is focusing on variables!

@amalthankachan7569 Ай бұрын

Sir how to upload an image inside this button. That means if you click on this button, the image uploaded on it should be downloaded. Did you how to do it?? Please replay if anyone knows about it!!!

@DesignXstream Ай бұрын

By upload do you mean adding an image to the button?

@amalthankachan7569 Ай бұрын

@@DesignXstream yes

@amalthankachan7569 Ай бұрын

Sir there is a button titled "DOWNLOAD CV". Whenever I click on that button then the option to download my CV should be displayed.

@DesignXstream Ай бұрын

@@amalthankachan7569 You can make use of overlay in prototype to get a pop up window.

@amalthankachan7569 Ай бұрын

@@DesignXstream example of any video???

@mathiasbreder9911 10 ай бұрын

how export the button to powerbi?

@DesignXstream 10 ай бұрын

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.