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.

Applying visual design principles to mockups

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.

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.

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.

Testing and iterating on designs

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.

Good to know

Know what's good

, what to watch for

, 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

High-fidelity experts

Students say this course teaches skills in creating high-fidelity designs and prototypes, with a focus on usability testing. Many reviewers emphasize how thorough and hands-on the course is, which they say results in confidence in their abilities. The course also offers a step-by-step approach to portfolio building, which can be useful for job seekers. Learners also say the engaging assignments are a highlight of the class.

The course includes a lot of hands-on activities, which helps you learn by doing.

"Thankfully, this platform and the instructors provide guidance that is clear and precise. I've learned a lot so far and am grateful for the opportunity to expand my knowledge."

The course covers a wide range of topics, from research to prototyping.

"This course taught me so much about creating high fidelity designs and prototypes. I will recommend it to those aspiring to be a UX designer. "

"The course was awesome. Detailed and step-by-step instructions.Many thanks to wonderful Trainer Kunal, I liked the way he conducted all study.Thank you Coursera and Google."

The course helps you create a portfolio of your work, which is essential for job seekers.

"This course is a great I am learning many things in this course. I am very thankful my Teacher Kunal and Google Professional Certificate."

"This was a very well thought and insightful course! Implemented everything in my case study that I learnt throughout the process. Thankyou guys!"

The course is packed with practical information that you can apply to your own designs.

"This course has awesome contents. Highly recommended for those who wants to gain practical hands-on experience on Figma."

"This course provides a robust amount of information on building high-fidelity mockups and prototypes. The step-by-step guidance is very helpful in creating a thorough case study for your project."

This course places a heavy importance on usability testing as a research method.

"Overall a very engaging course. However, I wish it didn't solely focus on usability studies as the research method, but guided students on another options of conducting research studies."

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:

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

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

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

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

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

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

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

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

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

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

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