How to Create a Simple Button Component in Figma
In this tutorial, we’ll create a simple button using Figma’s built-in component system.
Written By
David Miller
David likes getting his hair cut!
Creating our button
To create our button, we’ll first start by drawing a rectangle and adding some text. To do this, select the rectangle tool in the top left toolbar, or hit “R” on your keyboard.
Draw out your rectangle, and once you’re happy with it, select the text tool or hit “T” on your keyboard. Type out what you want to go inside the button, and position the text over the button by dragging it on top. You should have something similar to the following:
Making it into a component
With both the rectangle and the text selected, hit the auto layout button on the right panel. This should “frame” the button. Doing this offers you lots of options, such as tweaking the padding and alignment. The reason that this is important to do is because now when you change the text, the button will scale correctly. Feel free to try this by changing your text and seeing how your button size reacts.
Now let’s make it a component. To do this, select your button and hit the make component button in the top middle toolbar.
Congratulations! You’ve just created a component. You can access your components in the assets tab of the left panel. You can drag and drop from this panel onto your design.
Changing the main component
The “main component” will be marked in the layers tab with 4 solid diamonds in a diamond shape, while an “instance” will be marked with an outlined diamond.
Changing the main component will also make changes to any instances that you may have in your design. This is extremely useful as if you make a change to something like the colour or font weight, you only have to do this in the main component as opposed to everywhere you have used the button.
More Tutorials
Here are some more tutorials that we think might be helpful for you. Feel free to contact us if there's anything you might need
Automating your service and repository patterns in Laravel with command generators
"Why spend 20 seconds doing something when you can spent 4 hours automating it," goes the proverb. See any professional proverbists around any more? No, because they've all been automated. Also it's fun. Whatever your programming pattern in Laravel, chances are that the php artisan make:x command is going to leave you high and dry on occasion. That's why it can be useful to have your own commands available to cover those gaps. We're going to go with the example of the "Service" pattern below.
Passing through slots in Vue
If you're keeping your Vue component sizes small, there's a good chance you'll need to implement a wrapper component at some point. If you're only utilising the default slot for these, it can be as simple as putting a <slot /> tag inside your wrapper component. However, there's a bit more effort involved if you need to pass through named slots to your base component
cPanel Setup - File Explorer
Continuing with our cPanel Setup series, this tutorial will give you an overview about setting up ConfigServer Explorer (CSE) onto your WHM powered VPS. This is not an essential plugin, but definitely one that is very handy, and again it is completely free, so why not?
cPanel Setup - Firewall
In this tutorial, which is part of our cPanel Setup series, we will give you a brief overview about setting up ConfigServer Firewall (CSF) onto your WHM powered VPS. This will protect your server from unwanted visitors and attempts at brute forcing onto the server. A firewall to protect your server is a must, and this is probably one of the most commonly used ones, and even better, it is completely free to use.
Easier Laravel polymorphic relationships with MorphMap
Polymorphic relationships are a hugely powerful way to make connections between tables in a Laravel application. Say you have tables called companies, users, & admins and all three needed to store addresses, without polymorphic relationships, we'd either have to forego standard two-way relationships in an addresses table and just use the ID, or we'd have to have three separate addresses tables, or even have all of our address fields on each of our three tables. All carry the weight of redundancy, repetition and unnecessary complexity.