The basics of Figma for web designer from beginner to pro

Explore atomic design, a five-step method that builds interfaces from atoms to molecules, organisms, and templates, showing how a site is assembled and a design system emerges.

Learn to build UI components in Figma by creating atoms and molecules, assembling templates, and refining inputs, checkboxes, and typography with color and shadow effects.

Build a reusable Figma library of styles, colors, light and dark variants, and shadows. Define typography with multiple fonts and sizes, and create boxes, buttons, and a search bar.

Explore how to find inspiration for future designs by analyzing diverse works from Dribbble, Pinterest, and Instagram, and train your eye daily through study of headers, colors, icons, and layouts.

Master the basic typography rules for web design: clear readable fonts, up to three fonts, optimal line length and spacing, proper capitalization, and strong color contrast for user experience.

Discover how to source web design visuals from free and paid stock sites, find transparent or watermark-free images, use vector illustrations in Illustrator, and choose affordable icons for layout.

Anchor your site palette to the logo, use orange for buttons and discounts, and explore color combinations with a color website to establish a primary color and theme.

This lecture explains how a black-and-white wireframe outlines site elements, blocks, buttons, and decks, serving as an initial draft to guide design and secure client approval.

Learn to create frames in figma by setting up a project, configuring a canvas and grid, and building multi-section layouts with slogans, menus, images, and descriptive blocks.

Select icons and illustrations, place them on the canvas, and set parameters for each element. Align items, organize folders, and apply blue shadows and text styles to create cohesive blocks.

Define a precise target audience by demographics and needs to boost conversions. Analyze competitors' sites for promotions, discounts, and messaging to sharpen your offerings.

Learn to design a Warframe website in Figma by arranging icons, illustrations, and layered menus, setting colors, shadows, and typography across organized blocks.

Create an inspiration board by gathering ideas from Behance, selecting screens, and pasting them into Figma to prototype layouts with blocks, cards, and color and typography choices.

Design the main page by building a 12-column grid, creating a header with slogan, search bar, logo, and phone, and styling buttons with icons and shadows using Open Sans.

Create shopping-cart UI elements in Figma, including product cards, discount indicators, and favorite interactions, while organizing layers, icons, and descriptive content for a polished storefront.

Adapt the main page design for mobile by creating a responsive phone layout, adjusting margins and typography, and testing on multiple screen sizes to ensure consistent spacing and usability.

Design a tablet layout in Figma, adjust spacing and line height, arrange asset categories and product cards, and outline store elements such as subscriptions and new products.

Create internal pages in Figma for web design, using breadcrumbs, arrows, and an expansive menu. Refine layouts with orange color, add buttons, cards, a favorite button, descriptions, and related products.

Create popup windows in Figma that appear during registration or after payment, building a full-height modal with a central rectangle, styling text, color, borders, and alignment.

Create a style guide detailing fonts, sizes, colors, and button dimensions, and document terms of reference in comments for interactions like copy link and client handoff flows.

Learn how to prototype in Figma to make designs clickable, navigate between frames with swipes and buttons, and apply diverse animations to showcase user flows.

Design a clickable prototype for an online store in Figma, building layouts and prototyping transitions from the main page to the catalog, product page, and basket.

design a compelling Behance case by studying top presentations, preparing desktop and mobile layouts, uploading images, arranging their order, and crafting an effective project description.

Learn how to upload Dribbble projects, navigate invite requirements, and optimize page layouts with recommended image sizes, titles, and descriptions for web and mobile screens.