Preparing Wireframe UI Components

Creating wireframe UI components is a vital part of the design process, enabling you to establish a consistent and efficient workflow. This guide will walk you through the preparation of essential components in Figma, from buttons to navigation bars, ensuring that your wireframes are not only functional but also visually cohesive and ready for prototyping.

In this section, we’ll cover the following topics.

Understanding App UI Components

Before diving into wireframing, it’s essential to familiarize yourself with the key components of an app's user interface (UI). The UI is built from combinations of these components, and understanding these patterns will allow you to design and build your app’s UI and prototypes more efficiently.

Basic UI Elements

The foundation of any app UI design consists of these basic elements:

• Images
• Icons
• Text
• Shapes and Lines

Key Components

These basic elements combine to form the key components commonly used in app UI design:

• Buttons
• Input Forms
• Cards
• Status Bar
• Top Bar Navigation
• Sidebar Navigation
• Bottom Bar Navigation

As discussed in the previous chapter, Figma's Component feature allows you to create master components that can be reused throughout your design. By leveraging this feature, you can dramatically improve your design efficiency and maintain consistency across your project.

Material Design

For a more comprehensive list of UI components, Google’s Material Design website is an excellent resource. It not only provides a broader range of components but also offers insights into the principles of design systems. Visit the website here: Material Design Components.

UI Component Example

For our example of a photo-sharing app, we’ve prepared several key components that will be used repeatedly throughout the app's UI design. We’ll go into detail on how to build some of these components in the following sections.

Explore the wireframe component example in detail by accessing the Figma file here.

Refer to the example of the components, which have been registered under Assets in Figma. You can easily drag and drop these components into your designs.

Creating App UI Components

Now that you have a basic understanding of Figma Components, let’s go through some example approaches to create components for a wireframe, using our photo-sharing app as an example.

Basic Shapes and Images

You can access frequently used design assets from Figma Wireframe Kits. Copy and paste these shapes or images into your working file, or find images below to add to your canvas.

Icons and Logos

Icons: Use plugins like Iconify to find relevant icons. Run the plugin, search using keywords, and drag and drop the desired icon into your design. Adjust the icon’s color to match your wireframe’s style. Watch the video below.

Logos: While we created the logo for our example, you can use plugins to generate custom logos. Search for “Figma logo plugin” to explore options like Logo Creator. Watch the video below.

Forms and Buttons

Forms and buttons are typically created using Figma's design tools. For guidance on creating button component variants, refer to the previous section on Figma Component Variants.

Cards

To create a card, combine images, text, and shapes. Watch the video below.

Placeholder Texts: For app UI, placeholder text is often necessary. There are several plugins available to auto-generate placeholder texts, which we’ll explore in the next section.

Bars (e.g., Navigation Bars)

Navigation bars are complex components that combine multiple design elements. When designing bars, especially for navigation, consider two important aspects:

1. Linking to Other Frames: This is crucial when setting up your prototype. We'll cover prototype settings later.
2. Responsive Design: Navigation bars need to be responsive across different devices (e.g., mobile, tablet, laptop). Use auto layout or adjust constraint settings for responsiveness. For navigation bars with many nested components, manual constraints might be better to customize the positioning of each element. Watch the Video below.

Figma Placeholder Text Plugins

When designing an app UI, you may need placeholder text for various elements. Composing placeholder text manually can be time-consuming, so plugins like Lorem Ipsum are commonly used. Additionally, you might need placeholder emails, names, dates, or other types of text. To save time, you can utilize Figma’s placeholder text plugins.

We introduced two plugins in Chapter 1. Here's how to use them:

• Content Reel: This plugin offers a wide variety of dummy materials for UI design, including text, avatars, and icons. Watch the video below.

Install Content Reel.

• Lorem Ipsum: Ideal for generating dummy text of varying lengths. Watch the video below.

Install Lorem Ipsum.

Both plugins are very user-friendly. Watch the video below.