Figma Expert - From Beginner to Pro

Figma operates as a cloud system accessible in your browser or via mobile apps. Create a Figma account by Google or email, then download desktop app from the landing page.

Explore the landing page's sidebar and content area, manage accounts, themes, and settings, switch between draft files and projects, understand starter plan limits, and explore templates, tools, teams, and trash.

Explore the Figma design file interface, including the top tab bar, left navigation, artboard workspace, and right properties panel, plus pages, layers, and the design/prototype toolbar.

Master the Figma toolbar by using move, hand, and scale tools, and organize designs with frames, sections, and slices for export.

Explore Figma's design, dev, and draw modes from the toolbar, and master draw mode tools like radial and linear repeat to create free-form shapes without leaving Figma.

Explore figma communities to access design resources like UI kits, wireframes, prototyping templates, design systems, and plugins and widgets to build projects and your design reputation.

Learn to create and manipulate basic shapes in Figma, including rectangle, line, arrow, ellipse, polygon, star, and image, using precise position, rotation, layout, fill, and export controls.

Explore line and arrow stroke properties, including color, opacity, position inside, center, or outside, weight, and advanced options like dashed, dynamic wiggle, brush strokes, and start and end points.

Learn to create and customize ellipse, polygon, star, and images in Figma, adjusting arc start, sweep, ratio, count, border radii, and image import.

Explore advanced shape tools in Figma, from creating and editing shapes with anchor points and lasso to using shape builder, boolean operations, flatten, and mask.

Explore Figma fill properties and color options, including solid, gradient, patterns, image, and video fills; master color modes such as hex, rgb, css, hsl, and hsb, plus gradients and stops.

Learn to apply and adjust inner shadow, drop shadow, layer blur, background blur, noise, and texture in Figma, including combining effects and understanding transparency requirements.

Discover typography basics in Figma: choose typefaces and font types, adjust size, letter spacing, line height, alignment, and explore advanced options like case, vertical trim, and truncation.

Sketch low-fidelity wireframes in figma using your sitemap and information architecture as a guide, designing dashboard elements, ai notifications, graphs, and habit cards for a habit-tracking app.

Learn how to create mid-fidelity wireframes from sketches, set up a mobile frame such as iPhone 16, and establish six-column grids with 32px margins and 16px gutters.

Create a mid-fidelity login wireframe using rectangles for inputs and a darker button, with 32–64 px gaps, then add labels, an or divider, social buttons, and a sign-up button.

Define a foundational typography by setting a 16-pixel base and major third scale on TypeScale, using Inter with a 1.5 line height in Figma.

Build a design system in Figma by defining a type scale, creating typography styles for heading, subheading, body, and text, and applying bold, medium, and semi bold weights for contrast.

In mid-fidelity wireframes for a Figma course, duplicate existing frames to build signup and AI onboarding pages, reuse elements and typography styles, and adjust spacing and inputs for consistency.

Learn to finalize mid-fidelity wireframes in Figma by building a dashboard, using a 32-pixel grid, equal-width divisions, and math expressions for sizing.

Master the 8-pixel spacing system for margins and paddings, using multiples of 8 to create a crisp, balanced rhythm across modern screens, with wireframes updated.

Explore high-fidelity wireframes with enhanced login and signup, AI onboarding, enriched dashboard, and AI communication, plus habit card details including 30-day sections and daily tracking.

Turn frames in Figma into smart containers with auto layout to manage spacing and paddings, auto resize on text changes, and enable responsive, consistent design across devices.

Learn to work with Figma auto layout properties, including fixed and hug content sizing, alignment, padding, gap, and canvas stacking, to build responsive frames.

Learn to build a responsive form in Figma using Auto Layout, with multiple inputs, a submit button, and a heading, and master responsive width with fill container, min-width, and max-width.

Practice building a search component in Figma using auto layout by combining a button and an input box, then align horizontally with a zero-pixel gap and set styles.

Explore components as master elements that keep button instances in sync across your design, and learn to create and use components with auto layout for faster, consistent projects.

Explore master components and their instances in Figma, manage components across files and libraries, detach or create components, and push instance changes back to the main component.

Learn to build multi-state components in figma by applying properties to define button types and states, creating primary and secondary variants with hover, active, and disabled visuals.

Create button variants as a component set in Figma using slash-based naming to define type and state, with colors and shadows for primary and secondary buttons across hover, active, disabled.

Build a scalable Figma button system by turning icons into components, adding text, boolean and instance swap properties, and linking elements for multiple reusable variations.

Explore boolean components in Figma by creating a two-variant toggle, setting active and disabled states, and building a component set with 100px border radius and 4px padding.

Master auto layout and components in Figma by building a scalable login page using top navigation, main content, and bottom navigation, with reusable auto layout groups and components.

Create an ai onboarding page in Figma using auto layout and components, build top navigation variations, and assemble chat, user input, and habit card in a two-part layout.

Learn to build a dashboard in figma using auto layout and components, replacing chat elements with ai communications, configuring bottom navigation, graphs, habit cards, and precise ui spacing.

Master Figma auto layout and components to build responsive pages, replacing elements and grouping items. Learn to turn wireframes into functional prototypes and update the visual look.

Learn to create prototypes in Figma by connecting login, sign-up, and onboarding pages, then test navigation with move-in animations and basic prototype triggers like click and navigate to other pages.

Connect frames to complete the login to onboarding flow, test and adjust directions, and iterate by linking signup, habit cards, and habit preview to edit screens.

Learn to add a main menu to a dashboard in Figma, triggering an open overlay from a hamburger icon with manual positioning, animation, background, and close-on-click outside controls.

Implement vertical scrolling in a multi-section habit list prototype by setting overflow to vertical scroll and clipping content to hide overflow beyond top and bottom navigation.

Learn to implement horizontal scrolling for three habit cards by using auto layout, switching card width from fill to hug content, and clipping overflow, then preview in prototype mode.

Connect KPI bullets to graphs using prototyping, create interactive components for charts and inputs, and preview interactions across the dashboard and login flows.

Define color schemes using color theory, including complementary and analogous palettes, then apply and save them in your Figma designs with tools like Adobe Color, Coolors, Picolor, and Color Hunt.

Apply the 60, 30 and 10% color rule to a complementary scheme, using three main colors and a neutral palette of grays, whites, and blacks for branding, menus, and cards.

Create color styles in your design system using color palette (white 30% secondary, neutral black, neutral), apply them to components, then iterate, test, and refine to reveal a cohesive design.

Learn visual design in Figma by using color, opacity, and auto layout to update components and create a scalable design system for rapid iteration from low fidelity wireframes.