Mobile App Design With Figma: Creating Engaging Ui And Ux Ex

From Concept to Prototype: Learn the Fundamentals of Mobile App Design and Usability with Figma

What you'll learn

Figma Browser App Vs Desktop App

Introduction To Figma Interface

Set up Mobile App Design In Figma

Draw Content In Figma

Requirements

Anyone and any level - best for beginners

Description

In today's digital age, mobile apps are essential tools that allow businesses to connect with their customers and provide them with unique experiences. As a result, mobile app design has become a crucial component of any app development process. A well-designed app not only looks great but also provides an enjoyable and seamless user experience (UX) that can differentiate it from its competitors.If you're interested in designing mobile apps that stand out, this course is for you. You will learn how to use Figma, one of the leading design tools in the industry, to create engaging user interfaces (UI) and intuitive user experiences that can elevate your app to the next level.The course begins with an introduction to mobile app design principles and best practices. You will learn how to identify your app's purpose and target audience and how to create user personas to guide your design decisions. You will also learn how to create wireframes, which will help you map out the structure of your app and ensure that it aligns with your goals.Once you have created your wireframes, you will learn how to create a design system that will ensure consistency throughout your app. A design system includes a set of design elements such as colors, typography, and icons that can be reused throughout the app to create a cohesive look and feel.Next, you will learn how to create high-fidelity mockups that will give you a more realistic view of your app's design. You will also learn how to use Figma's powerful prototyping tools to create interactive designs that can simulate how your app will work in real life.Throughout the course, you will work on a hands-on project that will help you apply what you have learned. You will be guided through the entire design process, from concept to prototype, and will receive feedback from your instructor and peers to help you improve your designs.By the end of the course, you will have the skills and confidence to design mobile apps that not only look great but also provide a delightful user experience. Whether you're an aspiring designer or a developer looking to expand your skillset, this course is perfect for anyone interested in creating mobile apps that stand out in today's competitive market.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 01.02 Introduction Of The Instructor

Lecture 3 01.03 What Is Figma

Lecture 4 01.04 Quick Win Example Of What You Can Do In Figma

Lecture 5 01.05 Project Preview - Design A Mobile App In Figma

Lecture 6 01.06 Course Requirements

Section 2: Where To Find Figma

Lecture 7 02.01 Where To Find Figma

Lecture 8 02.02 Figma Browser App Vs Desktop App

Section 3: Getting Started In Figma

Lecture 9 03.01 Figma Start Screen

Lecture 10 03.02 Introduction To Figma Interface

Lecture 11 03.03 Import And Export Files In Figma

Lecture 12 03.04 Use Figma Templates For Ui And Ux Design

Lecture 13 Source Files

Section 4: Navigate The Figma User Interface

Lecture 14 04.01 Work With Figma Toolbar

Lecture 15 04.02 Work With Figma Layers And Pages Panel

Lecture 16 04.03 Work With Figma Assets Panel

Lecture 17 04.04 Work With Figma Design Panel

Lecture 18 04.05 Work With Figma Prototype Panel

Lecture 19 04.06 Work With Figma Code Panel

Lecture 20 04.07 Work With Figma Canvas

Lecture 21 04.08 Figma Keyboard Shortcuts

Lecture 22 04.09 Work With Figma Version History

Lecture 23 Source Files

Section 5: Set up Mobile App Design In Figma

Lecture 24 05.01 Build A New Project And File In Figma

Lecture 25 05.02 Import Sketch Files In Figma

Lecture 26 05.03 Work With Teams In Figma

Lecture 27 05.04 Work With Templates In Figma

Lecture 28 Source Files

Section 6: Draw Content In Figma

Lecture 29 06.01 Work With Frames In Figma

Lecture 30 06.02 Work With Shapes In Figma

Lecture 31 06.03 Draw Icons With The Figma Pen Tool

Lecture 32 06.04 Draw Shapes With The Figma Pencil Tool

Lecture 33 06.05 Work With Text In Figma

Lecture 34 Source Files

Section 7: Work With Images And Graphics

Lecture 35 07.01 Mask Images And Shapes In Figma

Lecture 36 07.02 Import Icons And Graphics In Figma

Lecture 37 Source Files

Section 8: Work With Colors And Styles

Lecture 38 08.01 Work With Color In Figma

Lecture 39 08.02 Work With Styles In Figma

Lecture 40 Source Files

Section 9: Work With Components And Constraints

Lecture 41 09.01 Set Up Components In Figma

Lecture 42 09.02 Use Constraints For Responsive Design In Figma

Lecture 43 Source Files

Section 10: Design Mobile App Pages In Figma

Lecture 44 10.01 Design More Mobile App Pages In Figma

Lecture 45 Source Files

Section 11: Design Mobile App Animations In Figma

Lecture 46 11.01 Design Mobile App Animations In Figma

Lecture 47 Source Files

Section 12: Design Micro interactions In Figma

Lecture 48 12.01 Design Microinteractions In Figma

Lecture 49 Source Files

Section 13: Complete Mobile App Design In Figma

Lecture 50 13.01 Design A Slide Out Menu In Figma

Lecture 51 13.02 Design On Screen Overlay In Figma

Lecture 52 13.03 Design A Comments Section In Figma

Lecture 53 13.04 Design Multiple Artboard States In Figma

Lecture 54 Source Files

Section 14: Build A Prototype In Figma

Lecture 55 14.01 Build A Prototype In Figma

Lecture 56 14.02 View Figma Prototype On Mobile Device

Lecture 57 Source Files

Section 15: Share And Export Figma Design

Lecture 58 15.01 Share Figma Design

Lecture 59 15.02 Enable Comments On Figma Design

Lecture 60 15.03 Export Figma Graphics And Assets

Beginners looking to get into the UI/UX field