UI/UX Development Basics with Figma 01: Creating Buttons

Buttons are like the gatekeepers of user interaction; they guide users on what to do next. A well-designed button not only looks appealing but also makes the user's journey smooth and intuitive.

UI/UX Development Basics with Figma 01: Creating Buttons

Welcome to Day 1 of Your UI/UX Journey!

Hey there! Today, you're starting an exciting journey into the world of UI/UX design with Figma. We're kicking off with something that might seem simple but is incredibly crucial in design - buttons!

Why Buttons Matter Buttons are like the gatekeepers of user interaction; they guide users on what to do next. A well-designed button not only looks appealing but also makes the user's journey smooth and intuitive.

Let's delve deeper into what makes a good button from a UI/UX perspective:

Visibility and Distinctiveness

  • Stand Out: A button should be easily noticeable at a glance. This is often achieved through contrasting colors or distinct shapes that make it stand out from the rest of the interface.
  • Size Matters: It should be large enough to be easily clicked or tapped, but not so large that it dominates the interface.

Clarity and Communication

  • Clear Labeling: The text on a button should clearly communicate its function. Use verbs that describe the action, like "Submit", "Read More", or "Download".
  • Icons and Symbols: Sometimes, icons can be used alongside text to convey the button's purpose more effectively.

Design Consistency

  • Consistent Style: Buttons across your application or website should have a consistent style. This includes consistent color schemes, shapes, and font choices.
  • Predictable Locations: Place buttons where users expect to find them, like a 'Submit' button at the bottom of a form.

Accessibility

  • Color Contrast: Ensure there is enough contrast between the button color and its text for readability, especially for users with visual impairments.
  • Touchable Area: On mobile devices, buttons should have a touchable area that's large enough to be tapped easily, adhering to the recommended touch target size standards.

Feedback and Interaction

  • Interactive Feedback: Buttons should provide feedback when interacted with. This could be a change in color, elevation, or a simple animation, indicating that the button has been pressed.
  • Disabled State: If a button is not clickable under certain conditions, it should clearly look and behave disabled.

Context and Relevance

  • Match the Action's Importance: The button’s design should reflect the importance of the action. Primary actions should be more prominent than secondary ones.
  • Avoid Overuse: Too many buttons can lead to decision fatigue. Only include buttons that are necessary for user tasks and navigation.

Responsiveness

  • Responsive Design: Buttons should look good and remain functional across different screen sizes and resolutions.

By adhering to these principles, you ensure that the buttons in your UI/UX designs are not only visually appealing but also functional and user-friendly. Remember, the goal of a good button is to guide users smoothly through their digital journey, making their experience both intuitive and pleasant.

Today’s Mission: Design Your First Button in Figma Don’t worry if you’re new to Figma or design; I’m here to guide you every step of the way.

Step 1: Set Up Your Figma Workspace

If you haven’t already, sign up for a free Figma account at ​Figma's website​ by clicking the "Get Started for Free Button"

The Figma Web Site. Make a free account by clicking the button in the upper right.

For the purposes of our course, the free starter edition works fine. If you receive the "What would you like to do first," prompt, select "Design with Figma" and click finish.

There will be a short series of prompts that will show you a few basic Figma features. Once you've clicked through all the prompts choose "Start a New File." If you don't receive welcome prompts (likely because you already have a Figma account, log in to Figma and choose "New design file" from the drop downs.

You can create a new Figma design file from the dropdowns. Select "New design file".

Once you've completed this step, you'll be in a blank Figma canvas.

The blank FIgma Canvas

Step 2: Designing Your Button

Select the 'Rectangle' tool and draw a shape. This will be the base of your button. Try to make your rectangle around 250 pixels by 65 pixels. You'll se the dimensions as you drag with the rectangle tool.

Now, let’s make it look like a button! Experiment with different colors, rounded corners, and shadows. You can make these changes in the property panel as long as your rectangle is selected.

The properties panel tells you everything you need to know about the selected object-- from the X and Y coordinates, width and height to the color, stroke and effects.

UI/UX Tip: A button should stand out but also fit in with the overall design. Play around with colors that contrast well with the background.

Step 3: Adding Text to Your Button

Grab the 'Text' tool and click on your button to add text.

Selecting the Text Tool

Adjust the font size and weight to make it clear and legible.

Adjusting the size of the type on the button

You may need to reposition the text so it is centered in the button.

UI/UX Tip: The text on a button should be concise and action-oriented, like “Sign Up” or “Learn More”.

Step 4: Fine-Tuning

Adjust the spacing between the text and button edges. This is called padding, and it’s crucial for readability and touchability on mobile devices. A good rule of thumb is to make the padding on the width twice as much as the padding on the height of the button. At minimum, an uppercase “W” should fit between the label and the edge of the button.

This button maintains the recommend padding ratios. Zoom in on your button using the plus key while in Figma.

Step 5: Practice and Share

Now create four more button variations, stacked into a singular column. Ensure each button is unique, varying color, font, font size, etc.

Once you’re happy with your buttons, take a screen capture of your work. Feel free to share it on our ​SkillSprints Slack channel​ for feedback and high-fives! There is a #ui-with-figma channel created for this course.

Encountered a Hitch? If you’re facing any challenges or have questions, pop over to our ​Slack channel​. We’re a community here to learn and grow together!

Your Takeaway Today, you’ve created a simple yet fundamental element in UI/UX design. Buttons are the unsung heroes of user interaction, and you’ve just made one!

Final Thought Great job today! Remember, every great design starts with small steps. Today it's a button, and who knows what you'll be creating by the end of this course. Excited for tomorrow? We'll be diving into designing a login form. See you then!