Figma UI/UX Design: Mobile App Essentials

Using rectangles, ellipses, and polygons to build buttons, icons, and containers.

A guide to the pen tool for creating unique vector graphics and curves.

Using union, subtract, intersect, and exclude to design complex icons and logos.

How to choose fonts and set up a clear text hierarchy for readability.

Adjusting line height, letter spacing, and text alignment for polished designs.

Explaining components and how they save time by creating reusable instances.

Step-by-step creation of a button component with different states like default and hover.

Creating a reusable input field with placeholder text and focus states.

Building a flexible card component that can display varying amounts of content.

Apply shapes, text, and components to create a functional login interface.

How Auto Layout enables flexible, adjustable designs that adapt to content changes.

Techniques for creating dynamic lists, such as feed items or menu options.

Building carousels, tabs, and horizontally scrollable sections.

Combining multiple Auto Layouts to design headers, footers, and card grids.

Setting up fill colors, gradients, and managing color styles for consistency.

Adding depth and focus to elements with drop shadows, background blur, and more.

Creating color styles, text styles, and effect styles to maintain a unified look.

Revamp your login design to be fully responsive using Auto Layout and styles.

Apply all techniques to build a profile page with text, images, and interactive elements.

How to link frames and create basic click-through interactions.

Setting up connections between screens to simulate user flows.

Using Smart Animate for seamless transitions between similar frames.

Adjusting slide, fade, and scale animations for a polished feel.

Creating hover states, click effects, and interactive toggles within components.

An introduction to Dev Mode for inspecting designs and exporting assets.

How to add notes, measurements, and interaction details for developers.

Exporting icons, images, and code snippets from your Figma file.

Detailed walkthrough of viewing CSS properties, spacing, and color values.

Turn your user profile screen into an interactive prototype with links and animations.

Iterating on your prototype based on common usability considerations.

Defining the app concept, user flow, and key screens for a food delivery or fitness app.

Setting up color and typography styles specific to your app's brand.

Step-by-step guide to creating welcoming, informative onboarding flows.

Using Auto Layout and components to design a dynamic content display.

Designing bottom navigation bars and side menus for easy access.

Designing screens that show extended information with images and actions.

Implementing buttons, sliders, and toggles with prototyping states.

Linking all screens together into a single, navigable prototype.

Refining animations for a smooth and engaging user experience.

Organizing assets, documentation, and exporting the prototype file.

Tips for showcasing your project effectively in a portfolio or presentation.

Summarizing key concepts and suggesting next steps for further skill development.