Figma 2024 Monster Course: Mastering Design & Prototyping

Design a professional website mockup in Figma by creating a main frame, adding background imagery, typography with Poppins, and a three-item navigation for how it works, collection, and workshop.

Select and adjust website paragraph text in Figma, paste dummy text from a generator, set it to regular for visibility, and use rectangles with masks to support future prototype animation.

Learn to mask a group with a rectangle in Figma, duplicate and align shapes, apply the mask, and prepare for prototype animation in the next lesson.

Learn to prototype the first slide in Figma by aligning text and images, masking and adjusting opacity, duplicating frames, and linking a smart animate transition for hover and click.

Design and animate a boutique website hero slide in Figma by assembling background, main image, icons, typography, and sign-up user interface, while aligning elements, duplicating assets, and applying color codes.

Prototype forward and backward icon animations on a landing page by turning the icon into a component, creating variants, adjusting x-position and opacity, and refining hover timing.

Create a monotone logo on main page, center it, set opacity to 75, and align icons to 50x50, then 60x60 for Facebook/Instagram, while duplicating and centering text in regular font.

Learn to design a web page button in Figma by creating auto-layout text, adjusting color and size, shaping the button radius, turning it into a component, and configuring hover prototypes.

Organize the second page by duplicating frames, deleting unnecessary elements, and aligning components, then design size options, price, delivery date, quantity, and add to cart with auto layout.

Design a quantity button in figma with plus and minus icons for 1–9 items, updating the price as quantity changes, and convert it into a component with variants and prototyping.

Design and prototype a landing page interaction by building a page transition, locking frames, fading assets, and wiring add to cart and buy now actions.

Refine the page transition by duplicating steps, adjusting the white rectangle’s x, users’ y, and fading elements to zero, using the stretch transition tool and after delay for smoother animation.

Learn to add backward navigation for the main image in a Figma prototype by duplicating pages, linking image clicks with delayed transitions, and creating a looping animation.

Create forward and backward button prototyping in Figma, animating a coordinated image during page transitions with x-direction shifts, 300 ms gentle easing, and page duplication for seamless navigation.

Duplicate frames, move elements off-frame, and fade items to zero opacity; place the logo, enlarge images, and enable 300 ms page transitions with horizontal to vertical scrolling.

Design a website wireframe for an e-commerce restaurant site, placing logo, images, text, and navigation buttons. Use a blueprint approach to set colors and page sections, guiding the landing page.

Duplicate and rename the wireframe to the main landing page, apply blur and drop shadow, place and style centered text in Poppins, and group content for a clean landing design.

Design a landing page button by creating a small frame, adding a rectangle and all caps text, applying orange color, stroke, drop shadow, and turning it into autoload for prototyping.

Design a landing page checkout button in Figma using auto layout, color fills, stroke, drop shadow, and text stroke; convert to a component with prototype interactions and background setup.

Design and prototype other buttons by building frames into components, applying orange colors, enabling hover effects, and aligning variants like show, learn, and our story for prototyping.

Create a page cart animation by turning the cart image into a component, adjusting opacity and x direction, and applying prototype animations with smart animate and 100 ms ease in.

Fine-tune a main landing page in Figma by renaming groups, resizing elements, and aligning logo and buttons. Adjust font sizes and spacing to finalize the layout before next class design.

Organize the Figma workspace for the second webpage by duplicating the main image, removing unused elements, aligning the checkout area, and placing the Domino's pizza image with the drop shadow.

Duplicate and modify shapes to design additional page elements in Figma, adjusting direction, size, color, stroke, and path variations for a cohesive, varied visual layout.

Design the third web page by duplicating components, editing text to tasty food and low price, placing elements, and applying rounded corners, blue color, and a drop shadow.

Execute prototyping by animating a landing page: hide elements, adjust opacity, and move components with smart animate and easy ease out, then preview the final checkout flow.

Continue prototyping in Figma by duplicating frames, renaming, and enabling content clipping in the main frame. Connect learn more and checkout with smart animate for a seamless prototype.

Design and implement a page transition for the shop button in a figma prototype, duplicating the main page, adjusting frames, color, and checkout content.

This lecture demonstrates creating a burger rollover button in Figma by turning the item into a component with color variants, removing drop shadows, and preparing a final 1920x1080 preview.

Set up a shop now page in Figma by arranging four recipes with rollover effects and a linked prototype button, switch to Italia font, and adjust alignment.

Group the shop toggle button with wedge burger, duplicate page to shop now final pitch, and connect transitions with smart animate, 200 milliseconds, and ease in and ease out.

Design a landing page in Figma with a 1920 by 1080 canvas, feature three chef instructors with dummy names and 20 years of experience, and add a checkout button.

Prototype a learning page in Figma by arranging layers under the main button, removing white background, and connecting the story button to first page with 200 ms ease transitions.

Design an app logo and UI elements in Figma from scratch, create a brand logo as a component with color variants and a rollover effect, and build first UX slide.

Create a forward roll-over button in figma using rectangles and vectors, convert it to a component, and prototype hover with smart animate, adjusting colors.

Convert the forward and backward png icons into components, create instances with default opacity, and build a hover rollover prototype. Adjust transfer mode, scale, and manage assets for the app.

Create interactive user interface prototypes in Figma with rollover states, opacity and color changes, and grouped components; configure smart animate transitions and mobile tap interactions.

Learn to create a page transition in Figma, linking the entrance logo page to the next with Smart Animate, color changes, masks, and a rollover effect.

Explain the view meals page design process, featuring four meal cards with names and gram amounts and a back navigation. Cover simple prototyping, pexels images, and remove.bg background removal.

Design and prototype a meal view in Figma by adjusting frames, setting opacity and positions, duplicating columns, and wiring a forward button with smart animate transitions.

Design a new product page in figma by creating a pumpkin soup item with a quantity selector, price, and order now button, preparing basic prototyping visuals.

Master the corn page in Figma by aligning the console and corn image, adjusting size and rotation, and building a smart-animated prototype with on tap transitions and back navigation.

learn to design and prototype radial buttons for a payment page in Figma, using two options like PayPal and credit or debit card, with Smart Animate hover and looping interactions.

Connect the AutoML page to the PayPal page, enable payment choices of PayPal or credit/debit, and implement back, cancel, and continue flows.

Learn to design the order placed page in a time-lapse sequence using Figma, mastering design and prototyping for a polished result.

Finish prototyping a food delivery UI in Figma by duplicating pages, linking prototypes with delayed transitions (10 ms, 700–1000 ms), and reviewing the full UI interactions.

Demonstrates the breakdown of an image scale rollover prototype in Figma, detailing color corrections, opacity and contrast adjustments, and hover smart animate with ease in and out.

Explain circular text animation in Figma by turning text into a component, using arc menu to place text on a circle, and prototyping with smart animate for a looping motion.

Explain the forward and backward button functionality in a Figma prototype, using frames and groups, smart animate on click with 300ms transitions and ease in/out.

Explain the breakdown of photoslide animation in a Figma prototype, including masking frames, the cancel button, moving images, and x-direction transitions connected across frames.

Duplicate frames, apply alpha decay with 100 ms duration, and sequence reveals of first and second images, with hover-triggered shop now color changes, using insert instead of smart animate.

Master the finishing touches of the photoslide animation by duplicating frames, revealing masked text, and animating items with y and x translations using smart animate in a Figma prototyping workflow.

Learn to break down and prototype a cancel button in Figma, wiring clicks to return to the first page with smart animate, delays, and instant options.