Figma for Beginners: Web Design and Mobile App Design Course

Name your design file and organize with pages and layers to separate onboarding, design systems, and lo-fi designs, then use move, hand, and scale tools to manage elements.

Master design frames and frame sizes in Figma, organize screens with sections, and use slice to crop and export design elements for mobile apps, websites, and presentations.

Explore the shape tool basics by drawing rectangles, lines, ellipses, polygons, stars, and images, and adjust position, rotation, flip, width and height, fill, stroke, opacity, and effects.

Explore how to use the pen and pencil tools to draw custom shapes in Figma, create nodes, rotate and group objects, and practice freehand drawing with the pencil tool.

Learn to use the text tool in figma to create and customize typography, including font family, size, line height, alignment, color and opacity, strokes, and effects.

Explore how to use Figma comments for collaboration, drop and read comments on designs, and add people to comments to coordinate feedback across designers, developers, and marketers.

Learn to use Figma actions to locate tools quickly, access assets and plugins, and leverage keyboard shortcuts like V for the move tool, F for frame, and K for scale.

Explore Figma's developer mode, including code snippets and advanced expression with annotations, plus customizable plugins after upgrading to professional, with pricing options and design mode remaining free.

Explore how to use color tools in Figma, from changing frame and shape fills with hex, RGB, HSL and CSS color codes, to gradients, color pickers, and strokes.

Learn to set up and customize layout grids in Figma, using a 12-column grid with margins and gutters, and switch between columns and rows for precise, scalable designs.

Learn how to align and position elements in Figma by using left, center, right, top, middle, and bottom alignments, and adjust x and y coordinates within a frame.

Master local variables and local styles to create reusable typography, colors, layouts, and shadow effects, building a consistent design system with h1–h4 and grid styles.

Explore design effects in Figma, adding inner and drop shadows, setting blur types, and adjusting positions to style frames, rectangles, and overlays with material design.

Master zoom and navigation in figma with plus/minus shortcuts, zoom to fit, and rulers for alignment. Export workflows cover slice tools and formats like png, jpeg, svg, and pdf.

Install and manage essential Figma plugins to speed up design work, including Unsplash for images, Iconified for icons, wireframe for layouts, Fig motion for prototyping, and icons eight background remover.

Explore how to access and reuse design assets from Figma libraries, leverage design systems and material design kits, and insert reusable components to accelerate mobile app and web design.

Master wireframing in Figma with lo-fi, mid-fi, and high-fidelity wireframes, and leverage Figjam for brainstorming, sticky notes, and user-flow planning.

Learn to sketch low-fidelity paper wireframes for websites, including navigation, the hero section, about us and services pages, using rectangles, icons, and grids to map layout before moving to Figma.

Create a website wireframe in Figma by starting a new design file, renaming it, and using the wireframe designer plugin to build lo-fi and medium-fidelity layouts.

Design a mobile app wireframe in Figma using the wireframe designer plugin to craft a lo-fi layout with navigation, featured products, product grids, and simple interactions.

Design a high-fidelity visual user interface for a Blood Creative Studio website in Figma by creating a logo, applying colors and stroke, and exporting assets.

Create a Figma local styles style guide for Large Creative Studio by defining color palette, typography, 12-column grid, and shadow styles to support a tech brand design.

Design a navigation bar in Figma, applying the logo, color styles, and layout grid, and configure links for home, about us, services, and blog.

Design hero sections in Figma by creating a session frame, adding an Unsplash image, editing exposure and color, and arranging headings and a call-to-action button in a grid.

Design and prototype website sections in Figma by building frames, layout grids, service cards, tailoring typography, color styles, images with Unsplash and local store, adding learn more buttons.

Design and finalize the footer in figma by framing the layout, flattening vectors, and grouping elements, including partners, socials, contact details with office addresses, and copyright.

Design the about us page in Figma, starting with a desktop frame and navigation component, then build a hero with an Unsplash image and play button, and outline services.

Design and assemble a service page in Figma using a desktop wireframe, a reusable navigation bar, and grid-based service cards with icons and descriptions (web development, brand marketing, cloud computing).

Design a blog page in Figma using generative AI tools and templates, learning to create wireframes, blog cards, and a responsive layout with navigation, typography, and a call-to-action.

Master uniform design across the four pages with layout grids, alignment, and a primary color guided by the style guide, while adopting material design concepts and reusable components.

Design low-fidelity mobile app wireframes using ai templates in a Figma-driven workflow, from onboarding and launch screens to home pages, with export, share, and import via Vasily plugin.

Design a splash screen for a mobile app using wireframes, material design basics, and a componentized logo, then build the launch screen with colors, navigation, and sign-in buttons.

Design a sign-in screen in Figma by wiring a frame with a device frame, applying the Material Design grid, and building email and password inputs with icons and a button.

Learn to design a mobile app homepage in Figma by assembling a device frame, wireframe, layout grid, headers, search bar, hero image, promotional banner, service cards, and bottom navigation.

Design an app navigation panel by importing Font Awesome icons, configuring home, services, about us, and blog icons, and aligning them in a cohesive navigation component.

Design the About Us page for the mobile app in figma using the material design kit, device frame, and unsplash images, outlining services and brand marketing.

Design a mobile service page in Figma with a device frame, app bar, and a services grid featuring web development, graphic design, and tech support.

Design blog page for a mobile app using a material design kit, assets, and the Unsplash plugin to set imagery, color, navigation, and a read more/view more call to action.

Explore user experience by prototyping your design to reveal how users feel, interact, and judge a product’s ease of use, accessibility, credibility, and satisfaction.

Learn how prototypes turn your designs into interactive demos in Figma, linking pages and testing website and mobile app flows before development.

Prototype your website by creating page interactions from home to about us, services, and blog, then preview on a device to evaluate responsiveness and auto layout.

Prototype a mobile app in Figma by linking splash, sign-in, home, about us, services, and blog pages with on tap navigation, device frames, and Android compatibility for responsive design.

Export your Figma designs and assets with ease, choosing png, jpeg, or pdf, exporting single screens or multiple layers, then download, unzip, rename files, and create mockups for portfolios.

Explore the Figma community to discover resources shared by other designers, including libraries, plugins, icons, and portfolio templates, then adapt and inspire your own projects.

Join the UI challenge to practice as a beginner product designer and receive prompts for 100 days, designing a sign up page and sharing on Dribbble or Twitter with #ui.

Develop a web-based portfolio with Google Sites, showcasing essential web design concepts and portfolio presentation skills for beginners.

Finish strong by implementing everything you've practiced in this course to reach the top of your design journey, and wish you the best in your endeavors.