How to Make attractive buttons in Figma?
What are Buttons?
Buttons are one of the most important UI elements on web pages and apps because they allow users to take actions and do something, and they can really make a difference in the attractiveness and User Experience of a page.
In order to Design an attractive button, first you should know about its build. A button can have various shapes and forms but its simplest form is just ‘1plain short text’, it could also have a border or solid color as its background. Sometimes you could have seen Circular Buttons like in Gmail there is a button for composing in a circular shape which is floating so that button is called Floating Action Button.
Table of Content
- What are Buttons?
- Types of Buttons
- Things to Remember While Designing a Button
- How to Apply?
- Importance of using Buttons
- Conclusion
Types of Buttons
There are basically 4 types of Buttons:
- Contained or Filled Button: have a solid color
- Outline Button: have a border
- Text Button: used for links and less important work
- Toggle Button: which allow us to switch between different States
So as per your requirements you can choose between them and also sometimes buttons include icon for users to better understand their functionality.
Things to Remember While Designing a Button
- First-most thing is to pay Attention to the ‘ Size ‘ of Button, its Important to design a button in away in which it is easily accessible. Sometimes Many designer forget that we use fingertips on mobile and tablet screen so we can’t make the size of button tiny .The Recommended minimum Height for a button is round 34px and it can be larger than that but try to not go above 72px.
- Second thing is the ‘Shape‘ of Button, whether you should choose sharp edge or round edges or even completely rounded button, it depends as sharp edge buttons look more professional where as fully round buttons look friendly and round edge look both professional and friendly. you can choose between shapes according to the requirements of company or brand.
- Third point is about ‘hierarchy’ when using different types of buttons ,it is important have a good hierarchy so that different buttons can have different type of importance. we can have low, medium and high emphasis .lastly make sure to design different states of a button like hover, tapped, disabled etc.
How to Apply?
Its very easy to apply the above the above types and rules to make attractive buttons in Figma.
Step 1: Firstly go to a new figma file, place text on screen and type anything you want for example type “button”.
Step 2: Next thing we want to do is put it in a frame and we will not be using normal frame ,we will be putting it in auto layout as button has to increase as we add text in it .To do it press ‘ Shift + A ‘ or right click on button and click Add auto layout. Once doing it we have to add some fill to it so go to right-most side and click on ‘+’ sign near fill icon. then add the color you like. Then add some rounded corner to it so it look good by going to frame .
Step 3: Add some padding to right and left lets say 30,then it will look like a proper button. Now we have to create component so that we can add more variants. now go to top and click on create component “diamond like icon”. now that we have created component so we have to add variant again go to top and click add variant.
Step 4: Now you can see main component which has multiple variant inside it so base part of it is ready.
Step 5: Click on component then you will see on right side there is properties in which you can add property or as some people prefer to say state.so we will allocate 1st one default and second one pressed states.
Step 6: As we have given different properties so we will change the color of second variant to somewhat darker so that we can differentiate between them
Step 7: Now to make it better I want to add a disabled property so for that lets first add one more variant.so click on main frame and you will get on button to add new variant so click on it and new variant will be get added .now give its property as disabled and change its color to your liking.
Step 8: Now that we have button with different properties so to add it we will take a screen or frame that you are designing and go to assets ,in the assets you will have buttons as local component ,so drag it on your frame and now we can see that from right side that we can choose different states like default, pressed and disabled.so everything is possible from here.
click on preview/run to view the output with different states
Step 9: So this is how buttons are created but to make them attractive it all depend on your creative mind that how much you can think differently, now I will show you one of my attractive button in which I have only just changed shape ,size and color but it look totally different from above.
Step 10: You can notice the difference Earlier it was not that appealing but now it is looking Attractive and again if only I change its corner radius we can get three types of buttons all looking attractive in their own way.
Step 11: And if you are still not satisfied and want to make it even more Attractive then use some effect like dark Shadow.it will make your buttons more good looking.so for doing this click on button ,go to effects in right side below fill option and click on ‘+’ sign in effects and dark shadow will be applied. you can also choose whether you want it inner or outer.
So by doing this you can create attractive buttons if you want to make more attractive you can use enable, hover, focus or use Icons which can be turned on/off and swapped .Rest depend on your Imagination and on How you use your mind to be creative.
Importance of using Buttons
- Buttons are fundamental building blocks in Figma, crucial for creating interactive and user-friendly interfaces.
- As it enhances user actions, user Experience and it also Improve Communication and Clarity between user and application.
- Figma enables you to make interactive prototypes, connecting buttons to various screens or functions. This aids in testing the user experience and spotting any usability problems prior to starting development.
Conclusion
At last ,I have only one thing to say that only your Imagination is boundary and you can make more attractive buttons if you try to think differently like out of the box. By using your mind you can make super awesome buttons just by only adjusting their size, shape, color and corner .