Learn Figma - UI/UX Design Essential Training

Sign up for free and start using Figma in your web browser. Download desktop app from figma.com/downloads, use device preview, and install font installers for fonts on Android or iOS.

Explore the Figma start screen to access templates, create new files with the plus icon, and manage drafts and teams. Learn how design systems and plugins organize project hierarchies.

Learn how to navigate the Figma interface, from the top bar, tools, layers and assets, to design, prototype, and code panels, and collaborate with version history and sharing.

Learn how to import offline files into Figma, export projects, and leverage cloud-based real-time autosave, then save offline as a .fig file for sharing.

Discover how templates jumpstart your designs in Figma, download mobile UI kits and wireframe templates, duplicate after signing in, and import sketch files for seamless integration.

Explore the toolbar in depth, mastering frames, templates, move and pen tools, shape manipulation, text, image placement, and the comment workflow to streamline design in Figma.

Explore the assets panel to reuse components, manage masters and child instances, and see how changes propagate; learn to create and organize components for navigation and hero sections.

Explore the code panel to extract exact width, height, position, color, and border radius for developers, switch CSS, iOS, or Android properties, and collaborate by sharing and commenting.

Import sketch files into Figma to preserve layers and quality. Use templates from Sketch App Sources, adjust fonts if needed, and convert symbols to master components for a faster start.

Access design templates and resources for iOS, Android, Sketch, and Figma. Preview fonts, production templates, and UI elements, and import templates into Figma.

Create five frames for the iPhone eight, name them splash screen, home, recipe, recipe details, and menu, and apply a six-column layout grid with 15-pixel gutters and 10-pixel margins.

Design UI elements by drawing and combining shapes, filling frames with images, applying opacity and radii, and using union and subtract to craft icons like a chef's hat.

Create icons in Figma using the pen tool inside 36-pixel circles, mastering strokes, fills, drag handles, symmetry breaks, and resizing to craft a shopping bag and chef's hat icon.

Master the pencil tool in Figma to draw free-form shapes, edit with nodes, bend and heal tools, trace images, and refine with strokes, grouping and layering.

Show how to create and manage components in Figma, including master and child components, nesting limitations, and overrides, then build reusable icons and a five-star rating system for scalable design.

Explore Figma's version control to view, duplicate, restore, and preserve design progress with version history and snapshots, including a 30-day history for collaboration.

Design the comments section within the recipe detail screen by creating and customizing components, using overrides, detaching instances, aligning avatars and text, and applying constraints for responsive resizing.

Give this design its own personality by customizing colors, fonts, icons, and sizes, tweak shapes for an organic look, copy styles across elements, and finalize typography before prototyping.

Prototype in Figma by linking artboards and testing navigation from splash to home and recipes, ensure text boxes work for prototyping, and use back navigation with an X button.

Name and mark design elements as exportable, then export assets as PNG, JPEG, or SVG at 1x, 2x, and 3x for developers.

Celebrate finishing your first interactive design in Figma, and expect updates with new features, while reviews boost course visibility and fund future videos.