Figma components- Buttons

What is Figma?

  1. The real value of Figma is that it’s cloud-based, so version control will never be an issue.
  2. Figma is a great way to design quickly, build, and export files.
  3. With Figma’s extra smooth live collaboration, designers, developers, and clients can come together in one place.

Why use Figma?

  1. Figma allows the seamless creation and distribution of a component library to all the team members working on the same file.
  2. Create custom icons and illustrations necessary to communicating ideas and stories.
  3. 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

The Functionality of buttons

  1. Create a new frame and rename it as ‘Buttons’ in the layers panel.
  2. Create a rectangle for the button container with specific dimensions and rename it as ‘button container’ in the layers panel.
  3. If you want to create outlined buttons, apply an outline stroke of 2px and if you want to create filled buttons, give fill color.
  4. Then, type the button text for the container. (eg. Button)
  5. Choose the typeface and font size for the button text. (eg. Open Sans, 17pt — Bold)
  6. Place the button text above the button container and align them at the center.
  7. Select both the layers and click on the ‘create component’ button or click ‘Ctrl + Alt + K’ or ‘⌥ Option -⌘ Command-K.’
  8. Finally, rename the component as ‘button/primary’ in the layers panel.

Outlined buttons

Buttons- Outlined

a. Default Style

b. Hover Style

c. Pressed Style

Filled Buttons

Button- Filled

a. Default style

b. Hover style

c. Pressed style

Example of Sign Up Screen- MentorPower Software

What are variants?

  1. Select all the components of buttons created.
  2. Click on ‘Add variants’ present in the design panel to the right.
  3. Interestingly, variants automatically consider the properties of the component according to layer names.

Figma live view

Variations of Buttons- Figma live view

--

--

UX/UI Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store