Create High-Fidelity Designs and Prototypes in Figma from Coursera

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.

What's inside

Syllabus

Starting to create mockups

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.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Builds a solid foundation for beginners in the principles and practices of UX design

Provides a comprehensive study of the process for creating mockups in Figma

Examines how to use visual design principles to refine mockups

Gives learners an edge in understanding design systems and their benefits

Develops hands-on skills in creating high-fidelity prototypes

Teaches how to conduct testing and user research to iterate on designs

Reviews summary

Figma high-fidelity design and prototyping

According to students, this course is a highly practical and engaging (positive) step in developing Figma skills (positive), particularly for high-fidelity design and prototyping (positive). Learners praise the clear, step-by-step tutorials (positive) and the expertise of the Google instructors (positive), noting how the course helps create portfolio-ready projects (positive) and teaches essential concepts like design systems (positive) and visual design principles (positive). While the course provides a solid foundation (positive) and covers the iterative design process (positive) effectively, a few learners felt it could offer more advanced Figma features (warning) for those already familiar with the tool, or that the pace is fast (warning) if previous modules haven't been recently reviewed, aligning with its role within a broader certificate program.

Comprehensive coverage of visual design principles and design systems.

"I found the section on design systems especially useful for organizing my workflow."

"The visual design principles were well explained and immediately applicable."

"The design system lessons were helpful."

"I especially enjoyed the modules on design systems and getting feedback."

Provides very clear, easy-to-follow tutorials and expert guidance.

"The instructors explained concepts clearly and the step-by-step tutorials were invaluable."

"Absolutely brilliant! The Google instructors provide such clear and concise guidance."

"The instructions for Figma were clear and easy to follow."

"I appreciated the structured approach to building high-fidelity designs."

Develops hands-on Figma skills crucial for professional UX portfolios.

"This course was fantastic for solidifying my Figma skills and understanding high-fidelity prototyping. It really helped me understand the hand-off process too."

"This module on Figma prototypes was crucial for my portfolio. I love how they emphasize real-world scenarios and the iterative design process."

"The focus on high-fidelity designs and turning them into interactive prototypes was exactly what I needed. My skills definitely leveled up."

"As part of the Google UX Design Specialization, this course delivers. The portfolio building aspect is a huge plus."

Well-suited for beginners, but may lack advanced content for experienced users.

"The content was decent, but I felt some parts of Figma, especially advanced prototyping features, could have been explored more deeply."

"It's a good introduction, but if you're already familiar with Figma, you might find it a bit basic."

"While the course covered the basics, I found myself needing to look up additional resources for more advanced Figma features..."

"My only minor critique is that sometimes the pace felt a little fast if you hadn't revisited the previous modules recently."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Create High-Fidelity Designs and Prototypes in Figma with these activities:

Review Figma workflow

Show steps

Start by reviewing the basics of Figma to ensure you have a foundational understanding before starting the course.

Browse courses on Figma

Show steps

Read Figma documentation
Complete Figma tutorials
Check out community resources

Read The Design of Everyday Things by Don Norman

Show steps

Expand your knowledge of user-centered design principles and the psychology behind human-computer interactions.

View Things That Make Us Smart: Defending Human... on Amazon

Show steps

Set aside dedicated time for reading
Take notes and reflect on the key concepts
Apply the principles to your own design work

Practice creating mockups

Show steps

Reinforce your understanding of creating high-fidelity mockups by completing practice exercises.

Browse courses on Mockups

Show steps

Create mockups for a mobile app
Get feedback on your mockups

Eight other activities

Expand to see all activities and additional details

Show all 11 activities

Explore Figma design principles

Show steps

Complete tutorials on visual design principles to refine your understanding of how to apply them in Figma.

Browse courses on Design Principles

Show steps

Find tutorials on visual design principles
Practice applying principles in Figma
Share your designs for feedback

Conduct a usability study on a mobile app design

Show steps

Conduct a usability study on a mobile app design to identify areas for improvement before development.

Browse courses on Mobile App Design

Show steps

Plan and define the scope of your usability study
Recruit participants for your usability study
Conduct one-on-one interviews with your participants
Analyze the results of your usability study and identify areas for improvement

Watch a tutorial on visual design principles

Show steps

Enhance your understanding of visual design principles by exploring online tutorials.

Browse courses on Visual Design

Show steps

Find a reputable tutorial on visual design principles
Set aside a dedicated time to watch the tutorial
Take notes or screenshots of important concepts
Apply the principles you learn to your own designs

Participate in a peer review session for your design work

Show steps

Foster collaboration and receive valuable feedback on your designs through peer review sessions.

Browse courses on Peer Review

Show steps

Find a group of peers who are also UX designers
Present your design work to your peers
Listen to feedback and ask clarifying questions
Incorporate feedback into your design work

Build a high-fidelity prototype

Show steps

Apply your knowledge of creating high-fidelity prototypes by building one for a mobile app.

Browse courses on Prototyping

Show steps

Plan your prototype
Create your prototype in Figma
Test your prototype with users
Refine your prototype based on feedback

Build an interactive prototype in Figma

Show steps

Create an interactive prototype in Figma to test the usability of your designs and receive feedback from users.

Browse courses on Prototype Development

Show steps

Create a new Figma project
Import your design files into Figma
Create interactive elements in Figma, such as buttons and links
Design your prototype's interactions and transitions
Test your prototype with users

Design and create a mobile app landing page

Show steps

Gain hands-on experience in UX design by designing and creating a mobile app landing page.

Browse courses on User Interface Design

Show steps

Define the purpose and target audience of your landing page
Sketch out the layout and wireframe of your landing page
Add visual elements and design your landing page in Figma
Create a prototype of your landing page
Test your landing page with users and make improvements based on feedback

Develop a design system for a mobile app

Show steps

Establish consistency and streamline the design process by creating a design system for a mobile app.

Browse courses on Design System

Show steps

Identify the core elements and styles of your mobile app
Create a style guide that defines the usage and application of these elements
Develop a component library for reusable design elements
Implement the design system in your app development process

Career center

Learners who complete Create High-Fidelity Designs and Prototypes in Figma will develop knowledge and skills that may be useful to these careers:

UX Designer

A UX Designer is responsible for designing user interfaces and experiences for products and services. They work to ensure that users can interact with products and services in a way that is both effective and enjoyable. This course can help UX Designers to create high-fidelity mockups and prototypes of their designs, which can be used to test and iterate on their designs before they are implemented. The course also covers the basics of visual design, which can help UX Designers to create designs that are both visually appealing and functional.

See salaries and explore the career path for UX Designer

UI Designer

A UI Designer is responsible for designing the visual elements of a product or service. They work to create designs that are both visually appealing and functional. This course can help UI Designers to create high-fidelity mockups and prototypes of their designs, which can be used to test and iterate on their designs before they are implemented. The course also covers the basics of visual design, which can help UI Designers to create designs that are both visually appealing and functional.

See salaries and explore the career path for UI Designer

Product Designer

A Product Designer is responsible for designing the overall user experience of a product or service. They work to ensure that the product is both useful and enjoyable to use. This course can help Product Designers to create high-fidelity mockups and prototypes of their designs, which can be used to test and iterate on their designs before they are implemented. The course also covers the basics of user research and usability testing, which can help Product Designers to design products that meet the needs of users.

See salaries and explore the career path for Product Designer

Interaction Designer

An Interaction Designer is responsible for designing the interactions between users and products or services. They work to create interactions that are both intuitive and enjoyable. This course can help Interaction Designers to create high-fidelity mockups and prototypes of their designs, which can be used to test and iterate on their designs before they are implemented. The course also covers the basics of user research and usability testing, which can help Interaction Designers to design interactions that meet the needs of users.

See salaries and explore the career path for Interaction Designer

Visual Designer

A Visual Designer is responsible for creating the visual elements of a product or service. They work to create designs that are both visually appealing and functional. This course can help Visual Designers to create high-fidelity mockups and prototypes of their designs, which can be used to test and iterate on their designs before they are implemented. The course also covers the basics of visual design, which can help Visual Designers to create designs that are both visually appealing and functional.

See salaries and explore the career path for Visual Designer

Graphic Designer

A Graphic Designer is responsible for creating visual content for a variety of purposes, such as marketing, advertising, and branding. This course can help Graphic Designers to create high-fidelity mockups and prototypes of their designs, which can be used to test and iterate on their designs before they are implemented. The course also covers the basics of visual design, which can help Graphic Designers to create designs that are both visually appealing and functional.

See salaries and explore the career path for Graphic Designer

Web Designer

A Web Designer is responsible for designing the layout and visual elements of websites. This course can help Web Designers to create high-fidelity mockups and prototypes of their designs, which can be used to test and iterate on their designs before they are implemented. The course also covers the basics of visual design, which can help Web Designers to create designs that are both visually appealing and functional.

See salaries and explore the career path for Web Designer

Mobile App Designer

A Mobile App Designer is responsible for designing the layout and visual elements of mobile apps. This course can help Mobile App Designers to create high-fidelity mockups and prototypes of their designs, which can be used to test and iterate on their designs before they are implemented. The course also covers the basics of visual design, which can help Mobile App Designers to create designs that are both visually appealing and functional.

See salaries and explore the career path for Mobile App Designer

UX Researcher

A UX Researcher is responsible for conducting research to understand the needs of users. This research can be used to inform the design of products and services. This course can help UX Researchers to design research studies and analyze data, which can help them to gain insights into the needs of users. The course also covers the basics of user research methods, which can help UX Researchers to conduct research that is both valid and reliable.

See salaries and explore the career path for UX Researcher

Product Manager

A Product Manager is responsible for managing the development and launch of products. This course may be helpful for Product Managers who want to learn more about the design process and how to create high-fidelity mockups and prototypes of their products. The course also covers the basics of user research and usability testing, which can help Product Managers to design products that meet the needs of users.

See salaries and explore the career path for Product Manager

Software Engineer

A Software Engineer is responsible for designing, developing, and maintaining software systems. This course may be helpful for Software Engineers who want to learn more about the design process and how to create high-fidelity mockups and prototypes of their software systems. The course also covers the basics of user research and usability testing, which can help Software Engineers to design software systems that meet the needs of users.

See salaries and explore the career path for Software Engineer

Information Architect

An Information Architect is responsible for designing the structure and organization of information. This course may be helpful for Information Architects who want to learn more about the design process and how to create high-fidelity mockups and prototypes of their information architectures. The course also covers the basics of user research and usability testing, which can help Information Architects to design information architectures that meet the needs of users.

See salaries and explore the career path for Information Architect

Content Strategist

A Content Strategist is responsible for developing and managing content for a variety of purposes, such as marketing, advertising, and branding. This course may be helpful for Content Strategists who want to learn more about the design process and how to create high-fidelity mockups and prototypes of their content. The course also covers the basics of user research and usability testing, which can help Content Strategists to design content that meets the needs of users.

See salaries and explore the career path for Content Strategist

Marketing Manager

A Marketing Manager is responsible for developing and executing marketing campaigns. This course may be helpful for Marketing Managers who want to learn more about the design process and how to create high-fidelity mockups and prototypes of their marketing campaigns. The course also covers the basics of user research and usability testing, which can help Marketing Managers to design marketing campaigns that meet the needs of users.

See salaries and explore the career path for Marketing Manager

Business Analyst

A Business Analyst is responsible for analyzing business needs and developing solutions to meet those needs. This course may be helpful for Business Analysts who want to learn more about the design process and how to create high-fidelity mockups and prototypes of their proposed solutions. The course also covers the basics of user research and usability testing, which can help Business Analysts to design solutions that meet the needs of users.

See salaries and explore the career path for Business Analyst