One of the things that I think is important to work well from the beginning and to leave very well fixed are the button states. Today I want to talk to you about a "basic" part of the world of in FigureBut it makes a big difference when you're building a scalable design system.
Don't worry if it costs you at first or seems a little sloppy. It's totally normal. But once you get the trick, create components and assign their states It becomes natural... and especially very useful. Design the states correctly allows the button to communicate at all times what is happening: if you can click, if you have been pressed, if you are disabled, etc.
Here I show you how I do it step by step in Figure.
Creation of the base button: default state
The Default status It's the starting point. It is the visual state that appears by default, before the user interacts with the button. For this example, I have chosen a tone bright blue (#6CBCFF) which transmits clarity and energy.
The text of the button is pure white (#FFFFFF) to ensure good visual contrast. In addition, I have focused it with a legible and clear typography, designed for screens and compatible with different typographic weights.
As for the structure of the button:
- Size: 204 x 50 px
- Horizontal Auto Layout: activated with 16 px internal spacing on the left and 12 px to the rightand 8 px between internal elements, designed to be able to add an icon in the future without breaking visual harmony.
- Radio of the edge: 48 px for a fully rounded finish.
- Clip content enabled, which ensures that any additional content does not excel from the component.
Here are the features of my defined default button:
Convert the button to component
Before we create the variants, the first thing we have to do is convert our base button into a component. This is essential so that we can then generate your different states (Default, Hover, Pressed, etc.) in an orderly and reusable way.
To do this, simply:
- Right-click on the button and select "Create component".
- Or use the keyboard shortcut. - K (on Mac) or Ctrl + Alt + K (in Windows).
When the button becomes a component, you will see that it appears with a purple diamond icon. From here on, you can double it and start creating the other variants.
Council: make sure you have all the well-configured properties (such as Auto Layout, pating, background color and text), as any changes you make here shall be automatically reflected in all variants later.
Interactive States
Before I go in to create the states of the buttons, I want to go in well in detail in which we understand the states of the buttons. The states of a button define how it behaves visually according to the user's interaction. Not only do they improve the use experience, they also guide the user at every step of the process. From the time a button appears on screen until it is disabled, these visual changes communicate availability, response and context.
Design these states correctly allows:
- Transmit that an element is interactive.
- Confirm that an action has been taken.
- Reflect accessibility for keyboard or touch screen navigation.
- Avoid actions when the button is disabled.
So, I want to remind you and tell you better, what meaning the states of the buttons have. And it's just, when we talk about buttons in interface design, it's not enough that they "look good." It is important that communicate visually at what time of flow they are. So, define the different states of a button is key to providing a clear and accessible experience.
These are the most common and recommended states in any design system:
Default (default)
It is the base state, which appears when the screen is loaded and there is no interaction yet. The button is visible, active and available for clicking. It usually has a main color (brand or primary action) and must attract attention without being aggressive.
Hover
This state is activated when the user passes the cursor over the button. It is one way of saying "this is interactive" and helps anticipate action. The usual is to slightly obscure the color or add a subtle shadow.
Pressed (or Active)
It is the right time when the user clicked (or kept clicking). Here the button must show that you have received the action. A darker color, subtle animation or a depth effect is used.
Disabled
When the button not availableeither because some field is not completed or does not apply in that context. It must look clearly inactive, with a neutral or unsaturated color, and no hover effects. The important thing is that it is understood that you cannot click.
Practical example of a button States:
Now that you know what the states of a button and why they are so important in any interface, I want to show you a practical example of how I have applied them in one of my designs. In this case, I have created a button with its variants in Figure following a clear and simple logic, which can be easily integrated into any design system.
I leave you here how each state looks and when it is used:
| State | Background color | When used |
|---|---|---|
| Default | #2299EF | When the button is visible but there is still no interaction. |
| Hover | #0075CE | When the cursor passes over, without clicking. |
| Pressed | #0058A6 | When the button has been actively pressed. |
| Disabled | #D3D3D3 | When the button action is not available. |
How to create button variants in Figure
Once we have all states designed as independent components, the next step is unify them into a single component with variants, which will allow us to manage them easily from the property panel.
Step by step of creating variants of «status» from a button:
Select all individual components (e.g., Button Default and Button Hover).
1. On the right side bar, click "Combine as variants". This will group the buttons into a single master component. Below you can see from the panel of Figure, as you will see when selecting both components, it already gives you the option of «Combine as variants».
In this step, Figure automatically generate a group with the property Variant. Change the name to something more descriptive, like State.
2. In each variant, it defines the state value: Default, Hover, Pressedetc.
3. You can continue to add new states with the button "+" Add variant, which maintains the same base structure of the button.
Once you have created all the necessary states, you will have a list of components designed like this:
Important: Any changes you make in the base design of the button (such as typography, pating, auto layout or iconography) shall automatically apply to all variants. This ensures visual consistency and avoids unnecessary redesigns.
UX / IU Designer and Digital Marketing Specialist
Creating intuitive experiences and effective strategies.
