Mobile App Design in Figma: From Concept to Prototype from Udemy

Figma is a web-based design tool that enables users to create interactive, collaborative designs. You can use it to do all kinds of graphic design work from wireframing websites, designing mobile app interfaces, prototyping designs, crafting social media posts, and everything in between. Figma works directly on your browser. This means you get to access your projects and start designing from any computer or platform without having to buy multiple licenses or install software. What makes it so attractive is the fact that it’s free to use.

If you’re still not familiar with this wondering web-based app you’ve come to the right place. You will learn through recorded lessons, practical exercises and tips by UI & UX Designer Željko Milivojević, reviewing content at your own pace.

You will go through the process of creating your project from start to finish. Željko Milivojević will go over all the small details that can really make a difference, but most people aren't mentioning them. There is a lot to learn along the way, so we would love to take you on this journey.

In this Mobile App Design Course you will learn:

How to use Figma to assist with your projects
How mobile apps are structured and how you can learn from it
How to automate your workflow
What’s the difference between iOs and Android designs
How to create a moodboard for your project and how it can help
How to create a working design system that helps you finish your project easily
How to create wireframes and import them in Figma
Proper structure for the projects
How to create a prototype

Why should you choose this course?

Figma gives you universal design skills.
You will learn how to create in Figma from experienced designer Željko Milivojević.
Željko Milivojević is UI & UX Designer focused on mobile and web design and brand identity with eight years of experience in the design industry.
You will design your first mobile app from start to finish.
Study anywhere, anytime, at your own pace.
This course is suitable for both beginners and experienced users.
The course comes with in-depth videos and important tips.

What else do you get?

lifetime access to the course and its updates
structured step-by-step lessons and practical exercises
a certificate from Udemy upon completion of the course

Start learning without risk with Udemy's 30-day money-back guarantee.

Ready to start your design journey? Click the "Buy Now" button to get instant access.

What's inside

Syllabus

Introduction

In this lecture, we'll introduce the topics that will be covered in this course.

We'll start working with Figma and look through its interface.

In this lecture, we'll explore the differences between designing for iOS and Android.

Here, we'll start working on our project and create it in Figma.

In this lecture, we'll cover how to study on Udemy effectively.

In this lecture, we'll create a moodboard for our project.

Here, we'll explore the iOS Library and learn to work with it.

In this lecture, we'll create our own design system.

We'll create the login & register flow, home screen with chat and search options.

Creating the post, notifications, and profile with follow and following pages.

Connecting the screens with prototype settings.

Creating finalized versions of screens in "Wireframe Part 1"

Here, we'll create a similar page to Spotify.

Creating finalized versions of screens in "Wireframe Part 2"

Creating finalized versions of screens in "Wireframe Part 3"

Creating finalized versions of screens in "Wireframe Part 4"

Connecting all the components until the post-screen.

Cleaning the document and properly structuring it for client review.

In this lecture, we'll share the top AI tools that will make your journey much easier.

Your feedback is crucial to me. Please share your thoughts on how I can improve this course for you.

In this video, you will find out how to get a certificate after completing the course.

In this lecture, we'll sum up what we've learned.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses Figma, a free and accessible web-based design tool, making it easy for beginners to start designing without the need for expensive software or multiple licenses

Covers the differences between iOS and Android designs, which is essential knowledge for designers aiming to create apps for both platforms

Teaches how to create a design system, which is a crucial skill for maintaining consistency and efficiency in design projects

Includes a section on AI tools, which can help designers automate tasks and streamline their workflow, keeping them up-to-date with industry trends

Requires learners to create wireframes and prototypes, which are essential steps in the mobile app design process and provide hands-on experience

Taught by Željko Milivojević, a UI/UX designer with eight years of experience, offering practical insights and real-world knowledge

Reviews summary

Comprehensive figma mobile app design guide

According to students, this course provides a highly effective introduction to mobile app design using Figma. Learners frequently commend the instructor's clear explanations and the structured, step-by-step approach, particularly the focus on building a complete project from concept to prototype. Many found it excellent for beginners seeking practical Figma skills. While widely praised for its foundational strength, some reviewers note that more experienced designers might desire deeper coverage on certain advanced topics. Overall, it's regarded as a strong starting point for mastering the Figma workflow.

Course structure is logical and easy to follow.

"The course is very well structured and easy to navigate."

"Liked the logical flow from concept to prototype."

"The step-by-step lessons made learning the process straightforward."

"A clearly laid out syllabus that guided me effectively."

Well-suited for those new to Figma or design.

"Perfect for someone just starting out with Figma."

"As a total beginner, I found this course very accessible and encouraging."

"It provided a great foundation for someone new to mobile design."

"Gave me a solid starting point to build upon."

Building a project end-to-end is very valuable.

"Designing the app from start to finish was the most valuable part for me."

"The project helped solidify my understanding of the entire process."

"Great practical exercise that mirrored real-world workflow."

"I appreciated the hands-on approach of building a complete design."

Instructor's teaching style is clear and effective.

"The instructor explains everything clearly..."

"His instructions were easy to follow, making complex things simple."

"I really liked the way the teacher explained things step by step."

"The course was well-taught and easy to understand."

Content could be more in-depth on some topics.

"Wish it covered more advanced prototyping techniques in detail."

"Could use more in-depth coverage on design systems and their application."

"Good for the basics, but felt a bit surface-level on some complex areas."

"As an experienced user, I was hoping for more advanced tips."

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 Mobile App Design in Figma: From Concept to Prototype with these activities:

Practice Basic UI Design Principles

Show steps

Reviewing fundamental UI design principles will help you create more effective and user-friendly mobile app interfaces in Figma.

Show steps

Review articles and videos on UI design principles.
Analyze existing mobile apps for good and bad UI examples.
Practice applying principles to simple design exercises.

Review 'Don't Make Me Think, Revisited'

Show steps

Reading 'Don't Make Me Think' will improve your understanding of usability principles and help you create more intuitive mobile app designs in Figma.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Read the book and highlight key usability principles.
Analyze existing mobile apps for usability issues.
Apply the book's principles to your own Figma designs.

Review 'Refactoring UI'

Show steps

Studying 'Refactoring UI' will provide practical tips and techniques for improving the visual design of your mobile app interfaces in Figma.

View Melania on Amazon

Show steps

Read the book and take notes on key concepts.
Apply the refactoring techniques to existing designs.
Experiment with different design choices based on the book's recommendations.

Three other activities

Expand to see all activities and additional details

Show all six activities

Design a UI Kit in Figma

Show steps

Creating a UI kit will reinforce your understanding of design systems and component-based design in Figma, improving your efficiency and consistency.

Show steps

Choose a specific style or theme for your UI kit.
Create a library of reusable components in Figma.
Document the usage guidelines for each component.
Test the UI kit by using it in a sample mobile app design.

Write a Blog Post: Figma Mobile Design Tips

Show steps

Writing a blog post will help you consolidate your knowledge and share your insights on mobile app design in Figma with others.

Show steps

Choose a specific topic related to Figma mobile design.
Research and gather information on your chosen topic.
Write a clear and concise blog post with examples and visuals.
Publish your blog post on a platform like Medium or your own website.

Create a Figma Prototype Portfolio

Show steps

Building a portfolio of Figma prototypes will showcase your skills and help you land design opportunities.

Show steps

Select your best Figma prototypes to include in your portfolio.
Create a presentation or website to showcase your prototypes.
Write descriptions of each project, highlighting your design process and skills.
Share your portfolio on platforms like Behance or Dribbble.

Career center

Learners who complete Mobile App Design in Figma: From Concept to Prototype will develop knowledge and skills that may be useful to these careers:

User Experience Designer

A User Experience Designer enhances user satisfaction by improving the usability, accessibility, and desirability of a product. This Mobile App Design in Figma course helps you understand the full design process, from initial concept to a functional prototype. You will learn how to structure mobile apps, create moodboards, and develop wireframes. Since Figma is a collaborative tool, the course's focus on this platform will also enable you to work effectively in team settings, which is crucial for a User Experience Designer. Learning about the differences between iOS and Android designs will also allow you to tailor user experiences for different devices.

See salaries and explore the career path for User Experience Designer

User Interface Designer

A User Interface Designer focuses on the visual elements users interact with in an application or website. This course on Mobile App Design in Figma helps build a foundation in UI design principles and practices. You will learn to use Figma, a widely adopted tool in the UI design industry, to create interfaces. The training in creating design systems, wireframes, and prototypes directly translates to the daily tasks of a User Interface Designer. In particular, the course's attention to iOS and Android design differences can help you design effective and beautiful interfaces for diverse mobile platforms.

See salaries and explore the career path for User Interface Designer

Interaction Designer

An Interaction Designer focuses on how users interact with a product, designing intuitive interfaces and workflows. This Mobile App Design in Figma course helps you learn to create interactive designs and prototypes using Figma. The course's emphasis on creating wireframes and prototypes will be particularly relevant, allowing you to visualize and test different interaction models. Learning to create working design systems in Figma can streamline the design process and ensures consistency across different parts of an application. As an Interaction Designer this course helps you bring your ideas to life in a tangible way.

See salaries and explore the career path for Interaction Designer

Freelance Designer

A Freelance Designer works independently, providing design services to various clients on a project basis. This Mobile App Design in Figma course helps you to expand your skill set and offer mobile app design services to your clients. Figma's collaborative features and ease of use make it an ideal tool for freelance work, allowing you to efficiently manage projects and collaborate with clients. The course's comprehensive coverage of the mobile app design process, from concept to prototype, equips you with the skills needed to handle diverse projects. In this role, you may find that an understanding of UI and UX design principles are essential.

See salaries and explore the career path for Freelance Designer

Product Designer

A Product Designer is responsible for the overall design and user experience of a product from conception to launch. This Mobile App Design in Figma course can help you refine your design skills using Figma. You learn to create moodboards to formulate design concepts, build wireframes to structure user flows, and develop prototypes to test and validate design decisions. The course's comprehensive approach, covering design for both iOS and Android, provides a well-rounded perspective on mobile app design that is crucial for a Product Designer. In this role, you'd likely be working in a cross-functional team, and an understanding of UI and UX design principles are essential.

See salaries and explore the career path for Product Designer

Web Designer

A Web Designer creates the visual layout and user interface of websites. Although the course focuses on mobile apps, the design principles and skills learned in this Mobile App Design in Figma course are transferable to web design. You can apply the knowledge of creating wireframes, prototypes, and design systems to design effective web interfaces. Figma is also a versatile tool used for web design, making your experience directly applicable. In this role, you may find that an understanding of UI and UX design principles are essential, and this course helps you to develop these.

See salaries and explore the career path for Web Designer

Visual Designer

A Visual Designer focuses on the aesthetic aspects of a design, ensuring that it is visually appealing and aligns with branding guidelines. This Mobile App Design in Figma course helps you to improve your visual design skills using Figma. You will also learn how to create moodboards to set the visual tone for a project and develop design systems to maintain consistency. The course's focus on UI design principles will allow you to create visually engaging interfaces that enhance the user experience. This course may be useful to any Visual Designer looking to enhance their skills.

See salaries and explore the career path for Visual Designer

Design Consultant

A Design Consultant advises organizations on design strategies and best practices. This Mobile App Design in Figma course helps you to deepen your understanding of mobile app design principles and practices. You will learn how to use Figma to create interactive designs and prototypes, allowing you to demonstrate design solutions to clients effectively. The course's emphasis on creating design systems helps you to advise organizations on maintaining design consistency across their products. As a Design Consultant, you might find that knowledge of mobile app design can be a significant asset.

See salaries and explore the career path for Design Consultant

Mobile Application Developer

A Mobile Application Developer creates applications for mobile devices. While this course focuses on design rather than coding, understanding the design process is crucial for effective collaboration between developers and designers. This course, teaching Mobile App Design in Figma, can help you to better translate design specifications into functional applications. In this role your job would be easier with an appreciation for user interface and user experience considerations. The focus on iOS and Android design differences in this course may be helpful to your understanding of the specific requirements and constraints of each platform.

See salaries and explore the career path for Mobile Application Developer

Usability Analyst

A Usability Analyst evaluates the ease of use of a product and identifies areas for improvement. This Mobile App Design in Figma course may help you to understand the design process and the factors that influence usability. By learning how to create wireframes, prototypes, and interactive designs in Figma, you gain insights into the design decisions that impact the user experience. This perspective allows you to more effectively analyze usability issues and recommend design improvements. Usability Analysts typically need a solid understanding of user interface development.

See salaries and explore the career path for Usability Analyst

Information Architect

An Information Architect organizes and structures information within a product to ensure it is easy to navigate and understand. This Mobile App Design in Figma course may help you to understand how to structure mobile apps. By learning how to create wireframes and prototypes, you can visualize and test different information architectures. The course's emphasis on creating design systems ensures consistency and clarity in the organization of information. In this role, you may find that knowledge of mobile app design can be a significant asset.

See salaries and explore the career path for Information Architect

Digital Strategist

A Digital Strategist develops and implements digital strategies to achieve business goals. While not directly related to strategy, this Mobile App Design in Figma course may help you to gain a deeper understanding of mobile app design and its role in the digital landscape. By learning how to create effective mobile app interfaces and prototypes, you're likely to be able to better advise organizations on their mobile strategies. This course may be useful if you have interests in digital marketing and advertising.

See salaries and explore the career path for Digital Strategist

Project Manager

A Project Manager oversees the planning, execution, and delivery of projects. This Mobile App Design in Figma course may help you to better manage design projects. By understanding the design process, from concept to prototype, it's more likely that you'll be able to effectively coordinate design teams and manage project timelines. The course's focus on Figma, a collaborative design tool, will also enable you to facilitate communication and collaboration among team members. In this role, you may find that knowledge of mobile app design can be a significant asset.

See salaries and explore the career path for Project Manager

Instructional Designer

An Instructional Designer creates learning materials and experiences. While seemingly unrelated, this Mobile App Design in Figma course may enhance your ability to design engaging and interactive learning experiences. By learning how to use Figma you can create visually appealing and user-friendly interfaces for online courses and educational apps. The course's emphasis on creating wireframes and prototypes will allow you to plan and structure learning content effectively. Instructional Designers may find this to be a valuable tool.

See salaries and explore the career path for Instructional Designer

Technical Writer

A Technical Writer creates documentation for technical products and services. This Mobile App Design in Figma course may help you to document design processes and specifications more effectively. By understanding how to use Figma to create wireframes, prototypes, and design systems, it's likely that you will be able to create clear and accurate documentation for design teams and clients. In this role, you may find that knowledge of mobile app design can be a significant asset.

See salaries and explore the career path for Technical Writer

Mobile App Design in Figma

From Concept to Prototype

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Comprehensive figma mobile app design guide

Activities

Career center

Reading list

Share

Similar courses