Learn Figma - UI/UX Design Essential Training

Navigate around the interface with a brief overview to become familiar, setting you up for the design project in the next section.

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 prototype panel in Figma, wire artboards, set device and background options, and configure tap interactions, 2-second delays, overlays, and present mode.

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.

Learn to use version history in Figma to save changes and restore prior designs. Save manual versions with a shortcut and compare options.

Learn to create a new team and project in Figma for a chef recipes app, then add files such as chef_recipe_app and assign edit access.

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.

Learn to collaborate in Figma by setting up teams, inviting members with different access levels, and working together in real time on projects, from avatars to live cursors.

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.

Learn to manage text in Figma by applying text properties, resizing text frames, and styling with bold and centered alignment, while copying and pasting styles for consistent typography.

Learn to place and mask images on the home and recipe detail screens in figma by using crop or use as mask, adjusting fills, and applying shadows and radius.

Import icons in Figma from svg and png formats, paste Adobe Illustrator vectors as editable svg, and use Icons8 to add heart and timer icons, then set color and size.

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.

Learn to design an on-screen overlay that confirms completion, invites a review, and includes social sharing icons using Figma components, layers, and precise sizing for a polished result.

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.

Create and manage multiple artboard states in Figma by duplicating frames for entrees, appetizers, and desserts, then copy styles and align images to prototype toggle states.

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.

Share your prototype by email or copy a link, then open it in a browser and sign into Figma to interact with the live prototype on your mobile device.

Preview your app on real devices with the Figma Mirror App for Android and iPhone, sign in, view desktop frames live, and resize elements to improve tap areas.

Share your designs to receive feedback via the comment tool and share with others using the share icon. Enable public access to embed your design on blogs, including WordPress.

Learn to invite collaborators using the share icon, enable commenting, post feedback on color or padding, resolve or toggle comments, and receive email notifications with direct links to the frame.

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.