Create High-Fidelity Designs and Prototypes in Figma
- 4.9
-
![]()
![]()
![]()
![]()
![]()
Approx. 33 hours to complete
Course Summary
Learn how to create high-fidelity designs and prototypes that mimic real-world experiences using Sketch and InVision. This course covers design techniques, prototyping skills, and design thinking principles.Key Learning Points
- Create high-fidelity designs using Sketch
- Build interactive prototypes with InVision
- Apply design thinking principles to your projects
Related Topics for further study
Learning Outcomes
- Create high-fidelity designs using Sketch
- Build interactive prototypes with InVision
- Apply design thinking principles to your projects
Prerequisites or good to have knowledge before taking this course
- Basic knowledge of design principles
- Access to Sketch and InVision software
Course Difficulty Level
IntermediateCourse Format
- Online self-paced
- Video lectures
- Hands-on projects
Similar Courses
- User Experience Design Essentials - Adobe XD UI UX Design
- Interaction Design Foundation
Related Education Paths
Notable People in This Field
- Don Norman
- Jared Spool
Related Books
Description
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.
Knowledge
- 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.
Outline
- Starting to create mockups
- Introduction to Course 5: Create High-Fidelity Designs and Prototypes in Figma
- Kunal - My journey to UX
- Welcome to week 1
- Introduction to mockups
- Chikezie - Transition from low-fidelity to high-fidelity designs
- Introduction to foundational elements of visual design
- Typography in UX design
- The importance of typography
- Color in UX design
- Iconography in UX design
- Add images to your mockups
- Introduction to layouts
- Use grids to guide layouts
- Use containment in layouts
- Use negative (white) space in layouts
- Wrap-up: Starting to create mockups
- Welcome to Course 5
- Optional - Read this if it’s your first course in the certificate program
- Optional - Interpret your quiz results
- Foundational skills to build mockups in Figma
- Activity Exemplar: Use low-fidelity designs to start your portfolio project mockups
- Work with type in mockups
- Add product copy to mockups
- Activity Exemplar: Add typography to your portfolio project mockups
- Work with color in mockups
- Accessibility considerations for color
- Activity Exemplar: Add color to your portfolio project mockups
- Work with icons in mockups
- Activity Exemplar: Add icons to your portfolio project mockups
- Learn about more visual design elements
- Find stock images for mockups
- Additional design considerations
- Create grids in mockups
- Activity Exemplar: Create grids in your portfolio project mockups
- Create containment in mockups
- Activity Exemplar: Create containment in your portfolio project mockups
- Use negative space in mockups
- Activity Exemplar: Revise your portfolio project mockups by adding negative space
- Common design patterns in apps
- Glossary
- Optional - Test your knowledge of prior concepts
- Optional - Submit your choice of portfolio project prompt
- Activity: Use low-fidelity designs to start your portfolio project mockups
- Test your knowledge of typography
- Activity: Add typography to your portfolio project mockups
- Test your knowledge on color
- Activity: Add color to your portfolio project mockups
- Activity: Add icons to your portfolio project mockups
- Activity: Create grids in your portfolio project mockups
- Activity: Create containment in your portfolio project mockups
- Activity: Revise your portfolio project mockups by adding negative space
- Self-Reflection: Share what you've learned about page layouts
- Applying visual design principles to mockups
- Welcome to week 2
- Emphasis in UX design
- Hierarchy in UX design
- Scale and proportion in UX design
- Unity and variety in UX design
- Apply Gestalt Principles to mockups
- Reflect on your progress
- Wrap-up: Applying visual design principles to mockups
- Use emphasis in mockups
- Use hierarchy in mockups
- Use scale and proportion in mockups
- Use unity and variety in mockups
- Activity Exemplar: Apply visual design principles to your portfolio project mockups
- Learn about additional Gestalt Principles
- Activity Exemplar: Apply Gestalt Principles to your portfolio project mockups
- Consider additional visual design elements and principles
- Learn about interface design principles
- Include navigation in mockups
- Glossary
- Test your knowledge on emphasis and hierarchy
- Test your knowledge on scale and proportion
- Test your knowledge on unity and variety
- Activity: Apply visual design principles to your portfolio project mockups
- Test your knowledge of Gestalt Principles
- Activity: Apply Gestalt Principles to your portfolio project mockups
- Self-Reflection: Include navigation in your mockups
- Exploring design systems
- Welcome to week 3
- Introduction to design systems
- Benefits of design systems
- Google's design system: Material Design
- Shopify's design system: Polaris
- Create a sticker sheet in Figma
- Use a design system library in Figma
- Shabi - Consider assistive technologies when working in design systems
- Wrap-up: Exploring design systems
- Explore popular design systems
- Activity Exemplar: Create a sticker sheet for your portfolio project designs
- Get inspiration from design systems
- Optional - Learn from Figma - Use a design system library
- Glossary
- Test your knowledge on design systems
- Test your knowledge on features of open-source design systems
- Activity: Create a sticker sheet for your portfolio project designs
- Test your knowledge on working with design systems in Figma
- Weekly challenge 3: Explore design systems
- Participating in design critique sessions
- Welcome to week 4
- Give and receive feedback as a UX designer
- The basics of design critique sessions
- Best practices for design critique sessions
- Kunal - My experience with design critique sessions
- Introduction to a mock crit session
- Observe a mock crit session
- Turn crit session feedback into actions
- Iterate on mockups based on feedback from crit sessions
- Wrap-up: Participating in design critique sessions
- Learn more about design critique sessions
- Glossary
- Test your knowledge on design critique sessions
- Self-Reflection: Request feedback on your work
- Test your knowledge on implementing feedback from crit sessions
- Weekly challenge 4: Participate in design critique sessions
- Creating high-fidelity prototypes
- Welcome to week 5
- Introduction to high-fidelity prototypes
- Create a high-fidelity prototype in Figma
- 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
- Wrap-up: Creating high-fidelity prototypes
- Explore types of gestures and motion
- Learn more about prototyping in Figma
- Additional ways to enhance high-fidelity prototypes
- Glossary
- Test your knowledge on creating a high-fidelity prototype in Figma
- Test your knowledge on gestures and motion
- Self Reflection: Address accessibility considerations when designing with motion
- Testing and iterating on designs
- Welcome to week 6
- Plan a UX research study
- Conduct a usability study
- Analyze and synthesize usability study results
- Iterate on high-fidelity designs
- Identify when a design is complete
- Document and share designs
- Hand off designs for production
- Learn from Figma - Prepare for hand off
- Create a case study for your portfolio project
- Wrap-up: Testing and iterating on designs
- Congratulations on completing Course 5: Create High-Fidelity Designs and Prototypes in Figma
- Learn more about planning a UX research study
- Activity Exemplar: Plan a UX research study for your portfolio project
- Learn more about conducting a usability study
- Activity Exemplar: Conduct a usability study for your portfolio project
- Learn more about analyzing and synthesizing usability study results
- Activity Exemplar: Analyze and synthesize the results of your portfolio project usability study
- Activity Exemplar: 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
- Learn more about creating a case study for your portfolio project
- Glossary
- Start the next course
- Activity: Plan a UX research study for your portfolio project
- Self-Reflection: Account for bias in your usability study
- Activity: Conduct a usability study for your portfolio project
- Test your knowledge on coming up with research insights
- Activity: Analyze and synthesize the results of your portfolio project usability study
- Activity: Refine your high-fidelity portfolio project designs
- Test your knowledge on handing off designs
- Test your knowledge on case studies in UX portfolios
Summary of User Reviews
This course on high fidelity designs and prototypes has received excellent reviews from users. Many users found the course to be both informative and engaging, with a great balance between theory and practical applications.Key Aspect Users Liked About This Course
The course received high praise for its comprehensive coverage of the subject matter, providing users with a solid foundation in high fidelity design and prototype best practices.Pros from User Reviews
- Course is well-structured and easy to follow
- Instructors are knowledgeable and engaging
- Content is relevant and up-to-date
- Great balance between theory and practical applications
- Assignments and quizzes are challenging but rewarding
Cons from User Reviews
- Some users found the course to be too basic for their needs
- A few users experienced technical difficulties with the platform
- The course may be too time-consuming for some users
- Some users felt that the course lacked sufficient feedback on assignments
- The course may be too focused on design and less on business aspects
Google Career CertificatesTop Instructor
4.9 Raiting
Build Wireframes and Low-Fidelity Prototypes
- 4.9
-
![]()
![]()
![]()
![]()
![]()
In this course, you’ll continue to design a mobile app for your professional UX portfolio. You’ll start by creating storyboards and getting familiar with the basics of drawing....
Conduct UX Research and Test Early Concepts
- 4.8
-
![]()
![]()
![]()
![]()
![]()
In this course, you will learn how to plan and conduct a usability study to gather feedback about designs. By the end of this course, you will be able to:...
Responsive Web Design in Adobe XD
- 4.8
-
![]()
![]()
![]()
![]()
![]()
In this course, you will design a responsive website using Adobe XD, a popular design tool. By the end of this course, you will be able to:...
Design a User Experience for Social Good & Prepare for Jobs
- 4.8
-
![]()
![]()
![]()
![]()
![]()
In this course, you will design a dedicated mobile app and a responsive website focused on social good. You’ll learn how to interview for entry-level UX design positions....
