Figma HTML CSS JavaScript in Web Design (2024)

Discover how Figma auto layout uses hug in both directions, auto width text, and nested frames to create responsive, pixel-perfect button groups with minimal manual tuning.

Explore Figma auto layout concepts by contrasting hug and fixed properties, controlling fixed width and height, auto width and height behavior, and nine-direction alignment to manage responsive UI elements.

Learn how the fill property in Figma auto layout applies to inner children, with fixed and hug settings, to create responsive navigation bars, cards, images, and text.

Master Figma auto layout by learning padding and spacing controls, including horizontal and vertical padding, individual direction padding, and auto vs fixed spacing to create responsive cards.

Explore adding paddings in Figma via alt and alt+shift, using auto layout frames, and combining hug and fill to create edge-to-edge images with right-aligned buttons.

Discover how to use Figma auto layout directions to switch between vertical and horizontal layouts, building responsive desktop and mobile card designs with image, header, paragraph, and buttons.

Learn how Figma auto layout wrap enables responsive card layouts by wrapping buttons and cards at breakpoints, using hug, fixed, and fill settings with various alignments.

Experiment with negative spacing in auto layout by adjusting gap until cards overlap. Use canvas stacking and include or exclude borders or strokes to affect total height and bulk sizing.

Combine negative spacing with smart animate in Figma to create hover and click interactions for card animations, adjusting frame sizes, thresholds, and custom bezier easing for a responsive UI.

Explore absolute positioning in Figma with auto layout to create floating elements such as a cart badge on a navigation bar, using lucid icons, bootstrap icons, and Iconify icons.

Learn to combine Figma auto layout fill with truncate text to create responsive cards, control height with fixed and hug, and use smart animate for show detail interactions.

Master auto layout alignment in Figma by using fixed, fill, and hug properties to control vertical and horizontal behavior.

Learn to control Figma auto layout with min and max constraints, mixing fixed, hug, and fill behaviors to create responsive, capped layouts at set breakpoints.

Learn to compare constraints and autolayout in Figma, creating responsive layouts with nested frames, fill behaviors, and horizontal and vertical arrangements that adapt as you resize.

Create an Airbnb landing page in Figma by applying auto layout and shadows to a centered card, adding a heading, subheading, caption, and a call-to-action button.

Design an Airbnb-inspired hero in Figma with a top navigation featuring login and sign up, a background image with overlay and gradient for contrast, ensuring responsive behavior.

Replace dummy text with real content, navigate frames with keyboard shortcuts, and fine-tune navigation and image contrast using a gradient; export and recreate in Figma.

Design a responsive web layout in Figma using three color palettes for navigation, background, and foreground with Roboto font and placeholder text, and apply auto layout for top-aligned navigation.

In medignition project part 2, design a responsive Figma header by adding a button, doubling the logo, and using auto layout with left alignment and English and French language buttons.

Learn to design and prototype a right-side sliding sidebar in a Figma project, with overlay, fixed height, auto layout, right-aligned menu items, and consistent styling for step five.

Design a simple biography landing page in Figma using two color palettes, Playfair Display font, and placeholder text, with step-by-step layout, icons, and plugin-assisted auto layout, plus screenshots.

Add and animate wave in Figma using the get wave plugin, set a 1440 px frame, adjust color and opacity, and prototype with smart animate for biography project part 2.

Build a responsive landing page using auto layout with hug in height, center-aligned 64px heading in Noto Sans, and an image grid with a header and footer.

Build a responsive commerce project page by duplicating images into a wrap-enabled, center-aligned gallery with a hero image, then apply breakpoints and max-width constraints.

Discover how RGB colors form colors from red, green, and blue in Figma and on the web, using color and fill tabs to understand RGB values for HTML and CSS.

Explore how web colors are built from red, green, and blue channels, using RGB values in Figma with the eyedropper to sample 255 and 0 for maximum and minimum colors.

Explore how the alpha channel adds transparency to rgb colors in Figma, showing red at 100% opacity and green and blue at 50% and 20% opacity, color modes and eyedropper.

Discover how secondary RGB colors are created in Figma by mixing red, green, and blue channels to yield yellow, cyan, and magenta, and test these values with the eyedropper tool.

Explore hexadecimal colors in Figma, encoding red, green, and blue with digits (0-9, a-f) and a hashtag. Use the eyedropper to inspect hex values and link them to RGB mixes.

Learn black and white in Figma using RGB and hex values; black is 0,0,0 and white is 255,255,255, with eyedropper checks and a shadow to distinguish white.

Explore the hsl color model and hue, showing how zero, 120, and 240 degrees map to red, green, and blue on the color wheel.

Explore saturation in the HSL model, from 100% red to 20% washed-out tones, and why HSL simplifies building consistent color palettes compared with RGB and hex.

Explore how to control lightness in Figma using hsl, keeping hue and saturation constant to create lighter or darker colors, and distinguish opacity from color lightness.

Explore how hsl colors map to rgb on a 0–360 color wheel, with red at 0°, green at 120°, blue at 240°, and intermediate angles creating other hues.

Learn how the Figma color wheel is divided by six to form secondary RGB colors, placing red at 0°, yellow 60°, green 120°, cyan 180°, and magenta 300°.

Discover how the Figma color wheel is divided into 12 sections, starting with red, green, and blue and yielding secondary hues at 30-degree increments.

Explore the color wheel side by side to learn selecting color families for consistent UI design, using hsl values to mix primaries, secondaries, and tertiaries for a brand color.

Explain color modes on the color wheel, including complementary, split complementary, analogous, monochromatic, and triad, with RGB, hex, and HSL values in Figma to build cohesive UI palettes.

Create a cohesive color palette in Figma using the color wheel and HSL concepts, generating ten shades from a base color with the color scale plugin.

Explore color plugins in Figma, generate color palettes from a single color with the Color Shade plugin, adjust intensity with eye dropper, and organize hues to create cohesive palettes.

Demonstrates using color gradient, web gradient, and cool hue plugins in Figma to craft gradients. Shows tweaking HSL values, saturation, and lightness, and applying gradients with wave and blob shapes.

Discover how Figma components enable reuse across pages by turning UI elements into components, updating the master to propagate changes to all instances, and organizing assets with local components.

Learn how to convert frames into components in Figma, manage local components and instances, and push or reset changes to the master to control overrides across buttons.

Detach an instance in Figma to create a separate component for a one-off variation, preventing overrides of the master and ensuring updates don't propagate to other instances.

This lecture demonstrates building an Instagram story poster in Figma by converting designs into components, organizing by pages, using auto layout and absolute positioning, and propagating changes to all instances.

Master instance swap in Figma to switch between similar components while preserving text values when naming and dimensions align. Note limitations with extra text layers and the need for variants.

Organize Figma components by using forward slash naming to categorize buttons and posters, detach instances, and rename for variants, highlighting the shift away from frames.

Explore nested component behavior in Figma by building a reusable card with image, content, and a button row, then swap instances across pages.

Explore how to convert components into variants in Figma, organizing buttons into a master component with size properties and multiple variants for scalable design systems.

Explore using a master button component to create and manage six variants, including size and rounded corners, by editing variant properties, dragging values, and organizing them next to each other.

Learn to manage Figma variants by converting six values into two properties, such as size and round corner, and grouping them for a cleaner, scalable button component.

Learn how to implement boolean variants in Figma to toggle button properties with true/false or yes/no values, breaking size and round corners into separate properties for easy switching.

Apply and link text properties across six matching layers in Figma variants, create button label properties, and preserve text values while switching colors and booleans in master components.

Learn how to build flexible button components in Figma using boolean properties to show or hide icons, swap left and right arrows, and manage variants with text and color properties.

Learn how boolean properties automatically toggle show and hide of icons, compare boolean values and variant properties, and use toggle actions to swap between left and right icons and sizes.

Learn how to use Figma instance swap to replace left and right icons with alternatives like pen icons, while preserving booleans and text, with mapping and default values.

Learn to create a Figma icon component that swaps icons (left/right) with show/hide booleans while keeping all icons at 16 by 16 and centered using auto layout, preventing skew.

Explore exposed nested properties when nesting components, creating icon and chevron variants, and using auto layout to manage nested variants.

Explore exposing nested properties in Figma components, swap instances with variants, and use preferred values to manage icons like bell, pen, and chevron across master and local components.

Create a master button with extensive variants by nesting components and using variant sets, booleans, and instance swap to show/hide icons like chevrons and customize labels.

Design and manage button variants from scratch, adding size properties (small, md, lg, xl) and hover and click states, using a master button for organized variants.

Explore building a master button with multi-theme variants in Figma, assigning sizes, interactions, and color themes (primary, error, success) to create a scalable design system.

Create and animate a master button in Figma, configuring hover and click states, and organize interactive variants by interaction, size, and color using the simple sort plugin.

Learn how Figma components and variants enable cross-page reuse, and how local text styles like heading one at 48px bold with 120% line height ensure consistent typography.

Create and apply local text styles across pages, updating font family and size. Learn to cut and paste styles between files and use libraries to share styles without breaking updates.

Explore automating text styles in Figma with the Type Scale plugin, building a typography hierarchy from base size and mathematical ratios like the golden ratio, for a cohesive design system.

Master Figma text style automation with a type scale plugin to generate typography styles from a base value, then create, name, and organize styles into website, product, and posters folders.

Automate text style creation in Figma by using the Styler plugin to generate and organize styles into folders, leveraging bulk renaming and forward slash conventions for efficient web design workflows.

Automate Figma text styles across pages with batch styler to update font family once and reflect across demos, posters, and products by linking styles to text elements.

Organize, search, and reorder text styles in Figma using local styles, folder nesting, and a batch styler to tag fonts like Playfair Display and bold for easy filtering.

Explore how to use Figma's built-in find and replace to update text layers across a page or all pages, with replace all or single-instance navigation.

Learn to create and manage color styles in Figma, using HSL/hex values, apply primary, secondary, alternative colors, and ensure updates propagate across pages.

Automate color palette creation in Figma with color shade kit and color scale generator, generate color styles and color cells, and fine-tune hue and saturation with batch styler.

Learn to build and name color styles in Figma with Color Shade Kit and Styler plugins, using hsl renaming and batch updates for gray, blue, and red palettes.

Explore automating a Figma brand style guide using color style guide and typography style guide plugins, including color, alpha, auto layout, and bulk updates for a cohesive style.

Link colors and typography to a live style library, manage local styles and grids, and use design lint to auto-fix missing styles for scalable brand consistency.

Create reusable figma shadow styles by defining effect styles and linking them across frames, using beautiful shadows or shadow maker to adjust blur, opacity, and direction.

Explore building and applying grid styles in Figma using layout grids, auto layout, and Bootstrap breakpoints, including one- and two-column grids with min and max widths and gutters.

Master creating breakpoints in Figma by adjusting min and max values, switching between two-column and four-column grids, and naming md, small, extra small, and large styles.

Demonstrate checking color contrast in Figma with the contrast plugin to ensure readability and meet a 4.5 AA standard by adjusting text or background colors in the design system.

Preview Figma libraries, team libraries, and version history, and learn how pricing and paid plans influence features like branching and merging.

Explore minor Figma updates that simplify library access via the top-right icon and library clicks, and note left-hand layout changes for teams, all projects, and admin on the professional plan.

Learn how to build and publish a Figma library with color and typography styles, then access and apply these assets across files, noting paid plan limits.

Publish updates to your Figma library to share colors, styles, and components across projects; organize libraries, set thumbnails, and sync with a main design system.

Learn how to manage a Figma library across multiple files, publish changes, and propagate updates to components, thumbnails, and colors while understanding detaching limitations.

Learn to add descriptions to changes, publish updates, view full version history, and restore versions in design system files with versioning in Figma.

Learn how to scope a Figma library by hiding local styles and components with underscores or dots, publish changes, and manage updates to keep external access controlled.

Learn how to swap components between design system libraries in Figma by publishing and linking libraries, ensuring exact naming and labels to preserve properties during swap.

Learn to manage Figma libraries by unpublishing and deleting components and styles, navigate to the master library, and swap to a new library to preserve project links.

Watch a live Figma library example that demonstrates creating and reusing an annotation component across multiple files, with updates reflected in slides and color theory pages.

Learn how to enable your Figma libraries by default for design files, by navigating to teams, view settings, and libraries, and apply default library settings to new projects.

Learn to create a reusable annotation component in Figma with auto layout, fixed sizing, and dashed strokes to show precise spacing for developers, including text property and absolute positioning.

Learn to build a Figma annotation component by grouping ellipses into a badge and stroke, using auto layout with padding and right-aligned empty space to control growth.

Learn to configure a Figma annotation component with direction variants (left, right, none, top, bottom) using auto layout, non-spacer states, and center alignment.

Create a dynamic annotation component in Figma using line styles, left, right, top, and bottom directions, and auto layout to grow with content, leveraging rectangles, strokes, and nested components.