Figma Mega Course - Design 6 Complete Web App UI/UX Project

Learn to design image-driven user interface by using the rectangle tool to create frames, place images, apply strokes, and adjust exposure, lighting, saturation, and shadows for cards.

Learn to use the layout grid system in Figma to align items, set columns and rows, adjust spacing, and customize grid color and shadow for consistent UI design.

Build a reusable grid system in Figma using column and raw grids to ensure consistent starting points across frames, enabling design system creation and easy style reuse.

Learn to create a frame, group multiple items for reuse, move the group together, rename it, and duplicate with control g and control d.

Learn how to design and reuse a color system in Figma by creating named color styles for background, button, and success messages, enabling global updates across frames.

Learn to create a Figma design file for a web app, set a 1440x1024 desktop frame with a 20-column grid, and design the header, user list card, and messaging area.

Design the header and sidebar, create avatar ellipses with name, message, and time in each user list item, and build a scrollable list of user cards with icons.

Learn to group user list items, build a vertical scroll area with auto layout and clip content, and enable vertical prototype scrolling, preparing a model box for deletion.

Define a delete frame with rounded borders, add delete and unfriend buttons, and group them. Link the trigger to an overlay, set placement, instant animation, and enable outside click close.

Design the main message layout for a chat user interface, adjust frame heights, add image, name, time, and message sections, and create a component for repeated chat items.

Design a sign up and sign in interface in figma with a framed form, three inputs, a sign up button; prototype navigation between sign up and sign in.

Apply prototyping with animation by creating a logout overlay, wiring interactions to sign in and home pages, and using move-in and overlay transitions to simulate navigation.

Share your figma project with the team using the share button, assign edit or view roles, and manage access with link settings. Export frames as png, jpg, sbc, or pdf.

Design a music player web app prototype with a sidebar, album and music lists, plus a modal for creating albums and a login button.

Design an album list using a grid system, create and arrange reusable album cards with background colors, a dashed stroke, and a music icon, then tidy spacing for consistency.

Design a modal dialog in Figma with a create album frame, input, placeholder text, and save/close controls; prototype an open overlay with background and outside-click close.

Design a music card and list in a web app UI using Figma, aligning icons, typography, colors, and gradients, then group, duplicate, and export for sharing.