Designing with Figma: Your Start to UI/UX

Install Figma by visiting figma.com, log in with Gmail, choose the starter plan, and create your first design file in the desktop app or web.

Obtain a design brief using AI tools like ChatGPT or good brief.io, paste the briefing into a Figma file, and learn about task flow versus user flow for UI design.

Explore task flow and user flow to plan screens and pages—from home to search results to recipe pages—highlighting when to map steps, decisions, and interactions in Figma.

Design a five-page UPI payment app in Figma by completing the first assignment: create a design file, add briefing and task-flow images, and upload screenshots.

Master Figma fundamentals by building a five-page UPI payment app prototype, using frames, pages, layers, properties, and shortcuts to wireframe home, QR scanning, amount, UPI pin, and completed screens.

Create and organize a five-page Figma design for a UPI payment app, renaming, arranging, snapping, and duplicating pages, then capture screenshots for submission.

Learn to build a home page wireframe in Figma by using shapes and text, including rectangles for profile images, creating perfect squares with shift, and applying typography and font choices.

Learn to enhance a Figma design with plugins, install and use iconify to add search and notification icons. Practice grouping versus frames while organizing the added icons.

Master the pen tool in Figma to create curves with anchor points and paths, build wireframes for four pages using shapes, frames, and Iconify icons, and preview prototypes on iPhone.

Explore frames versus groups in Figma, and learn how frames support clip content, constraints, background fills, and scrolling in prototypes to organize and tidy navigation.

Create a tidy home page wireframe in Figma using frames and nested frames, with a highlight section, three cards for transfer, recharge, and rewards, and a footer.

Create a multi-page wireframe for a UPI payment app in Figma using the pen tool to design icons and shapes, applying default properties for consistency.

Prototype and animate wireframes in Figma by connecting pages. Master transitions with on click and after delay triggers, using dissolve, move in, slide in, and smart animate.

Create your first Figma prototype by wiring wireframe components with move in, move out, and push interactions, then share a video or screenshots for the assignment.

Explore smart animate in Figma by using keyframes and prototype flows to create responsive, easing animations between frames with on-click and after-delay triggers.

Create your first level one animation using Smart Animate in Figma, connecting three keyframes of your wireframe to form prototype with easing options such as ease in and ease out.

Learn how to manage pages for lo-fi and hi-fi designs in Figma, including wireframes, prototyping, and animations, and use a separate design file for the final design.

Master setting up columns and rows in figma to create precise mobile layouts and a coherent final design, using layout grids, margins, and gutters along with mood boards and typography.

Explore mood boards to gather audience-driven design inspiration, curate images from dribble, awards.com, Behance, and unsexy.com, and organize assets in Figma to shape your final ui design.

Design your first mood board in Figma by collecting images, colors, fonts, and animations inspired by Dribbble and Behance. Build a portfolio assets page to attract your first client.

Discover how to craft a consistent color palette for ui/ux design using primary, secondary, and tertiary colors, grayscale scales, and contrast checks, inspired by mood boards and color hunt.

Design with color by creating your first color palette for your project, including primary, light, dark, and grayscale versions, inspired by mood board and color theory, and upload a screenshot.

Master typography in Figma by loading desktop and Google fonts, configuring sizing, kerning, alignment, and auto width/height, and exploring font pairings and the golden ratio.

Explore gradients in Figma by crafting linear, radial, angular, and diamond gradients, mixing multiple colors, adjusting rotation and positions, and copying hex codes from gradient.com for polished palettes.

Master the mask tool in Figma by placing images inside frames and shapes, clipping content, and using fill, fit, crop, and tile options to create images inside text.

Discover how to create and apply color styles in Figma, link text and icons to a shared palette, and rename and organize styles for easy global updates.

Explore auto layouts in Figma to create clean, responsive designs. Learn how horizontal and vertical layouts, hug, fixed, fill, and wrap constraints adapt frames and text with margins and gaps.

Design responsive navigation in Figma using auto layouts, hugging and filling, with fixed and wrap behavior; adjust min and max widths to adapt to different screen sizes.

Master responsive design in Figma by splitting a card into sections, applying auto layouts, fixed vs fill constraints, and minimum/maximum dimensions to keep components centered and scalable across devices.

Explore scrolling in Figma with auto layout and clipping to build a responsive highlight section, featuring a fixed navigation and prototyping of horizontal and vertical scrolling.

Design custom icons in Figma by combining shapes and creating semi-circles with arcs and inner radii. Use union, subtract, intersect, exclude, and flatten to build vector icons.

Master reusable UI with components in Figma, learning parent and child components, variants and component sets, and how properties, naming, and assets enable scalable design and simple animations.

Learn to create and manage component sets in Figma, add variants with properties like color and action type, and apply parent-child relationships to scale icons consistently.

Design and preview a spinning loading animation as a micro interaction in Figma by building frames, using components with variants, keyframes, and smart animate for an infinite loop.

Design a burger menu as a micro interaction in Figma by building a three-line icon that becomes a cross, using frames, component sets, and smart animate.