Figma UI/UX Project Course: Design 6 Apps and Get Job Ready

Design a Shopify music web app in Figma from scratch, mastering typography, color styles, and a design system, then transform low-fidelity wireframes into high-fidelity prototypes with transitions and animations.

Learn to build a Spotify web app clone in Figma, from file setup to login, home, and playlist screens, with animations, horizontal scrolling, reusable components, and prototyping.

Open your Figma account and create a new design file. Rename the project and pages to build a foundation for the design system, including typography, color style guide, and wireframes.

Create typography and color style guides, selecting font family, style, size, and weight, and build a color palette from low fidelity black and white to high fidelity pink and green.

Create color styles for each swatch and save them as new styles in the library. Apply colors with the fill option and switch between color styles in the library.

Create a typography style list in Figma using the type scale plugin to generate multiple font sizes and weights from a 12px Inter font.

Learn to create and apply typography styles in Figma by naming styles, setting font size, weight, and family, and applying them to titles, body text, and buttons.

Build a logo in the design system by creating a round circle with an ellipse, adding bendable pen-tool lines, and turning the result into a reusable component via a plugin.

Add and customize app icons and logos in Figma, selecting search, globe, home, play button icons, downloading and replacing icons, applying brand logos from iconify, adjusting color and alignment.

Create a low fidelity navbar for page, configure a MacBook Pro 14 inch frame, add logo, home and search icons, a login button, and enable auto layout for responsive layout.

Create a top navigation bar in figma by grouping elements into frames, applying auto layout, margins, and spacing, aligning items, and applying a consistent fill for desktop view.

Create a left panel card for a landing page, frame a padded card with fills and typography, add a create playlist button, and convert it into a design system component.

Create the lower portion of the left panel for a low-fidelity landing page by aligning text, spacing elements, and adding a language toggle with a globe icon and auto layout.

Design a low-fidelity landing page in figma by building a right side panel and a grid of song cards with image frames, titles, and release dates using auto layout.

Create artist cards for a low-fidelity landing page by building frames with auto layout, 140-pixel circular avatars, centered logos, and 16-pixel semibold names plus 16-pixel designation, aligning and duplicating cards.

Learn to create and rename landing page sections in Figma, including popular albums and singles, recently played, recommended for you, and featured charts, with sizing and duplication steps.

Create a low-fidelity footer in Figma by drawing a centered line, applying ash color, and listing grouped links (company, communities, useful links, Shopify plans, about, jobs) in evenly spaced columns.

Convert logos to components in the asset panel, craft a black-and-white low fidelity landing screen, add legal and privacy text, and frame a gradient sign-up bottom nav bar.

Create a low-fidelity login page in Figma with a centered login frame, black gradient background, logo, and three social buttons (Apple, Google, Facebook) using auto layout.

Refine a low-fidelity login page in Figma by aligning elements, adjusting spacing, creating a header bar, applying auto layout, styling fields and the continue button, and noting recaptcha and terms.

Create a low fidelity home page by refining the existing layout, removing signup prompts, updating the navbar, adding an explorer premium button and icons, and finalizing frame with auto layout.

Create the song detail screen by duplicating the home screen, removing elements, importing a logo as a component, then use the F shortcut to build a frame with radius eight.

Design a low fidelity song detail page using frames, auto layout, and typographic controls; adjust fills, radii, text styles, margins, a follow button with stroke, and card layout.

Learn to refine a low fidelity song detail play panel in Figma by adjusting margins, framing elements, adding a logo, and aligning play, sync, and replay controls.

Create a low-fidelity song detail page by shaping line bars, adjusting thickness and corners, duplicating elements, and adding volume, mic, and menu controls with precise spacing.

Design a low fidelity banner for a song playlist page in Figma, adding a banner section, frames, text, logo, and typography details to build a polished user interface component.

Finish aligning and spacing the banner of the low-fidelity song playlist page, add plus and download buttons with precise sizes (48 and 28), use a plugin, and keep framing consistent.

Design a low-fidelity playlist section by placing artist text and images, using bold titles and rounded frames, then align, group, and space elements for a cohesive layout.

Design a low-fidelity song playlist page in Figma by setting up frames and a footer, placing a centered logo with text and durations, and using auto layout for clean grouping.

Create a low fidelity logout page by expanding frames and adding an account menu including profile, upgrade to premium, support, download, and settings.

Transform a low fidelity wireframe into a high fidelity landing page prototype in Figma, using a fixed navbar, vertical overflow, design system colors, and interactive hover-card components.

Design a high fidelity landing page carousel by adding multiple cards, enabling horizontal scrolling, filling each image, and renaming cards with random names for reuse.

Continue refining the carousal-1 of the high fidelity landing page by creating frames, components, and variants, adding left and right arrow buttons, and linking the prototype.

Rename the frame to carousel one, place navigation arrows outside the frame, create a component set, and configure smart animate transitions with visibility rules for edge cards.

Refine the carousel by adjusting card spacing and updating icon buttons in the design system. Prototype interactions with smart animate, linking left and right arrows for hover and click states.

Create a high-fidelity landing page in a Figma ui/ux workflow by turning a card into a component with variants. Link hover prototypes and manage assets in the design system.

Resize frames, clip content, center-align cards, and link frames for a high fidelity landing page carousel with outside-frame arrows, horizontal scrolling, and smart animate transitions.

Design a high fidelity landing page carousel by creating frames, aligning ten pixel spacing, adding left and right arrows, and building a component set for prototype with smart animate transitions.

Create the recommended for you carousel on a high-fidelity landing page in Figma, align cards with a 10-pixel gap, and convert to a component set with smart animate.

Build a high fidelity landing page carousel by creating frames, converting to a component set, and applying on click smart animate with ease out 200 ms.

Create the final carousel on the high-fidelity landing page by turning selections into frames, building a component set, and wiring a prototype that advances to the next frame on click.

Transform the login page by updating the logo, adding Facebook and Google logos, applying green to active elements, and duplicating the screen for prototype use with user at gmail.com.

Modify the home screen by reusing the navbar, changing the icons to orange and white, clipping content, and refining the landing and login pages in the prototype.

Create the high fidelity song detail carousel by duplicating cards, turning frames into component sets, linking buttons, and applying on-click smart animate transitions to prepare for the design system.

Rename carousels to nine and send them to the design system, then reuse these two carousels for the remaining frames. Complete the remaining modifications in the next video.

Complete a high-fidelity song detail page in a figma ui/ux project, covering image upload, color tweaks, clipping, and prototype setup with vertical scrolling and overflow adjustments.

Modify the song playlist page by removing the logo, changing colors to white and orange, adding gradient background with purple hue, and building a new carousel with the Unsplash plugin.

Create a high fidelity song playlist page by turning items into a component set and frames, and prototyping clickable navigation with a 100 millisecond ease-out transition.

Prototype high fidelity wireframes in Figma by adding interactive flows with smart animate, tuning transitions to 200–300 ms, and linking login, social login, and song detail to the home screen.

Navigate the prototype panel to verify the landing screen flows to the home page after login. Copy frames, detach auto layout, and apply orange styling to user interface elements.

Organize your design system by centralizing components and finalize high fidelity wireframes for prototyping a Shopify web app in a complete Figma design project.

Watch a live Figma flight booking app demo, from animated landing to pay now and confirmation, including dynamic pricing and a complete style guide and design system.

Learn to create a new Figma design file, build color and typography style guides, assemble a reusable design system with components, and prototype transitions from low to high-fidelity wireframes.

Create a new Figma design file for a flight booking app, with pages for typography and color style guide, design system, low-fidelity and high-fidelity wireframes.

Build a color style guide in Figma by creating nine color frames with hex codes, naming them, and saving as color styles in the design system.

Learn to build a typography style guide in Figma using the Type Skills plugin, set base font size and scales, and add Inter font weights to the style library.

Finalize a lato typography style guide in figma by creating and naming text styles across multiple sizes and weights, detaching styles, duplicating them, and using the text style generator plugin.

Set up the design system canvas, collect icons with icon and icon set plugins, and import them as reusable components. Convert frames to components in the asset panel for reuse.

Create a low-fidelity mobile app wireframe in Figma, animating a plane with clouds against a gradient background, using assets and the Unsplash plugin, with a design system for reusable components.

Design a low-fidelity landing screen: remove the logo, set sky Len in bold Lato at 40, add a plane icon from assets, and create frames for logo and animation screens.

Create a low fidelity login screen in Figma by duplicating the landing screen, configuring inputs and a login button, and applying auto layout for scalable design and design system readiness.

Apply design system updates to a low fidelity login screen by adjusting button height and typography, adding brand icons with gradients, and aligning components to create a cohesive sign-in experience.

Design a home screen banner in a low-fidelity Figma wireframe with a status bar, banner image, centered text, and logos on both sides as components in the design system.

Modify the low-fidelity home screen by creating a new frame for a horizontal card scroll, renaming sections, and adding a search bar with an icon using auto layout.

Design a low-fidelity home screen feature section under the search bar by adding four icons with titles, alignment, auto layout, and a drop shadow, labeled hot deals.

Create a large hot deals card for a low-fidelity home screen in Figma, featuring circular shapes, dates, a plane logo, dashed lines, and auto layout with a view details button.

Edit the low-fidelity home screen by turning the card frame into a reusable component, adding it to the design system, and creating a centered six-card layout with a five-icon footer.

Use the F shortcut to build a flight detail screen in Figma, adding a status bar, image icon, calendar date frames, and a date selection grid with 32-pixel spacing.

Design a time selection bar for a low-fidelity flight booking detail screen in Figma, using frames, ungrouping, strokes, auto layout, and time slot components.

Design a low-fidelity trip detail section card for a flight booking screen, including adults, children, infants, seat type, cost, and one-way, round-trip, and multi-city options with radio buttons.

Design the trip detail section card for a low fidelity flight booking screen by adding white fills, bold 14 px text, aligned frames, and separation lines within the design system.

Design a trip detail section for a low-fidelity flight booking interface by creating frames, applying auto layout, and styling cost, total, and voucher elements with fills and strokes.

Enhance the flight booking detail screen in the Figma UI/UX project course by turning elements into a frame and component, adding a payment method, and finalizing the pay now button.

Create a low-fidelity booking confirmation screen in Figma, using a frame with a status bar and profile icons, a column grid with 32px margins, and a gradient background.

Continue designing booking confirmation screen in Figma by arranging time text, Bangkok, and plane icon, applying 24 px, 14 px bold, and 12 px typography, with dashed lines and frames.

Designs the booking confirmation section by adding luggage, meal, transport, and service icons from assets, aligning text at 24 pixels in semibold, and creating frames with separators and an arrow.

Refine a booking confirmation screen in figma using auto layout, padding, a white fill, and 16px radius; add a download ticket button with a white download logo.

Design a low-fidelity profile screen in Figma, building a personal details section with a gradient, avatar circle, name and email, an edit profile button, and icon row.

Continue creating the profile screen in Figma by adjusting text, applying auto layout with padding and stroke, setting radii and colors, and aligning components for clean spacing.

Add four information sections—personal, general, favorite, and notifications—to a low-fidelity profile screen using icons and text. Align items with a grid and prepare labeled options for future screens.

Complete the low-fidelity profile screen by selecting and grouping elements, duplicating components, applying black for the profile icon, hiding the grid, renaming the screen, and adjusting height.

Create a reward screen in figma by building a card with a top status bar, 32-pixel grid margins, a 20-pixel title and points, plus expiration date and a globe image.

Add icons from the icons eight plugin, adjust size and color saturation, place a trophy and stars on the low-fidelity reward screen, and duplicate elements to complete the section.

Create a voucher card for a low fidelity reward screen by arranging titles, a top bar, a circle icon, points text, and a gradient reading button using auto layout.

Duplicate and stretch the reward screen cards to enable horizontal scrolling, adjust details and lengths, and then add a view all button while addressing auto layout challenges.

Create a low-fidelity destinations screen with a globe background, zero-visibility frames for text and buttons, a gradient title, and a search bar, then add a section title and grid layout.

Create a destination trips card in an ash frame with calendar logo. Add 32 px circle, sin, a plane icon, and a round-trip button with price using auto layout.

Create reusable destination cards as components for a multi-section low fidelity destination screen with vertical scroll, then finalize the low fidelity wireframe and plan high fidelity iterations.

Convert low-fidelity wireframes into a high-fidelity landing screen by copying screens, applying colors, gradients, and animations, and refining transitions before updating remaining screens in the next video.

Update the login or sign up screen by adjusting gradients, logo color to blue, and input text colors, then replace icons and standardize 32-pixel sizes in the high fidelity wireframe.

Transform the home screen in Figma by adjusting base colors, detaching styles, and layering images and text within the banner frame to create a blue themed home screen.

Complete a high fidelity home screen in Figma by applying blue color and text changes, adding images via Unsplash, and fixing the footer position in the prototype.

Add high-fidelity animations to feature cards on the home screen by detaching styles, creating design system variants, and wiring hover-triggered color changes (white icons on blue base) in the prototype.

Implement a horizontal scroll on the high fidelity home screen by converting cards to components within the design system, then fix color variant issues and adjust frame length.

Update the flight booking details screen by adding a plane image, blue text, and hoverable date cards, then create a component with variants and prototype the hover effect.

Explore hovering effects on date and time slots in a booking details screen by creating component sets with variants and prototyping color changes within a design system.

Explains building a trip cost calculation card for a flight booking details screen, with a design system color update and plus–minus controls that update adults, children, infant, and total price.

Apply conditional logic in a Figma prototype to control traveler counts. Set max and min limits for adults (6), children (4), and infants (2) with plus and minus actions.

Implement a total cost calculator in a Figma UI/UX project by adding adults and children, excluding up to two infants, and wiring plus and minus buttons to update total price.

Create dynamic radio buttons for flight booking that readjust total cost on click, show active states, use Iconify circles, component sets, boolean variables for one-way, round-trip, and multi-city pricing.

Master high fidelity flight booking detail screen by implementing conditional interactions and cost calculations in Figma; build component sets, fixed footer, and design system assets.

Modify the booking confirmation screen beside the flight details by applying a light blue gradient, blue button and text colors, and adding a plane image via the Unsplash plugin.

Modify the profile screen with a white background and bottom gradient, add a circular image, and refine typography using blue base colors, blue button, and blue text.

Modify the reward screen by applying a linear gradient and blue button color. Add white and custom colors to icons and text, and implement a hover background change.

Rename the frame to voucher card, convert it to a component, and create a black variant; connect the prototype on hover and add circular Unsplash images across copies.

Modify the destination screen by adjusting text, applying a gradient with color codes via the color picker, and refine the card with updated images and opacity.

Learn to refine a destination screen in a high fidelity Figma project by selecting frames, swapping images, adjusting cards and footers, and preparing for the next video.

Place a plane image in a small rounded card frame to finalize high fidelity destination cards, then set up transitions between card components in the next video.

Modify destination cards by editing titles and costs; create a horizontal scroll for popular destinations; duplicate and align cards, convert frames to component sets, and prototype drag with smart animation.

Create and manage the favorite destinations list by turning frames into a component set, prototyping drag connections with smart animations (200–300 ms), and syncing components to the design system.

Design a historical places cards carousel in Figma by turning frames into component sets and swapping images with the Unsplash plugin. Set fixed status bar and footer for prototype overflow.

Organize your design system by aligning elements, finalizing button hover effects with a variant, and linking prototypes to reflect hover color changes.

Learn to add transitions in a high fidelity wireframe by prototyping screens with after delay triggers, timing, smart animate, and dissolve effects for a polished app flow.

Master high-fidelity prototyping by connecting screens in a flight booking flow, linking icons and controls to destination, profile, rewards, and login screens with smart animate transitions.

Create a color style guide in Figma by defining primary, text, and background colors, then generate shades to support a consistent design system.

Master typography style guides in figma using the typeface plugin, set base size 12 with 1.2 minor third scale, and create h1, body, and micro text styles.

Collect icons from Icon Park, Remix Icon, iva icon, and Feather icons into a design system frame in Figma, rename them, and create a reusable multi-component icon set.

Design a button system within a design system, creating four variants with icons, padding, radius, color, and typography, organized as a component set.

Design a top navbar for a design system in figma, featuring a profile image, text, bell and card icons, auto layout, style-guide colors and typography, and component creation.

Design a bottom tab bar with home, orders, favorite, and profile icons and labels, optimizing alignment, gaps, margins, and padding for a scalable component set.

Develop a reusable input field in a design system using Figma, auto layout, icons, padding, corner radius, fill, stroke, and a component set with text and boolean properties.

Craft a feature card for a home page within a design system, using a three-grid layout, image, title, price 8.00 and icons, and components with auto layout and instance properties.

Develop a categories card for the home page within a design system, using reusable icon components, auto layout, color and typography, and variants for default and deselect states.

Design a popular home page nav card within a design system using a two-grid layout, image in a shape, a title, and icons.

Design three splash and onboarding screens for a food delivery app using a shared frame, logo from the design system, Lottiefiles animations, typography, auto layout, indicators, and reusable components.

Design a login screen in Figma with a brand logo, title 'Login to your account', username and password fields, remember me, forgot password, login button, and Facebook, Instagram, LinkedIn icons.

Design the sign up screen by reusing the login screen, updating inputs for full name, mobile, email, and password, and adding sign up and login options with icons.

Design a home screen for a food delivery app featuring a top nav bar, a save up to 50% banner, and a search field with icons.

Complete the home page by adding a search field and category section, adjust typography and spacing, place design system category and feature cards, and finalize a bottom tab bar.

Set up a common Figma frame in iPhone sizes, apply a four-column grid with margins, and create top and bottom bars; duplicate for a high-fidelity page and reuse across screens.

design an order screen for a food delivery app in Figma, with a back button, header, profile image, three status buttons, order card with price, and a tab bar.

Design a complete favorite screen by building reusable favorite cards like kebab burger with a 4.8 rating and 15.00 price, using icons, auto layout, and an active favorites tab.

Prototype a multi-screen flow in Figma by duplicating a high fidelity page, connecting onboarding, login, sign up, and home screens with smart animate and active tab states.

Watch a live demo of a coffee shop app design in Figma. The walkthrough covers wireframes, design system, prototyping, interactive screens, and checkout flow.

Learn the Figma interface by creating a new design file, customizing a blank canvas, using iOS and Android libraries, and mastering core tools for frames, shapes, pen, text, and exports.

Learning to build a typography and color design system in Figma, this lecture uses the stylist plugin to set font families, sizes, and color palettes for a cohesive app design.

Create and organize your design system in Figma for the coffee shop project by naming pages and framing fonts, colors, and icons, using royalty-free svg assets from the community.

Demonstrate how wireframes guide a coffee shop app design, detailing the home, cart, checkout, item details, and waiting time pages, then move to high fidelity design with a design system.

Learn to create a simple wireframe in Figma for a coffee shop app, then convert wireframes into high-fidelity designs and prototypes with consistent spacing, layout, and category filters.

Master grid lines and rulers in Figma to align frames, margins, and shapes for a coffee shop UI on iPhone 13/14, ensuring spacing and proportion using pixels as guides.

Extend coffee shop wireframe by building the cart page and naming screens in Figma. Add dummy text with a lorem ipsum plugin to describe items, prices, and the checkout button.

Design three wireframe pages in Figma, including a checkout page with item details, order summary, and payment options, using copy-paste alignment to prepare for high-fidelity design.

Explore high fidelity design in Figma for a coffee shop app: set up frames, use the eyedropper for fills, and create a cohesive home page with rounded shapes and illustrations.

Design a coffee shop homepage in Figma with high fidelity, using Poppins, a design system, and a beige and green palette, plus a location field and three category boxes.

Design a high fidelity homepage in Figma by adding category labels and offers. Create a reusable button component, align elements, and add coffee imagery with the Unsplash plugin for filters.

Design a coffee shop home page in high-fidelity, adding filter categories with a selected state, four image cards from Unsplash, and gradient price tags.

Design a reusable add-subtract item component and a bottom navigation bar for a coffee shop ui in Figma, aligning home and cart icons and building a scalable design system.

Design a high-fidelity product page in Figma for a coffee shop app, detailing image, name, price, ratings, quantity controls, and checkout with consistent design language.

Create a high-fidelity coffee product page in Figma by adding icons, a four-star rating with ratings count, descriptive copy, size options with plus/minus controls and prices, and a checkout button.

design the cart page in a high fidelity figma prototype, building a clean, easy to navigate cart with item listings, prices, quantity controls, and a delete option.

Designs the checkout page in high fidelity using Figma, builds the cart with items, enforces uniformity, and collects name, email, phone, address, and payment options (card or cash on delivery).

Design a high-fidelity checkout page in Figma by adding cash and card payment icons, an order summary with the total amount and delivery charges, and a place order button.

Design a high-fidelity waiting time page in Figma that shows order status with a three-stop timeline—processing, rider pickup, delivered—and centered text with a go back to home page button.

Design a high fidelity waiting time page for a coffee shop app in Figma, add final details, implement a blur effect on the checkout screen, and prep prototyping.

Organize your Figma file by separating wireframes, high fidelity design, and a prototyping page, then link screens in prototype mode for iPhone 13/14 to navigate home and cart.

Prototype a coffee shop app in Figma from wireframes to high-fidelity design, linking product pages to the home page and validating cart, checkout, and place order flows with vertical scrolling.

This demo shows building a figma event management app, detailing style guides, text and color styles, low- and high-fidelity wireframes, and an interactive prototype from landing to map and profile.

Open Figma, create a new design file named event management mobile app, and set up pages for style guide, design system, wireframing, and prototyping to complete the initial setup.

Build a text style system in Figma by creating a style guide, applying typography and color styles, and using the type scale plugin to generate H1–H5 variants.

Create a color style system in Figma by framing a color palette, using the color generator plugin, and defining violet and grey color styles for high- and low-fidelity work.

Create the design system elements for a brand logo within an iPhone 13 mini reference frame using a four-column grid, shapes, color, and a reusable component in assets.

Use a Figma plugin to search and select icons, import them as frames at 32 px in black, then create multiple components from home, cart, search, calendar, location, and more.

Import an iPhone status bar from the Figma community, detach its instance, convert it into a bottom navigation bar component, and assemble home, event, and profile icons with auto layout.

Create login and booking buttons with h4 semibold typography, auto layout frames, and padding, fill, and stroke. Turn buttons into default and hover components for reuse in future high-fidelity wireframes.

Design a functional search bar for the home screen by styling a text label with a magnifying glass, applying auto layout, padding, stroke, and turning it into a component.

Create login input fields in Figma by building username and password fields with auto layout, a visibility icon, remember me, and forgot password options, plus a styled login button.

Design a posted message card for an event page in Figma using auto layout and gradients. Integrate a profile image and reply count, and turn layout into a reusable component.

Create a map description card in figma using auto layout, h5/h6 typography, filler text, and distance details, then add a start direction button and convert it to a reusable component.

Create a title card for map screen by adding event title, location, distance 3.8km, and a location logo, then apply auto layout, padding, gaps, and convert it into a component.

Design and assemble an event card in Figma, including an image, event title, location, time and date, and a details button, with frame, color, and auto layout techniques.

Create a large home screen card in figma using auto layout, add title, location, date, and people icons, apply radius and effects, then convert to a component.

Create small home screen cards in Figma by framing, adding text with h5 semibold and logos, then apply auto layout and convert the design into a reusable component.

Organize your design file into labeled frames for cards, input fields, status bars, nav bars, and logo and image to prepare low fidelity wireframes and build a design system.

Build eight low fidelity screens for a mobile event app, starting with a simple landing page featuring a centered logo and a skip button on an iPhone 13 mini frame.

Design a low-fidelity login screen in Figma for an iPhone mini frame, featuring a top logo, login input, and a wavy gradient created with the pen tool and bend tool.

Create a centered login screen by resizing the logo, adding a welcome heading and input field, and offering social or email logins with a highlighted sign up prompt.

Create the app's home screen using vertical scrolling, a four-column grid with 20px margins, and top and bottom nav bars, plus a profile area with image, name, and welcome text.

Build a home screen in Figma by organizing frames, placing top and bottom nav, using auto layout for large and small cards, and adding filter chips and a notification badge.

Create a low fidelity event screen in Figma by laying out a frame, grid, top and bottom nav bars, back button, calendar, and event cards with auto layout.

Design an event details screen in figma, building a framed image card with calendar, booking button, and title using auto layout and precise spacing.

Design a low fidelity event detail screen featuring a map link, location label, date and time, guest count, horizontal auto layout for guests, and reusable message cards.

Adjust the low-fidelity guests card section on the event detail screen by ungrouping elements, adding name and role texts with h5 and h6 styles, and refining spacing.

Explore constructing a low fidelity ticket purchase screen in Figma, creating a cart layout with image cards, event details, auto layout, and precise spacing for a clean, job-ready UI.

Create a low-fidelity ticket price breakdown section by laying out ticket price, discount price, and vat details with auto layout, typography, and a gradient separator line.

Design a low fidelity optional cost breakdown section for an event management app, including hotel, travel, food, and pickup costs per person, with radio buttons and auto layout alignment.

Design a low fidelity payment method section by arranging text, a circle logo with a stroke, a plus button, and an auto layout frame to display total pay 25.70.

Display the total payable amount and ticket price with a 2.5% fee, using auto layout and frames. Add a buy button and gradient fade to emphasize the optional cost breakdown.

Design a map screen with a large map, top and bottom nav bars, a search bar, title and description, logo and compass icons, adjusting color, all using a grid system.

Create a low-fidelity profile screen in Figma with top and bottom bars, back option, four-column grid with 20px margins, profile image, and an edit icon via Iconify using auto layout.

Design a low fidelity user profile screen in Figma by adding separators and gradient lines, labeling sections like search history, wishlist, and tickets, and arranging with auto layout and spacing.

Apply gradients and color blocks to a low-fidelity user profile screen in Figma, adjust auto layout, rename frames, and prepare a high-fidelity wireframe framework with all screens ready.

Master low fidelity wireframes and transition to high fidelity designs by following updated practice videos. Stay tuned for the next steps toward high fidelity wireframes.

Transform a low fidelity wireframe to a high fidelity landing screen by adding a dark background and adjusting logo colors.

Create a high-fidelity login screen by applying a gradient background, adjusting input fields with opacity, and refining logos, strokes, and four centered inputs with image uploads and hover/active states.

Duplicate the low fidelity home screen to create high fidelity version, then populate pages. Update the navbar color, remove the logo frame, upload images, and enable horizontal scrolling of cards.

Modify color states and visuals for Figma UI/UX cards, selectively edit text and logos, apply changes across copied cards, and place all cards on the home screen.

Place and frame multiple cards in the home screen, enable horizontal scrolling, apply consistent card effects with blur and color, and test on an iPhone 13 mini prototype.

Adjust the home screen colors for the title and cards: dark active and hover. Align card heights, remove nav bar, and set layout to iPhone 13 mini.

Transform low fidelity wireframe cards into high fidelity home screen cards by adjusting hover colors and icons, removing logos, duplicating items, and adding images with titles, locations, dates, and times.

master building a high fidelity home screen in figma by arranging a navbar, framing small cards, enabling vertical overflow, clipping content, and applying gradient and stroke for a polished wireframe.

Recolor the stroke and apply hover states on cards. Create and duplicate the event screen for the high fidelity wireframe, then hide the grid system and refine top nav colors.

Modify and arrange six event cards in figma, align and group them, apply dark active and light purple colors to titles, location, and buttons, add images sequentially, removing the logo.

Design high fidelity event cards by detailing organizers, event types, and locations across multiple entries to complete the user interface for a real-world application.

Refine a high fidelity event screen by arranging cards, converting to frames, clipping content, resizing, and prototyping scrolling. Adjust bottom nav colors, stroke, and icon states for a polished UI.

Create an event detail screen with a top nav bar, gradient image, contrast, glass effects, and sponsor branding for a Bihar, India event on December 9 at 9 p.m.

Build a high-fidelity guests section on the event detail screen in Figma, styling guest cards, adding images and roles, and enabling horizontal overflow in the prototype.

Transform to high fidelity message section by refining card design in Figma: adjust colors, gradients, corner radius, remove logo, duplicate cards, and add people images using the Unsplash plugin.

Create a high-fidelity event detail screen by naming users, simulating posts, grouping cards, and building a vertically scrollable prototype with a navbar and ready comment section.

Refine the event detail screen by aligning imported text to the existing H5 style, placing it precisely, and softening the pink linear gradient through opacity tweaks.

Transform the ticket purchase screen to high fidelity by duplicating the screen, hiding the grid, adding a concert image, and refining top nav, title, hover colors, and the gradient.

Finalize the ticket purchase screen by adjusting text and button colors for dark and light contrast, adding visa and mastercard icons, and applying a top stroke for the active state.

Learn to build an interactive high-fidelity map screen in a Figma project by converting a low-fidelity wireframe, integrating a map image, and fixing UI elements for smooth, independent map scrolling.

Master finalizing a high fidelity user profile screen in Figma by customizing logos, colors, and strokes, detaching instances, and applying auto layout for a polished wireframe.

design a high fidelity map screen by arranging cards, tuning the top nav bar color, applying light hover and glass effects with opacity, and refining logos, text, and strokes.

Transform the profile screen to high fidelity by adding a user image, dark active hover colors, and icons (email, card, location, calendar) with Iconify, then convert elements into components.

Add a gradient to improve color contrast, adjust the baby pink opacity, set logo fills to light and apply a dark hover with inner logos in purple at 36px height.

Make minor readjustments to card layouts, replace screens, duplicate and organize cards into a dedicated high fidelity wireframe, then create a prototype page for future prototyping.

adjust cards for smaller widths, move cards to a high fidelity wireframe page, and prepare a prototype page for upcoming prototyping.

Duplicate components on the high fidelity pay page into the prototype page, then build a live animated landing page background with ellipses and blur, and name the states.

Build a seamless landing page flow in Figma by turning frames into a component set, prototyping connections, and applying a 1 millisecond delay with smart animation for a continuous transition.

Animate heart icons in Figma by changing color on click, using a component set and a 300ms linear prototype, then toggle between liked and default states.

Add animated transitions between landing, login, and home screens in a Figma ui/ux project, using on-click triggers with dissolve and slide-in effects and ease in and out, at 400–800 ms.

Prototype transitions on the event screens use back and home logo with dissolve in 400 millisecond, and detail, ticket, and profile buttons slide in with ease in or out.

Prototype the event detail screen by linking back, cart, home, profile, event, ticket, and purchase navigations with transitions such as slide, dissolve, and gentle smart animations in 300–600 ms.

Add a back button to the purchase screen with a 400 ms dissolve transition, linking the map, profile, home, and event screens in the same prototype.

Refine the high fidelity wireframes by adjusting the landing, purchase, and map screens, replace dummy text with real content, apply color changes, and finalize the prototype across states.

Learn to build a Netflix clone web app using Figma, from style guide and design system to typography and color styles, high and low fidelity wireframes, prototyping, and page transitions.

Create a new Figma file, establish a typography and color style guide, and build a reusable design system for a Netflix clone UI.

Create a Netflix app clone in Figma by building a multi-page design file with typography, color system, design system, and low- and high-fidelity wireframes.

Create a color style guide in Figma by building frames for a white, red, and gray palette, assigning color styles, and testing updates across frames.

Learn to create a typography style guide in figma using inter and instrument fonts with the type scale plugin, generating and adjusting sizes from 12px to 160px and bold variants.

Build a detailed typography scale by defining sizes from 64 to 12 px across weights—regular, medium, semibold, bold, and extra bold—using rg labels and Inter typography, Min Sharif.

Learn to apply text styles in Figma by copying typography, pasting into text styles, and creating reusable styles for consistent typography across four apps, boosting design consistency and efficiency.

Explore adding icons to a design system with the iconify plugin, import them as components for reuse, and organize assets for low and high fidelity pages.

Design a low-fidelity landing page navbar in a wireframe, using MacBook Air canvas, with logo, sign-in, email input, and get started buttons, plus auto layout.

Add center-aligned text for a low fidelity landing page. Convert to frames with auto layout and add an email input and get started button.

Detach the style, refine the low-fidelity landing page with the pen tool, apply a gradient stroke and fill, add a bottom frame, and rename to landing page.

Design a low-fidelity netflix plan screen that showcases standard and premium plans and their costs, using frames, borders, and four cards with bold typography and precise alignment.

Design a low-fidelity plan card by styling monthly price text, font size, color, and arranging video and sound quality, resolution, and devices with consistent spacing.

Design a low-fidelity plan card in Figma by creating text elements, a tick mark, and circular indicators, then assemble cards in a framed, evenly spaced layout.

Modify low fidelity plan cards in a Figma project by adjusting resolution and pricing, and copy Netflix terms and conditions text to design a styled call-to-action button with auto layout.

Design a low-fidelity footer in Figma by creating four sections of information, styling text with 16 pixels semibold and 14 pixel medium gray, grouping items like contact us and FAQ.

Align and center a low-fidelity plan purchase page footer, create a gray language transfer button with a dropdown, and apply auto layout, padding, and stroke for a reusable footer design.

Create a low-fidelity profile page in Figma by building a profile selection grid with tiles, typography, icons, and a manage profiles button.

Design a low-fidelity home page navbar in Figma, building a left logo and nav items (home, tv shows, movies, genres) with a right search, bell notification, profile, and dropdown.

Complete the home page nav bar by grouping frames, converting to auto layout, and setting horizontal spacing to 130 with 56 padding and top 26 and bottom 18.

Complete the low fidelity banner section by applying auto layout, framing, color choices, logo placement, lorem ipsum text, and play/pause buttons to prepare the homepage design.

Extend the low fidelity home page with a gradient background and a 'your next watch' section featuring a 314 by 167 frame, a logo, and a horizontal scroll bar.

Design a continue watching horizontal section on a low fidelity home page by creating gray-text cards, a play/pause icon, and a set of cards in a scrollable row.

Create the top trending movies section for the low fidelity home page by duplicating and resizing cards, adding images and serial numbers, and clipping content inside frames.

Create popular action and Hollywood movies sections by duplicating frames, arranging four cards with 20-pixel gaps, grouping into popular action movie cards, and clipping the frame before adding Hollywood section.

Design a mobile games section in a low-fidelity wireframe with square game cards, posters, and genres, then add sections for popular Asian movies and watch with family, plus a footer.

Create a footer on the low-fidelity home page by duplicating the existing one and making it transparent. Add gray vector arrows and prepare for a dropdown logout menu.

Create a drop-down menu in a low-fidelity wireframe home page by detaching styles, rotating elements, and configuring profile images and navigation items like help center and sign out.

Create a drop-down menu on a low-fidelity home page by grouping two options, adjusting colors from white to gray, refining alignment and length, and preparing home page two variations.

Duplicate the home page to form description page, apply a 20% opacity dark layer with background blur, and add a Netflix vibe banner, text, and a close icon via Iconify.

Add and align text and play and download buttons in a low fidelity wireframe page, using auto layout to create a 510 by 64 button pair with 4 px radius.

Add series descriptions, cast, creators, and genres to the low-fidelity wireframe description page, pull text from ChatGPT, and place rate and share icons with 20px bold and 18px medium gray.

Continue adding elements on a low fidelity description page, aligning text like episodes and trailers, and building a season one button with 24 semibold typography and a rotated dropdown icon.

Create episode cards in a low-fidelity details page using Figma. Frame a 356 by 216 rectangle with a four-pixel radius, add episode title, description, duration, download, and play-pause.

Create multiple episodes with proper framing, partitions, and lines, duplicating elements and refining distances to improve the details page design in a low-fidelity wireframe.

Design a low-fidelity video pause screen in Figma, featuring a dedicated video page, gray-stroke title, and three aligned controls for thumbs up, double thumbs up, and thumbs down.

Add play, backward, and forward icons from Iconify to a center-aligned low-fidelity paused screen using the design system, then create a gray time bar with a shape line.

Design a low-fidelity paused video screen by labeling controls (speed, episodes, audio and subtitles, next episode, full screen), resizing icons to 20px semibold, aligning groups, and planning the play screen.

Create the play screen in a low-fidelity wireframe by simplifying controls, adding a pause button, resizing icons, and organizing the design file before moving to high-fidelity wireframes.

Convert your low fidelity wireframe into a high fidelity landing page by copying screens, adding colors, gradients, and assets, and placing logos for a realistic UI prototype.

Edit a high-fidelity landing page by adjusting the stroke to red and lowering opacity to 20%, then apply a purple blue gradient to refine the design.

Transform a low fidelity wireframe into a high fidelity purchase plan page by refining the navbar, applying gray strokes, and adding gradient colors for a polished UI.

Modify the profile page by updating the button stroke to gray, removing a field, and recoloring text to gray elements; replace icons with a gray avatar image via fill options.

Modify the home page navbar to improve visibility by widening and centering the notification badge. Replace logo, add an avatar, and apply white and red accents with a drop shadow.

Create a horizontal scrolling carousel on the home screen by duplicating eight cards, adding images, clipping content, and sizing frames to fit within the home screen frame.

Create and arrange carousel indicators in a high-fidelity home page in figma, group frames into a component set, and prototype navigation with left and right arrows.

Learn to prototype a high-fidelity home page carousel in Figma by connecting frames, adding on-click smart animations with ease out and 400–600 ms, and testing visibility for edge cards.

Create the continue watching carousel by ungrouping and duplicating four cards, removing the logo, and adjusting colors with code 363636. Upload background and card images and fine-tune lengths for realism.

Create and refine a carousel in Figma by grouping frames, applying clipping and tint, then convert to a component set and enable horizontal drag with smart animate.

Modify the top trending now section by upgrading from a low to high fidelity wireframe, extend the carousel to ten items, and adjust spacing and alignment.

Finish the top trending carousel by adding a tint, clipping content, and duplicating cards; set up component sets and a drag prototype with smart animate ease out 600 ms.

Create an action movies carousel in a Figma design system by grouping, framing, and turning images into a component set; connect frames with on-click navigation and smart animation.

Create and refine the action movies carousel by selecting, grouping, ungrouping, and adding frames and posters. Rename to old movies cards, adjust length, clip, and prep for the next video.

Organize the Hollywood movies carousel by placing side frames outside the main frame, duplicate the carousel frame, and convert selections into a component set for the next mobile gaming section.

Update the carousels for Asian and Hollywood movies by duplicating sections, swapping images, and fine-tuning placements, then prepare the mobile games section for the next video.

Create a high fidelity mobile games carousel by ungrouping elements, removing the image icon, adding images from the image folder, then grouping and resizing; next video continues the work.

Convert cards and frames into a component set and apply a 600-millisecond drag prototype. Bring game cards from the asset panel into purple carousels and align with the design system.

Modify the home page by deepening the gradient to black, apply color codes 292929 and 010101, adjust sizes to 80%, clip content, and refine the drop shadow for desktop preview.

Add a logout modal card to the homepage with profile switching, manage profile accounts, and sign out options, using grey light and white on a dark background.

Duplicate the high-fidelity home screen to build the details page, apply a blur background, manage three frames, and refine the design with a white stroke and color accents before continuing.

Refine the high fidelity details page by adjusting colors, typography, and assets in the Figma project, add white and gray text, apply hex colors, and include images and logos.

Modify the two screens to feature a video screen with a 19-second video, adjust text and icons to white, add a red stroke and tinted background for a cohesive look.

Create interactive prototypes in Figma by aligning screens and linking on-click navigations with smart animate (ease out, 300 ms) across a Netflix app clone.