How to Design and Prototype Buttons in Figma | Material Design Primary Secondary Tertiary Components
HTML-код
- Опубликовано: 7 авг 2024
- In this video, I walk through how to design and prototype a backdrop component in Figma. This is a component used in Google's Material Design system, which you can learn more about here: m2.material.io/components/but...
Figma file: www.figma.com/community/file/...
New to Figma? Sign up here:
psxid.figma.com/xogqvqq7ah54
Music for this video is "Reverie" by Cordio. You can learn more about their music here: / @cortesarts
0:00 - Intro
0:10 - About Buttons
0:44 - Designing the Primary (Filled) Buttons
3:05 - Creating the Buttons with Icon Variant
4:28 - Creating the Component Set
4:55 - Making the Secondary (Outline) Buttons
6:25 - Making the Tertiary (Text) Buttons
8:00 - Prototyping the Buttons
8:44 - Demoing the Prototype
9:53 - Wrapping Up
⁙ social media:
Twitter : / soren_iverson
Dribbble: dribbble.com/soreniverson
Gumroad: soreniverson.gumroad.com/
Website : soreniverson.com/
#uidesigner #figmatutorial #designsystems 
Наука
Hi Soren, do you have any videos on how to use buttons directly from the MD3 Figma kit and how to update the local style settings so that they can be used in your designs?
Thank you so much for this! It was very helpful!
thank you for this video!
You videos have been helpful
You just earned a subscriber
Hello, thank you for your demo.
Can you explain how do yo copy and paste prototype interraction.
Thank you
Can you please explain why did you make multiple drop shadows?
Multiple shadows gives you more control over how the shadow looks. Most design systems have multiple types of shadows to reflect different levels of “elevation”
Example, a modal might have a more spread out shadow that indicates it is higher off the page, while a top bar might have a very small or even hairline shadow.
Great video. I get a glitching effect when pressing on certain buttons and can't figure out what it is, they are set up all the same 🤨
That's weird. Here's a link to the Figma file so you can see my work: Figma file: www.figma.com/community/file/1203703753054458490
Great work but we need the file that you work please also keep the link here that will be apricated thanks
Here's the file! www.figma.com/community/file/1203703753054458490
helpfull but it was super fast
The process if fine. The delivery is horrible. If you are new and trying to learn, this does not help. Presenter goes to fast... is a low talker (and tone fades out like he is talking to himself) and he is not very explanatory of the menu item changes. He presents as if his audience is a 10 year professional... Just keep that in mind as you have to watch each section over and over just to hear what he said or see what he did. Craaaazy.