Welcome to Course 5

Welcome to Create High-Fidelity Designs and Prototypes in Figma, the fifth of seven courses in
the Google UX Design Certificate. In this course, you will finish designing the mobile app that
you've been working on for the last few courses. You'll start by learning how to create mockups
in Figma, a popular design tool. You'll apply visual design elements and principles as you design
mockups for your mobile app. Then, you’ll turn those designs into a high-fidelity prototype that
works like a finished product. You’ll conduct research to collect feedback about your designs
and make improvements. Finally, you’ll learn how to share your designs with development
teams. By the end of this course, your mobile app designs will be complete, and you’ll add this
project to your professional UX portfolio!

Content and projects in each course of this certificate program build on information practiced in
earlier courses. To be successful in this course, you should complete the previous four courses of
this certificate program, if you haven't already done so.

1. Foundations of User Experience (UX) Design

2. Start the UX Design Process: Empathize, Define, Ideate
3. Build Wireframes and Low-Fidelity Prototypes
4. Conduct UX Research and Test Early Concepts
5. Create High-Fidelity Designs and Prototypes in Figma - this course
6. Responsive Web Design in Adobe XD
7. Design a User Experience for Social Good & Prepare for Jobs
Each course of the Google UX Design Certificate is broken into weeks. You can complete
courses at your own pace, but the weekly breakdowns are designed to help you finish the
program in about six months total.

So, what design skills can you expect to develop during this course? Here’s a preview of the
hands-on activities you'll complete.
Week 1: Starting to create mockups. Turn your focus to visual design, which is
how a product or technology appears to users. You'll start to create mockups using visual design
elements, like typography, color, and iconography. Elements are often arranged into layouts
using methods like grids, containment, and negative space. You'll consider all of these visual
design elements to design the mobile app you've been working on throughout the certificate
program.

Week 2: Applying visual design principles to mockups. In this part of the

course, you’ll use visual design principles to refine your mockups. First, you'll use emphasis to
guide users to the most important parts of a page. Next, you'll apply hierarchy, scale, and
proportion to organize the elements on each page of your app. Then, you'll consider unity and
variety to help elements of your app function together or stand out. Finally, you'll revisit Gestalt
Principles, like similarity, proximity, and common region, to help users interpret your designs
easily.

Week 3: Exploring design systems. Come explore the world of design systems! In
this part of the course, you'll be introduced to the parts of a design system, as well as the benefits
of using a design system. You'll examine various companies' design systems, and you’ll have an
opportunity to use them in your own mockups. You'll also learn how to use and create sticker
sheets in Figma.

Week 4: Participating in design critique sessions. Giving, receiving, and

implementing feedback is a necessary part of the UX design process. In this part of the course,
you’ll explore effective methods for giving and receiving feedback. You’ll also learn about
design critique sessions, which will be an important part of your first job as a UX designer.
Finally, you’ll learn how to turn feedback into actionable steps that you can take to revise
designs.

Week 5: Creating high-fidelity prototypes. You’re ready to build high-fidelity

prototypes in Figma! Following six steps, you'll turn your mockups into a prototype that's ready
for testing. In addition, you'll explore two new concepts, gestures and motion, which can help
enrich the user experience and increase the usability of prototypes.

Week 6: Testing and iterating on designs. Now that you have a high-fidelity
prototype, it’s time to test your mobile app designs by conducting a usability study. You'll
analyze the feedback you receive to come up with actionable insights and iterate on your designs.
Once your designs are final, you’ll learn how to hand them off to engineers for production.
Finally, you’ll showcase all of the artifacts you've created during this certificate program in a
case study for your professional UX portfolio.

Portfolio project
As you make your way through this certificate program, you will create projects to include in
your professional portfolio to show to potential employers. In this course, you’ll finish designing
the mobile app you've been working on since the start of the program. For example, if you
selected a prompt to design an app for your local burger restaurant in the second course of the
program, you will continue through the design process with this same project.

 In Course 2, you learned how to empathize with potential users and define users’
needs.
 During Course 3, you came up with ideas for solutions that addressed the users’ needs.
You also created wireframes and a low-fidelity prototype of your mobile app.
 Throughout Course 4, you planned and conducted research to test your designs and get
feedback from users. You iterated on your designs based on insights from the research.
 Now, in Course 5, you will create mockups and a high-fidelity prototype of your app.
Your designs will start to look and feel like a real product! You’ll also test your designs
by conducting a second usability study and iterate on your designs until they’re final.
Everything you’ve created in the certificate program to date will be included in your professional
UX portfolio. Taking the courses of this certificate program in order will allow you to follow the
steps of the design process and end up with all of the artifacts you’ll need to include in your
portfolio.

You’re almost done with your first project. Keep up the great work as you finish designing a
mobile app in this course!

Go to next item

Optional - Read this if it’s your first

course in the certificate program
If this is your first course in the Google UX Design Certificate, welcome! This reading will provide you
with the information you need to decide if you should continue in this course or begin with an earlier
course of the program.

This is the fifth of seven courses in the certificate program. The content and projects in each
course of the program build on information that was introduced in earlier courses. For the best
learning experience, you should complete the previous four courses of this certificate program,
before completing this fifth course.
  Course 1: Foundations of User Experience (UX) Design
 Course 2: Start the UX Design Process: Empathize, Define, and Ideate
 Course 3: Build Wireframes and Low-Fidelity Prototypes
 Course 4: Conduct UX Research and Test Early Concepts
Keep in mind that if you want to obtain the Google UX Design Certificate, you must complete all
graded materials in all courses of the certificate program and earn a score of 80% or higher. Graded
materials are located at the end of each week and are indicated with the name "weekly challenge."

Test your knowledge of concepts taught in prior

courses
If you choose to enroll in this fifth course of the Google UX Design Certificate without completing the
previous four courses, you should take the optional quiz that follows this reading. The quiz will test
your knowledge of content that was taught during previous courses of the certificate program.

Following the quiz, there is a reading that will explain your quiz score. The reading will help you
understand if you have the knowledge necessary to succeed in this course, or if you should
complete earlier courses of the certificate program and work your way to this course.

Design a mobile app

In this course, you will design mockups and high-fidelity prototypes, which are the final phases of the
design process. Learners who have been taking the courses of this certificate program in order
already selected a project prompt in the second course of the program and will finish developing that
design project in this course. However, if this is your first course of the program, you have two ways
to select a project prompt: using a prompt generator or building from starter materials. More
information on each option is below.

Choose a prompt using Sharpen

Sharpen is an online tool that creates randomized design prompts. Using a design prompt is a great
way for up-and-coming designers, like you, to get started in the field. Why? Well, the prompt you
select for the project in this course is similar in style to the prompts you'll be asked in real job
interviews!

For this project in the Google UX Design Certificate, you can choose from a custom list of tens of
thousands of unique prompts on Sharpen. Your first project will focus on designing a mobile app,
and the prompt generator provides lots of ideas to choose from.

Check out the Google UX Design Certificate - Project 1 prompt generator. You can click the
“New Challenge” button to generate project prompts, and you can refresh the prompt as
many times as you want to find one that gets your creative energy flowing! When you find a prompt
that you like, take a screenshot or write it down, so that you can submit your choice of project prompt
in an upcoming quiz.

If you already have an idea for a design project in mind, you will have the opportunity to work on the
project of your choice in Course 7 of the certificate program. For this first project, please use a
prompt from Sharpen to ensure your project has an appropriate scope and aligns with the course
materials presented.
After you select a project prompt, you need to catch up with where learners in the certificate program
are at in the design process. Since this is the fifth course of the certificate program, you have a lot of
ground to cover! Before proceeding with this course, you need to:

 Empathize with users: Conduct user interviews, develop personas, create user stories,
and develop user journey maps.
 Define user paint points: Create a problem statement.
 Come up with ideas for design solutions: Conduct a competitive audit, sketch ideas using
Crazy Eights, and brainstorm using How Might We questions.
 Create prototypes: Design wireframes and a low-fidelity prototype using Figma.
 Test your designs: Plan and conduct a usability study to gather feedback from your designs.
Then, iterate on your low-fidelity designs based on research insights.
If any of these activities or tools are unfamiliar to you, please complete the first four courses of the
certificate program, which are linked at the start of this reading.

Build from starter materials

Alternatively, if you’d like to complete only this course of the certificate program, you can utilize
prepared starter materials. The starter materials consist of designs that the Google team has
created, in alignment with the activities from previous courses of the certificate program. In other
words, you can complete this course based on example research and low-fidelity designs, if you
don't want to create your own portfolio project. To get started, follow the link to the Course 5 starter
materials.

If you build your project in this course from the starter materials provided, you will not be able to
include the designs in your professional portfolio. Utilizing the starter materials is helpful if you only
want to learn the concepts taught in this course: creating mockups and high-fidelity prototypes in
Figma.

Get excited to create mockups and a high-fidelity prototype of your app. This course is when your
design ideas will start to look and feel like a real product!

Foundational skills to build mockups in

Figma
You’re almost ready to create your very first mockup in Figma. Before you get started, let’s
explore some of the skills that will give you the basic foundation to confidently create mockups
in Figma.

 Create a new Page.

 Create Frames on the Canvas.
 Tab between projects in Figma.
Names to know
Before you can begin creating a mockup, it’s important to understand the names that are used in
Figma.

 Each document is called a File.

  A File contains the Canvas, where you’ll create layers and objects for your designs.
 A File also contains Pages, where you’ll design your screens.
 Each Page has its own Canvas. This Canvas is gray (#E5E5E5) by default and is
where you can add, remove, and update your designs.

Create a new Page

It’s easy to create a new Page in Figma by following these simple steps:

1. Log in to Figma.
2. Create a new File by clicking the + icon in the upper right corner.
3. On the left, click Page 1. This lists all of the pages currently in your File.
4. Click the + icon to add a new Page to your File, as shown in the image below.
5. When you create a new Page, you’ll immediately be able to rename it. Or, you can
rename a page at any time by double-clicking the title of the Page. When you begin to
name a page, the name text will be highlighted in blue and the row will be outlined in
blue, as shown in the image below.

To keep exploring, check out this tutorial from Figma that goes through detailed steps to create a
Page, duplicate a Page, view all of your Pages, and more.

Create Frames
The Canvas in Figma is where you’ll create Frames. You can think of the Canvas like a
blank wall that a picture frame hangs on, and the Frames are like picture frames where you’ll
design.
To create a new Frame: Select the Frame tool. The icon has four lines crossing in a grid
pattern. It’s listed as the third icon from the left in the toolbar. The image below shows the Frame
icon in the Figma toolbar.

There are a few ways to choose the size of the Frame:

1. Click inside the Canvas to create a default Frame. The dimensions for default
frames are 100x100 pixels.
2. Click and drag in the Canvas to create a Frame with the dimensions you prefer.
When you click and drag, the width and height will automatically update based on how
much you drag. If you want to choose a specific width and height, you can do this in the
Frame section in the Design panel on the right side of the screen.
3. Select a predetermined size for a Frame, like a specific phone model or tablet, in the
Design panel on the right side of the screen. As shown in the image below, there is a
list of different containers or Frames for various devices or formats. Simply select a
size to add the Frame to your Canvas.

On Figma, the frame button is highlighted to the left and the template sizes are to the right
including phone, tablet, desktop, presentation, and watch.
Check out this Figma tutorial to learn more about creating and using Frames.

You have the tools!

You’ll use Figma or a similar design tool in your job as a UX designer. The more familiar you
become with Figma and its features, the faster you’ll be able to create your own digital mockups
in any tool. Remember: The knowledge you’re gaining isn’t limited to Figma. The skills you’re
acquiring by working in Figma will transfer to your work in other digital tools.

Before you get to work, here’s a pro tip: It helps to open multiple windows to view your files.
With multiple windows open, you can view a different file from the one you’re working in
without closing your current file. To create a new window, right-click Files in your "Draft and
Recent" folders, and select “Open in new tab.”

Additional resources
 Using keyboard shortcuts will speed up your design process and help you start designing
like a pro. The website Shortcuts.design has compiled a list of useful Figma shortcuts.
 Figma comes with some device sizes preloaded into the platform. In addition, Figma has
a library of device sizes that you can download.
Go to next item

Activity Exemplar: Use low-fidelity designs

to start your portfolio project mockups
Here is a completed exemplar of the blank frames created for the mockups of the Zia’s Pizza
app. The Zia's Pizza app is a fictional pizza ordering app which will be used as an example
throughout this course to demonstrate the concept you are practicing in each activity. Below,
you'll find blank mockup frames for the Zia's Pizza app, organized by the number and order of
screens that will appear in the app.
In the exemplar, there are two pages in the Figma file: one titled Wireframes and one titled
Mockups. This makes the content organized and makes it clear what type of content can be
found in each page. In the Mockups page, a blank frame has been created for each screen that
will appear in the mockups. The number of frames created was based on the number of low-
fidelity wireframe frames.

Compare this exemplar to the start of your mockups created in the activity. What did you do
well? Where can you improve? Take this feedback with you as you continue to progress through
the course.