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
This course is part of Google UX Design Professional Certificate
331,056 already enrolled
Included with
4,817 reviews
4,817 reviews
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.
Skills you'll gain
Tools you'll learn
Details to know
24 assignments
See how employees at top companies are mastering in-demand skills
Build your Design and Product expertise
- 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 videos•Total 52 minutes
- Introduction to Course 5: Create High-Fidelity Designs and Prototypes in Figma•2 minutes
- Kunal - My journey to UX•3 minutes
- Welcome to module 1•2 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 design•3 minutes
- The importance of typography •6 minutes
- Color in UX design•8 minutes
- Iconography in UX design•5 minutes
- Add images to your mockups•3 minutes
- Introduction to layouts•1 minute
- Use grids to guide layouts •4 minutes
- Use containment in layouts•3 minutes
- Use negative (white) space in layouts•4 minutes
- Wrap-up: Starting to create mockups •1 minute
23 readings•Total 146 minutes
- Welcome to Course 5•8 minutes
- Helpful resources and tips•4 minutes
- Foundational skills to build mockups in Figma•8 minutes
- Review: Use low-fidelity designs to start project mockups•4 minutes
- Work with type in mockups•8 minutes
- Add product copy to mockups•8 minutes
- Review: Add typography to project mockups•4 minutes
- Work with color in mockups •8 minutes
- Accessibility considerations for color•8 minutes
- Review: Add color to project mockups•4 minutes
- Work with icons in mockups •8 minutes
- Review: Add icons to project mockups•4 minutes
- Learn about more visual design elements •8 minutes
- Find stock images for mockups•8 minutes
- Additional design considerations•8 minutes
- Create grids in mockups•8 minutes
- Review: Create grids in project mockups•4 minutes
- Create containment in mockups•8 minutes
- Review: Create containment in project mockups•4 minutes
- Use negative space in mockups•8 minutes
- Review: Revise project mockups by adding negative space•4 minutes
- Common design patterns in apps•8 minutes
- Glossary terms from course 5, module 1•2 minutes
4 assignments•Total 72 minutes
- Module 1 Challenge•50 minutes
- Test your knowledge of typography•8 minutes
- Test your knowledge on color•4 minutes
- Self-Reflection: Share what you've learned about page layouts•10 minutes
2 plugins•Total 60 minutes
- Build a mockup from foundational elements•30 minutes
- Test your knowledge on containment and negative space in design•30 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 videos•Total 29 minutes
- Welcome to module 2•1 minute
- Emphasis in UX design•4 minutes
- Hierarchy in UX design•4 minutes
- Scale and proportion in UX design•5 minutes
- Unity and variety in UX design•4 minutes
- Apply Gestalt Principles to mockups•6 minutes
- Reflect on your progress •4 minutes
- Wrap-up: Applying visual design principles to mockups •1 minute
11 readings•Total 74 minutes
- Use emphasis in mockups•8 minutes
- Use hierarchy in mockups•8 minutes
- Use scale and proportion in mockups •8 minutes
- Use unity and variety in mockups •8 minutes
- Review: Apply visual design principles to project mockups•4 minutes
- Learn about additional Gestalt Principles •8 minutes
- Review: Apply Gestalt principles to project mockups•4 minutes
- Consider additional visual design elements and principles •8 minutes
- Learn about interface design principles •8 minutes
- Include navigation in mockups•8 minutes
- Glossary terms from course 5, module 2•2 minutes
6 assignments•Total 96 minutes
- Module 2 Challenge•60 minutes
- Test your knowledge on emphasis and hierarchy•8 minutes
- Test your knowledge on scale and proportion•6 minutes
- Test your knowledge on unity and variety •4 minutes
- Test your knowledge of Gestalt Principles•8 minutes
- Self-Reflection: Include navigation in your mockups•10 minutes
1 plugin•Total 10 minutes
- Apply visual design principles•10 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 videos•Total 36 minutes
- Welcome to module 3•1 minute
- Introduction to design systems•3 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 Figma•4 minutes
- Use a design system library in Figma•9 minutes
- Shabi - Consider assistive technologies when working in design systems•2 minutes
- Wrap-up: Exploring design systems•1 minute
5 readings•Total 30 minutes
- Explore popular design systems •8 minutes
- Create sticker sheets for design projects•4 minutes
- Get inspiration from design systems•8 minutes
- Optional - Learn from Figma - Use a design system library•8 minutes
- Glossary terms from course 5, module 3•2 minutes
4 assignments•Total 83 minutes
- Module 3 Challenge•65 minutes
- Test your knowledge on design systems•6 minutes
- Test your knowledge on features of open-source design systems•6 minutes
- Test your knowledge on working with design systems in Figma•6 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 videos•Total 32 minutes
- Welcome to module 4•1 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 mind•4 minutes
- Learn from Figma - Prototype interactions and feedback •8 minutes
- Wrap-up: Creating high-fidelity prototypes•1 minute
6 readings•Total 34 minutes
- Explore types of gestures and motion •8 minutes
- Follow-along guide: Add gestures and motion in Figma•4 minutes
- Learn more about prototyping in Figma •8 minutes
- Additional ways to enhance high-fidelity prototypes•8 minutes
- Glossary terms from course 5, module 4•2 minutes
- Exemplars: Create a high-fidelity prototype for your mobile app•4 minutes
5 assignments•Total 148 minutes
- Module 4 Challenge •60 minutes
- Test your knowledge on creating a high-fidelity prototype in Figma•10 minutes
- Test your knowledge on gestures and motion•8 minutes
- Self Reflection: Address accessibility considerations when designing with motion •10 minutes
- Activity: Create a high-fidelity prototype for your mobile app•60 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 videos•Total 40 minutes
- Welcome to module 5•1 minute
- Plan a UX research study•4 minutes
- Conduct a usability study•3 minutes
- Analyze and synthesize usability study results•2 minutes
- Iterate on high-fidelity designs•10 minutes
- Identify when a design is complete•2 minutes
- Document and share designs•1 minute
- Hand off designs for production•2 minutes
- Learn from Figma - Prepare for hand off•5 minutes
- Wrap-up: Testing and iterating on designs•1 minute
- Create a case study for your portfolio project•7 minutes
- Congratulations on completing Course 5: Create High-Fidelity Designs and Prototypes in Figma•2 minutes
13 readings•Total 84 minutes
- Learn more about planning a UX research study•8 minutes
- Learn more about conducting a usability study•8 minutes
- Learn more about analyzing and synthesizing usability study results•8 minutes
- Review: Analyze and synthesize the results of a usability study•4 minutes
- Learn more about identifying when a design is complete•8 minutes
- Final designs of the dog walker app in Figma•4 minutes
- Glossary terms from course 5, module 5•4 minutes
- Portfolio project guide for creating hi-fi prototypes•10 minutes
- Review: Refine your high-fidelity portfolio project designs•10 minutes
- Learn more about creating a case study for your portfolio project•10 minutes
- Reflect and connect with your peers•4 minutes
- Course 5 glossary•2 minutes
- Start the next course•4 minutes
5 assignments•Total 118 minutes
- Module 5 Challenge •60 minutes
- Self-Reflection: Account for bias in your usability study•10 minutes
- Test your knowledge on coming up with research insights•8 minutes
- Test your knowledge on handing off designs•10 minutes
- Activity: Refine your portfolio project mockups•30 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
Explore more from Design and Product
- Status: Free Trial
Course
- Status: Free Trial
Guided Project
- Status: Free Trial
Guided Project
- Status: Free Trial
Specialization
Why people choose Coursera for their career
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
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.
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.
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.
More questions
Financial aid available,
