Determine a desktop content width around 1140-1200 pixels and use flexible white space to fit screens from about 1300 to 2000 pixels, illustrating responsive design.

Create a frame, a container for your website, on a 1440 by 1024 desktop canvas in Figma, and master hotkeys for copy, paste, undo, and redo.

Learn to use a frame-based grid system in Figma, with a 12-column layout, margins, and gutters to keep main content contained and guide element placement.

Explain stretch vs center grid in figma, show how 12 columns with 24px gaps and 150px side padding yield responsive grids as frame width changes.

Learn to add images and shapes in Figma, manage layers from top to bottom, use rulers as guides, and keep content inside frames with an 800-pixel hero section guideline.

Learn to work with text in Figma: create inline and block text, control frames, and tune fonts, line spacing, letter spacing, and alignment for precise typography.

Learn how to group layers into frames in Figma, rename layers using neural networks, and apply frame constraints to keep content aligned when resizing a website layout.

Explore presentation mode in Figma and common layer visibility issues during prototyping. Use hotkeys like Ctrl/command and square brackets to select inner elements and adjust layer order.

Learn how to save, share, and back up figma files by using automatic saves, share links with view permissions, duplicating to drafts, offline copies, imports, and version history.

Clarify the difference between UI and UX, and how designers combine them. Focus on UI as the visual look of IT products and UX on ease of use for tasks.

Extract color palettes from images to create harmonious web designs, using main tones like reddish brown and cream, and apply them to backgrounds and headings in Figma.

Pick colors from an image in figma using the eyedropper on a selected element, aiming for the most common color. Refine with fill and simple effects, then share your results.

Explore how to use the color picker in figma, comparing hsv/hsb and hsl, and adjust hue, saturation, and brightness to optimize readability and design with hex and rgb codes.

Learn to design a dark site background by choosing colors from real life, favoring blue tones instead of 100% black, and using hex codes and color tools.

Discover gradients in Figma, learn to create linear and radial gradients by adjusting color points, positions, and opacity, and explore how fills, appearance, and opacity interact.

Learn the 60/30/10 color rule for web design—60% primary, 30% secondary, 10% accent (three colors maximum)—and explore inspiration on Pinterest and Behance while keeping color use simple and harmonious.

Color three website layouts using the 60 to 30 negative ten rule in practice 2. Experiment with gradients and not fully saturated colors, using layers and eyedropper to refine accents.

Learn the differences between vector and raster graphics, including how vectors scale infinitely and how rasters like jpg and png use pixels and alpha channels for transparency.

Learn how to pick high-quality, realistic images for web design, avoid fake photos, and source authentic visuals from Unsplash, Pexels, and Freepik, including AI-generated options.

Learn to darken images in Figma to boost text readability using overlay fills or shapes with opacity and gradients. Practice image toning and the clip content button for frame boundaries.

Explore adding images in Figma, inserting into shapes or containers, tinting and toning with fill, fit, crop, and tile options, color corrections and overlays to control exposure, contrast, and saturation.

Practice toning and shading five images using highlights, temperature, contrast, exposure, and color adjustments. Experiment with stock photos or your own images, share results in the comments.

Explore the extreme cropping technique in Figma to crop images to the most meaningful parts, using frames and clip content to create striking, focused banners.

Practice extreme cropping in a UI/UX design context by cropping with frames, adjusting gradients and color from the image, ensuring readable text, and assembling banners with copied placeholders.

Apply the soft cropping technique, a gentle pruning method, by overlaying color or gradient to trim images and interface elements while preserving harmony.

Practice soft cropping in figma by tinting three images with layered gradients, adjusting tones, and building multiple layers to master smooth transitions.

Learn how to select and apply icons for cohesive UI design, from stock icons and SVGs to drawing custom icons in Figma for consistent style.

Learn to create your own icons in Figma by tracing a paid icon, drawing with vector shapes, and using union and subtract to craft a pixel-perfect result.

Explore advanced stroke techniques in Figma, including arrows, lines, triangles, stars, varying stroke thickness, inside/center/outside alignment, and gradient effects to create precise icons and coherent UI elements.

Explore neural networks in the paid version of Figma to remove backgrounds, boost image resolution, and edit images directly in the UI, including recoloring hair and generating simple images.

Explore neural-network image features in Figma (paid version), using Freepik's AI tools to generate, edit, recolor, and upscale images, plus video and lip-sync options for web design.

Discover the basics of auto layout in Figma, a wrapper that groups elements for vertical or horizontal alignment, with padding and spacing controls to create tidy layouts and hug contents.

Master auto layout in this practice, covering wrapping, fixed width versus fill container, 40 px gaps, and 70 px padding to arrange elements in two rows, two columns in Figma.

Master the pen tool in Figma to draw vector shapes, adjust points and handles, create curves, and edit vectors with the Alt/Option key and Ctrl Z shortcuts.

Master vector drawing in Figma using the pen, brush, and pencil tools, switch between design and drawing modes, and use shape builder and boolean operations to create complex illustrations.

Practice using the pen tool to draw shapes, refine with edit mode, paint tool, and shape builder to touch up, combine, or subtract elements into cohesive icons.

Learn to create patterns in Figma by turning vector elements into radial repeats and circular patterns, then adjust gaps, scale, and fills with color, gradients, or images.

Learn to turn vectors into stretchable and pattern brushes in Figma, creating versatile brush patterns. Master text along a path for logo design, including text on outlines.

Explore the differences between frames, groups, and auto layout in Figma, including how frames act as wrappers, how groups differ, and how auto layout optimizes alignment, spacing, and padding.

Create the next section of the website by arranging text elements with typography settings and auto layout, copy-paste content from foresight file, and group into three columns with spacing.

Learn spacing rules for web design by distinguishing margins and padding, applying the proximity principle, and using a four-pixel system where outer margins exceed inner margins.

Fix spacing across two landing pages using auto layout, spacing tables, and alignment rules to create consistent navigation, headings, buttons, and text with precise pixel values.

Learn to implement an eight-pixel (or four-pixel) grid for consistent spacing, using layout guides to define columns, with all measurements as multiples of four for pixel-perfect, scalable interfaces.

Learn how to create and apply styles in Figma to manage colors and typography across a layout, group styles in folders, and update every element automatically when a style changes.

Create the next section in a Figma UI by building a four-column grid, adding a heading and descriptive text, and arranging team cards with auto layout and simple styling.

Discover how to use Figma's effects panel to apply drop shadows, inner shadows, layer blur, background blur, and noise textures to text, images, and shapes, and save these styles.

Learn how to create masks in design tools, using a shape below the image to crop content like a diagonal window, and adjust opacity and alpha settings.

learn how to use masks in figma to crop images inside shapes, compare masking with inserting images, and align cards with auto layout and grid.

Create the next section of the portfolio site by arranging headings, text, and cards with auto layout, 20-pixel spacing, and flip horizontal for arrow buttons.

Explore how plugins extend figma to mock up a full Apple.com page, import svg elements, and place images with the Unsplash plugin, while evaluating reliability and native features.

Explore Figma community, a browser-based library of UI kits, icon packs, design systems, templates, plugins, and wireframes for rapid UI/UX design.

Finish the website by coding a simple centered footer with a white 1px line, 30% edge opacity, rounded corners, and basic links (terms, privacy, cookies, license) plus social icons.

Finalize the website by applying a heading text gradient, adding grain, subtle opacity tweaks, cinema elements, and a black-and-white image composition, while balancing contrast and avoiding overuse.

Explore the main font types, their differences, and basic web text settings. See how font choice, letter spacing, and line spacing affect mood, readability, and harmony.

Identify the four main font types—serif, sans serif, script, and display—and distinguish typeface from font, then apply these guidelines to print, screens, and heading text.

Explore how to find and install fonts using Google Fonts and Adobe Fonts, with filters for languages and styles, and add fonts to your computer and apps.

Prioritize readability when choosing fonts for your UI/UX website, limit to two fonts, and use one for headings and one for body text, guided by the site's theme and imagery.

Pick fonts for five card themes—fitness trainer, children's event, fashion, luxury real estate, and the east blog—and note each font name with associations.

Learn practical typography settings for UI design, including tracking, line spacing, line length, and font sizing for desktop and mobile, plus a scalable 1.25 major third system.

Adjust line spacing and text alignment on a website about surfing by organizing text into paragraphs, applying auto layout, and setting 32 pixels spacing and 150% scale for improved readability.