OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

Figma UI Practices

shepherdd-X - and Jacqueline Dede Asare-Dartey

User interface design(UI) and user experience design(UX) is a very crucial parts of determining the final output of software, applications, or process. User interface design and user experience design(UI/UX) has lots of benefits since they have a greater impact on influencing how users might use or uninstall an app or the retention rate of an app or software and the like. Welcome to this course future designers, in this course, we will be learning to design Interfaces using Figma as the primary design tool.

Read more

User interface design(UI) and user experience design(UX) is a very crucial parts of determining the final output of software, applications, or process. User interface design and user experience design(UI/UX) has lots of benefits since they have a greater impact on influencing how users might use or uninstall an app or the retention rate of an app or software and the like. Welcome to this course future designers, in this course, we will be learning to design Interfaces using Figma as the primary design tool.

Figma makes it fun and easier to get your designs up to speed with positive outcomes especially when you use a creative approach to doing what you love doing best. In this lesson, you'll learn to use shapes(components) and tools to create stunning user interfaces. The main course projects includes several steps to learning to build or design interfaces and interactive components including dynamic flip cards, text hover effects, auto scrolling of text(marquee), a music player, slide-up card component and so much more.

 The course is for anybody who would like to get started with User interface design. This course is in collaboration with Jacqueline Asare Dartey a UI/UX expert in using Figma and Adobe XD.

Enroll now

What's inside

Learning objectives

  • Design a dynamic flipcard and
  • Embedding maps
  • Basics in figma
  • Vertical and horizontal scrolling
  • Remove background of an image
  • Create a hover effects
  • Create a slide-up card
  • Create an image carousel effects
  • Design basic components
  • Design a fashion website ui

Syllabus

Introduction

⚠️Notice⚠️

Figma made an update to position the toolbar which use to be at the top to the bottom of the interface as indicated in green.

Read more
what is UX
what is ux 1
what is ux 2
Examples of ux design
What is UI
what is ui design
Examples of ui design
Differences between ui and ux
Case study-instagram
Case Study-Tiktok
Importance of uiux
Icon Design
Icons
Icon Design 2
Learn how to create a UI that horizontally scroll and vertically scroll as well as make other elements fixed.
Horizontal Scroll
Vertical Scroll
Image Background Remover
Remove image background
Embedding Maps
Mapsicle Plugin
Lottie Animation
Splash Screen
create your own Lottie file
Interesting UIUX Exercises
Creating a Music Player
Creating Dynamic Flipcard
Create a Slide Up Card Hover Effects
Creating an infinite scroll (Marquees)
Rotating image carousel
Hover Effects
Create Impressive Text Hover Effects with Interactive Components
Interactive Hover Effect
Rotating Text Tool
Button hover effect
Magnifying Glass Effect
More exercises
Loading Skeletal Screen
Gradient Animation
Bleeding Effect
Brutalism Button Hover Effect Tutorial
Image Carousel
Figma Variables-Mobile Dial Pad
Creating an Eye-Catching Image Carousel for Your Fashion Website_ Figma Tutorial
Fashion Website-1
Fashion Website-2
Fashion Website-3
Fashion Website-4
Agency page
Agency Landing Page 1
Agency Landing Page 2
Agency Landing Page 3
Agency Landing Page 4
Exercise 1
WebsiteNewsUI- 1
WebsiteNewsUI-2
WebsiteNewsUI-3
WebsiteNewsUI-4
Exercise 2
Ecommerce website 1
Ecommerce website 2
Ecommerce website 3
Ecommerce website 4
Ecommerce website 5
Ecommerce website 6
Bonus section
Socials

Save this course

Save Figma UI Practices to your list so you can find it easily later:
Save

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 Figma UI Practices with these activities:
Practice Basic Figma Tools
Practice using basic Figma tools like shapes, components, and auto layout to build a solid foundation for more complex UI designs.
Browse courses on Design Tools
Show steps
  • Review Figma's interface and basic functionalities.
  • Create simple shapes and practice manipulating them.
  • Experiment with auto layout and constraints.
Review Don't Make Me Think
Read 'Don't Make Me Think' to understand usability principles and apply them to your Figma designs for improved user experience.
View Don't Make Me Think, Revisited: A Common Sense... on Amazon
Show steps
  • Read the book and take notes on key usability principles.
  • Analyze existing interfaces and identify usability issues.
  • Apply the principles to your Figma projects.
Review Refactoring UI
Learn practical UI design principles from 'Refactoring UI' to improve the aesthetics and usability of your Figma designs.
View Melania on Amazon
Show steps
  • Read chapters on typography and color palettes.
  • Apply the principles to a sample Figma project.
  • Compare your redesigned interface with the original.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Follow Advanced Figma Tutorials
Enhance your Figma skills by following advanced tutorials on topics like interactive components and animation.
Show steps
  • Find tutorials on creating interactive components in Figma.
  • Replicate the steps in the tutorial and customize the design.
  • Experiment with different animation techniques.
Design a UI Style Guide
Create a UI style guide in Figma to document design decisions and ensure consistency across multiple projects.
Show steps
  • Define color palettes, typography, and spacing rules.
  • Create reusable components for common UI elements.
  • Document the usage guidelines for each element.
Redesign an Existing App Interface
Apply your Figma skills to redesign the interface of a popular app, focusing on improving usability and visual appeal.
Show steps
  • Analyze the existing app's UI and identify areas for improvement.
  • Create wireframes and mockups of your redesigned interface.
  • Prototype the user flow and test it with potential users.
Create a UI Kit
Develop a comprehensive UI kit in Figma with reusable components and styles to streamline your design workflow.
Show steps
  • Identify common UI elements and components.
  • Design and create reusable components in Figma.
  • Document the usage guidelines for each component.
  • Organize the UI kit for easy access and maintenance.

Career center

Learners who complete Figma UI Practices will develop knowledge and skills that may be useful to these careers:
User Interface Designer
A User Interface Designer focuses on the visual elements users interact with when using a website, application, or software. This role is all about creating intuitive, aesthetically pleasing, and accessible designs. This course can help you develop the practical skills needed to excel in this area, particularly with its emphasis on using Figma to design interfaces. The course's hands-on projects, like designing components and interactive elements such as dynamic flip cards and hover effects, directly translate to the day-to-day tasks of a user interface designer.
See salaries and explore the career path for User Interface Designer
Interaction Designer
An Interaction Designer focuses on how users interact with a digital product, ensuring that the interface is intuitive and engaging. This course helps build skills directly related to creating interactive elements. The lessons on creating hover effects, infinite scrolling marquees, and rotating image carousels are particularly relevant. An interaction designer will find that the course's practical approach to using Figma for designing interactive components invaluable.
See salaries and explore the career path for Interaction Designer
UI Developer
A UI Developer works on implementing the user interface of websites and applications. This course will help learners practice designing Interfaces using Figma, and is recommended for anyone who wants to get started with user interface design. The course projects include building or designing interfaces and interactive components including dynamic flip cards, text hover effects, auto scrolling of text, music players, and slide-up card components.
See salaries and explore the career path for UI Developer
Frontend Developer
A Frontend Developer implements the user interface, using HTML, CSS, and JavaScript. This course helps frontend developers by improving their skills in user interface design and Figma. The course projects involve building designs and interactive components, including dynamic flip cards, hover effects, auto scrolling text, music players, and slide-up card components. This course can help Frontend developers, especially those new to UI.
See salaries and explore the career path for Frontend Developer
Digital Designer
A Digital Designer creates visual concepts for digital media, especially social media. This course can help digital designers by teaching them how to use Figma to design interfaces, and to create hover effects, vertical and horizontal scrolling, and image carousel effects. These skills would make the designs more attractive and functional. A digital designer would benefit from this course.
See salaries and explore the career path for Digital Designer
Visual Designer
A Visual Designer balances visual appeal with usability. With this course, visual designers will learn to create hover effects, infinite scrolling, and rotating image carousels. This course can guide a visual designer in using Figma to create interfaces. The Fashion Website and Agency Page sections of the course will also be useful to a visual designer.
See salaries and explore the career path for Visual Designer
Product Designer
A Product Designer is involved in the entire design process, from ideation to launch, to ensure a product meets user needs and business goals. This course helps product designers learn user interface design with Figma. The projects on dynamic flip cards, hover effects, and slide-up card components will be useful. This course is a good starting point for product designers.
See salaries and explore the career path for Product Designer
Motion Graphics Designer
A Motion Graphics Designer creates visual effects, animation, and other motion imagery for use in various media. This course helps motion graphic designers learn to design interfaces using Figma, and to create hover effects, vertical and horizontal scrolling, and image carousel effects. These can be incorporated into motion graphics. This course can make motion graphic designers more creative and effective.
See salaries and explore the career path for Motion Graphics Designer
User Experience Designer
A User Experience Designer researches, designs, and tests user interfaces and experiences, with the goal of building products that are easy and satisfying to use. The course delves into the fundamentals of user experience and interface design, providing practical experience with Figma to design user interfaces. Especially relevant are lessons covering icon design, horizontal and vertical scrolling, and interactive components, which directly contribute to creating user-friendly experiences. This course may be helpful in learning important aspects of user experience design.
See salaries and explore the career path for User Experience Designer
Web Designer
A Web Designer plans, creates, and codes internet sites and web pages, many of which combine text with sounds, pictures, graphics, and video clips. This course may be useful, as it helps web designers by teaching them how to design web user interfaces, especially using Figma. Lessons in this course cover creating image carousels, designing fashion websites, and agency landing pages. These skills would make the interfaces more attractive and functional.
See salaries and explore the career path for Web Designer
Mobile App Designer
A Mobile App Designer creates the layout and interface for mobile applications, and so must understand user interface and user experience design. This course may prove useful, as it teaches learners how to design interfaces using Figma, and create dynamic flip cards, text hover effects, and slide-up card components, all of which can be implemented into apps to make them more attractive. A mobile app designer must be capable of creating user interfaces.
See salaries and explore the career path for Mobile App Designer
UX Researcher
A UX Researcher conducts user research to understand user behaviors, needs, and motivations, then provides insights that inform design decisions. Although this role is research focused, the course may be beneficial in understanding the design process. This is because UX researchers often collaborate with designers, and a familiarity with design tools like Figma aids in communication. The sections on Instagram and TikTok studies may be beneficial.
See salaries and explore the career path for UX Researcher
Accessibility Specialist
An Accessibility Specialist ensures that digital products are usable by people with disabilities, and must be familiar with user interface design. This course may make them a more effective accessibility specialist, especially if they desire to use Figma. This course teaches students how to design Interfaces using Figma, and to create hover effects, vertical and horizontal scrolling, and image carousel effects. The special topics and additional exercises may prove especially useful.
See salaries and explore the career path for Accessibility Specialist
Design Thinking Consultant
A Design Thinking Consultant guides organizations in using design thinking principles to solve problems and create innovative solutions. This course may be useful because design thinking consultants work with design teams. Therefore, it would be useful for them to understand User Interface design. The skills taught in this course would help them to relate to designers. This course is an introduction to design for the consultant who does not have such a background.
See salaries and explore the career path for Design Thinking Consultant
Art Director
An Art Director is responsible for the visual style and images in magazines, newspapers, product packaging, and movie and television productions. An art director must have a strong understanding of user interface design. This course may be useful, as it teaches students how to design Interfaces using Figma, and create hover effects, vertical and horizontal scrolling, and image carousel effects. This could make their artistic vision more effective.
See salaries and explore the career path for Art Director

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Figma UI Practices.
Cover image
Think and Grow Rich - English : For Personal Growth...
Save
Refactoring UI practical guide to improving the visual design of user interfaces. It provides actionable tips and techniques for enhancing typography, color palettes, layout, and spacing. is particularly useful for understanding the principles behind effective UI design and applying them to Figma projects. It serves as a valuable reference for creating visually appealing and user-friendly interfaces.
Melania
Hardcover
$$
From Here to the Great Unknown: Oprah's Book Club:...
Hardcover
$$
War
Hardcover
$$
The Message
Hardcover
$$
Good Energy: The Surprising Connection Between...
Hardcover
$$
Be Ready When the Luck Happens: A Memoir
Hardcover
$$
The Anxious Generation: How the Great Rewiring of...
Hardcover
$$
Onyx Storm (Deluxe Limited Edition) (The Empyrean,...
Hardcover
$$
Spooky Cutie: Coloring Book for Adults and Teens...
Paperback
$
The Leaf Thief: (The Perfect Fall Book for Children...
Paperback
$$
Cover image
Don't Make Me Think, Revisited
Save
Steve Krug's 'Don't Make Me Think' classic guide to web usability. It emphasizes the importance of intuitive design and clear navigation. is valuable for understanding how users interact with interfaces and how to create designs that are easy to use. While focused on web usability, the principles apply broadly to UI design in Figma, helping you create more user-friendly experiences.
Don't Make Me Think, Revisited: A Common Sense...
Paperback
$$
Don't Make Me Think, Revisited : A Common Sense...
Hardcover
$$$
Don't Make Me Think, Revisited: A Common Sense...
Kindle Edition
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
5 total hours
Via
Udemy
Instructors
shepherdd-X -
Jacqueline Dede Asare-Dartey
Language
English
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser