Navigate the Figma interface, from the menu bar and toolbar to assets, layers, and pages. Master essential tools, frame, shapes, components, comments, and zoom shortcuts.

Learn to navigate figma's interface by using the layer panel and inspector bar to manage layers, select elements, edit properties, and control stacking order in a website hero prototype.

Master desktop wireframing in Figma, turning sketches into a blueprint with frames and artboards from the first project onward, using pencil and pen tools with shortcuts f and shift p.

Create wireframes two through four in figma for a website hero section, using move and select tools, alt-drag copying, and proportional scaling across wireframe variants.

Master layout in Figma by arranging layers and wireframes on a desktop artboard using a 12-column grid with proper spacing and centered alignment.

Learn to create a hamburger brand background in Figma using layout grid, color fills, and alignment with the brand color for the website hero.

Learn to cut out a hamburger image in Figma using a background remover plugin, masking, and the pen tool, then refine and scale the cutout for a clean hero element.

Learn to create a floating shadow for an image in Figma by adjusting opacity with the layout block. Group the hamburger image and layers to keep the shadow cohesive.

Learn to add leaves to a website hero, drag and drop, adjust around text, apply drop shadow and blur on a layered element, and refine with undo.

Import the brand logo from the resource file, place it in the layout grid, and constrain proportions for a balanced, precise hero section.

Learn to build a website top menu in Figma by grouping the brand logo, burger, and items like product, service, and contacts, then edit text and apply color styles.

Learn to import and use icons in Figma, add arrows for dropdowns beside menu links, and access icon resources and plugins like IconSacks.

Master auto layout in Figma to keep spaces in proportion using Shift a. Learn to select, group, and resize with proportional spacing across multiple items.

Design and refine a login and sign-up button in Figma by creating text, a rectangle shape, adjusting color and contrast, and aligning elements for a clear call to action.

Create and format hero text in Figma using the text tool, typing themes and copywriting to drive sales, then adjust fonts, sizes, letter spacing, line height, color contrast, and layout.

Design a prominent call-to-action button for a website hero, using a brown outline, white text, and auto layout with grouping for scalable, accessible placement.

Create and customize the client satisfaction section in the website hero, adjusting typography with futura fonts, brand colors, letter spacing, and grid-aligned visuals to highlight satisfied clients.

Insert a doodle arrow from the plugin, then position and scale it while rotating as needed. Use the brand color and align the arrow to point at the burger menu.

Learn how to create and save a Figma component, reuse it across pages, and manage assets and instances to streamline button and icon design.

Examine how the food brand hero section is assembled in Figma, aligning the brand logo, logo name, and navigation (home, login, sign up) with a blueprint guiding sketching to visuals.

Design a tech brand hero section in Figma by building frames, applying a dark gradient with 20% opacity, and aligning logo, Century Gothic typography, and navigation using a layout grid.

Refine the tech brand hero section by duplicating and aligning a button, setting brand colors and strokes, detaching elements, and using auto layout to keep logos aligned and consistent.

Design a fruit brand hero section in Figma with a light theme, background image, logo, typography, and a red color scheme, including a bold purchase now call-to-action.

Design a real estate brand hero section in Figma with a background image, dark overlay, and brown brand color. Center the headline and call to action within a responsive prototype.

Learn to create a Figma food brand website prototype animation by defining start and end points, grouping elements, and linking frames for seamless transitions.

Explore how to build web prototypes in Figma by linking frames with starting and end points, configuring interactions, delays, and Smart Animate transitions to create seamless, gentle, bouncy motions.

Design a real estate brand web prototype in Figma UI/UX by building and grouping elements, arranging animations and bounce transitions, and connecting screens for a dynamic website hero section.

guide learners through creating a web prototype with animation, grouping elements, and configuring transitions, including a bicycle motion and a distinctive hamburger interaction.

Create a web prototype for a fruit brand, implementing precise layer grouping, alignment to white, and motion with smart animate transitions across branches to showcase a polished hero experience.

Learn the automatic approach to responsive design by exploring real estate, full brand, tech, and fruit brand layouts, before moving to manual methods in the next lecture.

Master real estate brand responsive design in Figma by using auto layout and constraints to make a hero section adapt across tablet and mobile with scalable typography and aligned CTAs.

Design a responsive food brand website hero in Figma by building a hamburger menu with constrained, auto-layout elements across tablet and mobile views, and refining alignment and layering.

Discover how to design a responsive tech brand hero in Figma by mastering auto layout, grouping, constraints, and mobile optimizations.

Design a fruit brand website hero section in figma with a responsive layout, auto layout, and precise centering to optimize white space across devices.

Learn to design a food brand mobile prototype in Figma by animating the hamburger menu, grouping layers, and managing front-to-back ordering, while configuring prototype interactions with delays and smooth transitions.

Create a mobile tech brand prototype in Figma, align layout, zero positions, group elements, and connect a smart animation with delay to drive a bicycle into a black hero section.

Create a mobile fruit brand prototype in Figma by refining shapes, adjusting sizes with shift and spacebar, and applying smart animate with a delay to showcase a smooth transition.

Design a mobile real estate brand prototype in Figma, detailing page layout, element timing, and transitions from left and top to a landing page.