Figma 2025 - UX/UI Design Bootcamp

Learn the essentials of Figma, from frames and a freeform canvas to typography, colors, shapes, and layers for building a landing page mockup.

Copy existing designs in Figma to learn through reverse engineering, and explore community files for design kits, icons, and fonts, then open Felis landing page by Rayane Saada to edit.

Create a navigation in Figma by setting a 1440 by 6000 frame, applying color, replacing a missing premium font with Alice, and aligning shop, lookbook, search, and cart with grid.

Explore how layouts and grids in Figma elevate designs to a professional level by configuring a 12-column layout with a margin of 90 and adjustable gutters for landing pages.

Design a hero section in Figma by assembling typography, shapes, and imagery at 720x800, with uppercase text 'New week, new arrivals' and 'shop now', a star, and an underlined button.

Learn to apply image fills in Figma, upload photos, or generate AI images from prompts like fashion model. Use the Unsplash plugin to browse royalty-free images and auto-fill your design.

Create local variables for typography and spacing, save them as styles, and apply these to all elements for consistent, global updates across the design system.

Apply local text styles in a Figma project, set button, product name, and price tag styles, and create a centered category grid featuring jewelery, handbags, sweaters, and eyewear.

Create an about us section in a Figma design with a title, paragraph, read more button, and an image with mixed corner radiuses. Use h2 styling and realistic dummy text.

In this lecture, learn to manage styles and components in Figma by creating reusable assets such as a star, subscribe buttons, saving colors, and importing icon kits like Phosphor Icons.

Carry out final adjustments on a landing page in Figma by adding a follow us on Instagram section, centering text and images, and fine-tuning spacing and the H1 line height.

Share your Figma prototype to gather client feedback directly in the file, comment, and respond; apply color changes with components and local styles, then mark requests resolved.

Learn how auto layouts create flexible, dynamic screen designs by shaping frames and components with alignments, paddings, and gaps, and reuse a dynamic button across screens using components.

Practice auto layout types and alignments by creating color-filled genre labels, tuning corner radius, stroke, and padding, grouping them, and exploring vertical and horizontal layouts with spacing for responsive design.

Define local styles by choosing colors for main call to action, main text, and secondary text, then apply a 12-column grid and auto layouts to recreate the Airbnb landing page.

Save text styles as local styles, turn off auto layout, match font sizes and spacing for site sections with Inter font, and name styles to build a consistent typography system.

Sketch the auto layout frames to visualize nested wrappers. Compare vertical and wrap options and the evenly spaced top distribution.

Design a main navigation in Figma by setting a 1400 by 950 frame, applying layout grid, auto layout, typography, color, and icons for a centered, evenly distributed nav bar.

Create a searchable bar in the ui using a magnifier icon, a right-aligned button, text separators, and a drop shadow; tune typography, colors, padding, and borders for a reusable component.

Create and fine-tune a card using auto layout in Figma by arranging image, text, and icons, adjusting spacing, colors, rounding, and grouping within a frame.

Duplicate the six-card row with command/ctrl+d, keep the same spacing, then use shift+a to align into a two-column layout and wrap for mobile frames, finalize the title spacing to 12.

Add finishing touches by saving and reapplying stroke colors across elements, using new styles and selective coloring. Practice auto layouts and explore alignments and layouts to enhance ux/ui design.

Explore components and component variants in a single file, learn to create reusable elements that ensure design consistency, and manage design systems with main and child components.

Discover how a design system groups components, standards, and guidelines into a scalable, collaborative guide for web and app projects, using app bars and Google's material design kits in Figma.

Create and manage button variants within a design system by building a three-size button set with default, hover, pressed, and disabled states, organized as components and a component set.

Design a four-variant profit or loss indicator component in Figma using frames, auto layout, and shared properties. Switch coins and P/L states to see green profit and red loss cues.

Create dynamic chart variants in Figma by constructing two coin-themed designs using gradient fills, opacity, and component variants for Chainlink and Bitcoin.

Learn to design a time range tab selector in Figma by turning buttons into a reusable variant component with active and inactive states for Bitcoin, Chainlink, and all time frames.

Create and style action buttons for buy, sell, convert, send, and receive using auto layout in Figma, with Phosphor icons, 30px radius, white icon color, blue accents and variants.

Learn a fast auto layout exercise in Figma by building a BTC balance and dollar balance panel with typography, colors, and icons, then group into auto layouts for centered alignment.

Create a mobile navigation bar in Figma by building five nav buttons (home, assets, trade, explore, earn) with on/off variants and auto layout to evenly fill the frame.

Master design system variants by adding an Ethereum variant, expanding the library from a solid core, and propagating color and gradient changes to child components via drag and drop.

Explore prototypes as interactive mockups that go beyond variants by connecting screens to create clickable interactions, test interfaces, and align design, development, and stakeholders.

Prototype a button in Figma by creating hover and click states, linking frames with navigation and smart animate, and testing the interaction across desktop and mobile frames.

Build a hover-activated dropdown prototype in Figma by creating options, applying auto layout and colors, and turning frames into variants with while-hovering interactions on a MacBook Air frame.

Design an interactive dropdown prototype in Figma by combining a button with an icon, using auto layout for variations, and testing open and closed states with smart animate.

Create a Nike app prototype by implementing scroll, save as favorite, drag, and search interactions, starting from scratch with a style sheet, icons, images, and a mobile auto layout grid.

Create a lifelike iOS system bar in Figma using the iOS 18 kit, auto layout, and prebuilt components, then test on a device to refine spacing and timestamps.

Build a category tab in Figma by creating full-width wrappers, adjusting padding, applying typography for the main headline, and adding an underline for the men, women, and kids navigation items.

Design a category slider in Figma by adding h2 text, using auto layout with padding and grid alignment, and pairing images with category labels for prototyping.

Design bottom navigation by labeling icons (shop, favorites, bag, profile) with a bottom nav text style, align to top center, and adjust padding and background fill for a mobile frame.

Turn selected product images into a multi-variant component and populate it with product description, label, and price to create a reusable, responsive product grid using auto layout and a wrapper.

Turn your design into an interactive prototype by finalizing sections and products, adding images, text, and prices to mimic real life, then fix bottom navigation and apply smart animate.

Organize your Figma files by creating frames and components, duplicating elements for reuse, and adjusting spacing and backgrounds to visualize product grids and variants.

Create a two-state slider prototype in Figma by using a bounding box, adding left and right variants, turning off auto layout, and wiring an on-drag interaction to test.

Master visual effects in Figma, from glass effects and drop shadows to boolean operations for prototypes, and explore plugins and AI features to boost workflow.

Practice auto layouts by building a card design, applying typography styles (h1, h2, description, paragraph), and aligning elements using auto layout with padding, gradient fill, and rounded corners.

Explore shadow effects in Figma using the effects panel, including drop shadow and inner shadow, and speed up results with the beautiful shadows plugin for natural depth.

Add a shape behind the card and apply layer blur or background blur to create a blurred background. Adjust blur amount and fill opacity to reveal what lies behind.

Explore boolean operators in Figma to blend and modify shapes for prototypes. Use union, subtract, exclude, and intersect to design flexible elements for mobile navigation.

Learn how to use contrast and color plugins in Figma to evaluate text and graphics against WCAG standards, ensuring accessible UI design and readable content.

Use color harmony plugins such as Color Harmony and Color Shades to generate UI palettes from brand colors, with analog, monochrome, triad, and complementary schemes, and name colors for consistency.

Explore essential Figma plugins that save time, including Typescale, Color Shades, Adobe Color Wheel, and Beautiful Shadows, with noise texture and Morph for glassy effects and polished mockups.

Explore Figma's ai features, including design ai and image generation, with practical demos like rename layers, translate, and text rewriting to streamline design workflows.

Differentiate user interface and user experience design, linking visual design practices to intuitive, efficient experiences. Learn UX techniques such as user research, personas, journey mapping, and wireframing to guide decisions.

Explore the double diamond framework—from discovery, define, develop, to deliver—using user research, personas, and prototyping, and learn to build MVPs and high-fidelity designs in Figma.

Explore stakeholder interviews and mapping to set project foundations and KPIs, using FigJam for brainstorming, templates, and collaborative ideation with teams and clients.

Learn how empathy mapping bridges user interviews and design decisions by visualizing what users say, do, think, and feel to create research-based personas that guide UX and stakeholder alignment.

Conduct market and competitive research to inform design decisions, using a competitive matrix to identify gaps and unmet user needs while tracking industry trends for a sharp, competitive product strategy.

Master journey mapping to synthesize discovery data from users and stakeholders into a cohesive experience, identifying empathy maps, touchpoints, pain points, and opportunities to guide UX design.

Wireframes translate journey map and problem statement insights into a design skeleton, validating ideas early and testing layouts and flows for usability and fast team collaboration.

Map stakeholders, set goals and KPIs, and apply competitive research to defend designs, guide empathy mapping and personas, and build wireframes in Figma with FigJam workshops.

Design a Finovo fintech app for personal financial management by defining the MVP scope, prioritizing three core screens and features like dashboard, budgeting, and goals for three user personas.

Leverage empathy mapping in the discovery phase to create user-centered budgets, personas, and a home screen with budgets, goals, real-time alerts, and educational tips.

Conduct a rapid market research to analyze personal finance app competitors and industry trends, identifying opportunities to position Finovo with a simple, customizable, savings-focused experience.

Define a solution strategy that transforms overwhelming financial apps into simple, customizable interfaces with data visualization, featuring a dashboard, budgeting, saving goals, and optional educational content.

Map onboarding, daily financial overview, and budgeting journeys with balance, recent transactions, and spending categories. Outline wireframes for budgeting, savings goals, and a home dashboard with insights and tips.

Create wireframes and prototypes in Figma, starting with low-fidelity sketches for a spending and saving homepage on an iPhone frame, test layouts, spacing, and a time-frame selector.

Learn to design a budget dashboard wireframe in Figma, build a five-segment pie chart using ellipses and arc sweeps, and iterate with clients to clarify layout and data meaning.

Explore Figma’s mirroring feature to view your mobile design on a connected device, adjust spacing and proportions, and mirror to your phone for an accurate feel.

Review foundational research, user needs, personas, and empathy maps to shape a focused saving and budgeting UX, guided by competitive analysis and iterative wireframes toward three MVP screens.

Create a mood board to define the fintech app’s look and feel, guiding color, typography, imagery, and visual direction from curated sources like Muzli Design Inspiration, Dribbble, Behance, and Awwwards.

Explore typography, colors, and layout from a mood board to test multiple styles. Set up a six-column mobile grid, adjust margins, and try fonts like JetBrains Mono and Inter.

Demonstrate rapid page assembly in figma by copying, pasting, ungrouping, and applying inter and roboto mono, aligning elements, and adjusting paddings and fills for a first version ready for refinement.

Refine the user interface by adjusting colors, strokes, and fills, convert elements to cards with a gray palette, and explore white and dark theme variations.

Explore dark and light mode options, apply gradients with 30 percent opacity for glass morph vibes, and save typography and colors as local variables for reusable components in Figma 2025.

Learn to reapply and extend a component library in Figma, duplicate frames, and build a savings page using wrappers, glass fills, and predefined text styles.

Refine savings page by updating the status bars on cards and adding a circle-plus button icon. Detach components, switch to a vertical layout, and fine-tune padding, colors, and hug contents.

Design a visually appealing progress bar beneath saving goal cards by building gradients and rectangles, adjusting width and opacity to show 0%, 50%, 75%, and 100% progress.

Apply color harmonies from the Adobe Color Wheel to design a pie chart, copy and apply color codes, and adjust stroke, drop shadow, rounding, and glow effects.

Copy an existing element, ungroup, and convert to a vertical auto layout with hug content to assemble a price list in Figma. Duplicate the wrapper five times and adjust colors.

Design a feedback card in Figma by applying white paragraph text, adding a Wannathis 3D illustration, and configuring padding, fills, strokes, and responsive alignment.

Explore an end-to-end Figma UX/UI design project from research to prototyping, including feedback-driven refinements and portfolio-ready documentation for recruiters.

Refine a portfolio project by adding content, adjusting colors, and creating free mockups with a mockup plugin, then showcase the case study from summary to empathy map and wireframes.