Buy Now AED 170.99 + VAT

Monthly Subscription Starting at AED 99 + VAT

Create High-Fidelity Designs and Prototypes in Figma
  • Level Foundation
  • Duration 69 hours
  • Course by Google
  • Offered by

About

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 seven 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.

Modules

Introduction to Course 5

    • 2 Videos
    • 1 Readings
Show info about module content

2 Videos

  • Introduction to Course 5: Create High-Fidelity Designs and Prototypes in Figma
  • Kunal - My journey to UX

1 Readings

  • Welcome to Course 5

Begin to create a mockup

    • 3 Videos
    • 2 Readings
Show info about module content

3 Videos

  • Welcome to module 1
  • Introduction to mockups
  • Chikezie - Transition from low-fidelity to high-fidelity designs

2 Readings

  • Foundational skills to build mockups in Figma
  • Review: Use low-fidelity designs to start project mockups

Use typography in mockups

    • 3 Videos
    • 3 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Test your knowledge of typography

3 Videos

  • Introduction to foundational elements of visual design
  • Typography in UX design
  • The importance of typography

3 Readings

  • Work with type in mockups
  • Add product copy to mockups
  • Review: Add typography to project mockups

Use color in mockups

    • 1 Videos
    • 3 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Test your knowledge on color

1 Videos

  • Color in UX design

3 Readings

  • Work with color in mockups
  • Accessibility considerations for color
  • Review: Add color to project mockups

Use iconography in mockups

    • 2 Videos
    • 5 Readings
    • 1 Plugin
Show info about module content

2 Videos

  • Iconography in UX design
  • Add images to your mockups

5 Readings

  • Work with icons in mockups
  • Review: Add icons to project mockups
  • Learn about more visual design elements
  • Find stock images for mockups
  • Additional design considerations

Understand page layouts - grids and containment

    • 3 Videos
    • 4 Readings
Show info about module content

3 Videos

  • Introduction to layouts
  • Use grids to guide layouts
  • Use containment in layouts

4 Readings

  • Create grids in mockups
  • Review: Create grids in project mockups
  • Create containment in mockups
  • Review: Create containment in project mockups

Understand page layouts - negative space

    • 1 Videos
    • 3 Readings
    • 1 Plugin
    • 1 Assignment
Show info about module content

1 Assignment

  • Self-Reflection: Share what you've learned about page layouts

1 Videos

  • Use negative (white) space in layouts

3 Readings

  • Use negative space in mockups
  • Review: Revise project mockups by adding negative space
  • Common design patterns in apps

Module 1 review

    • 1 Videos
    • 1 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • Activity: Apply foundational elements of visual design to your portfolio project mockups
  • Module 1 challenge

1 Videos

  • Wrap-up: Starting to create mockups

1 Readings

  • Glossary terms from course 5, module 1

Apply visual design principles to mockups (part 1)

    • 3 Videos
    • 2 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Test your knowledge on emphasis and hierarchy

3 Videos

  • Welcome to module 2
  • Emphasis in UX design
  • Hierarchy in UX design

2 Readings

  • Use emphasis in mockups
  • Use hierarchy in mockups

Apply visual design principles to mockups (part 2)

    • 2 Videos
    • 3 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • Test your knowledge on scale and proportion
  • Test your knowledge on unity and variety

2 Videos

  • Scale and proportion in UX design
  • Unity and variety in UX design

3 Readings

  • Use scale and proportion in mockups
  • Use unity and variety in mockups
  • Review: Apply visual design principles to project mockups

Refine mockup designs

    • 2 Videos
    • 5 Readings
    • 1 Plugin
    • 2 Assignment
Show info about module content

2 Assignment

  • Test your knowledge of Gestalt Principles
  • Self-Reflection: Include navigation in your mockups

2 Videos

  • Apply Gestalt Principles to mockups
  • Reflect on your progress

5 Readings

  • Learn about additional Gestalt Principles
  • Review: Apply Gestalt principles to project mockups
  • Consider additional visual design elements and principles
  • Learn about interface design principles
  • Include navigation in mockups

Module 2 review

    • 1 Videos
    • 1 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • Activity: Refine your portfolio project mockups
  • Module 2 challenge

1 Videos

  • Wrap-up: Applying visual design principles to mockups

1 Readings

  • Glossary terms from course 5, module 2

Understand design systems

    • 5 Videos
    • 1 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • Test your knowledge on design systems
  • Test your knowledge on features of open-source design systems

5 Videos

  • Welcome to module 3
  • Introduction to design systems
  • Benefits of design systems
  • Google's design system: Material Design
  • Shopify's design system: Polaris

1 Readings

  • Explore popular design systems

Create a sticker sheet

    • 1 Videos
    • 1 Readings
Show info about module content

1 Videos

  • Create a sticker sheet in Figma

1 Readings

  • Create sticker sheets for design projects

Use design systems

    • 2 Videos
    • 2 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Test your knowledge on working with design systems in Figma

2 Videos

  • Use a design system library in Figma
  • Shabi - Consider assistive technologies when working in design systems

2 Readings

  • Get inspiration from design systems
  • Optional - Learn from Figma - Use a design system library

Module 3 review

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Module 3 challenge

1 Videos

  • Wrap-up: Exploring design systems

1 Readings

  • Glossary terms from course 5, module 3

Understand high-fidelity prototypes

    • 3 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Test your knowledge on creating a high-fidelity prototype in Figma

3 Videos

  • Welcome to module 4
  • Introduction to high-fidelity prototypes
  • Create a high-fidelity prototype in Figma

Explore gestures and motion

    • 5 Videos
    • 4 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • Test your knowledge on gestures and motion
  • Self Reflection: Address accessibility considerations when designing with motion

5 Videos

  • Gestures and motion in UX design
  • Add gestures and motion in Figma
  • Accessibility considerations for gestures and motion
  • Jen - Design with accessibility in mind
  • Learn from Figma - Prototype interactions and feedback

4 Readings

  • Explore types of gestures and motion
  • Follow-along guide: Add gestures and motion in Figma
  • Learn more about prototyping in Figma
  • Additional ways to enhance high-fidelity prototypes

Module 4 review

    • 1 Videos
    • 2 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • Activity: Create a high-fidelity prototype for your mobile app
  • Module 4 Challenge

1 Videos

  • Wrap-up: Creating high-fidelity prototypes

2 Readings

  • Glossary terms from course 5, module 4
  • Exemplars: Create a high-fidelity prototype for your mobile app

Plan a usability study

    • 2 Videos
    • 1 Readings
Show info about module content

2 Videos

  • Welcome to module 5
  • Plan a UX research study

1 Readings

  • Learn more about planning a UX research study

Conduct a usability study

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Self-Reflection: Account for bias in your usability study

1 Videos

  • Conduct a usability study

1 Readings

  • Learn more about conducting a usability study

Analyze and synthesize usability study results

    • 1 Videos
    • 2 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Test your knowledge on coming up with research insights

1 Videos

  • Analyze and synthesize usability study results

2 Readings

  • Learn more about analyzing and synthesizing usability study results
  • Review: Analyze and synthesize the results of a usability study

Iterate on high-fidelity designs

    • 2 Videos
    • 3 Readings
Show info about module content

2 Videos

  • Iterate on high-fidelity designs
  • Identify when a design is complete

3 Readings

  • Review: Refine your high-fidelity portfolio project designs
  • Learn more about identifying when a design is complete
  • Final designs of the dog walker app in Figma

Document and share designs

    • 4 Videos
    • 1 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • Test your knowledge on handing off designs
  • Test your knowledge on case studies in UX portfolios

4 Videos

  • Document and share designs
  • Hand off designs for production
  • Learn from Figma - Prepare for hand off
  • Create a case study for your portfolio project

1 Readings

  • Learn more about creating a case study for your portfolio project

Module 5 review

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Module 5 Challenge

1 Videos

  • Wrap-up: Testing and iterating on designs

1 Readings

  • Glossary terms from course 5, module 5

Course review

    • 1 Videos
    • 3 Readings
Show info about module content

1 Videos

  • Congratulations on completing Course 5: Create High-Fidelity Designs and Prototypes in Figma

3 Readings

  • Reflect and connect with your peers
  • Course 5 glossary
  • Start the next course

Auto Summary

"Create High-Fidelity Designs and Prototypes in Figma" is a foundation-level course focused on UX design, offered through Coursera. Taught by current UX designers and researchers at Google, this course guides you through creating high-fidelity mockups and interactive prototypes using Figma. You'll learn to apply visual design principles, conduct feedback-driven improvements, and prepare your designs for handoff to development teams. Ideal for beginner UX designers, especially those who have completed the prior courses in the Google UX Design Certificate, it features hands-on activities simulating real-world scenarios. Subscriptions start at the Starter level.

Google Career Certificates
Instructor

Google Career Certificates