This is because everyone has a particular way they process information. In design, this is called viewing (or reading) patterns. As a designer, it's important to understand how your users (including potential ones) consume information, and how best to place the most crucial information so nobody misses it.

In this article, we'll talk about different viewing patterns, how to choose the best ones for your project, and we'll also see real-life examples of these patterns.

Here's what we'll cover:

1. What you need to know before reading
2. The origin of viewing patterns
3. Common viewing patterns
4. Why are viewing patterns important?
5. How should I choose a viewing pattern for my design project?
6. Conclusion

Prerequisites:

Before we go into the article proper, please note that it'll be helpful if you have basic knowledge of core design principles and the importance of these principles in guiding users' attention and organizing information effectively.

But this is not necessary, as I wrote this article for everyone, including absolute beginners.

The Origin of Viewing Patterns

The concept of viewing patterns can be traced to the field of psychology, specifically the study of eye movements and visual perception.

While people have been reading and consuming visual information for a long time, proper observation and analysis of reading behaviors emerged with the development of eye-tracking technology and scientific research methodologies in the late 19th and early 20th centuries.

A lot of pioneers and researchers such as Louis Emile Javal, Edmund Huey, Alfred L. Yarbus, and Charles H. Judd conducted experiments to observe eye movemts and behaviours in the late 19th century and early to mid-20th century.

The formalization of viewing/reading patterns as design principles in the context of graphic design and information architecture began to gain traction in the latter half of the 20th century. Designers and usability experts started applying insights from eye-tracking studies to optimize layouts for print media, signage, and digital interfaces.

Over time, the study of viewing patterns expanded beyond text-based reading to include diverse media formats, such as web pages, multimedia presentations, and interactive interfaces.

Today, viewing patterns continue to evolve with advancements in technology and changes in user behaviors, guiding the way designers approach layout, navigation, and content presentation.

Common Viewing Patterns

Now that we know how viewing patterns came about, let's talk about some common viewing patterns in existence.

The F-pattern

This is a common viewing pattern observed in online content consumption. According to this pattern, users scan the page in a horizontal movement across the top, then move down the page, scanning shorter horizontal sections. They continue to read less of the content, until they finally start reading vertically, forming the F-shape.

Diagram illustrating how the F-pattern works on a wireframe. Image Credit: Nielsen Norman Group

To capitalize on the F-pattern, you can place important information such as headlines, key points, and CTAs along the top and the left-hand side of the page to ensure maximum visibility.

Some examples of real-life platforms that utilize the F-pattern include:

• Shopify
• LinkedIn
• The New York Times

The Z-Pattern

The Z-pattern is another common viewing pattern. This pattern can be noticed in designs where the user is expected to move their eyes in a zig-zag pattern across the page.

This pattern typically starts with a horizontal movement across the top of the page (forming the first stroke of the "Z"), followed by a diagonal movement from the top-right to the bottom-left (forming the second stroke), and finally, another horizontal movement across the bottom of the page (completing the "Z").

Diagram illustrating the Z-pattern. Image Credit: UX Planet

To capitalize on this pattern, you can align information on the predicted path of the Z-pattern to guide users' attention more effectively, especially in designs like landing pages and presentations.

Some examples of real-life platforms that utilize the Z-pattern include:

• Artykul
• Mohash
• Des Climbing

The Gutenberg Diagram

The Gutenberg diagram outlines a viewing pattern based on the natural eye movement of Western readers, and is influenced by cultural and linguistic factors.

The Gutenberg Diagram divides the page into four quadrants: the primary optical area (top-left), the strong fallow area (top-right), the weak fallow area (bottom-left), and the terminal area (bottom-right).

The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area... – Stephen Bradley (Vanseo Design)

Image illustrating Gutenberg diagram divided into 4 quadrants. Image Credit: Techwala

You can strategically place content based on the Gutenberg diagram to optimize visual hierarchy and readability, ensuring that important information receives the most attention.

Some examples of real-life platforms that utilize the Gutenberg diagram include:

• Wikipedia
• BBC News

Layer-Cake Pattern

The layer-cake pattern involves stacking multiple layers of content vertically, with each layer containing distinct information or visual elements.

Image illustrating the layer-cake pattern on a layout. Image Credit: Chip Cullen

Users typically engage with this pattern by scanning the top layer first, then sequentially exploring deeper layers based on their interest or curiosity. You can use this pattern to present complex information in a more structured format, allowing users to navigate through layers of content at their own pace.

Some examples of real-life platforms that utilize the Layer-Cake pattern include:

• Medium
• Squarespace

Why are Viewing Patterns Important?

Viewing patterns help you guide how users view and consume information on your designs. They help you arrange content in a way that naturally aligns with your users' reading habits. By placing information where users are most likely to look first, you're ensuring that key messages are effectively communicated.

Also, understanding viewing patterns help you cater to the needs of a diverse group of users. Different people process information in different ways and understanding these habits ensure that you design with accessibility in mind.

What's more, designs that align with existing viewing patterns provide a more intuitive and less stressful user experience.

How Should I Choose a Viewing Pattern for my Design Project?

Choosing a viewing pattern for your design depends on a number of factors including, the context of your project, users' preferences, goals of the project, and so on.

Here's a step-by-step guide to help you select the best reading pattern for your project:

1. Know your Users: You have to first understand the demographics of your target or potential users. What do they prefer? What are their goals? In what situations would they use your project? Gather insights into how they interact with content and their technical proficiency.
2. Define your Project Goals: Make sure to clarify the objectives and desired outcomes of the project you're working on. Are you trying to inform or facilitate a specific action? Should your design be very serious or a little playful? You need to identify the key messages you want to pass across to your users, and prioritize them based on importance.
3. Evaluate Context and Platform: Take into account how your users would view your product. Will they view your content on a website, application or a print medium? Consider the device types and screen sizes that your users are likely to use.
4. Select Viewing Pattern: Considering the available data and the insights you've gathered, you can go ahead to choose a viewing pattern that best aligns with your project objectives.

Now that you've selected a viewing pattern for your design, make sure to constantly monitor it's effectiveness through testing and feedback.

Note: You can interchange these steps or even skip some. Just make sure to do whatever works best for your users.

Let's do a little practical exercise:

Say you're working on a hero section for a new e-commerce website selling outdoor gear. Some things you need to consider for this project include:

• The primary goal: to showcase the latest product offerings on the hero section and entice visitors to visit the website further. You'll want to highlight key features, products, and calls-to-action (CTAs) to encourage conversion such as making a purchase or signing up for a newsletter.
• Your target users: likely outdoor enthusiasts, including hikers, campers, and adventure seekers. They'll likely be people with limited time to spend on each webpage.
• Context and platform: Users will likely access the page on several devices, including desktop computers, laptops, tablets, and smartphones. You'll want to consider how the design will adapt responsively across different screen sizes and orientations, priortizing mobile optimization for on-the-go users.

Due to the time constraints of your users, and the need to capture attention quickly, the F-pattern may be a suitable choice. Place high-priority content, such as featured products, top deals, and prominent CTAs, along the top and left-hand side of the page, where users are most likely to look first.

You can use visual cues such as arrows, bold typography, and contrasting colors to draw attention to key elements and guide users' eye movements down the page.

Here's what I came up with from the practical design:

Hero section I designed using the F-pattern.

In the design above, in sequential order, there's:

• a top navigation containing the logo, links to other sub-pages, and the log-in and sign up CTAs(call-to-actions).
• a main heading, description, and call-to-action (Shop Now) on the left-hand side of the page.
• a section showing latest arrivals on the website.

Image showing how the F-pattern is depicted on the design.

I would love to see the results of this practical exercise on your end.

Conclusion

Viewing patterns are very important as I mentioned earlier. They are invaluable for designers across different disciplines, and are easy to understand and incorporate into your designs.

You just need to be sure of what works best for your users, and design with that in mind. Also make sure to experiment with different viewing patterns so you can discover your own unique style. Have fun experimenting!

In this article, we're going to look at components as features which can help boost your efficiency as a designer. I'll show you how to create an interactive button component using Figma.

Table of Contents

1. Prerequisites
2. What are Components?
   – Button components
3. How to Create an Interactive Button Component in Figma
   – Build the button component
   – How to create variants
   – How to create hover and active states
   – How to create other button states
   – How to group buttons by states
   – How to make the button components interactive
4. Conclusion

Prerequisites:

To get the most out of this article, it'll be helpful to have basic knowledge of how to use Figma and its features. But note that this is not necessary, as I wrote this article for everyone – irrespective of their individual level of knowledge.

This article is for everyone who is interested in learning more about components, reusable elements, Figma, and design in general.

What are Components?

Components are reusable design elements that you can use multiple times within a project or across different projects.

Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input. – Material Design 3

Components can range from simple elements like buttons or icons to more complex structures like navigation bars or entire UI modules. They help maintain consistency and uniformity in a design, they are scalable, and they're very helpful for collaboration.

Button Components

Buttons, sometimes called CTAs, are elements which allow a user to carry out a specific action like signing up, buying a product, subscribing to a newsletter, and so on. They come in different formats and sizes, and are very important elements in design.

Button components typically consist of visual attributes such as shape, size, color, and typography to convey their functionality and encourage user interaction. They can vary in style and appearance based on the design system, brand guidelines, or the context of their usage within an application or website.

How to Create an Interactive Button Component in Figma

Next, we're going to create an interactive button component in Figma. This button component will contain text only buttons, buttons with icons on either the left or right side of the text, and buttons with icons only.

The button component will contain different button states (default, hover, and active), and will be interactive.

This is very helpful for when you're designing interfaces with different use cases. For instance, you could want a button in your design to carry text and an accompanying icon, for a particular screen. In another screen, you might want to use an icon only button. If you have already created these different components, you'll save a lot of time.

_Different button types (Icon only, Icon & text, text only). Image from Telerik_

Let's get started!

Build the Button Component

Open a new Figma file. If you don't have a Figma account, go ahead and create one at figma.com.

Opening a new Figma file

Next, click on the Text icon on the left hand panel, and type Button.

Typing "button" in the search bar.

Next, add auto-layout (Shift + A).

Adding auto-layout

Make the horizontal button padding to be 36px and the vertical padding 12px.

Adding horizontal and vertical padding

Also, give the button a border radius of 8px.

Adding a border radius.

Add a fill to the button.

Moving to the "fill" section.

I'll choose the color code #1C199, which is a shade of blue.

Choosing a color code.

Next, I'll make the text a little bit bolder. To do that, click on the text, and move to the font section on your right panel.

Moving to the font section.

I'll give the button a font size of 16px, and make the weight "medium".

Changing the font size to 16 px

Changing the font weight to medium.

Showing the edited text

Next, I'll add any icon of my choice to the button frame. This will enable me easily create a button component with icons, and not just text when the time comes.

To add an icon, I'll use a Figma plugin called Iconify, which is one of the largest icon collections in Figma. To do this, right-click on your canva and a menu will pop-up. Go to the Plugins tab.

Opening Plugins

A list of the recent plugins you have used will pop-up. You'll also see all the Saved plugins you have. The first plugin on my list is Iconify (that's because I use it a lot, lol). Now, I'll just click on Iconify and search for the particular icon I want to use.

If you have never used a plugin before, and so there are no plugins on your list, you can use the resources section to search for your plugin of choice and save it to your list.

Going to the resources section

Searching for plugins

I want to use the forward arrow icon, so I'll just search for that using the search field on the plugin.

Searching for the forward arrow icon.

A lot of forward arrow icons from different collections will pop-up so, I'll just choose any particular one that works best for me, in this case, a forward arrow icon from IonIcons.

Selecting a particular forward arrow icon

I'll select the icon and click on the Import icon button so it can appear on my Figma file.

Importing the icon to your file

Next, we'll reduce the size of the icon to whatever height and width we want it to be. It's currently on 48 x 48 and I want it to be 24 x 24.

Icon size currently 48x48

Changing icon size to 24x24

We'll also change the colour of the icon to match the text colour (white). To do this, make sure the icon is selected and then scroll down to Selection colours to input the color code, which in this case is #FFFFFF.

Changing icon colour to white (#FFFFFF)

Next, we'll add the icon inside the button frame. To do this, just drag your icon inside the frame.

Dragging arrow icon into the button frame

You'll notice that the frame size increases to accommodate the icon added.

Next, duplicate the icon and move it to the other side of the text. Duplicating the icon will help us easily create button components with icons on either sides of the text later.

To do this, simply use Ctrl + D, and move the duplicated icon to the other side.

Using Ctrl + D to duplicate an icon

Moving the duplicated icon to the other side of the frame.

Next, I'll hide both icons because I want to create my first button component (text only button). I'll rename the frame to Button.

To hide both icons, move to the layers panel on your left, and click on the eye icon by the side of the assets you want to hide.

Moving to the layers panel to hide the icons

You'll notice that the frame resizes automatically once both icons are hidden.

Button frame with hidden icons

I'll then rename the frame to Button. To do that, double click on the heading of the frame, and rename.

Double-clicking the frame

Renamed button frame

How to Create Variants

Next, we'll make the button frame a variant.

Variants help you create multiple versions or states of a component. They're very useful when designing interfaces that have different states or variations, such as buttons with different sizes or designs, like we're creating here.

To make the button frame a variant, double-click on the component icon at the top of your screen.

Moving to the component icon at the top of the screen and double-clicking

Variant of the button component

Next, I'll add another variant because I want to have three states for the button (Default, Hover, and Active). To add another variant, click on the plus icon on any of the already existing variants.

Clicking on the olus icon on a variant to add nother variant

Automatically, a new variant will be added.

Added third variant

Next, I'll increase the size of the component frame so it can accommodate other variants that will be added. To do this, simply select the whole component, and drag to your satisfied size.

Selecting the component frame

Increasing the width of the component frame.

How to Create Hover and Active States

Next, I'll tweak the last two buttons (hover and active states), so the difference between the three button states will be obvious. To do this, I'll make the hover state lighter, and the active state darker.

For the hover state, I'll change the color code to #392AE7, which is a lighter shade of blue. Make sure the particular button is selected so the changes take effect:

Changing color code for the hover state

For the active state, I'll change the color code to #19107A which is a slightly darker shade of blue.

Changing the color code of the active state

How to Create Other Button States

Next, we want to create other button states (buttons with icons on either side of the text, and with icons only).

To start with, I'll duplicate the three buttons. To do this, select the three buttons and duplicate using Ctrl + D.

Duplicating the three buttons

Next, we want to create button components with text and a left icon. To do this, click on the eye on the left icons on each of the icons to reveal them.

Revealing the icons on the left side of the buttons

Next, we want to create button components with text and a right icon.

To do this, duplicate the buttons again, and do the same for the right icons.

Duplicating the buttons a second time

Revealing the icons on the right side

Lastly, we want to create button components with icons only.

To do that, we'll duplicate the buttons one last time to hide the text.

Duplicating the buttons a third time

Hiding the text

I'll make the icon only frames a square shape. To do that, select the three frames and drag to resize.

Selecting the 'icons only' frames

Resizing the frames

I'll now resize the component frame to fit its content.

Resizing the component frame.

Next, we'll rename the different button states so it'll be easy to identify them. First, select the whole component frame. Then move to the section labelled Properties, and change Property 1 to Button to show that this is a button component.

Moving to properties section

Renaming the component frame

Next, we'll rename the button frames by icons. Select the first three frames horizontally, and go over to the Current variant section. Rename them No icons.

Selecting first three buttons and renaming them

Renamed no icons buttons

We'll do same for the next three buttons, and name them Left Icons.

Renamed left icons' buttons

We'll do the same thing for the next set, renaming them Right Icons.

Renamed right icons' buttons

Finally, for the last set, we'll rename the buttons Icons only.

Renamed icons only buttons

How to Group Buttons by States

Next, we'll group the buttons by states and name them. We'll start with the first state: Default. Select all the button frames under default and move to the Current variant section on the right hand panel. Click on the configure icon to edit the component configuration.

Clicking on configure icon

Click on the description box to add a description. In this case, I'll simply type Default state.

Adding a description

Do the same for the other two states – hover and active.

Adding a description for the hover state

Adding a description for the active state

How to Make the Button Components Interactive

To start, switch to the Prototype tab, located at the top of your screen, right-hand panel.

Switching to prototype mode

Next, add an interaction from the first to the second no icon button frame. To do this, click on the first button frame and drag the plus icon to the second frame.

Adding an interaction

This will bring up a list of interaction options and settings for the animation.

Bringing up interaction setting

Change On click to While hovering.

Changing interaction type to "while hovering"

Do the same for the next button frame but, instead of While hovering, change to While pressing.

Animating the third button frame

Now, repeat the same steps for the other sets.

Repeating the animation steps for the other button sets.

Voilà, you just created an interactive button component.

Conclusion

Components help enhance your designs and make them more efficient. They also help you save time and they improve consistency across your designs. But they can only help when they're created the right way.

Practicing often will help improve your ability to create helpful reusable components. Remember, make every decision with your users in mind.

In this tutorial, you'll learn what variables in Figma are, and how to create and implement different types of variables while designing in Figma.

Prerequisites:

To get the most out of this handbook, it'll be helpful to have basic knowledge of how to use Figma and its features. But note that this is not necessary, as I wrote this handbook for everyone – irrespective of their individual level of knowledge.

This handbook is for everyone who is interested in learning more about variables, Figma, and design in general.

Table of Contents:

• What are variables?
• Differences between Variables and Styles in Figma
• Why are Variables Important to the Design Process?
• How to Create Variables in Figma
  • How to Create Colour Variables in Figma
    • How to Create Colour Variables for Tokens
    • How to Implement Colour Variables in Your Designs
    • How to Create Different Modes with Variables
  • How to Create Number Variables in Figma
  • How to Create String Variables in Figma
  • How to Create Boolean Variable in Figma
• How to Use Variables for Advanced Prototyping
  • Advanced Prototyping with Number Variables
  • Advanced Prototyping with Boolean Variables
• How to Use Variables for Developers- Using APIs
• Conclusion

What Are Variables?

The word "variable" has a lot of definitions. The Oxford Dictionary defines the word variable as "not consistent or having a fixed pattern; liable to change." Another definition says "an element, feature, or factor that is liable to vary or change."

The definitions above simply tell us that variables are elements which are dynamic and prone to change. With these definitions, we can now define what a variable is in Figma.

In Figma, a variable stores reusable values like colour and text values that you can apply to different kinds of design properties and prototypes.

Differences between Variables and Styles in Figma

Given the definition of variables above, you might have begun to see some similarities between variables and style guides. Although both features exist to make your work better, there are a few key differences to keep in mind:

• Variables are a more advanced feature, and they allow you to define and reuse values like colours, text, and spacing across your designs. On the other hand, styles are predefined sets of design properties such as text styles, colour styles, and effect styles.
• Variables allow designs to change when used in various contexts, because of their dynamic nature, unlike styles. For example, you can change your designs from light mode to dark mode or have padding values change when designing for different devices. This makes variables useful for creating design systems with adaptable components.
• Variables offer a more flexible design process in creating flexible design components, especially where you want to change values like button text or color on different instances of the same component. Styles are typically used for maintaining consistent design elements like button styles, text headings, or colour palettes.
• Variables can store raw, single values, while styles store sets of values.

Why are Variables Important to the Design Process?

Using variables is quite important for a number of reasons.

First, variables help maintain consistency across a design system. By defining variables for colors, typography, spacing, and other design elements, you ensure that these elements have a uniform appearance throughout your project. This consistency is crucial for branding and user experience.

Variables also make designs adaptable. Designers can quickly experiment with different values such as colour schemes or font sizes by adjusting the variables. This adaptability is valuable when creating designs for different platforms or devices.

Variables are also quite efficient. When a variable is updated, all instances of that variable in the design updates automatically. This saves time and effort, and eliminates the need to manually update every instance of a specific element.

Variables are particularly useful in large projects or design systems because of their scalability and ease of maintenance. They allow designers to scale their designs without losing control.

Since projects grow and design systems evolve over time, variables can be adjusted globally to accommodate new requirements. Variables also provide a central place to update these changes, ensuring that all design elements are consistently modified.

And finally, variables can be beneficial to developers during the hand-off process. Designers can provide developers with precise values for design elements, reducing the chances of misinterpretation and streamlining the implementation process.

How to Create Variables in Figma

Variables are quite easy to create in Figma. Below, I'll walk you through the steps for creating different kinds of variables in Figma.

At the moment, we have four types of variables in Figma:

• Color: used for colour fills.
• Number: used for dimensions, corner radius, and auto layout properties.
• String: used for text layers and variant properties.
• Boolean: used to toggle layer visibility.

We'll create and implement each of these variables in Figma, and also use them for advanced prototyping.

How to Create Colour Variables in Figma

The first type of variable we'll be creating is a colour variable. As a designer or developer, you have likely used colours in your projects. So, the concept of colour shouldn't be unfamiliar to you from a design standpoint.

Step 1: Open a new Figma file

Let's assume that you want to create colour variables for a new design project you're going to start working on, like a magazine website for example. The first thing you need to do is open a new Figma file.

Blank Figma file

Step 2: Choose a colour palette

The next step is to choose a colour palette for the project. Every design project has a set of colours used repeatedly to establish consistency – for example, for headers and backgrounds, to call attention to a primary button, and so on.

You'll want to choose colours which complement each other for your design. If you need some help here, you can read my article on the 60-30-10 rule in design.

Creating a colour palette

Step 3: Create variables for each colour

Next, we'll create variables for each colour code in the palette. Go to the panel on the right-hand side and click on local variables.

Local variables means all the variables located in the design file.

Click on local variables

Click on create variable to create the first variable in the file.

A dropdown will appear containing the four types of variables I explained earlier. Since we're trying to create colour variables in this section, we'll choose color.

Create a colour variable

A created variable section will come up, with two columns: the title of the variable (Color), and the value of the variable (the colour code-FFFFFF).

Choose colour variables

Give your new variable a name – you can use the role of the colour, primary background for instance. In the next column, type the colour code or use a colour picker.

Rename variable & type in colour code

And there you go – you just created your first colour variable!

To see more editing options, hover over the variable's row. An edit variable icon will pop up.

Edit variable

Click on it to edit the colour variable to your taste.

Edit the colour variable/add a description

In the editing section, you can add a description on how to use the variable, hide from publishing, and so on.

Having done that, follow the steps above to create variables for the remaining colours in the colour palette.

Create variables for other colours

You can also organise your variables into groups. To do this, select the colour variables you want to group (hold down SHIFT key), and right-click.

Group the colour variables

This will bring out some options:

• New group with selection
• Edit variables
• Duplicate variables
• Delete variables

New group with selection

Choose New group with selection, double-click on the group name, and rename it to color/blue.

Rename group

You can group your colour variables anyway you'd like to – for example, background colours, header colours, different shades of a particular colour, and so on.

Colour blue variables grouped.

Violà! You just created a colour variable group in Figma. Click on the collection drop-down and choose rename collection.

Rename collection

You can rename this collection primitives.

Primitives means basic. Also, you can decide to rename your collections or not. The choice rests on you.

Renamed primitives collection

How to Create Colour Variables for Tokens

Now, we'll create colour variables for the text, surfaces (such as backgrounds), and borders we need for the project. We want to assign different functions to the colour palette (variables) we created earlier.

Click on local variables and create a new collection. You can name this tokens.

New collection

Create a new colour variable and rename it "primary text".

In order to save yourself time, and group your variables as you're naming them, rename the variable as text/primary. This will automatically form a group.

Creating and grouping text variables

Click on the fill box and go to Libraries to see all colour variables created.

Assigning colour from libraries

We'll choose Main Black which is under color/greys.

Choosing colour black

We can go ahead and assign other colour variables for different text functions, as much as we want to. Remember to add text/ before the actual name of the variable, so it'll form a group automatically.

Assigning colour variables for text

Next, we'll create colour variables for surfaces such as backgrounds, and for borders as well.

Colour variables for surfaces and borders

Some of the colour variables might bear the same colour code, but they have different functions, so that's totally fine. For example, the colour code for button text is the same as the colour code for main background.

How to Implement Colour Variables in Your Designs

Next, we're going to implement these colour variables in our design.

In the image below, there are four mobile wireframes with no colour and images (I created these previously).

You can read about how to create wireframes in this article: What is Wireframing? How to move from Paper Sketches to High Fidelity Wireframes.

We'll use the colour variables we've created to add colour to the buttons and text, making sure all elements are consistent.

Low-fidelity wireframes

Starting with the first screen, let's add colour to the button. Click on the button, and go to to Fill on the right-hand side of your screen.

Click on button

In the Fill section, click on style (the four dot icon by the side). Selecting style will bring up a list of colours in your libraries. Select the colour you've assigned for the primary button in order to implement it.

Select a fill colour from the colour variables in libraries

Implemented button colour

Next, give the button text a white colour following the same steps.

Implementing colour variable for button text

Implemented button text colour

You can go ahead and do the same for the other screens, following the steps above. Don't forget to update the text and colours as well.

Updating colour variables for other screens

You can also add some images or illustrations to complete the look.

Adding illustrations to updated design

Note: You can get your illustrations from plugins in Figma like Storyset by Freepik, Artify Illustrations, and so on, as well as from illustration libraries like Freepik, Lapa Ninja, and others.

How to Create Different Modes with Variables

Next, we'll create different modes for our design. For instance, if you're working on a project that requires light and dark modes, instead of changing all the design elements manually to accommodate the modes, you can simply use variables to implement that.

To start with, click on Local variables to create a new variable. A list of all variables in the file and their groups will come up:

color/blue:

• Primary Button
• Main Blue

color/greys:

• Main Black
• Main Background

Opening "Local variables"

Next, I'll create a new collection so I can just focus on the modes I am about to create. To create a new collection, simply click on the menu icon on the variables header.

Note that creating a new collection isn't mandatory. It's just to help take your focus away from other variables you have already created.

Creating a new collection

Next, I'll rename the collection to Modes. To rename a collection, simply double-click on the title, and input your preferred title.

Renaming a collection

Renamed collection "Modes"

Next, click on Create variable to create a new variable. I'll choose Color because that's the variable we're working with.

Creating a variable called Color

The created colour variable will come up with a default colour code: FFFFFF.

Created color variable with default colour code: FFFFFF

Next, I'll rename the variable Background because I'm trying to set the background colours for each mode (light and dark).

Renamed color variable: Background

Now, we've been working with only the name and value of the variables we've created, but we can add another column when we want to create modes. To do this, simply click on the plus icon on the header to add a new variable mode.

Clicking on the plus icon

The new mode will come with three columns:

• Column 1 (the title of the variable – Background)
• Mode 1 (the first value of the variable – colour code FFFFFF)
• Mode 2 (the first value of the variable – colour code FFFFFF)

Created new mode

Next, I'll rename the modes to light and dark. To do this, simply double-click on the title and edit the name.

Renamed modes: Light & Dark

Now, we'll assign a value to the background for dark mode. To do this, simply input the colour code/value you prefer for the background. I'll use #0C3272 as my background colour for dark mode.

Changed value for dark mode background

Next, we'll create other colour variables for other elements like, text, button colour, button text colour, and so on for the two modes. I''ll list out the specifications to make it easier:

Light/Dark:

• Body text: 1A1A1A/FFFFFF
• Button: 0C3272/FFFFFF
• Button text: FFFFFF/0C3272
• iPhone header: 1A1A1A/FFFFFF

Next, we'll go ahead to create the variables. Just follow the steps we followed earlier to create the variables and assign values for each of the modes.

Created variables for other elements

Next, we make sure the design is connected to the variables we created. To do this, simply hold the element and use Fill to tie it to the colour variable.

For the Button text for instance, select the text, and click on the style icon in Fill.

Clicking on style icon in the "FFill" section

Next, scroll down the list that comes up, to the specific variable you want to tie the variable to (in this case Body text).

Selecting Body text variable.

Do the same for the other elements in the design, including the background.

Note that I'll be leaving the illustrations the way they are.

Screens connected to the variable modes.

To check if the modes actually work, click on the change variable mode icon on the Layer section on the right-hand panel of your screen.

Clicking on the "change variable mode" icon

A list of all modes (Light & Dark) will come up and you can switch the screen to whatever mode you choose.

Switching modes

A section named Modes will appear on the Layer section, indicating that one of the screens is in dark mode.

One dark mode & one light mode screen.

How to Create Number Variables in Figma

Next, I'll show you how to create number variables in Figma.

Number variables are defined by number values, and they can be applied to corner radius, width or height padding, and so on. Here are the steps to follow to create your own:

Step 1: Choose a variable

Just like we did when creating color variables, click on the local variables panel to select the kind of variable you're trying to create. Here, you'll select number.

Choosing variable to create

Selecting "number"

When you select number, it appears on the list of variables with a value, in this case 0.

Number variable showing Number with a default value of 0

Now, you can rename the number variable to whatever you decide. To rename the variable, double click on number, and change it to whatever name you want.

Renaming number variable

I'll rename mine to OrderCount, because I'm trying to implement a function that allows a user to increase the number of portions of food they're trying to order.

Renamed number variable

Next, we'll set the default number value to 1.

Setting default number value

Now we'll tie the number on the design to the number variable (OrderCount). To do this, click on the number in the design.

Implementing the number variable

Then go to Text on the left hand side of your screen. Click on the Apply variable icon to apply the variable.

Note: The apply variable icon will only appear on the Text section when a variable has been created.

Clicking on the "appy variable" icon

Clicking on the icon will bring up a list of all number variables available in the file. Next, you'll select the variable you're trying to implement. I'll choose OrderCount.

Selecting a number variable

When the variable has been implemented (tied to the number), it'll appear on the text section, indicating that a number variable has been implemented.

Implemented number variable

Now, we'll also need two more number variables for the other number values in the design (cost of food and total cost). This is so that these values will also change when a user increases the number of portions they're ordering.

We won't include delivery fee, because it remains the same way irrespective of the number of portions a user orders.

Next, we'll follow the same process as we did above to create number variables for these.

Creating other number variables

Next, we'll tie the numbers in the design to their respective number variables, just as we also did earlier.

Note: In the main design, I gave the actual number (25) a different frame from the dollar sign (which is in text). This is because when creating the number variable, the dollar sign will not be attached, because it's a word, not a number.

Consequently, when I tie the number variable to the design, I'll be applying it to the frame containing the number alone.

Give the number a different frame from the dollar sign

So, when I tied the first number to the number variable I created (Cost-Portion), something interesting happened. The number in the design took on the value of the variable. Instead of 25.00 which was in the screen earlier, it changed to just 25 because that's what the number variable was set to.

Number variable changing the number in the design

Now, to avoid any unpleasantness, I'll change the values of the other numbers, and realign them.

Changed and realigned number values in the design

We've just created number variables for our design. In the section for advanced prototyping, we'll check to see if these number variables actually work.

How to Create String Variables in Figma

Next, you'll learn how to create string variables in Figma.

As I wrote earlier, string variables are used for text layers and variant properties. With string variables, you can change the headings in your design, flip text on different screens, change language modes, and so on.

For this article, we'll use string variables to change the headings on the screens for each mode we created earlier (light and dark).

As usual, our first step is to click on Local variables and select the type of variable we want to create.

Going to local variables to create a new variable

I'll choose String.

Choosing "String" out of a list of all variables

When I do that, the string variable I just created will appear on the list of variables.

Created String variable

If you noticed, the string variable has two columns for "string value", because I created the variable in the Modes collection. Following that, let's see if we can change the headings for each mode.

Note: The string value is the actual text you're trying to change.

So, for the first screen whose heading is "Transactions Made Easy", I want it to change to "Easy Transactions, Less Stress" for dark mode. For the second screen whose heading is "Pay Bills with Ease", I want it to change to "Paid Bills, Easier Life" for dark mode.

Since we're changing the headings for two different screens, we'll create another string variable.

Creating another string variable

Next, we'll input the different values for the different modes. To do this, just input the different texts for the two screens in both modes.

Inputing string value

Next, we'll tie the headings to the string variables we just created. To do this, click on the particular heading, and go to the Apply variable icon on the Text section.

Applying string variable

Next, scroll down and choose the string you're applying it to.

Choosing string variable

Once you're done, a string icon will come up, indicating that a string variable was applied to the text.

Applied string variable

Do the same for the second string:

Applying string variable to the second screen

Next, let's test to see if the string variable works. Select the screens which have the applied variable, go to Layers, and change the mode from light to dark.

Selecting screens which have the applied variables

Selecting dark mode

Mine works:

Screens changed to dark mode

How to Create Boolean Variables in Figma

Next up, we'll learn how to create Boolean variables.

Generally, boolean variables are variables that can only have two possible values – true or false. In Figma, boolean variables have the same function: they are used for variant properties or components with two values: true or false.

Remember the toggle in the design above?

Toggle in the design used for implementing number variables

I'll change that to a checkbox and use boolean variables to make it work.

To do this, I'll copy out the component and paste it on another frame. I'll then add the checkbox (and replace it in the main design screen later).

Checkbox on a blank frame.

Next, we'll make the selection a variant. To do this, double-click on the Create component icon on your Figma file header.

Double-clicking on "create component" icon

A variant will automatically appear:

Variant of the component

Next, I'll create different states for the checkboxes: default, hover, and filled.

Different states for the chechboxes: Default, hover and filled.

Now, we'll create the boolean variable.

To do this, go to Local variables as usual and select Boolean.

Opening local variables

Click on Create variable.

Next, we'll choose Boolean from the list.

Choosing "boolean" from the list

Created boolean variable

Next, we'll rename the boolean variable SaveFood since we're trying to create a function for saving a food choice for subsequent orders.

Renamied boolean variable

Next, we'll make the variable True by default. To do this, just click on the toggle icon by the side of the variable.

You've created a boolean variable!

We'll create an interaction for this boolean variable in the advanced prototyping section and check if it works.

How to Use Variables for Advanced Prototyping

In this section, we'll learn how to use variables for advanced prototyping in Figma, using the colour, number, string, and boolean variables we implemented earlier in the design.

N.B: You can only use advanced prototyping features on Figma if your file is on a paid team file. If you don't have a paid team version, you can apply for the Figma for Education plan. It's a way Figma helps learners and educators by giving them access to resources, and all benefits of a paid version, for free.

You can use advanced prototyping when you have a lot of screens to work on, and to simply make prototyping easier.

Advanced Prototyping with Number Variables

Starting with the number variables we created above, let's try to check if it actually works. But before we do that, we'll have to actually prototype the design.

Note that you can prototype number variables for designs where your user can increase or decrease the number of an item on the screen. Prototyping helps to show the functionality and how that particular feature would work.

To start with, I'll make the frame where the order count is a component. To do this, select the frame, and click on the component icon on your Figma file header.

Selecting the order count frame

Clicking on the component icon

The order count component

Click on the component icon again to make it a variant.

Making the order count component a variant

I'll make a frame outside the screen and drag the variant there, so I'll be able to work on the interactions well.

Making a frame outside the screen

Remember that we want to implement a function where the number of portions increases when the user clicks on the plus icon.

We'll start prototyping from here.

Now, click on the plus icon in the default variant and move to the prototype tab.

Clicking on the plus icon in the default variant

Next, click on the plus icon in the interactions area to add an interaction.

Adding an interaction

A tab will come up showing interactions. In this case, it's set to default On click, and no interaction has been added yet (None).

Adding an interaction

Now, click on the dropdown icon that says None.

Clicking on the dropdown icon

It'll bring up a list:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

List following the dropdown

Choose Set variable.

A list of all variables in the file will come up, and you can then select the particular variable you want to implement. I'll click on OrderCount.

Choosing "set variable"

Clicking on Order Count (the first time)

Next, I'll click on OrderCount again to write a mathematical expression, and all the available mathematical expressions will appear:

Clicking on Order Count (the second time) and showing all mathematical expressions

I'll select Addition, because that's what we're trying to do.

Choosing the "addition" expression

You'll notice that an addition icon popped up to signify that the addition expression was given.

Next, I'll input 1 by the side of the addition icon to show that it's plus 1.

Adding number 1 to the expression

Done!

Now, we'll follow the same steps to do the same for the minus icon, making the expression subtraction instead of addition.

Added interactions for the minus icon

Done!

Note: We don't really need the variant we created earlier. You might only use the variant in cases where you want to create a hover state. I just wanted to show you how easy it would be to create a variant while doing this.

Next, we'll just copy the prototyped component and put it back in the main design.

Frame containing the prototyped variable

To put the prototyped component in the main design, click on Assets at the top of the left hand panel.

This section will show all the assets in the page you're currently on.

Showing all assets on the page

Next, I'll drag the frame to the design.

Dragged asset to main design

Note: If you don't want to follow the process above to place the prototyped component in the design, simply copy the component (CTRL + C), and paste to replace the frame on the main design.

Now, let's check our prototype out. To do this, you don't need to open the prototype on another tab. You can simply click on the asset and press SHIFT + space bar.

Clicked asset

Another frame will appear on your screen. It's interactive and you can test your prototype on it.

Interactive frame on your Figma screen.

Try clicking on the minus and plus icons on the frame to see if it carries out its function.

After checking the prototype, I'd like to implement some logic.

We don't want a scenario where the clicking on the minus icon continues till after 0 and now gives us a negative sign like -1 as you can see in the image below.

Minus icon giving us negative values

That wouldn't make sense, so we'll add a conditional.

A conditional is simply a condition that sets rules about how the interaction should work.

To do this, I'll move to the frame containing the component I made earlier.

Frame containing prototyped component

I'll be adding the conditional to the minus icon since that's the area that would give us negative values. So, I want the values to stop at 1 since that's the least a user can order (they can't order half or 0, for example).

So, we'll just zoom into the component to add our conditional. Make sure you're on the prototype tab as well.

Moving to prototype tab and zooming in on the prototyped component

I'll click on the variable icon by the minus frame.

Selecting the variable icon close to the minus icon frame

This will bring up the already set interactions:

Already made interactions on the minus frame

Next, I'll click on the plus icon by the 'x' on the interactions header.

Clicking on the plus icon in the interaction header

I'll choose conditional from the list of options which will appear:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

Choosing conditional from the list of options

We'll then write the condition. To do this, click on Write condition by the if else statement.

Writing a condition for the interaction

When we click on Write condition, a list of all number variables will come up. I'll choose OrderCount.

Selecting ordercount

This will bring up a list of all available conditions:

• Equal to
• Not equal to
• Greater than
• Greater than or equal to
• Less than
• Less than or equal to

I'll choose Not equal to.

Choosing "Not equal to" condition

Next, the icon for the condition I chose will appear on the input field for writing the condition.

Condition appearing on the input field

Next, I'll input 0, which means the interaction is not equal to 0.

Inputing 0 (zero)

Next, I'll close the frame and try moving the Set variable section under the conditional section in the interaction. To close the Set variable section, click on the little dropdown icon.

Clicking on the dropdown icon to close set variable

When you click on the little dropdown icon, the Set variable section will be minimized, allowing you move the section under the Conditional section.

Closed set variable section

Next, I'll drag the set variable section under the conditional section. To do this, just hover on the set variable section and use your trackpad or mouse to drag it.

Dragging set variable under conditional

We just added a conditional to our interaction! The icon for the minus frame will change to a condition icon, showing that a conditional has been added.

Added a conditional to minus interaction

Now, you can test this new interaction to see how it works.

Mine certainly does! It doesn't go lower than 0 anymore.

How to implement cost per portion variable

Now, we want the other number values (cost per portion and total cost) to increase in response to the number of portions a user orders.

We'll start with the Plus icon frame:

Going back to the component we've been working on...

Frame with prototyped component

I'll click on the plus frame and go ahead to set variable.

Opening the interactions for plus frame

I'll click on the plus icon on the interactions header.

Clicking on the plus icon on the interactions header

Next, I'll select set variable.

Selecting set variable

A list of all variables that have been created in the file will come up:

• The color variables for text, buttons, headings, and so on.
• Number variables – OrderCount, Cost-Portion, and so on.

A list of all variables in the file

I'll scroll down to choose cost-portion, which is the cost per food portion a user orders.

Choosing "Cost-portion" (the first time)

An input field to write an expression for the variable will come up.

Write expression input filed

To write an expression, click on Cost-Portion again and select Addition.

Choosing cost-portion (the second time) and selecting addition

Addition icon coming up on input field

Next, I'll input 25, meaning that +25 should be added for every portion of food a user orders.

Inputing 25

Having added the interaction for the plus frame, we'll follow the same process for the minus frame. When you're done, the Set variable section should be under the Conditional section.

Adding interaction for the minus frame

Remember there's a conditional for the minus frame, so I'll just drag the new interaction inside the conditional.

Dragging the new "set variable" interaction inside the conditiona;

Now, try testing the new interaction you just added. Mine certainly works!

Testing the new interaction

Next, we still have one last variable to add (Total Cost).

Follow the steps above to recreate this interaction. Starting with the plus frame, implement the variable to make sure $25 adds when the order increases. It should show a placeholder – Total Cost + 25.

Implementing Total Cost variable

Now, do the same for the minus frame and test the interaction. Don't forget to add the new interaction inside the conditional.

Mine works!

Testing the interactions

You just learnt how to implement number variables with advanced prototyping in Figma. Congrats!

Advanced Prototyping with Boolean Variables

Next, we'll create an interaction for the boolean variable we created earlier in the article.

Note that you can prototype your boolean variables in designs where you have features like checkboxes and toggles. The prototype would show how the checkbox is supposed to function.

To create the interaction, move to the prototype tab and focus on the frame containing the boolean components.

Frame containing boolean components

Now, our main interaction will start from the hover state because that's when a user tries to click on the checkbox. But we still need to add an action that will take the user from the default state to the hover state.

To do this, I'll just click on the first variant and drag it to the second variant.

Connecting first variant to the second variant

I'll change On-click to While Hovering. To do this, just click on the On-click dropdown and select from the list that pops up:

• On click
• On drag
• While hovering
• While pressing
• Key/Gamepad
• Mouse enter
• Mouse leave
• Mouse down
• Mouse up
• After delay

Clicking on the on-click dropdown

Selecting "while hovering" from the list

Selected "while hovering"

I also want to change Instant to Smart Animate, so I'll click on the dropdown icon by Instant, and select from the list that appears:

• Instant
• Dissolve
• Smart animate

Changing "Instant" to "Smart Animate"

How the interaction looks

So, we're done with the first interaction and we'll get started on connecting the second variant to the third variant (Hover - Filled).

Just as we did earlier, we'll just drag the second variant to the third variant.

Connecting the second to the third variant

How the interaction looks

Like I said earlier, the main interaction starts from the second variant so we'll not be following the same steps we took to add the first interaction.

To continue, I'll click on the plus icon on the interaction header to add an action, and select Set variable from the list that pops up:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

Clicking on the plus icon on the interaction

Choosing "set variable" from the list

Next, I'll click on Pick target variable to select the boolean variable.

Clicking on "pick target variable"

I'll scroll down the list of variables to choose the variable I want: SaveFood.

Selecting "SaveFood" variable

Now, to write the expression for this variable, we're going to say the value will be equal to true. So, I'll select True.

Writing the expression and selecting "true"

Having selected True, the expression (true) will go under the SaveFood variable, indicating that an expression was applied.

How the interaction looks

Next, we'll just copy the original component and paste it in our design so it can sync when we're checking the prototype.

Pasting the default component in the main design

To check the prototype directly on your Figma page, click on Shift + space bar.

Mine works!

But I noticed something; I can't un-check the checkbox. No interaction was provided for that. Now, we'll quickly add that interaction so our component works perfectly.

To do this, we'll go back to our components, making sure we're in prototype mode, and drag the connection from filled all the way back to default.

Dragging the connection from filled state to default state

Now, it's works perfectly!

How to Use Variables for Developers – Using APIs

Variables are very helpful for teams consisting of developers and/or designers.

Variables are now supported in Figma’s Plugin API—for building plugins and widgets—and in the REST API. Since variables is currently in open beta, features and functions may change as we respond to feedback. – Figma Docs

There are three documentations which contain support for variables for developers on Figma:

• For the REST API:

This API includes endpoints for querying, creating, updating, and deleting variables. – Figma docs

To be able to use this API, you must be a member of an enterprise.

• For the plugin API:

This API provides support for creating and reading variables, and binding variables to components. – Figma docs

• For the widget API: This API is connected to the plugin API. It is available to widgets by using the Plugin API the widget contains.

Widgets are interactive elements that can be used to create interactive prototypes. Widgets extend the functionality of design files and FigJam boards and are often part of the larger design system, which is a collection of reusable components.

Conclusion

Variables exist in Figma to make your designs better. They are easy to use and create, and are helpful in every design project. In order to save yourself time, make sure to incorporate variables into your design process.

The key is to practice and explore, and you'll get better as you go.

Thank you for reading this article, I hope you enjoyed it!

In this guide, you'll be learning what design systems are, why they're important, typical elements of a design system, and a practical example of how to implement a design system as a designer. Let's dive in!

What is a Design System?

Design Systems are structured collections of reusable design components and elements. We use them to create a consistent and cohesive user experience across a range of products or services.

A design system is like a set of building blocks and rules for creating digital products like websites and apps. Design systems are made up of key elements like typography, color palette, icons, spacing and layout, and so on.

Importance and purpose of a Design System

Design systems are important for many reasons.

Efficiency

Design systems help you become more efficient. Because it's a collection of reusable components, it saves the time of producing new elements, and helps designers produce new features quickly in projects. It also serves as a productivity booster.

Collaboration

A team trying to build a product may consist of designers, developers, product managers, and others. The design system helps all members of the team make reference to the brand guidelines, no matter what they working on. It also helps to make sure everyone, including stakeholders, are involved in the design process, and facilitates collaboration.

Consistency

Design systems ensure consistency in the user interface and user experience across various products and platforms.

We wouldn't want a scenario where a button design is inconsistent on different screens, would we? That's where the design system comes in. It helps our design assets and elements stay consistent, and it can always serve as a reference point.

Scalability

Scalability here refers to the ability of the design system to grow and adapt to the changing needs of a project or an organization.

A crucial element of any design system is scalability. Design systems help in situations where the project might need to expand to accommodate different devices and platforms or when the team is expanding or when trying to accommodate new trends and practices.

How Design Systems work

To understand how a design system works, you just need to know the kinds of assets or components that make up the system and their roles.

A typical design system comprises of the following parts:

Colours

When you open a design system, one of the first things you'll see is a colour palette section. It's one of the most common elements in a design system.

Design systems define a set of of primary and secondary colours, as well as their various uses. This includes background colours, text colours, and so on.

Colour palette section of Rayna UI design system

Colour palette section of Atlassian design system

Typography

Another typical element of a design system is typography. Every design system usually includes guidelines for typography, specifying fonts, font sizes, line height, and so on.

It may also define how typography is used for different content types like headings and body text, making sure they're accessible and legible for design use.

Typography section of Google's Material Design

Typography section of Shopify's Polaris

Icons

Icons are very important when trying to give visual clues to your users. Design systems provide a set of standard icons and guidelines for their usage, ensuring they are recognizable and consistent.

Iconography section of Atlassian design system

Iconography section of Google's Material Design

Grid and Spacing Styles

A grid system helps establish a consistent structure for different components or pages.

Design systems provide spacing guidelines specifying margins, padding, and other layout-related rules to maintain alignment to create a visually pleasing and organized design.

Grids and spacing styles section of Rayna UI design system

Spacing section of Atassian design system

Documentation

Every well-structured design system has some form of documentation that usually explains how to use the elements and guidelines effectively. The documentation also helps designers and developers understand how to use and implement the design system.

Documentation for button styles in the Rayna UI design system

Documentation for App icons on Apple's Human Interface Guidelines

UI Patterns and Components

UI patterns and components are the building blocks of a user interface. Design systems define UI patterns and components such as buttons, forms, modals, accordions, navigation bars, and so on, along with guidelines on how and when to use them.

UI Components section of Shopify's Polaris

UI Patterns section of Aplles's Human Interface Guidelines

Content Guidelines

These cover how text and imagery is used in the user interface. They may specify tone, image use, and content hierarchy, ensuring that the content is consistent and aligns with the brand guidelines.

Content guidelines section of Shopify's Polaris

Content guidelines section of Google's Material Design

Accessibility Guidelines

Most design systems contain accessibility guidelines in order to increase the usability of products for people with all kinds of abilities. These guidelines ensure that the design is inclusive and complies with accessibility standards like WCAG (Web Content Accessibility Guidelines). This includes colour contrast, keyboard navigation and other accessibility features.

Accessibility guidelines of Google's Material Design

Accessibility guidelines of the Atlassian design system

Examples and Use Cases

Most design systems also contain examples and use cases of the design system in action to help designers and developers understand how to implement it effectively.

Fintech Dashboard use case from Rayna UI design system

Applying type use case from Google's Material Design

Differences Between a Design System and a Style Guide

Style guides and design systems are very similar and can often be confused for the same thing – but they're different.

Some differences between design systems and style guides are:

Scope

Style guides are relatively limited in scope and may not include detailed UI components or interactions.

Design systems on the other hand, are more comprehensive and encompass a broader range of elements including interactive components, user interface guidelines, amongst others.

Consistency

Style guides typically focus on ensuring brand consistency, helping maintain a uniform look and feel across various materials and platforms.

Design systems aim to establish both brand and user interface consistency, by providing reusable components and interaction patterns.

Evolution and Scalability

Style guides tend to evolve more slowly, and might not be as scalable as design systems. Design systems are more adaptable and evolve with the product or service.

Collaboration

Style guides are mainly used by designers to ensure visual consistency across a brand. They have a limited role in facilitating collaboration amongst designers and developers.

Design systems, on the other hand, promote collaboration by providing a common language and shared resources between designers and developers.

Real-Life Examples of Design Systems

A lot of software corporations have created their own design systems to help ease the work of their designers and generally make it a smoother experience to build products.

Google, for instance, has a design system which they use for their products – you can see similar styles and elements in most of their products.

Most of these design systems are free and available to the public for use. Some examples of real life design systems are:

• Google Material Design by Google
• Apple Human Interface Guidelines by Apple
• Atlassian Design System by Atlassian
• Polaris by Shopify
• Carbon Design System by IBM

How to Use a Design System for Your Designs – Rayna UI Design System Example

For this article, we'll be using the Rayna UI Design System to illustrate how to use a design system for your designs.

It's a newer design system that I recently learned about, so I thought I'd share my experience by using it for a challenge.

Step 1 – Download the Design System

The first step will be to download the design system you're trying to use. In this case, we'll download the Rayna UI Design System. Go to their landing page @Rayna UI and grab it from there.

Rayna UI Landing page

Next, click on "Get Rayna UI" to download the design system.

Rayna UI Landing page

Next, type your email in order to get the design system sent to your email address.

Provinding your email address

The link to the Figma file will be shared to your email, and you can open it.

Checking your email

Scroll down in the email to find the link to view the Rayna UI Figma file.

Checking your email

Click on the link sent to your email to open the design system. The link will open up the Rayna UI Design System on the Figma community.

Opening the Rayna UI file in Figma Community

Next, click on the "Open in Figma" button by the right side of your screen. This will open up a Figma file containing all assets and components of the Rayna UI Design System.

Opening the Rayna UI file in Figma

Step 2 – Publish the Rayna UI Design System to your libraries.

The next step is to publish the Rayna UI Design System to your libraries, so you can use it for any design.

The third page on the Figma file (Get Started) contains a guide to getting started with the design system. Included in this guide are resources for beginners so you can gain a solid grasp of the basics, along with steps to take to publish and enable the library in other projects.

Getting Started with the Rayna UI design system

Exploring the getting started section

Follow the steps given in the guide to publish the library. First, go to the assets panel in the top-left area of your screen, and press the book icon.

Clicking on the "Assets" panel

Clickiing on the "book" icon

When you click on the book icon, it'll bring up a modal for you to publish the library.

Publishing the library

Click on the publish button next to the file on the modal.

Moving the library to a professional team

I was asked to move the library to a professional team, so I could publish there. Click on the "Move to team" button to move the file.

Selecting a team.

Next, select the team file you want to publish the library to.

Selecting a team

After selecting a team, you'll have to publish the design system to the team files.

Publishing the design system

Publishing the design system

You'll receive a notification that your library has been published.

How to Use the Design System in Your Projects

Next, we'll be learning how to implement the design system in a design. I'll be designing a sign up screen for a fintech website to illustrate this.

Before starting your design, you can copy some icons you may need from the design system to your design file. I tend to copy the buttons and input field styles I may need, if I want to adhere strictly to the design system.

Copied elements from the design system page.

For the sign up page I'm going to be designing, the details I need are the name of the website, input fields (full name, last name, email address, password, confirm password), and the buttons or CTAs (sign up and sign up with Google).

How to Design a Sign Up Web Screen

Step 1 – Select a Frame

Firstly, I'll open the frame I'll be using. For this design, I'll be using the desktop frame (1440 x 1024).

To open a frame, go to the tools panel on the top left-hand corner of your screen. A panel with different kinds of frame types and sizes will come up.

Tools panel-Frame

Open the Desktop section and choose "Desktop" (1440 x 1024). The frame will appear on your screen, and you can start designing.

Choosing a frame

Step 2 – Add Grid Styles

I like using grids for arrangement and consistency in my designs, so I'll add a grid layout to the frame.

In the Rayna UI Design System, there are already existing grid styles so I can just choose one. To add a grid style, go to the panel on your right, and click on the 4-block menu on the layout grid section.

Grid style panel

A list of different grid styles on the design system will come up, and you can choose any which corresponds with the kind of screen you're designing for.

Choosing a grid style

Since I'm designing with a desktop frame, I'll choose Large.

Choosing a grid style for a frame

You can detach instance to see the specifications of the grid style you chose. To detach instance, click on the detach icon next to the eye icon on the layout grid section.

Detaching style

You can now see the specifications for the grid style you chose. Since I chose Large, the grid specifications are:

• Count – 12, using columns
• Colour – F4BBAE, with opacity set to 20%
• Type – Stretch
• Width – Auto
• Margin – 112
• Gutter – 32

Grid style specifications

Step 3 – Add Content

I'll go ahead to start adding content to the screen. I'll use a text to represent my logo – Ketusha.

You can also control text styles and sizes on the design system. To do that, go to the Text panel on the left hand side of your screen.

Editing text size

Confirming text size

Following the same format, I typed a heading for the form called "Sign Up".

Sign Up form heading

Earlier, I suggested that you copy the icons, buttons, and input fields samples from the design system file, so you can use them easily while designing. Now, I'm going to paste the input field sample I copied in my frame.

Pasting input field sample in frame

Since I want the input field to be longer, I'll elongate it slightly to 400 width. It was previously 375 width.

Elongating input field width

Next, I'll structure the input field to how I want it to look like – without icons.

Input field without icons

Next, I'll edit the label to the label I want for my design.

Editing label

Next, I'll just duplicate the input field until I'm satisfied, and also edit all the labels.

Adding other input fields

Next, I'll add the buttons to the screen.

Adding CTAs

I'll add the "Sign up with Google" button, so the user can have different options for signing up on the platform.

Adding other sign up options

Next, I'll try to paste the google icon inside the "Sign up with Google" frame but that might not be possible.

Pasting Google icon

To be able to paste and replace an item inside the selection, I'll have to detach the instance. To do this, right click on the item you're trying to replace. A list of options will come up. Click on "detach instance".

Detach instance

After that, right click on the icon again, and "paste to replace".

Paste to replace

The icon will be replaced instantly.

Web sign up form

We just created a sign up page using the Rayna UI Design System!

Keep in mind that using a design system doesn't mean you cannot be creative and add your own flair. You can add your own style and creativity as much as you'd like as you go.

Conclusion

Using design systems is a necessary skill every designer and developer should cultivate.

Design systems are a critical component of modern product design and development, fostering collaboration, efficiency, and innovation.

Thank you for reading!

Now, this article aims to help you go back to the basics and remind you of the meaning and importance of IA. So if you don't really understand the concept of Information Architecture, this is the best place to be.

We'll also explore how to do a userflow and a sitemap later in the article. Let's get started!

What is Information Architecture?

Information Architecture (IA) is the process of planning and designing how information is organized in websites and applications. It focuses on meeting user needs and business goals by creating a logical and user-friendly information structure.

Information Architecture is mostly used by designers to structure the layout of their designs, especially during the sketching/low-fidelity stage.

Importance of Information Architecture

I can't overstate the importance of Information Architecture. Below, I'll share some reasons why every UX Designer should learn what IA means and how to implement it effectively:

• Organization and Structure: Information Architecture provides a framework for organizing and structuring information. It helps you make sure your designs are logically grouped and categorized.
• Content Prioritization and Hierarchy: Hierarchy is one of the basic principles of design, and IA helps you achieve that. It enables designers to highlight key information and arrange content based on its relevance and importance to users.
• User-Centric Design: Information Architecture helps designers think of their users during the design process, by considering how users typically think, behave, and search for information. Everyone has mental models, including users, and IA helps to make sure that information is presented in a way that matches the mental models of your already existing/target users.
• Navigation: Information Architecture provides a clear way to navigate a design. It allows users to understand intuitively where they are in a site and how to move between different sections of a design.
• Business Goals: Information Architecture helps to make sure the information presentation of your design aligns with the goals and objectives of the business/firm/company.

Types and Forms of Information Architecture

There are so many types and forms of Information Architecture, especially since it's used in a lot of fields. But here we'll be looking at Userflows and Sitemaps, which are the most common ones in design.

What is a Userflow?

A userflow refers to a diagram that shows the step-by-step journey of a user through a website, application, or system.

Imagine trying to order food online. Some steps you might take include: opening the food ordering application on your phone, signing up/logging in, choosing from the list of available food, choosing how many portions you'd like, and finally making payment online.

That's a typical example of how a user flow might be structured.

Userflows illustrate the paths, interactions, and decision points users encounter as they navigate and complete specific tasks or goals. They help designers and stakeholders understand and optimize the user journey.

An example of a Userflow

What is a Sitemap?

Sitemaps are diagrams that display the layout and organization of content within a website or application.

Imagine a 2 bedroom apartment. The apartment could contain a sitting room, a kitchen, 2 bedrooms, a bathroom, and a dining room. The sitemap simply tells us how we can get to the kitchen from the sitting room/the bedroom/any place in the apartment.

In design, sitemaps provide an overview of the pages, menus, and sub-pages, helping us plan and visualize the information architecture and user experience of the system. They aid in content planning, navigation design, and website development.

An example of a Sitemap

Differences Between Userflows and Sitemaps

1. Focus and Perspective: Userflows primarily focus on the step-by-step actions and interactions a user takes within an app or website, to accomplish a task or goal. Sitemaps focus on the overall structure and organisation of a website or an application, depicting the hierarchical relationship between different pages or sections.
2. Level of Detail: Userflows provide more detailed information about each step of the user's journey, including specific actions, decisions, and possible outcomes at each stage. Sitemaps provide a high-level overview of the app's or website's structure, showing the main pages or sections, without diving into the specific interactions within each page.
3. User-Centric vs Architectural: Userflows are user-centric and primarily represents the user's perspective and actions within the app or website. Sitemaps are more architectural in nature, representing the overall structure and organisation of an app or a website from a high-level viewpoint.
4. Interactivity and Decision-points: Userflows highlight interactive elements within the app or website, illustrating the choices and options available to the user at each step. Sitemaps do not explicitly showcase interactivity or decision points.

When to Use Information Architecture

You might be wondering when knowledge about Information Architecture will come in handy.

You can use Information Architecture in any or situation at all, really – like designing a mobile app, a website, a pitch deck, and more. Information Architecture is always helpful because it helps you decide what content/information comes first, what follows and how, and so on.

Typically, you'll think about Information Architecture after conducting user research. This is because research can help you understand the goals and needs of your users, and what they would likely do when they're trying to accomplish a goal on your site.

Also, userflows usually come before sitemaps, because you have to understand how a typical user would journey through your site, before deciding on how the layout or organization of that site would look like.

How to Create Userflows and Sitemaps

You can use the same methods and tools to create userflows and sitemaps. You just need to understand the differences between them and bear in mind that the purpose of each one is different.

How to Create a Userflow

Step 1: Define your Goals and Identify Tasks

The first step is to define your goals and objectives for the project, stating what kind of Information Architecture you're trying to create (a userflow or a sitemap). You can just write this down on paper before digitalizing it.

For example: I'm working on a food ordering app, and I'd like to make a userflow showing how a typical user would order food using the app.

I would write down the typical/possible steps the user would have to go through to achieve the task of ordering food. These steps could be:

• The user opens the application on their phone.
• The user signs up or logs into the application.
• The user goes to the homepage.
• The user chooses from restaurants close to them.
• The user selects from the menu and adds food to cart.
• The user pays for the food and waits for delivery.
• The user exits the application.

Step 2: Choose a Tool

The next step is to choose a tool you want to use to create your userflow. There are lots of tools available for this, like Figjam, Miro, Whimsical, and others. I use Figjam since it's so easy to understand.

Here's what it looks like:

Figjam interface

Step 3: Sketch your design

The next thing is for you to sketch your actual flow on Figjam. Before this, you should note that every shape for a userflow has a specified meaning. You can see some shapes, flows and associations, and their meanings below.

Shapes, flows, and associations for a userflow.

The First Shape (Rounded edge rectangle): This shape represents the start/end of a userflow. It's typically used when you want to start or end a userflow. If you notice, there's also an end tag with a similar shape in the image above. Some people also use a circle to represent this.

The Second Shape (Rhombus): This shape represents a decision. It's used to show when a user has to make a decision like "login", "signup", and so on.

The Third Shape (Rectangle with dotted lines): This represents a group. A group in a userflow can contain process and data, showing that an action has been submitted to the database, and it's expecting feedback from the site.

The Fourth Shape (Parallelogram): This shape shows when the user has to make an input, like "choose how many portions of food they want to order, and so on.

The Fifth Shape (Rectangle with solid lines): This shape shows the process of the user going through the application or website. It might also include screens the user needs to pass through in order to achieve their goal.

The Sixth Shape (Cylinder): this shape represents the data running in the system, which feedback is required from.

Now that you know the different shapes and their uses, you'll need to first draw the shape for 'start':

Choosing a Shape

Next, you'll want to resize the shape if necessary, and input your text.

Resizing shape and adding text

Up next, you'll need to add another shape and draw a connector. To add a connector, you can either click on the edge of the previous shape and drag, or draw the connector directly from the Figjam tools.

Drawing a connector to the next shape.

Drawing a Connector from Figjam tools

When you do that, you then input your text. (Remember to take note of the meanings/roles of each particular shape).

You continue this way until you're done adding all the steps in your userflow diagram.

Example userflow diagram with multiple steps

Step 4: Validate and finalize

Once you're done with your userflow, the next thing is to validate the diagram. This just means reviewing the userflow to make sure it's accurate, usable, and aligns with the users' needs.

Basically just go through the diagram and consider whether it represents the intended user journey, and whether all necessary steps and decision points are included.

How to Create a Sitemap

Earlier in the article, I mentioned that the processes for creating a sitemap and a userflow are similar. The difference lies in the purpose of the two diagrams. We'll be exploring how to create a sitemap using Miro, a diagramming tool.

Step 1: Open the tool

The first step obviously, is to open your tool. If you don't have an account already, sign up at Miro and it should display your dashboard.

Miro Dashboard

Next, click on "New Board" to open a blank canvas.

Step 2: Start drawing the sitemap

Next, you start drawing your sitemap. You should already know what screens you'll be designing, and how these screens connect to each other. Your userflow might help inform this.

Click on the Shapes tool from the toolbar on the lefthand side of your screen, to bring up all available shapes.

Note that, unlike Userflows where every shape has a meaning, you can use any shape for your sitemaps. Most designers make use of rectangles when doing sitemaps. It's very easy to build and stack, especially when you have lots of pages to represent.

Choosing a shape

A plus icon will appear, and you just have to drag till the shape is to your satisfaction.

Step 3: edit the shapes

Next, you edit the shape to add colour, and your text. This could be "Homepage", "Log-in", "Signup", and so on – whatever is the first screen of your design.

When you click on the button, a sub-menu comes up. Here, you can switch your shape type, change text font and size, add text colour, align it, add a border or fill colour for the shape, and more.

Typing inside a shape

Editing a shape

Step 4: add shapes for the next screens

Next, you need to draw shapes for the next screens which the homepage branches into. This could be major items on the navigation bar, where you have to click on CTAs (Call To Actions) to open them.

To draw the next shape, you can simply click on the edges of the first one, and the outline of the shape will be displayed.

Sketching the next shape

Click on the outline to indicate that you want the shape to stay, and basically edit just like you did the first one.

Editing the second shape

Next, you need to add other shapes that represent the subpages which the homepage branches out into. Just click on the first shape like you did when making the first sub-page shape.

Adding other sub-pages

You can also change their colours to differentiate from the homepage and show hierarchy.

Step 5: draw more pages

Next, you draw shapes for the pages under the first set of sub-pages.

You just continue that way until you're done with your sitemap, and all the screens you want to design have been represented in it.

When you're done making your userflow and sitemaps, you can move on to your low-fidelity wireframes or your main design proper. The IA you've done informs your next step and decides what screens you should be designing in particular.

Conclusion

Information Architecture is very important for you to be able to organize the layouts of your designs and arrange them. This is helpful because it can really help improve the quality of your designs.

There are even templates on some softwares that could help you do your Information Architecture diagrams. Remember to practice as often as you can.

Thank you for reading!

This is where data visualization comes in. Data visualization is a very important concept we should all consider when designing for our users.

In this article, you'll learn what data visualization is, how it relates to UX Design, and challenges faced when designing for data visualization.

What is Data Visualization?

Data Visualization can be defined as being able to view data in designs. This could be done using charts, maps, tables, and so on. Data visualization simply enables users to see and understand data, without stressing their head or eyes.

By leveraging the power of visual perception, data visualization empowers individuals and organizations to gain deeper insights, and make informed decisions.

How Does Data Visualization Relate to UX Design?

You might be wondering if and how data visualization relates to UX design. After all, isn't data all about numbers?

They do relate! You see, data visualization isn't just about numbers. It's about representing these numbers in a way that makes sense to the user, and also helps them make decisions.

As UX designers, our primary goal is to solve a problem for our users. When we design for data visualization, we're reducing the strain of going through bulky amounts of data for our users, and generally making their lives easier.

Why is Data Visualization important?

Data Visualization is important for so many reasons, some of which are:

• Enhancement of understanding: Just putting out data might confuse a particular user or customer. Using visuals to interpret the data makes it easier and more fun for the users.
• Communication of insight: Data visualization helps communicate insights on a digital platform. Users will be able to understand the data, data sources and how it's being analyzed.
• Better user experience: Overall, data visualization helps in making sure your user has a better experience while interacting with your platform. You're generally trying to make their lives easier and reduce information overload.
• Informed decision-making: Helping the user understand the data better, will keep them informed, and help them make better decisions which can boost their businesses.

Challenges of Designing for Data Visualization

Data visualization is so easy to get wrong. Because of the delicate nature of data and how broad it can appear, designers might face some challenges when trying to help users visualize data. Some of these challenges include:

• Bulky/complex data: The bulky nature of the data might make it difficult to represent the data using visuals. Also, simplifying the data without losing information can be very tricky.
• Cluttered interface: Somewhat related to the previous point, the overwhelming nature of the data can make the design look cluttered. Because you're designing with a lot of data, you might end up having a messy interface, while trying to put it all on a screen. You have to find a way to make sure your user interfaces don't look cluttered with an overload of information.
• Usage of color: Despite the fact that we want the interface to look visually appealing, we have to consider the fact that colors can distract users from the overall intention, which is to communicate data to the users. Therefore, we should figure out a way to strike the balance, especially when differentiating color categories and highlighting important information.
• Background of the target audience: You should also consider the background and understanding of your target audience. Some users might not have technical knowledge so, it would be best not to use jargon while designing for them.

How to Design Efficiently for Data Visualization

To effectively design for data visualization and correctly interpret data for your users, you should consider these tips:

Define the purpose

First of all, you'll want to define your purpose for the design. This is a common step in most designs. You need to understand the purpose of the visualization – is it to convey trends, monitor business growth, and so on.

Also, consider the domain, requirements, and possible constraints. This will help you determine the best visualization type to use.

For example, say you're designing a data visualization for a social media tracking platform. The purpose here is to track the growth of the social media account, note what posts are most engaged with, and basically providing actionable insights to help the user make decisions that would further boost the account.

Know your audience

Another tip for designing effectively is to know your audience. You have to understand what your audience needs before figuring out how to help them.

You can conduct some research on the kind of people that would use the data visualization tool for the domain you're working on.

Using the same example as the first tip, your audience would generally be social media managers, brand ambassadors, or others who work primarily in the social media space. Do note that the audience may vary in terms of age, expertise, and personal preferences.

Choose the visualization type

Here, you choose the best visualization type for conveying your information. You can decide to use bar charts, tables, graphs, and so on, to represent your data.

Continuing with our example, you'd want to select visualizations that effectively represent progress over time, such as bar charts, progress charts, and so on. You might also want to analyze key data such as active followers. Would you use a bar chart or a line chart to do so? This is what choosing the visualization type entails.

Examples of some data visualization charts. Image from [OpenClassrooms](https://www.google.com/url?sa=i&url=https%3A%2F%2Fopenclassrooms.com%2Fen%2Fcourses%2F4555961-apply-metrics-to-design-decisions%2F5403056-decide-on-an-approach-to-present-information&psig=AOvVaw11EJaN3uJ8zzLGJ7VRciQd&ust=1685717146266000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCKjA--nov8CFQAAAAAdAAAAABAR)_

Have an intuitive and simple layout

Here, you'd have to think of the kind of layout you want to use for your design. You would want to go for a simple layout that would help your users easily understand the visuals.

For the social media data visualization, you might want to:

• Incorporate a clear hierarchy of elements using size, colors, and placement.
• Use familiar patterns like icons or symbols, to represent different social media metrics.
• Embrace a minimalist approach by displaying essential information only.
• Design a clear navigation system so users would always understand their current location on the application.

Having an intuitive layout can help reduce information overload on your users. When elements are arranged logically, and the visualization is simple and free of clutter, your users are sure to have a great experience.

Use accessible colors

Next, choose colors that are easy on the eyes. Aside from the background and primary colors, you might use color coding to differentiate between different metrics/elements.

For example, you may decide to get the gender demography of the audience for the social media account. To represent this data, you could use a circle graph (doughnut), and choose different colors to represent the genders.

An example of a circle graph with each element differentiated by colors.

Please note that accessibility isn't only for people with disabilities. Make sure to use colors that don't distract the user from important elements and information. You can use the 60-30-10 rule to choose a color palette that improves understanding and aids interpretation.

A Data Visualization Dashboard

Example of a dashboard for a Data Visualization Tool

The image above shows a dashboard for a social media data visualization tool. The dashboard contains performance metrics, analytics of likes, followers and comments on the account. The dashboard also contains the demographics of the audience, engagement rates and posts activity.

All these are important data analytics information which are useful to the owner of the account.

You can see how charts and bar graphs are used to interpret the data. Imagine having one big list which has the demographics of each user, each like and comment posted, everyone who engaged with each posts, and so on. It would be a bit overwhelming and hard to sift through to find insights.

Conclusion

The average person consumes about 40-75 gigabytes of data per day. Now, that's quite a lot. Imagine having to take in this huge amount of data through cluttered and disorganized interfaces. This would make it difficult to understand and interpret the data.

As designers, it's our job to ease the experiences of users while interacting with our products. We have to focus and align our design choices with the purpose and audience, as well as continuously evaluate our visualizations to ensure they effectively convey insights and appropriately inform the viewers. Remember, this gets better with practice.

Thank you for reading!

In this article, you will learn:

• What accessibility means
• Some myths surrounding accessibility
• How to make your work more accessible
• Some practical accessibility examples

Let's get started!

What is Accessibility?

There are so many definitions of accessibility on the web. But to me, accessibility in digital/web design simply means designing to make content usable for people with disabilities.

Working with accessibility in mind involves designing websites, applications, and digital interfaces that can be navigated by individuals with visual, hearing, motor, or cognitive impairments.

Some Myths Surrounding Accessibility

Like every topic under the sun, lots of people have different opinions about accessibility. Some might be true, some might be false.

Below, I'll share some popular misconceptions about accessibility.

Myth: people with disabilities don't use my platform

You might be designing for a governmental or corporate platform and think that people with disabilities will not use your platform.

This is an incorrect notion to have. There are different forms of disability, including temporary and permanent disabilities. You have no control over who might use your platform at any time or what they might need.

Myth: accessibility is only for people with disabilities

While accessibility measures are crucial for individuals with disabilities, they also benefit a wide range of people, including the elderly, those with temporary disabilities, individuals with situational limitations, and even people without apparent disabilities.

Accessibility best practices make websites and apps easier for everyone to use in various ways.

Myth: accessibility is all about adding ALT text

Alt (alternative) text is an assistive technology which is a valuable tool. But you shouldn't only use alt text as a substitute for general/wider accessibility best practiceds.

Assistive technologies work best when used in conjunction with accessible designs and content.

Myth: you should build accessible sites just so you don't get in trouble with the law

Although accessibility is a legal and ethical requirement, you shouldn't build it into your designs because of that reason alone.

You should build accessible websites and apps because accessibility helps anyone who comes to your platform interact with it well.

Why is Accessibility Important?

Accessibility is important for a number of reasons. They include:

• Improved Usability: Accessibility improves the usability of a website or application. Features like clear navigation, intuitive design, and so on benefit all users. They also contribute to user satisfaction, usability and overall engagement with products and services.
• Broad User Base: When your platform is accessible, it increases your user base, as people from different backgrounds and situations can use your platform. This expands the reach and customer base of your product.
• Enhanced User Experience: Incorporating accessibility in your designs will enhance the experience of your users (disabled or not), making it easier to interact with your platform.
• Equal Rights & Inclusion: Accessibility promotes inclusivity and prevents discrimination based on disabilities. Everyone deserves to have equal access to opportunities, information, and social services.
• Legal & Ethical Requirements: Legally and ethically, accessibility is a requirement for different domains and platforms. Adhering to these legal requirements ensures compliance and helps your client avoid potential legal issues.

How to Make Your Designs More Accessible

Understanding Accessibility Guidelines

Familiarize yourself with accessibility standards such as the Web Content Accessibility Guidelines(WCAG). These guidelines provide comprehensive recommendations for designing accessible digital content.

Use Sufficient Color Contrast

Opt for color combinations that are accessible for individuals with color blindness or low vision. Use tools to check the color contrast ratio and ensure that text is easily distinguishable from the background.

Here's an example of creating sufficient color contrast:

Color contrast example

In the example above, in the first sentence, the highlighted word (link) does not contrast well with the rest of the sentence. Compare with the second sentence where "link", is perfectly contrasting and has an underline, to create more emphasis.

It's more likely that the second sentence is accessible for individuals with color blindness or low vision.

Create Inclusive Forms

Design forms that are user-friendly. Include clear labels, instructions and, error messages. Make sure to enable users navigate and complete the form without relying solely on a mouse.

Here's an example of creating an inclusive form:

User-friendly form example

The first form has some issues:

• It does not have any header (to indicate what the form is for).
• It shows an error field without explaining what it indicates.
• The form does not specify the number of characters the password should have, all of which are very helpful to the user(s).

All these were corrected in the second form, where:

• A header was added indicating that the form is for "Course Registration".
• The error field specifically explains what's wrong – the user entered an invalid email address.
• The number of password characters as required by the platform was stated.

Implement Responsive Design

Some designers design for desktop versions only, not considering accessibility. But it's much more helpful to make your design responsive.

Ensuring that your designs are adaptable to different screen sizes and resolutions accommodates individuals who use various devices. This is a great way to make your designs more accessible.

Here's an example of implementing responsive design:

Responsive Design example

Above is an example of a product description page of a website. The first image on the left shows the desktop version only. In the second image, the design has been made more accessible – you can see the mobile responsive version as well.

Designing for different screen sizes shows that your design accommodates individuals who use various devices, as stated earlier.

Provide Feedback and Error Handling

Making sure your designs provide adequate feedback accompanied by the next step to take, gives a great user experience. Error notifications can completely discourage a user if not handled correctly. As such, adequate feedback is necessary to make your design accessible.

These are few ways of making your designs accessible, amongst others. You can make an accessibility checklist to help remind yourself of accessibility when designing. To help further, check out accessibilitychecklist.org to find out.

Here's an example of how to provide feedback and handle errors:

Error handling example

In the example above, the first 404 page tells the user what error occurred, and what might be the cause – but does not suggest a way of fixing the error. Meanwhile, the second 404 page explains the error that occurred and provides a way of fixing it – "Go to homepage".

Conclusion

Accessibility is important to customer retention and the growth of a business. As a UI/UX/Web designer, it's your responsibility to incorporate accessibility into your product and give your users an awesome experience. Remember, your user is the priority.

In this article, you will learn about the 60-30-10 colour rule, how it's used, and see a practical example of it.

What is the 60-30-10 rule?

In the design world, the 60-30-10 rule is a rule that helps to guide designers on choosing and pairing colours for their designs.

To put it simply, this rule says that the dominant/primary colour should take up 60% of your design, the secondary colour should take up 30%, while an accent colour should take up 10% of your design.

Why is This Rule so Important?

• Emphasizing Key Elements: The 60-30-10 rule is great at emphasizing key elements in your design. The dominant colour draws attention to large surfaces and establishes the overall mood of the design. The secondary colour supports it, while the accent colour at 10% highlights specific features or parts of the design.
• Visual Balance: To achieve visual balance in a design, one colour/element should not overpower the others. The 60-30-10 rule ensures that there is a sense of equilibrium and balance, by allocating percentages to each colour.
• Simplicity and Consistency: Having 3 established colours simplifies the design process. It narrows down your choices and prevents overwhelming combinations of colours.

How to Choose Colours for Your Designs

The 60-30-10 rule has three components:

• The Primary Colour: This is the dominant colour of the design. It forms the foundation of the colour scheme and covers the majority of the design (60%). The primary colour is typically a neutral colour and is often used as the background of the design. Colours like white, blue, beige, and so on can be used as primary colours.
• The Secondary Colour: This colour supports the dominant colour and adds more visual interest to the design. It covers about 30% of the design. The secondary colour can be used for typography, icons, and subheadings/subtitles in a design. Colours like teal, black, dark blue, and others can be used as secondary colours.
• The Accent Colour: This colour usually covers about 10% of the design. It helps highlights specific sections of the design like buttons, call-to-action elements, or any element that needs emphasis in a design. Accent colours are usually colours that have high contrast. Colours like yellow, orange, light green, and others make good accent colours.

Illustration of the 60-30-10 rule

It's important to choose colours that complement each other for your designs. This will contribute to the overall aesthetics and create a dynamic and engaging visual experience.

If you are worried about what colours to use while designing, you can always check out free colour palette generators. Some colour palette generators you try out include:

• Coolors.co
• Color Space
• Adobe Color

Example Hero Page Using the 60-30-10 Rule

I designed an hero page to give an illustration of how the rule works.

Step 1- Choosing a Frame

I had to choose what desktop frame I wanted to use for the hero page. I chose Macbook Air.

Macbook Air Desktop frame

Step 2- Adding a Grid

Next, I added a grid to the frame. I used these specifications: Columns-12, Margin-100.

Adding the Grid

Step 3- Adding Content

Next up, I added the logo and the navigation bar.

Adding the logo and nav bar

I already knew how I wanted the structure of my hero page to look like, so I just added the rest of my design content.

My Completed Hero Page Illustrating the 60-30-10 Rule.

For the design above:

• My primary colour is white. It covers the background of the design. It enhances readability and legibility of other elements in the design. Also, I chose white because it's a neutral colour, as I mentioned earlier.
• My secondary colour is a saturated black. It supports the primary colour, and is used for text and typography.
• My accent colour is a shade of brown. It adds some pop, and provides some contrast in the design.

Conclusion

The 60-30-10 rule is used in different design sectors because of how useful it is to designers. Also, it is not a strict requirement and can be adjusted to suit individual preferences and design goals.

By following the 60-30-10 rule, you can achieve a well-balanced color scheme that ensures visual interest and coherence in your design. Basically, just choose:

• Your primary colour – a neutral colour,
• Your secondary colour – a colour that supports the primary colour, and
• Your accent colour – a colour that pops!

Whatever colours you decide to use for your design depend on the design objectives and the overall aesthetic you want to achieve. Remember that mastery of colours come with adequate practice. So make sure to practice more and you will see a lot of improvement in your usage of colours.

Wireframes are visual representations of the structure, layout, and functionality of a website, application, or other digital product.

You typically create them during the early stages of the design process, and they provide a simplified and focused view of the user interface and user experience.

You can create a wireframe using a variety of tools, including paper and pencil, whiteboards, or specialized digital software. They usually consist of basic shapes, lines, and text, and aim to communicate the hierarchy of information, the placement of interactive elements, and the flow of user interactions.

Wireframes serve as a blueprint for the design process. They allow designers and stakeholders to quickly iterate and refine ideas before investing time and resources into creating a fully functional prototype or final product. They are an essential tool for creating effective and user-friendly digital experiences.

Why is Wireframing Important?

Wireframing is an important process in web and app design because it helps designers to plan and communicate the layout and functionality of a website or application before it is built. Here are some reasons why wireframing is important:

1. Wireframing helps stake holders visualize the structure of the design: Wireframing allows designers to create a visual representation of the website or application's structure. This includes the layout of pages, navigation, and the placement of various elements.
2. It helps designers focus on functionality: With wireframing, designers can focus on the functionality of the website or application without getting distracted by colors, typography, and other design elements.
3. It saves time and money: Wireframing can save time and money in the long run by identifying potential problems and making necessary changes early on in the design process, rather than during the development phase.
4. It's an easy way to gather feedback: Wireframes are a great way to gather feedback from stakeholders and users, as they provide a clear and simple representation of the design without distracting visual elements.
5. Plan for responsive design: Wireframing is essential when designing for different screen sizes and devices. It allows designers to plan for responsive design and ensure that the website or application works well on all devices.

Types of Wireframes

Everyone has a specific way of doing wireframes. Some designers go from paper sketches to high fidelity wireframes or from low-fidelity wireframes to high-fidelity wireframes.

It all depends on the particular project the designer is working on, what they intend to achieve, and the timeframe they have.

Paper Sketches

I begin my wireframing process by doing paper sketches first, because it allows me put out my ideas really fast without having to bother about neatness and quality. It also saves time when designing – you just think of quick solutions and put them on paper.

Some Techniques for Paper Sketching

• Crazy Eights

In the design world, "Crazy Eights" is a quick sketching exercise that helps designers to quickly generate a variety of design ideas and explore different solutions to a problem, in a short amount of time.

Here's how to do Crazy Eights in design:

1. Start with a blank sheet of paper and fold it in half, then in half again, and one more time so that you end up with 8 rectangles on the page.
2. Set a timer for 8 minutes.
3. Within the first rectangle, sketch out an idea for the design problem you're working on. It doesn't need to be perfect, just get the basic idea down on paper.
4. When the timer goes off, move on to the next rectangle and sketch a new idea. Keep going until you've filled all 8 rectangles.
5. Once you've completed all 8 sketches, take a few minutes to review your ideas and identify the strongest ones.
6. Use the strongest ideas as a starting point for your design, and continue refining and iterating until you have a final product.

You'll see an example of this in a bit when I walk you through my wireframing process.

• 20 Second Sketches

Set a timer for 20 seconds and sketch a simple object or scene. Repeat this exercise multiple times, trying to capture as much detail as possible in each sketch.

• Collaborative Sketching

Pair up with another person and take turns adding to a sketch. Each person has a set amount of time to add their own unique element to the drawing. This exercise encourages collaboration and improvisation.

Low-Fidelity Wireframing

Low-fidelity wireframing is a technique of creating a rough visual representation of a design using simple shapes, lines, and text. Low-fidelity wireframes are the most basic of wireframes. This type of wireframing is typically done with pen and paper, or with a digital tool that allows for quick, low-detail sketches.

Mostly, they focus on the core content and structure of the interface, and are simple and straightforward. Low-fidelity wireframes are a useful tool for designers to quickly explore and iterate on different layout and content options, without getting bogged down in details that can distract from the overall design direction.

Advantages of Low Fidelity Wireframing

• Speed: Low-fidelity wireframes can be created quickly and easily, allowing designers to explore multiple ideas in a short amount of time.
• Flexibility: Low-fidelity wireframes are easy to modify and change as the design evolves, allowing designers to iterate quickly.
• Focus: By focusing on the structure and layout of a design, low-fidelity wireframing helps designers avoid getting distracted by details that may not be relevant.
• Collaboration: Low-fidelity wireframes can be easily shared and discussed with other team members, allowing for greater collaboration and feedback.

Disadvantages of Low Fidelity Wireframing

• Lack of Detail: Low-fidelity wireframes may not provide enough detail to fully convey the intended design, which can lead to misunderstandings and miscommunications.
• Limited Interactivity: Low-fidelity wireframes are static and do not allow for interaction, which can make it difficult to test usability and user flow.
• Limited Realism: Unlike high fidelity wireframes, low-fidelity wireframes may not accurately represent the final product, which can make it difficult to communicate the design to stakeholders who may not be familiar with wireframes.

Why You Might Want to Use Low-Fidelity Wireframes

• For early-stage conceptualization: Low-fidelity wireframes are great for early-stage conceptualization. Because they allow you to quickly iterate and experiment with different layout options without getting caught up in the visual details, low-fidelity wireframes are extremely useful during the initial stages of your design.
• For Time and Resource Efficiency: In situations where time is of great essence, low-fidelity wireframes helps to make changes more rapidly, saving time when needed. Also, it requires fewer resources, which is ideal for situations where resources are scarce.
• For User Testing and Feedback: Low-fidelity wireframes provide a clear representation of the overall structure of your design, allowing for easier feedback from stakeholders and team members. Low-fidelity wireframes are also important during user testing sessions, as it helps you collect valuable insights on the fundamental structure and functionality of a design, before investing significant effort in visual design.

Mid-Fidelity Wireframing

Mid-fidelity wireframing refers to wireframes that are created with a moderate level of detail and design elements. These wireframes typically focus on the overall structure of a product and may include basic typography and design elements.

Advantages of Mid-Fidelity Wireframing

• Efficient Design Process: Mid-fidelity wireframing can be completed quickly and efficiently, allowing designers to iterate and test their designs faster.
• Cost-effective: Mid-fidelity wireframes are less expensive to create than high fidelity wireframes, making them a more cost-effective option for design projects.
• Usability Testing: Mid-fidelity wireframes can be used for usability testing, providing insights into user behaviour and interaction with the product.
• Flexibility: Definitely one of the most importnat advantages of mid-fidelity wireframes. Mid-fidelity wireframes are less detailed than high fidelity wireframes, making it easier to make changes and pivot design direction during the design process.

Disadvantages of Mid-Fidelity Wireframing

• Less Realistic: Mid-fidelity wireframes may not accurately represent the design's final look, which can impact stakeholder and client expectations.
• Limited Visual Details: Mid-fidelity wireframes do not provide as much detail as high fidelity wireframes, making it difficult to communicate the final design vision to stakeholders.
• User Experience Limitations: Because mid-fidelity designs do not have enough visual details to test the user experience effectively, leading to potential usability issues.

You'll see an example of this below when we walk through my process.

Why You Might Want to Use Mid-Fidelity Wireframes

• For Refining Structure and Content: When you need to refine the structure, content and layout of your design, mid-fidelity wireframes are beneficial. They allow you add more detail to your wireframes while being relatively quick to create and modify.
• Information Architecture: Mid-fidelity wireframes provide a clearer structure and visual representation of the design, showing off the userflow better than low-fidelity wireframes.
• Stakeholder Presentation and Approvals: Mid-fidelity wireframes are more polished and appealing than low-fidelity wireframes. This makes them a more effective tool when presenting design ideas to stakeholders and clients.
• Design Consistency: By adding more visual details to the wireframes, a consisent design language can be established across multiple screens or pages.

High-Fidelity Wireframing

High fidelity wireframing refers to the creation of detailed, visually-rich wireframes that closely resemble the final product or website.

These wireframes are often created using tools like Adobe XD or Figma and include elements like typography, color schemes, and detailed user interface elements.

Advantages of High-Fidelity Wireframing

Some advantages of high-fidelity wireframes include:

• Detailed Representation: High fidelity wireframes provide a more detailed representation of the final product, making it easier to communicate the design vision to stakeholders.
• Efficient Testing: High fidelity wireframes can be used for testing purposes, helping designers identify any usability issues before the development phase begins.
• Better Visuals and User Experience: High fidelity wireframes are aesthetically pleasing and provide a more realistic view of the final product which helps users visualize the design better. It gives the users better understanding of how to interact with the product.

Disadvantages of High-Fidelity Wireframing

• Time-consuming: High fidelity wireframes take longer to create than low-fidelity wireframes. It can be challenging to complete high fidelity wireframes withing tight project timelines.
• Cost: High fidelity wireframes can be expensive to create, as it requires a significant amount of skill and effort from the design team.
• Limited Flexibility: High fidelity wireframes are not as flexible as low-fidelity or mid-fidelity wireframes. They are detailed and specific, which makes it challenging to change the design direction once they are completed.

You'll see an example of this in a moment during my process walkthrough.

Why You Might Want to Use High-Fidelity Wireframes

• Hand-off to Development: High-fidelity wireframes provide accurate visuals, detailed specifications, and design assets that facilitate the handoff process to developers.
• High Visual Realism: High-fidelity wireframes closely resemble the final visual design and provides a realistic representation of the user interface, to potential users and stakeholders.
• User Experience Validation: High-fidelity wireframes allow you to test and validate the user experience more accurately. With realistic visuals, you can simulate user interactions, flows and transitions, enabling users to provide meaningful feedback and uncover potential usability issues before development.
• Design Consistency: By including more visual elements than the mid-fidelity wireframes, high-fidelity wireframes helps establish a consistent visual hierarchy and design language that can be carried over to the final product.
• Style Guide Creation: High-fidelity wireframes play a crucial role in developing a style guide for your design. They establish the visuals and design assets that will be used till the launch of the product.

My Wireframing Process

I worked on a mobile app to help pregnant mothers through their pregnancy journey. I started with paper sketches, moved on to mid fidelity wireframes, and then did my high fidelity wireframes.

Step 1 – Paper Sketches

For my paper sketches, I used the Crazy Eights(8s) method, which is a very quick way to put out ideas and inspirations.

Basically, I took out my drawing book, drew 8 identical phone frames and sketched out how I wanted my design to look using a pen. The sketches were more elaborate than usual, because I wanted to move straight to doing mid-fidelity wireframes.

Crazy Eights sketches

Step 2 – Moving to Mid Fidelity Wireframes

Next up, I opened a new Figma file on my laptop and transferred my sketches on paper to phone mockups on Figma.

First, I chose the frame I wanted to use for the designs – Iphone 13 pro.

Choose the phone you want to use

Then I used my sketches as a guide. It was mostly replicating what I already had on paper, digitally.

Next I used rectangles to denote images, and lorem ipsum (dummy text) for parts of the design which needed long texts.

Adding rectangles and dummy text

Prior to this, I had created a style guide. So I just got the icons from the style guide.

My Mid-fidelity Wireframes

Step 3 – Creating High Fidelity Wireframes

This was the last phase of my wireframing. Here, I added colours, images, and real text to my designs.

1. I started by adding colours to the mid-fidelity screens.
2. I also wrote out real text for the screens, making sure the copy matched the branding and purpose of the app.
3. Lastly, I added illustrations and images where needed, helping users relate to the design.

Example of high fidelity wireframing

In high-fidelity wireframing, once the overall structure is in place, you can start adding more details and refining the design. This includes adding visual elements such as images, icons, and typography, as well as defining interactions and transitions.

Share the high-fidelity wireframe with stakeholders, users, or other team members, and gather feedback. Use this feedback to refine the design and make any necessary changes.

Once the wireframe has been approved and refined, finalize it by adding annotations, notes, and any other necessary documentation. The wireframe should be detailed enough to provide a clear understanding of the design to developers, but not so detailed that it hinders the design process.

Completed High Fidelity Wireframes

Note that you can use any type of wireframe you would like to, depending on the specific project you're working on, the stage of the project and your objectives. You should also consider the complexity of the design, the available time and resources, and the needs of the stakeholders and users when determining the appropriate fidelity level for your wireframes.

Conclusion

Wireframing is an essential step in the design process that helps ensure a successful outcome. It enables designers to visualize the layout and functionality of a platform before investing significant time and resources into coding and development.

Incorporating wireframing into your design process can lead to more efficient, effective, and user-friendly designs.

As a UI/UX designer, creating style guides is indispensable if you hope to create great user experiences and interfaces.

In this article, you will learn what a style guide is, the importance of a style guide, and how to create one step by step.

What is a Style Guide?

A User Interface (UI) style guide is a standard that contains all the necessary details about the UI elements and interactions that occur within a product. It helps establish brand consistency.

A typical style guide contains information about typography, colours, layouts, components, and everything else that gives the UI its feel and look.

Creating a great and concise style guide for your product makes sure that the look and feel of the brand remains consistent.

Why Create a Style Guide?

Having a style guide is important for various reasons, which include:

1. It helps all your user interface elements remain consistent
2. It's a learning resource for newcomers and helps them onboard more quickly.
3. It improves communication between designers and developers.
4. And it can help boost your productivity.

What Should a Style Guide Include?

Some of the components of a typical style guide include:

Typography: this plays a huge role in every design. Each font you choose for your designs conveys a message to your user. Typography in your designs should be legible, easy to read and understand, and visually appealing.

Your style guide should include typefaces, font sizes and font weights. Limit your design to 2-3 type faces in order for your design to look neat and professional. Remember to choose typefaces that complement each other.

Colour palette: the right choice of colours for your designs can help determine the reaction of your audience, make them feel comfortable, and increase user satisfaction. You should have three categories of colours in your style guide: primary, secondary and neutral colours.

Primary colours are colours that are displayed frequently across all screens and elements in your design.

Secondary colours complement the primary colour(s). You can use them for micro interactions like arrows, progress bars, and even headings.

Iconography: this is the use of mostly symbols, figures, and images to convey more meaning to a user. Icons make communication easy and they are typically universal. You can choose a collection of icons that you'll use in your designs to keep them consistent.

Layout grids: a grid is a system that aligns a page based on rows and columns. Grids are indispensable in establishing consistency across all screens in a design. You cannot afford not to include a grid system in your style guide.

UI Elements: UI elements in a style guide typically includes buttons, input fields, checkboxes and alerts and notifications. Elements are essential, as a user cannot function effectively without them in your design. You should include these elements with their specific states – default, active, disabled and hover.

How to Create a Style Guide in Figma

Now we'll create a style guide from scratch in Figma, including the elements listed above.

Open your Figma file and select a frame.

Choose a Colour Palette

Getting the right colours is very important for creating great designs. You must be able to pick colours that complement each other for your style guide.

If you don't have a specific colour palette in mind, you can try sites like colors.muz.li or coolors.co to get colour inspiration.

If you're working with a client, they may already have a colour palette in mind.

Step 1: Choose your color categories

Choose three categories of colours: a primary colour, a secondary colour, and greys (neutral).

Step 2: Generate Shades for the Colours

Now you'll need to generate shades for your colours. Generating shades for your colour palette helps cater to varied use cases. It makes it convenient for when you have to tweak the colour opacity or brightness.

The Figma plugin Tints and Shades helps you generate colour shades.

Select a colour and click on Tints and shades to generate the shades.

Auto layout (Shift + A) the generated shades to give them one frame, and arrange them vertically/horizontally.

Step 3: Make the colour shades into colour styles.

To make the generated colours styles, first select the frame and hit the Enter key in order to select the boxes in the frame individually.

Rename the individual boxes, using the name of the colour category differentiating with numbers – for example grey 01, and so on.

If you renamed your boxes successfully, the names will appear on the left hand side of your canvas.

After you do this, you will need to make your colours into styles. You might use the Figma plugin Styler to style your colours. Click on the frame, selecting individual boxes using the Enter key.

If you do this correctly, you will get a notification as you can see in the image above.

Repeat these steps for all colour categories – grey, primary, and secondary.

Choose Your Typography

Choosing the right font family, font sizes, and font weights is very important for a good style guide. If you get confused on how to generate or choose a font family, weight, and size, you can use the Material Design type scale material.io to generate type scales.

Step 1: Open a frame after choosing a font of your choice.

Step 2: Establish the page hierarchy

Decide on how many headlines, subtitles, body and captions your design might have. Remember that you can communicate hierarchy through differences in font weight (light, medium, regular), size, letter spacing, and case.

Step 3: Make your fonts styles

After choosing your font weights, size, and letter spacing, it's time to make them styles. Just like you did for your colour palette, select the fonts and use the plugin Styler to create them as styles.

NB: Choose smaller font sizes when designing for mobile (16px, 18px, and so on) and larger font sizes for web.

As you can see in the image above, your text styles will appear on the right hand side of your screen.

Choose Your Iconography

Next up, we have iconography. Icons are an essential part of our designs, as they visually express actions and objects in our interfaces. They help the designer further communicate the meaning of an action or screen, like the home icon, search icon, and more.

You can get icons from plugins like Iconify, Font Awesome, and libraries like feathericons and Google icons.

Step 1: Select a frame.

Go to the frame tool and select a frame for your iconography.

Step 2: Get all your icons

Now you'll need to get the icons you need for your design. Make sure you include different states of each icon, like filled, outline, and so on.

NB: make sure the sizes of your icons are consistent.

Violà! You now have your iconography. To know more about iconography, check out design system icons.

Setup Your Layout Grids

Grids are a fundamental part of any style guide as they help achieve better alignment, hierarchy, and consistency in your designs.

Setting a standard for your grid depends on whether you are designing for web or mobile – each has different standards. For example, you should use a 960 grid (12 or 16 columns) when designing for web.

First, go ahead and select a frame.

Step 1: Add a layout grid

Then get your layout grid from the left hand panel of your canvas.

Input your desired number of columns for the frame and values for the margin and gutter (that is the vertical part of the frame).

Next up, you will need to include grids for the horizontal part of the frame, or the rows. Input your desired value for rows, margins, and gutter.

Choose your components

The components you choose play an important part in your user interface. Components typically include text fields, button states, checkboxes, alerts and notifications.

Define Your Input fields

Input fields, as the name implies, allow users to input text in a UI. And they need to be styled like everything else.

First, as always, select a frame.

Step 1: Design input fields in various states

You'll want to design each input field according to its state, like default, disabled, active, and error.

Step 2: Add icons to your input fields.

Design Your Buttons

Your buttons should include primary buttons and secondary buttons in their different states, like disabled, default, hover and pressed.

Primary buttons are usually strong visual indicators to help users complete their journeys – for example 'next', 'submit', and so on. Secondary buttons are usually the alternatives to the primary actions, like 'cancel', 'back', and so on.

The image above shows two buttons. The button on the left is a primary button while the button on the right is a secondary button.

First, select a frame.

Step 1: Design the primary button

First you'll want to design a primary button in its various states: default, hover, pressed and disabled.

Step 2: Design the secondary button

Then you'll design a secondary button in its various states: default, hover, pressed and disabled.

Step 3: Check buttons with icons

You might want to check how the various buttons would look like with icons. Add icons to your primary and secondary buttons in all their states.

Checkboxes

You'll use checkboxes mostly when users might need to select more than one option from a list – that is, each checkbox is independent of the others in the list/form.

First, select a frame.

Step 2: Design your checkboxes

You'll want to include various states like enabled, disabled, hover, focused and pressed states.

Alerts and notifications

With real time alerts, users can get notifications of reminders, errors, successes and so on. This reduces the risk of hacking, incorrect input, and loss of important information.

First, select a frame.

Step 1: Design notification and alerts

When you design your alerts, make sure to use the correct icons for warning, error, success and success states.

Live Style Guide Examples

Here is Mozilla's style guide:

Mozilla Style Guide

Here is freeCodeCamp's live style guide:

freeCodeCamp's Design Style Guide

Conclusion

Creating a style guide is a fundamental step in product development for any organisation. And as a UI/UX designer, this is something you cannot avoid.

Remember that your style guide isn't fixed and that you can make updates at any point in time. Practice till you get it just the way you want it.

In Figma, there are other ways to resize elements apart from the default method. So don't fret if using the default approach dose not give you the result you need.

First we'll look at the default method so you're familiar with it, and then we'll see some other ways to resize elements and groups as well.

How to Resize in Figma – Default Method

The default method for resizing something in Figma is to just click and drag. To resize an element with the default method, all you need to do is select your object and use any of the transformation controls and resize it until you're content.

Holding down SHIFT on your keyboard while doing this will help constrain your proportions.

Sometimes, the default approach might not work on some elements. Click and drag in those cases might lead to the object being distorted. So what can you do instead?

How to Resize an Object with Properties in Figma

To resize an object really precisely, go to the properties inspector located at the top right part of your file. Find the height and width fields and input the values of your choice. You could also drag the values with your mouse cursor. You can always use this method to get the exact proportions you need, like 140 x 140, 100 x 50, and so on.

Remember, whatever values you input in the properties fields will be reflected in your frame so, it's important to choose proportions that wouldn't distort your frame. For example, a 150 x 20 element will likely look distorted.

You can always experiment with values until you resize the element to your satisfaction. It's all up to you.

How to Resize an Object with the Scale Tool in Figma

The Figma scale tool is located at the top left corner of your screen. To use the scale tool, select your frame, click on the scale tool, and drag using the scale controls.

This tool is especially useful when you're dealing with resizing icons. Some icons get out of shape when you're trying to resize them. The scale tool helps make sure your element or the elements of your frame are not distorted.

Scaling works for text objects, frames, components, and so on. You can use the scale tool to resize elements anytime you want to.

How to Resize Objects with Keyboard Shortcuts in Figma

To resize an object with the keyboard shortcut, select the object, hold down CTRL, and use the arrow keys to resize your object. You can increase or decrease the width or height by 1px at a time. You can use the keyboard shortcuts in any situation.

Tip: Holding down SHIFT on your keyboard at the same time will speed up your resizing to 10px at a time.

How to Resize without Moving Objects Inside the Frame in Figma

Sometimes, while trying to resize frames containing input fields, you'd find that some objects move along with the frame because of constraints.

Of course, that isn't the desired result. To ignore an element's constraints while resizing, hold CTRL while you drag. Also, holding Ctrl + Alt while dragging will resize your element proportionally.

Conclusion

Knowing how to resize elements can really help you create equal, beautiful frames for your designs.

Good luck with your Figma designs!

‌‌‌‌In this article, we'll be learning about what glassmorphism means, how accessible it is, and how to design a simple glass card.‌‌

What is Glassmorphism?

Glassmorphism is a style which, as the name implies, uses properties of glass to enhance your designs. It gives a translucent or transparent look and feel to its elements.

Glassmorphic elements and shapes work really well on vibrant, colorful backgrounds which accentuate the glass effect. Glassmorphism helps you add visual hierarchy to your designs and puts focus on the content you want to highlight.

‌‌Accessibility of Glassmorphism

Glass designs aren't the best if you're designing for people who have vision problems. You'll have to be very careful when choosing colors and fonts to make sure screen readers and other devices can properly interpret the designs.

‌‌Also, using glassmorphism can cause your site to become slow and can also increase battery usage.

If you can work around these issues, however, glass designs do look really, really cool – so we'll learn how to make them here.

Here are some tips to help increase accessibility of your glass designs:

1. Use the transparency or blur effect sparingly/moderately. Don't overuse it. The effect looks best when used on only two or three elements in your design.
2. Establish a clear sense of hierarchy. The right spacing between the cards in the design layout and making sure the right elements stand out will help with accessibility issues. Remember, a strong visual hierarchy helps give users the right visual clues.
3. Set the right background. Make sure the background isn't bland or dull. Using vibrant colors as backgrounds will help accentuate the effect. Of course, this will also achieve a very aesthetically pleasing look.
4. Using larger fonts can make your glass designs more accessible. Also, choose fonts that contrast with the glass background.

Glassmorphic Design Examples

To give you a better idea of what glassmorphic designs look like, here are a few examples of websites that apply this technique:

Glassmorphic Website by Sahid Aldi Susilo

Glassmorphic design by Stefan Brown‌

You can see this design here.

Glass card by Pratheek Purohit

You can see this design here.

Let's see how we can recreate something similar to the last example.

How to Create a Glass Card in Figma

Glass cards are simply cards created using glassmorphism. The cards could be images of credit cards, profile cards, invoice cards, and more.

Follow the steps below to create a glass credit card in Figma.

Step 1 – Set a Colorful Background

A colorful background is essential as it helps accentuate your glass design and make it stand out. You could just use the uiGradients plugin to select a gradient of your choice like I did below.

Step 2 – Draw a Shape

Here, we'll imitate the shape of a physical credit card, which looks like a rectangle.

Draw a rectangular shape with the dimensions 640×400, and set the corner radii to 40pt.

Step 3 – Apply Fill Using Gradient

Next, you need to fill the shape with translucent colors like white. Both colors of the gradient should be white but they should be set to different opacity levels.

Step 4 – Apply Background Blur

Set the blur value to 40, or any value of your choice depending on how blurred you want it to look.

‌‌Step 5 – Add Strokes to Create Borders

Adding borders makes your card look more polished and elegant. It helps to have a sharper contrast through thicker and more distinguishable borders.

‌Step 6 – Apply a Drop Shadow

Using a drop shadow effect helps strengthen the visual hierarchy.

Set the blur value to 24 and the spread to -1.

‌Step 7 – Add Your Content

You can now add content to your card like text, a logo, and so on. Using the Iconify plugin like I did to get your Visa logo and EMV chip will save you a whole lot of time.

Fill your content with the color white, decrease the opacity, and set the blending mode of the layer to Overlay.

The frost effect adds polish to your design. To apply this effect, simply use the noise plugin to fill the image with noise.

If you already have the plugin installed, go straight to plugins and click on noise. If you don't, go to https://www.figma.com/community/plugins to install the plugin.

Once you installed and selected the plugin, set the blending mode of the layer to Overlay and decrease the opacity.

When you apply the noise plugin, the card will look like this:

Next, you change blending mode to Overlay.

Decrease the opacity of your card. Play around with the opacity until it suits your taste.

You can reduce the opacity by clicking on any number on your keyboard – 2 for 20%, 3 for 30%, 4 for 40% and so on.

And there you have it – a beautiful and glassy-looking card.

Conclusion

Adding the glassmorphic affect to your designs is pretty simple. As the glassmorphism trend gets more popular, knowing how to create glass designs might really come in handy in the future.

Styles help you simplify your workflow, keep text and layers consistent, and save valuable time.

‌‌How to Use Color Styles in Figma

You can apply color styles to text, background, and strokes. You can also apply color styles to shapes created in your designs or to elements or sections of the particular website or mobile app you are designing. These could include buttons, rectangles, the top and bottom bars, and more.

You can also use color styles for images or gradients.

How to create a color style

To create a color style, follow these steps:

• Create a new shape and go to Fill. Fill your layer with any color of your choice.

• Click on the four dots icon to trigger the Color Styles modal.
• Click on the + icon in the right-hand corner of the Color Styles modal.

• Give your style a preferred name (let's say Color Style 1) and click the Create Style button.

Remember, you can create as many Color Styles as you would like.‌‌

How to apply a color style to a layer

Select your layer and go to the Fill section in the right-hand sidebar.

• Click the four dots icon in the right corner of the Fill section to trigger the Color Styles modal.
• Select your preferred color style.

Done!

‌‌How to edit a color style

Click on the file's gray backdrop to display your styles.

• Right-click on the Color Style and select Edit style in the menu.

How to delete a color style

Deleting a color style is really easy to do.

• Click on the file's gray backdrop to display your styles.
• Right-click on the Color Style and select Delete Style.

‌How to Use Text Styles in Figma

You can also apply styles to text. It could be a whole block of text or part of the text in a block. This helps define the style of your headers.

To create a new text style, start by creating a new text layer and add some settings. For example:

• Font family: Roboto
• Font size: 30
• Font weight: Regular

• Click on the four dots icon in the Text section to trigger the text modal.
• Click on the + icon in the right corner of the Text Styles modal.

• Give your style your preferred name (let's say Text Style 1) and click on the Create Style button.

‌‌How to apply a text style to a layer

First off, select your layer and go to the Text section in the right-hand sidebar.

Then click the four dots icon in the right corner of the Text section to trigger the text styles modal.

Finally, just select your preferred Text Style.‌‌

How to delete a text style

To delete a text style, you'll need to click on the file's gray backdrop to display your styles. Then you can just right-click on the text style you want to delete and select Delete Style.

How to combine color and text styles

You can also combine text and color styles while designing. You can add a color style to different text objects. This is an extra step which can make your system easier to maintain especially when you don't have to create different text styles for every color combination.

• To save color styles specifically for text: Create a text box and input your text. Follow the steps of 'How to apply a color style to a layer'.
• When you get to where you are supposed to give your style a description/name, input your text description, for example sub-heading, page heading, button text, and so on.

Conclusion

Note that using and creating styles when designing is entirely up to you. No one will know what color/text styles you use in your design unless you let them know. Like I said, it's entirely up to you!

However, styles help keep your designs consistent and creating great styles can help make your user experience seamless.

‌‌‌‌‌‌‌‌‌‌

Plugins help make your design process easier and smoother. From image assets to embedding maps into your designs, plugins are easy to use and they help you create beautiful, complex designs in less time.

How to Install Plugins on Figma

Figma makes it easy for you to install plugins which are quite essential for your designs. You can install plugins from different places.

How to install a plugin from your account

To install a plugin from your account, you just have to:

1. Login to your Figma account
2. Click on Explore Community at the top-left corner of your screen:

3. Select Plugins from the options at the top:

4. Search for your preferred plugin and install it:

Click on the plugin name to open the plugin page and learn more about it.

You can also see plugins already installed on your Figma account.

‌‌How to install a plugin in the file

1. Right click on the canvas – your cursor could be positioned anywhere.

2. Hover your cursor on Plugins, which will bring up all installed plugins.

3. Scroll down to Browse plugins in Community and click on it. This will open Figma Community in a separate tab.

‌‌‌‌How to Add Plugins on a PC

‌‌There are quite a number of ways to add plugins to your designs.‌‌

Add plugins from the File menu

Access the File menu at the top left corner of your screen in Figma. The File menu contains functions like edit, view, and text. You can also run your plugins from the menu.

1. Click on File Menu

2. Hover your cursor on Plugins, which will bring up all your installed plugins.

3. Click on your preferred plugin and apply it to your design.

How to add plugins with Ctrl+/

This is a Quick Action that helps you locate items, including plugins on your Figma file.

1. Press Ctrl +/ on your keyboard. This action will lead to a window pop-up.

2. Input the name of the plugin on the pop-up window. There could be different plugins with similar names. In this case, Figma displays all related plugins so you can pick the exact one you want.

3. Press Enter or click on the plugin, once you find it, to start using it in the file.

8 Figma Plugins Every Designer Should Know

There are lots of really helpful Figma plugins out there. Here's 8 really cool ones.

‌‌Iconify

Designs can seem incomplete without icons. From Google Material Icons to Carbon icons, this Figma plugin has a wide collection of icons that many developers use to create beautiful, modern user interfaces.‌‌

You can get icons in your preferred color, width, height, and size. You can also generate your SVG icon with this plugin.

‌‌Pattern Hero

This plugin helps you with different beautiful patterns for your designs. You can shuffle the patterns, and work with different templates.‌‌ You can also create grids and textures.

Unsplash

You need beautiful pictures to create beautiful designs. This amazing plugin helps you import images for your designs at a single click.

Using Unsplash, you won't need to waste your time searching through various portals for images – you get to download free images directly to Figma. You don't need to worry about the quality of the photos, as Unsplash images are usually of a very high quality.

Remove Backgrounds

Sometimes we download nice pictures for our designs, only to notice that the background of the image does not fit with the design.

As the name implies, the Remove Backgrounds plugin allows you to remove the background from your images. Just keep in mind that you do have to create a remove.bg account before you can use this plugin.

Mapsicle

You don't need to use screenshot images for maps ever again. The Mapsicle Plugin helps you place maps easily into your designs.

With this plugin, you can search for any location in the world, and embed a map into your design. You can also adjust the style of the map.

UI Gradients

Gradients make designs look unique. uiGradients is a great gradient palette with tons of ready-to-use gradients for your next amazing design.

With this plugin, you don't have to worry about which hue is perfect for your design. Just go through the gradients and find the combination that works for you.

‌‌Table Generator

Table Generator saves you the time when you're data tables. You just have to copy and paste your data in and voilà! Your table is generated.

This plugin enables you align text, add constraints to your cell frame, and lots more.

‌‌StorySet

This is an illustration plugin that lets you add illustrations to your work. StorySet contains hundreds of beautiful illustrations that you can use for your design. What's more, you can edit the illustrations' colors, styles, and backgrounds. You can also animate.

Conclusion

Plugins are essential when you're creating sophisticated designs. Just find the ones useful to you and learn how to add them to your designs.