UX/UI Design Using FIGMA

Master UX Design and UI Interfaces

UI/UX Design4.9(73)8h 12m40 lectures4 sections

What you'll learn

  • Understand the difference between user experience and user interface
  • Use shapes, fonts and colors in Figma
  • Use Components and Frames in your design
  • Create a responsive design with alignment
  • Link screens together
  • Understand user research, analysis and flow
  • Apply Design Thinking
  • Get to know the principles of user interfaces and colors
  • Complete a final project and upload it on Behance

About this course

This course teaches user interface and user experience design, UX and UI, with Figma. It starts with downloading the software and tools and an introduction to Figma, then the Art Board, geometric shapes, fonts, colors and images, the difference between Group and Frame, Components, alignment and Responsive Design, linking screens together, and sharing and exporting the file. After that you study user experience: the difference between UX and UI, research, UX Analysis, the User Flow and Design Thinking. Then come the principles of user interfaces and the most used screens, the difference between Android and iOS, the color wheel and the meaning of colors, fonts and image formats. The course ends with a final project, from defining ideas to uploading it on Behance. It suits designers, developers and anyone who wants to enter the field of app design, and it needs no previous experience. By the end, you will be able to design a complete app and share it.

Expected outcomes

  • Master Figma for designing user interfaces and experiences.
  • Analyze and improve user experience based on data.
  • Create professional designs and work with colors, fonts, and images.
  • Prepare high-quality design prototypes and share them with the team.

Learner reviews

These reviews are from learners who bought the content and completed at least 50% of it — there are no reviews from anyone who hasn't gone through the material.
4.9
★★★★★
73 reviews
5★
65
4★
6
3★
2
2★
0
1★
0
  • ★★★★★عمر ع.·منذ 2 شهرشاهد 50٪

تم عرض كل التقييمات (1)

Course content

1

UI/UX Design Principles

18 lectures
  1. Course IntroductionOutlines the course's theory and practice: UX versus UI, Android versus iOS, colors and fonts, icons, vectors, SVG and PNG, then Figma, with a light task after each session and a review at the next.6:27
  2. The Difference Between User Experience Design and User Interfaces UX vs UIExplains the difference between UX and UI using a house-building analogy: UX is the foundation of research and analysis, UI is the visual design, then the project stages from requirements and user flow to sketch and wireframe.9:25
  3. What is User Experience and Case Study?Explains user experience and the case study or feasibility study, the UX stages from research and analysis to user flow and design thinking, and the research elements: stakeholders, users, competitors, and project goals.8:45
  4. What is User Experience Research?Explains competitor research in UX research: why it matters, identifying direct and indirect competitors, comparing strengths and weaknesses, and tracking prices and how rivals win customers.7:41
  5. User Experience AnalysisExplains UX analysis through User Persona and User Story: what each is, why it matters, what it contains, and how to write a story by answering who, what and why.5:45
  6. What is User Flow?Defines the User Flow and its basic shapes (rectangle, diamond, circle), builds a login flow example in Figma, and mentions the Miro tool.11:32
  7. Design ThinkingExplains Design Thinking and its five stages: empathize, define, ideate, prototype and test, and its iterative loop of going back to earlier stages when something is wrong.11:36
  8. Intro to UIIntroduces User Interface (UI), its definition and link to UX, and its core principles: user control, a comfortable and efficient design, fewer steps, and consistent interfaces.6:13
  9. The First and Second Principles of UIExplains the first and second UI principles: pages that allow going back, easy navigation, helpful feedback, avoiding repeated actions and unclear terms, plus Fitts's law.8:19
  10. The Third and Fourth Principles of UICompletes the UI principles with the three-click rule and visual, functional and user consistency, then the three interface types: graphical, voice and motion-based.9:32
  11. Most Used Screens in DesignReviews the most common app screens: Splash, Onboarding, login, sign up, code verification, profile and home page, with examples from e-commerce apps.7:23
  12. The Difference Between Operating SystemsCompares Android and iOS design: filled vs outline icons, status bar and app bar, navigation buttons, search placement, and buttons, switches and checkboxes.13:10
  13. What is the Color WheelExplains the color wheel: the base colors Red, Green and Blue and how other colors come from them, primary, secondary and tertiary colors, and the split into warm, cool and neutral.7:00
  14. Meanings and Connotations of ColorsExplains what colors mean in design, from warm ones like red, orange and yellow, to cool ones like green, blue and purple, and neutrals like black, white, gray and brown, with usage examples.7:18
  15. Color-Specific WebsitesExplains the Hexadecimal and RGB color systems, choosing colors based on the client's logo, websites that generate gradients and extract colors from images, and the Color Dropper tool.14:33
  16. Fonts in UX_UIExplains Serif and Sans Serif fonts and principles for choosing them: readability, pairing two families for headings and body, contrast in size and weight, avoiding too many fonts, plus font download sites.16:07
  17. Famous Websites for DesignersPresents sites for designers to find images, icons, vectors and illustrations, such as Freepik, Flaticon, StorySet and Unsplash, the difference between vectors and illustrations, and free versus paid download formats.9:30
  18. The Difference Between Image FormatsClarifies the difference between SVG, PNG and JPG in file size, quality when zoomed, color editing in Figma and background support, and why SVG is preferred.4:56
2

Using Figma

11 lectures
  1. Downloading Necessary Programs and Tools and Introduction to FigmaExplains downloading Figma, creating an account and signing in, downloading other programs such as Photoshop and Illustrator, exploring the home interface, projects, and Community, and using Figma on the web.13:30
  2. Art Board in FigmaExplains the Figma interface, creating a design file, and the Artboard or Frame: toolbar and layers, choosing screen sizes like iPhone, Layout Grid and Auto Layout, Stroke and Export options, and the F and A shortcuts.13:30
  3. Shapes in FigmaExplains geometric shapes in Figma: rectangle, line, arrow, triangle, and star with properties like point count and radius, naming pages, setting zoom to 100%, the Pencil tool, and History.17:30
  4. Text in FigmaExplains combining shapes in Figma with tools like Union and Subtract, then the Text tool and its properties: alignment and Alt shortcuts, line height, letter spacing, paragraph formatting, and vertical text alignment.14:38
  5. Colors and ImagesCovers text properties in Figma such as underline, strikethrough and installing fonts, then colors and images, picking colors, and building an Artboard screen with Preview.21:15
  6. Group vs FrameClarifies the difference between Group and Frame in Figma, image editing and properties, Frame options in Prototype such as Overflow and Scroll, and why Frame is preferred.14:41
  7. ComponentsExplains Components in Figma and how editing one once updates it across all screens, along with color and text Styles and how they differ from a Library.18:17
  8. Layout and Responsive DesignExplains layout and responsive design in Figma: the Responsive concept, using Auto Layout and Wrap, spacing in multiples of eight, and how Frame controls sizing.14:11
  9. Creating Links Between Screens (Part One)Starts Prototyping in Figma: choosing the device, linking screens, transition types such as Smart Animate and Slide, the Change to option, a back button, and opening an Overlay with a background.20:27
  10. Creating Connections Between Screens (Part Two)Explains Prototype interaction triggers such as OnDrag, While Hover, Mouse Enter and Mouse Leave, then Hover and Pressed states using Components and Variants.8:22
  11. Share and ExportCovers sharing and exporting in Figma: pinning elements with Position Fix, comments, Plugins and Widgets, view and edit permissions, export and import, version history, and shortcuts.17:53
3

Complete Project from A to Z Using Figma

8 lectures
  1. Defining Goals and Ideas for the Final ProjectStarts the final project: generating a project idea with Goodbrief, studying competitors through ready-made sites and UI kits, and creating a User Persona using templates from the Figma Community.13:16
  2. User Journey, Sketch, and Project Model (Part One)Practically builds a user flow in Miro for a food ordering app, using rectangles, diamonds, and circles for login, products, payment, and order tracking, then turns it into a sketch of the app screens.11:56
  3. User Journey, Sketch, and Project Model (Part Two)Builds the wireframe screens in Figma step by step, from Splash and Onboarding to login and sign up, setting buttons, spacing, input fields, the search bar and the ad area.25:57
  4. User Journey, Sketch, and Project Model (Part Three)Designs the product card, bottom navigation bar, product details page and cart, then the payment screen and an order tracking screen with a timer, as part of the Figma wireframe stage.15:58
  5. Finalizing the Design and Uploading to Behance (Part One)Starts the actual design stage in Figma: creating a logo, choosing primary and secondary colors, adding illustrations and SVG icons, and styling the interface and product card.28:27
  6. Finalizing the Design and Uploading to Behance (Part Two)Continues designing screens in Figma: the categories page, navigation bar icons in fill and outline styles, why SVG matters, a payment card, and a confirmation dialog with buttons.19:37
  7. Finalizing the Design and Uploading to Behance (Part Three)Links screens in a Figma Prototype, including connections through components, then shows ways to create a Mockup of the design, ahead of uploading it to Behance.17:55
  8. Finalizing the Design and Uploading to Behance (Part Four)Explains uploading the project to Behance with a Figma link, then the Mask concept, hiding layers, fixing Prototype issues, and closes the course by advising to study other designers' work.20:25
4

The Add-ons

3 attachments
  1. Download the Workbook
  2. Important Sites No Designer Can Do Without
  3. Download the Final Design File

Instructor

Diya Ahmed

Diya Ahmed

UX/UI designer with over 5 years of experience, trainer and lecturer in graphic design programs.
6,246 views1 courses

Related courses