Mar 30, 2021
Figma components- Buttons
What is Figma?
It’s currently the industry’s leading interface design tool, with robust features that support teams working on every design process phase.
- The real value of Figma is that it’s cloud-based, so version control will never be an issue.
- Figma is a great way to design quickly, build, and export files.
- With Figma’s extra smooth live collaboration, designers, developers, and clients can come together in one place.
Why use Figma?
- Figma allows the seamless creation and distribution of a component library to all the team members working on the same file.
- Create custom icons and illustrations necessary to communicating ideas and stories.
- The ease of access and install plugins allow users to have all the tools they need to work as efficiently as possible.
Using components in Figma
Figma avails us to create reusable elements known as components. These components help us to be flexible and symmetrical in our design process. Figma components are nothing but a frame that we can duplicate to create instances. These instances can be called the reflection of the component. Any change we make to our component will immediately reflect in its instances.
The Functionality of buttons
In any app or website, we always find several buttons that help users navigate through the interface. Controls allow users to take action or make choices according to the situation demands. Usually, they are placed all over the website or app wherever needed, but they should be easily findable and recognizable while indicating the action they allow the user to complete.
The process to design Buttons:
- Create a new frame and rename it as ‘Buttons’ in the layers panel.
- Create a rectangle for the button container with specific dimensions and rename it as ‘button container’ in the layers panel.
- If you want to create outlined buttons, apply an outline stroke of 2px and if you want to create filled buttons, give fill color.
- Then, type the button text for the container. (eg. Button)
- Choose the typeface and font size for the button text. (eg. Open Sans, 17pt — Bold)
- Place the button text above the button container and align them at the center.
- Select both the layers and click on the ‘create component’ button or click ‘Ctrl + Alt + K’ or ‘⌥ Option -⌘ Command-K.’
- Finally, rename the component as ‘button/primary’ in the layers panel.
According to my observation, buttons also have different styles and sizes. The attributes keep changing according to the design and the need for action. Therefore, I explored changing characteristics of the button using a single component and making multiple variants.
Outlined buttons
Outlined buttons give a light and effective texture to the interfaces. It enables users to recognize it quickly and proceed to take action. We can create outlined button by providing a definite stroke around the button container. These buttons can vary in sizes and can later distinguish in different styles:
a. Default Style
In default style, buttons have a primary color to stroke used across the projects. We can allocate the button size according to the required action and design. Later, we can rename the button as ‘outline-button/primary/default.’
b. Hover Style
While hovering, the color of the button container changes to a tint of the hue chosen for the component. The color variation in the button shows the activeness of the button and lets users make a decision. After creating the button, rename it as ‘outline-button/primary/hover.’
c. Pressed Style
The pressed button appears after any action or choices made by the user. The button container has a little darker tone than that of the hover style. Finally, completing the process, rename the button as ‘outline-button/primary/pressed.’
Filled Buttons
The filled button is similar to the outlined button, except they have a solid background. The buttons stand out on any website or app and are easy to grab users’ attraction to take action. These buttons are also seen in two different sizes and also in other activity states.
a. Default style
The default style of filled buttons also has primary color applied to the button container, as shown in the image above. We need to update the color of the button text to a light hue to make it visible. Further, rename it as ‘filled-button/primary/default.’
b. Hover style
The color of the button container changes to the lighter tint while we move a pointer on it. Ultimately, rename the button as ‘filled-button/primary/hover.’
c. Pressed style
While we press, the background fill of the button container changes to a darker shade of primary hue used in the default style and acknowledges the user’s action taken. Now, rename this button as ‘filled-button/primary/filled.’
Note:
1. Can change the fill color and stroke color according to the requirements.
2. Can put icons to the left or right side of the button text.
As soon as the specification is completed and terms of service are checked, the ‘Create Account’ button is activated, as shown in the image above. Subsequently, we can further use these buttons as variants in Figma.
What are variants?
Figma has recently introduced this feature of combining components into variants and make the design process move swiftly. We can say that the variants are the group of multiple components and can bifurcate them using properties assigned to the components.
How to create Variants?
- Select all the components of buttons created.
- Click on ‘Add variants’ present in the design panel to the right.
- Interestingly, variants automatically consider the properties of the component according to layer names.
For instance, for buttons:
Property 1: outlined-button, filled-button
Property 2: primary
Property 3: default, hover, pressed
Hence, variants allow us to change the state of the particular component in just one click. Isn’t this great!
Note: We can use variants in any component that we create.
Figma live view
About Me
I am a UX/UI designer possessing an analytical character towards web design. Exploring new techniques and outcomes of improving user experience is the vital interest I desire. I have been attempting various tools like Adobe Photoshop, Adobe Illustrator, Adobe Indesign, Adobe After effects, Adobe XD, Figma, Invision Studio, and Fontlab used for graphic and web designing. I cherish working on various projects like illustrating, poster making, developing fonts, publication design, signage design, wireframing, prototyping, and many more. I found that these projects’ learnings are very supportive in web design as everything is linked to each other somehow. It has been great for me to drown deep into this field as each day is becoming worthwhile spending time in the process.
To know more about me or my projects, you can find me on,
Behance: behance.net/salonishah27
Linkedin: linkedin.com/in/salonishah27
Website: www.salonishah.in
