How to create and use components in Figma for beginners | by Bagus Prabowo | Nov, 2021


The process of creating a component is the same as creating an element from scratch. This time, I’m going to create a UI button component as an example.

As with everything, start with a frame

Imagine frame as a blank canvas that you can alter to be any component that you desire.

Determine the dimension of the component that you are going to create. Here, I’m creating a button for a mobile device. I outlined the frame so that it could be visible on this page.

After you have created your frame, you can edit it however you want. Here are some actions that you might consider doing:

  • Determine the way your component would look in terms of color — Determining the color of the component doesn’t have to be only the main color of the component. You should also consider the stroke and the effects that the component should have. My button doesn’t have a stroke and has no effect as well since this is a primary button.
  • Pump up the corner radius to make it more appealing in users’ eyes — By cornering up our component when necessary, it makes our design less rigid and more welcoming. It will also make our design tidier and minimalist. Remember, the maximum value for the corner radius is 50% of the height of the element.

Insert a text field if required

In this case, every button in our application would have many types of text. Hence, we need to create a text field where we can input the kind of text that we would like.

Keep in mind that you need to consider the spacing, the font size, the text and component alignment, and the text box type for your component if you are using a text field.

To make it simple, here are examples of the types of text boxes that are available in Figma. I’m using a UI form element as an example.

  • Auto width — The text box wraps the text neatly. This type of text box is used when paired with an auto-layout component that expands horizontally to make it seem effortless and doesn’t mess up the positioning of the components inside it.
  • Auto height — The text box adjusts itself according to the number of lines that the text will take. We determine the width of the text box. The auto height text box is used together with a component that expands vertically.
  • Fixed-size — The name of this text box already defines itself. We use this type of text box when we already know the maximum amount of characters or we have already know the exact size of the components. It is perfect when we want the size of our component to be immutable.

Create the component

Creating the component from the element that we have created is easy. We can just click the create component button or simply click ctrl + alt + k to generate a component quickly from a selected element.

Add variants to enhance design reality with natural gestures

Common gestures that people use when using an application are pressing, hovering, and clicking. After we have created our component, we will have the option to add variants to our component.

It is crucial to pay attention to small details because those details are going to create a tremendous difference when we are creating a prototype out of our components. It would make our design a lot more realistic and alive.

In creating a mobile device button, we should consider three variants, when the button is untouched, clicked, and disabled. I prefer to call the untouched button a default button.

Besides creating the variants and designing them, make sure that you name them properly. Name your variants with a clear meaning, name them as they appear to be. Naming your variants with random names could result in an error in Figma and you would be confused to use it yourself.



Source link