VOOZH about

URL: https://www.coursera.org/learn/high-fidelity-designs-prototype

⇱ Create High-Fidelity Designs and Prototypes in Figma | Coursera


Create High-Fidelity Designs and Prototypes in Figma

Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Create High-Fidelity Designs and Prototypes in Figma

331,056 already enrolled

Included with

Gain insight into a topic and learn the fundamentals.
4.8

4,817 reviews

Beginner level
No prior experience required
Flexible schedule
2 weeks at 10 hours a week
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
4.8

4,817 reviews

Beginner level
No prior experience required
Flexible schedule
2 weeks at 10 hours a week
Learn at your own pace

What you'll learn

  • Build mockups and high-fidelity prototypes in the design tool Figma.

  • Define and apply common visual design elements and principles.

  • Demonstrate how design systems can be used to organize, standardize, and enhance designs.

  • Understand the role of design critique sessions and feedback while iterating on designs.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

24 assignments

Taught in English
99%
Most learners liked this course

Build your Design and Product expertise

This course is part of the Google UX Design Professional Certificate
When you enroll in this course, you'll also be enrolled in this Professional Certificate.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate from Google

There are 5 modules in this course

Create High-Fidelity Designs and Prototypes in Figma is the fifth course in a certificate program that will equip you with the skills you need to apply to entry-level jobs in user experience (UX) design. In this course, you will follow step-by-step tutorials to learn how to create high-fidelity designs, called mockups, in Figma, a popular design tool. Then, you’ll turn those designs into an interactive 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 and highlight your work in your professional UX portfolio.

Current UX designers and researchers at Google will serve as your instructors, and you will complete hands-on activities that simulate real-world UX design scenarios. Learners who complete the courses in this certificate program should be equipped to apply for entry-level jobs as UX designers. By the end of this course, you will be able to: - Build mockups and high-fidelity prototypes in Figma. - Define and apply common visual design elements and principles. - Demonstrate how design systems can be used to organize, standardize, and enhance designs. - Understand the role of design critique sessions and feedback while iterating on designs. - Learn how to hand off finished design projects to engineering teams. - Complete mobile app designs to include in a professional UX portfolio. This course is suitable for beginner-level UX designers who have completed the previous four courses of the Google UX Design Certificate. Alternatively, learners who have not completed the previous courses should have a strong understanding of the design process, how to create low-fidelity designs on paper and in Figma, and how to conduct usability studies.

Turn your focus to visual design, which is how a product or technology appears to users. In this part of the course, you'll start to create mockups, which are high-fidelity designs that represent a final product. To create mockups, you'll use visual design elements, like typography, color, and iconography. Elements are often arranged into layouts using methods like grids, containment, and negative space. You'll apply all of these visual design learnings to build on the mobile app designs you've been working on throughout the certificate program.

What's included

16 videos23 readings4 assignments2 plugins

16 videosTotal 52 minutes
  • Introduction to Course 5: Create High-Fidelity Designs and Prototypes in Figma2 minutes
  • Kunal - My journey to UX3 minutes
  • Welcome to module 12 minutes
  • Introduction to mockups 4 minutes
  • Chikezie - Transition from low-fidelity to high-fidelity designs 2 minutes
  • Introduction to foundational elements of visual design 2 minutes
  • Typography in UX design3 minutes
  • The importance of typography 6 minutes
  • Color in UX design8 minutes
  • Iconography in UX design5 minutes
  • Add images to your mockups3 minutes
  • Introduction to layouts1 minute
  • Use grids to guide layouts 4 minutes
  • Use containment in layouts3 minutes
  • Use negative (white) space in layouts4 minutes
  • Wrap-up: Starting to create mockups 1 minute
23 readingsTotal 146 minutes
  • Welcome to Course 58 minutes
  • Helpful resources and tips4 minutes
  • Foundational skills to build mockups in Figma8 minutes
  • Review: Use low-fidelity designs to start project mockups4 minutes
  • Work with type in mockups8 minutes
  • Add product copy to mockups8 minutes
  • Review: Add typography to project mockups4 minutes
  • Work with color in mockups 8 minutes
  • Accessibility considerations for color8 minutes
  • Review: Add color to project mockups4 minutes
  • Work with icons in mockups 8 minutes
  • Review: Add icons to project mockups4 minutes
  • Learn about more visual design elements 8 minutes
  • Find stock images for mockups8 minutes
  • Additional design considerations8 minutes
  • Create grids in mockups8 minutes
  • Review: Create grids in project mockups4 minutes
  • Create containment in mockups8 minutes
  • Review: Create containment in project mockups4 minutes
  • Use negative space in mockups8 minutes
  • Review: Revise project mockups by adding negative space4 minutes
  • Common design patterns in apps8 minutes
  • Glossary terms from course 5, module 12 minutes
4 assignmentsTotal 72 minutes
  • Module 1 Challenge50 minutes
  • Test your knowledge of typography8 minutes
  • Test your knowledge on color4 minutes
  • Self-Reflection: Share what you've learned about page layouts10 minutes
2 pluginsTotal 60 minutes
  • Build a mockup from foundational elements30 minutes
  • Test your knowledge on containment and negative space in design30 minutes

In this part of the course, you’ll use visual design principles to refine 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.

What's included

8 videos11 readings6 assignments1 plugin

8 videosTotal 29 minutes
  • Welcome to module 21 minute
  • Emphasis in UX design4 minutes
  • Hierarchy in UX design4 minutes
  • Scale and proportion in UX design5 minutes
  • Unity and variety in UX design4 minutes
  • Apply Gestalt Principles to mockups6 minutes
  • Reflect on your progress 4 minutes
  • Wrap-up: Applying visual design principles to mockups 1 minute
11 readingsTotal 74 minutes
  • Use emphasis in mockups8 minutes
  • Use hierarchy in mockups8 minutes
  • Use scale and proportion in mockups 8 minutes
  • Use unity and variety in mockups 8 minutes
  • Review: Apply visual design principles to project mockups4 minutes
  • Learn about additional Gestalt Principles 8 minutes
  • Review: Apply Gestalt principles to project mockups4 minutes
  • Consider additional visual design elements and principles 8 minutes
  • Learn about interface design principles 8 minutes
  • Include navigation in mockups8 minutes
  • Glossary terms from course 5, module 22 minutes
6 assignmentsTotal 96 minutes
  • Module 2 Challenge60 minutes
  • Test your knowledge on emphasis and hierarchy8 minutes
  • Test your knowledge on scale and proportion6 minutes
  • Test your knowledge on unity and variety 4 minutes
  • Test your knowledge of Gestalt Principles8 minutes
  • Self-Reflection: Include navigation in your mockups10 minutes
1 pluginTotal 10 minutes
  • Apply visual design principles10 minutes

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.

What's included

9 videos5 readings4 assignments

9 videosTotal 36 minutes
  • Welcome to module 31 minute
  • Introduction to design systems3 minutes
  • Benefits of design systems 4 minutes
  • Google's design system: Material Design 8 minutes
  • Shopify's design system: Polaris 4 minutes
  • Create a sticker sheet in Figma4 minutes
  • Use a design system library in Figma9 minutes
  • Shabi - Consider assistive technologies when working in design systems2 minutes
  • Wrap-up: Exploring design systems1 minute
5 readingsTotal 30 minutes
  • Explore popular design systems 8 minutes
  • Create sticker sheets for design projects4 minutes
  • Get inspiration from design systems8 minutes
  • Optional - Learn from Figma - Use a design system library8 minutes
  • Glossary terms from course 5, module 32 minutes
4 assignmentsTotal 83 minutes
  • Module 3 Challenge65 minutes
  • Test your knowledge on design systems6 minutes
  • Test your knowledge on features of open-source design systems6 minutes
  • Test your knowledge on working with design systems in Figma6 minutes

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.

What's included

9 videos6 readings5 assignments

9 videosTotal 32 minutes
  • Welcome to module 41 minute
  • Introduction to high-fidelity prototypes 4 minutes
  • Create a high-fidelity prototype in Figma 4 minutes
  • Gestures and motion in UX design 2 minutes
  • Add gestures and motion in Figma 6 minutes
  • Accessibility considerations for gestures and motion 3 minutes
  • Jen - Design with accessibility in mind4 minutes
  • Learn from Figma - Prototype interactions and feedback 8 minutes
  • Wrap-up: Creating high-fidelity prototypes1 minute
6 readingsTotal 34 minutes
  • Explore types of gestures and motion 8 minutes
  • Follow-along guide: Add gestures and motion in Figma4 minutes
  • Learn more about prototyping in Figma 8 minutes
  • Additional ways to enhance high-fidelity prototypes8 minutes
  • Glossary terms from course 5, module 42 minutes
  • Exemplars: Create a high-fidelity prototype for your mobile app4 minutes
5 assignmentsTotal 148 minutes
  • Module 4 Challenge 60 minutes
  • Test your knowledge on creating a high-fidelity prototype in Figma10 minutes
  • Test your knowledge on gestures and motion8 minutes
  • Self Reflection: Address accessibility considerations when designing with motion 10 minutes
  • Activity: Create a high-fidelity prototype for your mobile app60 minutes

Now that you have a high-fidelity prototype, it’s time to test your designs. To get started, you’ll conduct a usability study to test your high-fidelity prototype of a mobile app. You'll analyze the feedback you receive to come up with actionable insights and iterate on your designs. Then, you’ll learn how to hand off designs to engineers for production. Finally, you’ll turn everything you’ve learned about user research, ideation, wireframes, designs, and prototypes into a case study for your professional UX portfolio.

What's included

12 videos13 readings5 assignments

12 videosTotal 40 minutes
  • Welcome to module 51 minute
  • Plan a UX research study4 minutes
  • Conduct a usability study3 minutes
  • Analyze and synthesize usability study results2 minutes
  • Iterate on high-fidelity designs10 minutes
  • Identify when a design is complete2 minutes
  • Document and share designs1 minute
  • Hand off designs for production2 minutes
  • Learn from Figma - Prepare for hand off5 minutes
  • Wrap-up: Testing and iterating on designs1 minute
  • Create a case study for your portfolio project7 minutes
  • Congratulations on completing Course 5: Create High-Fidelity Designs and Prototypes in Figma2 minutes
13 readingsTotal 84 minutes
  • Learn more about planning a UX research study8 minutes
  • Learn more about conducting a usability study8 minutes
  • Learn more about analyzing and synthesizing usability study results8 minutes
  • Review: Analyze and synthesize the results of a usability study4 minutes
  • Learn more about identifying when a design is complete8 minutes
  • Final designs of the dog walker app in Figma4 minutes
  • Glossary terms from course 5, module 54 minutes
  • Portfolio project guide for creating hi-fi prototypes10 minutes
  • Review: Refine your high-fidelity portfolio project designs10 minutes
  • Learn more about creating a case study for your portfolio project10 minutes
  • Reflect and connect with your peers4 minutes
  • Course 5 glossary2 minutes
  • Start the next course4 minutes
5 assignmentsTotal 118 minutes
  • Module 5 Challenge 60 minutes
  • Self-Reflection: Account for bias in your usability study10 minutes
  • Test your knowledge on coming up with research insights8 minutes
  • Test your knowledge on handing off designs10 minutes
  • Activity: Refine your portfolio project mockups30 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Instructor ratings
4.8 (1,374 ratings)
Google
386 Courses17,031,957 learners

Explore more from Design and Product

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Learner reviews

  • 5 stars

    87.42%

  • 4 stars

    10.02%

  • 3 stars

    1.55%

  • 2 stars

    0.45%

  • 1 star

    0.53%

Showing 3 of 4817

MV
·

Reviewed on Aug 22, 2022

This has been an increadible course, you learn a lot about design and the different elements that are important for the user's experience. If you can take this course straight will be much easier.

RS
·

Reviewed on Mar 23, 2021

Working within Figma, you really learn a lot about the program and its benefits. The course teaches you in great detail how to successfully create hifi designs, and is packed with a ton of knowledge.

LW
·

Reviewed on Sep 16, 2021

Kunal did an absolutely fantastic job with this course and he was gentle to the fact that we are moving to a possibly challenging part of the course so he was clear and precise. Thank you!

Frequently asked questions

User experience (UX) designers focus on the experience that users have while using products like websites, apps, and physical objects. UX designers make those everyday interactions useful, enjoyable, and accessible. The role of an entry-level UX designer might include coming up with ideas to address user problems, conducting research with users, and designing wireframes, mockups, and prototypes.

If you enjoy talking to and empathizing with people, drawing, thinking creatively, or paying attention to details, a job as a UX designer might be a good fit for you!

This course is the fifth of seven courses that will equip you with the skills you need to apply to entry-level jobs in user experience design. We strongly recommend that you complete the first four courses of the Google UX Design Certificate before completing this one:

- 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

Alternatively, you should have experience conducting user research in order to empathize with user needs and determine specific user pain points. You also need to have the ability to create personas, user stories, and user journey maps, as well as draft problem statements and value propositions. You need to know how to create wireframes and low-fidelity prototypes on paper and in the design tool Figma. It’s helpful to have experience conducting usability studies and iterating on designs, as well. If you are unfamiliar with any of these topics, they are covered in earlier courses of the Google UX Design Certificate.

Figma and Adobe XD are the design tools taught in the seven courses of the Google UX Design Certificate. This course focuses on creating designs in Figma.

Spreadsheets, word processing applications, and presentation applications will also be used. Throughout the program, you will create a professional portfolio, using the platform of your choice, to showcase your UX design work.

One of the most exciting parts about joining the field of user experience is the large number of job opportunities available. Nearly every company needs UX designers to help create their digital and physical products. While the need for UX designers continues to grow, there is currently a shortage of UX design professionals to fill those roles. 

A career in UX design allows you the opportunity to work as a generalist, finding a role as a UX designer, UI designer, or UX researcher, or as a specialist, like a visual designer or interaction designer. Upon completion of this certificate program, you will be able to search for jobs with all of these titles, and find the role that best suits you.

This is the fifth of seven courses in the Google UX Design Certificate. We highly recommend completing the seven courses in this certificate program in the order presented, because the content and applications in each course build on information presented and practiced in earlier courses.

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Certificate, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Financial aid available,