Explore how Figma enables real-time collaboration, vector editing, and seamless prototyping, with design systems and cross-platform viewing for web, mobile, and apps.

Explore Figma, a web-based design app with real-time autosave and collaboration, and learn to download the desktop apps or use the web browser.

Sign up for Figma or log in, create your account, and verify with a code, then access your home page with saved work; review device specs and desktop app setup.

Master the Figma toolbar by using move, hand, scale, and frame tools to build and organize frames, text, shapes, and buttons for web and mobile designs.

Explore the Figma layers panel, organizing frames for phone, tablet, and desktop views, renaming items, and managing z-index to control which elements appear on top.

Explore the design panel in Figma to manage attributes, align elements (left, center, right; top, center, bottom), and set x and y spacing in pixels, color, stroke, and export.

Master typography in figma by setting inter font, size, line height, and letter spacing. Apply alignment, decoration, stroke, and color with opacity; use auto height and width for text boxes.

Explore text settings in Figma, including decoration and case options (uppercase, lowercase, capitalize, small caps), and learn to create bulleted and numbered lists with controlled spacing.

Master color management for UI/UX by creating brand-aligned palettes and shades, then apply a step-by-step guide to build visual hierarchies across websites.

Master color fundamentals for UI/UX design by using RGB, HEX, HSV, and HSL codes, and leverage color pickers and X Color Finder 3.0 to craft palettes in Figma.

Discover how to install and use Figma plugins such as Iconify, Unsplash, lorem ipsum, and remove bg to accelerate design with icons, images, and dummy text.

Learn how to section screens in Figma by defining header, left sidebar, and body, creating hero and card sections, naming elements, and using frames to organize and protect designs.

Master typography fundamentals for ux design, including typefaces, sizes, spacing, and styles to boost readability and hierarchy. Learn to establish a consistent typographic system across devices.

Explore typescale in Figma to create a typography system with regular text (16px), caption (12.8px), and h1–h6, using a 1.2–1.25 scale on desktop, tab, and mobile styles.

Master cross-device type scale by adjusting display, heading, regular, and caption text for desktop, tablet, and mobile to achieve consistent typography across sizes.

Explore the concept of colors in design, using a color picker to define a branch (primary) color, supporting color, and neutral color, and build palettes for consistent user interface.

Master the 60/30/10 color rule to design web and mobile interfaces by defining dominant, primary, and secondary colors, creating cohesive palettes and clear call-to-action emphasis.

Learn to build a color palette in Figma by creating nine swatches for brand, neutral, and accent colors and their light to dark shades using hue, saturation, and brightness. Save these colors as reusable styles to ensure design consistency across pages.

Learn Figma color shortcuts to speed your workflow, connect colors using hex codes and the color picker, and apply colors across elements.

Master the grid system in Figma by using rows, horizontal spacing, and the layout guide to set margins for desktop and mobile layouts.

Set up a responsive grid system for desktop, tablet, and mobile, adjusting column counts (8 for tablet, 4 for mobile) and margins to achieve even spacing.

Explore Behance, Dribbble, and Pinterest to gather diverse web and mobile UI inspiration, analyze designs, and refine concepts for your projects.

Master web interface planning in Figma by designing for a 1440 by 1024 desktop frame, using a 12-column grid, and building header and hero sections with saved typography and colors.

Design a desktop header with logo and navigation links (home, about us, contact us, testimonials), set a 12-column grid, add images via Unsplash, and explore auto layout.

Learn to use horizontal auto layout to build a header with nav links, a logo, and call-to-action buttons, enabling even spacing, middle alignment, and quick duplication for a polished interface.

Design the hero section by arranging a two-panel layout with display text, description, and a call to action beside an image, using frames and auto layout in Figma.

Design the mobile hero section 'our clients are saying' with a two-card scrollable grid, centered title and body text, and four ellipse icons.

Create a mobile testimonial section in figma, arranging client quotes in a two-card grid with a scrollable horizontal layout, centered typography, and tuned spacing, line height, and icons for navigation.

Adapt the get writers quotation to a mobile layout by refining frame and centering text. Tune typography (title 35, body 14, line height 20) for a cohesive mobile hero section.

Design a responsive mobile footer in Figma using a frame-based layout with a grid, spacing, and copyright and terms of use. Start from desktop first and adapt to mobile.

Start a real-life design project by replicating Salesforce pages, including the London landing page, the login page, and the start-for-free page, to build client-ready design skills.

Explore how to create a mood board through research, gathering header, hero, and trusted-by design ideas from platforms like dribbble, and organize inspirations for landing page concepts.

Kick off a Salesforce UI design project in Figma by creating a new file, naming the project, and setting up a desktop landing page with header, hero, and card sections.

Apply hands-on Figma practices to design the Salesforce agentforce section, establishing frames with auto layout, styling typography, backgrounds, icons, and responsive spacing for a polished interface.

Explore designing a Salesforce platform section in Figma by building a layout with frames, typography, buttons, and a blurred background effect using circles and rectangles.

Accelerate the launch section by designing responsive cards with gradients and cloud imagery in Figma, using SVG assets and iterative layout techniques from the Salesforce context.

Design the we believe section in a Figma user interface with frames, text, and images using auto layout. Add take the pledge and get started for free.

Learn to create a dropdown in figma prototyping by configuring hotspots, open overlay versus swap overlay, background effects, and active state styling to link pages seamlessly.

Explore horizontal and vertical carousel transitions in figma by building reusable components, clipping content, and configuring prototype overflow for left-right, up-down, or both-direction scrolling.

Master creating an infinite marquee text scroller in Figma by building a looping text component with variants, smart animate transitions, and after delay triggers in a prototype.

Learn to prototype in Figma with after delay triggers, using on click and hover for animations. Build components with variants and animations using linear and ease, including carousel and sliders.

Create interactive sliders and carousels in Figma using prototyping and smart animation. Learn to build sliders with drag, auto transitions, and dot indicators.

Learn how to create dynamic landing page animations in Figma by prototyping scroll and mouse interactions, using components, variants, and smart animate for engaging motion.

Explore collaborative workflows in Figma, enabling real-time multi-user design, sharing files, inviting teammates, and managing edit or view roles, links, embeds, and team projects for remote collaboration.

Explore collaborative workflows in figma with real-time co-editing, viewer and editor roles, live comments, and shareable links for easy team feedback.