Figma UI/UX Design: Web and App Design with Projects

Explore color theory fundamentals, learn how color wheels, primary colors, and RGB/CMYK models shape harmonious palettes for UI design using complementary, split‑complementary, analogou,s triadic, and monochromatic schemes.

Fill objects and build a color palette in Figma using hue, opacity, hex values, and RGB. Create gradients—linear, angular, and diamond—and manage image fills, tiling, and basic edits.

Learn to generate color palettes in figma with the color compass plugin, adjusting base colors, tints, shades, harmonies, and blends to export cohesive palettes.

Review key takeaways from the course and access essential resources for projects in Figma UI/UX design for web and app design.

Learn to create and customize strokes in Figma by adjusting color, opacity, and thickness, with inside, outside, center alignment, side-specific options, and cap styles.

Explore the line tool and arrow tool to create lines, arrows, and icons, adjust width and rotation, and modify starting points, cap, join, and stock properties with frames and grids.

Learn to create ellipses and circles, position with x and y, resize with width and height, rotate, and use sweep, ratio, and start controls to shape partial circles.

Learn to create polygons and stars in Figma, adjust position and size, rotate, control corner radius and point count, and apply fills from solid, gradient, or image.

Learn how to directly place an image inside an object in Figma using the save tool, resize to 200, and crop with the option key.

Compare raster versus vector graphics and learn to create vector shapes in Figma using the pen tool and pencil tools, manipulating curves, handles, symmetry, and fill colors.

Explore auto layout basics in Figma by adding auto layout to elements, adjusting horizontal and vertical padding, and mastering alignment within frames to control how shapes behave.

Explore auto layout in Figma by arranging ellipse elements with spacing modes, including packed and space between, adjust stacking order, and learn how strokes and padding affect canvas stacking.

Explore how components work, including master and child components and instances, enabling reusable UI elements across your design; changes on the master propagate to all instances.

Explore how variants work in Figma by transforming a single button into light, dark, main color, and disabled states using a master component, auto layout, and the asset panel.

Design a startup website in figma, building the nav bar, home with email signup, course detail cards, main details, a feature page, and a social footer.

Design an EdTech navbar in Figma by creating a site frame with a 6-column grid, aligning items using the ruler and auto layout, and applying typography and color styles.

Design an edtech home page in figma with an image on the right and a sign-up button on the left, using a global design system, grid, and auto layout.

Design a detailed course detail page in figma by building a 900-pixel desktop frame with three class cards, overlays, typography adjustments, and a filter slider.

Duplicate the frame to create the section four mentor details page, rename the main detail section, and populate three mentor cards with world class mentors using the splats plugin.

Learn how to build a web page section in Figma by duplicating frames with option-drag or copy-paste, arranging frames with grids, and applying fills, typography, and design system styles.

Design a travel agency website in Figma: home page with search bar and navigation, activities list with icons, client testimonials, image gallery, and a newsletter subscription.

Design the travel agency home page in Figma with a header, logo, and search bar, add a hero area using a background image, and set auto layout for navigation.

Explore practical methods to choose a color scheme for your project, from client guidelines and palette generators to Figma plugins that extract and export color palettes.

Fill the color palette into the design system, copying from dark green to light greens and applying them to the circle, list, text, and icons; next, design the code page.

Design a client testimonial page in figma by constructing a frame with heading, image, and paragraph, adding navigation icons and auto layout for a cohesive prototype.

Design the travel agency footer with an image, a newsletter signup input, and a subscribe button beneath the destination frame, using a dark green background and a 10 px radius.

Connect all pages into a Figma prototype by placing frames in a main frame and aligning edges without overlap. Rename pages, select multiple frames with command, and start the prototype.

Design the next UI/UX designer portfolio project with a map bar, about page, workspace, block page, and contacts, including a designer intro with CV download and a contact form.

Design and prototype the about page of a portfolio site in Figma, using frames, auto layout, a six-column grid, typography from Google Fonts, a blue primary button, and image/text cards.

Design a work showcase portfolio page by arranging frames, headings, images, and project highlights with auto layout and grid, applying work sans font, blue styling, and Sigma exporting workflows.

Design a blog page in Figma for a web and app design course, using frames, 610 by 400 sizing, image fills with radius, typography tweaks, auto layout, and prototype.

Connect and arrange pages in Figma to form the portfolio design frame, export as a jpeg 1400–2800 px, and upload to Behance with the ui ux portfolio design title.