
Create your first design file in Figma, name the project for easy access, and explore basic layout tools, sharing, presenting, and view options like zoom and rulers.
Explore the layers, assets, and pages tabs in Figma; lock and hide items, learn hierarchy, and create multiple pages like rectangles and circles to organize your prototype.
Explore the design tab in figma to inspect and adjust a selected element’s x/y, width/height, proportions, rotation, corner radii, layers, opacity, fill color, and visibility, plus discover keyboard shortcuts.
Learn to create basic shapes in Figma—rectangle, line, arrow, ellipse, triangle, and star—and master shortcuts, dragging, and precise sizing.
master polygon and star shape tools in figma, adjust count and ratio to create triangle, pentagon, hexagon, and star shapes, and use quick view settings and zoom shortcuts for proportions.
Master the move and selection tool in Figma to select and move shapes, and use the scale tool (shortcut K) to resize while preserving proportions.
Learn to create basic shapes in Figma, import images with the place image feature, and edit objects using the move and selection tool, fill colors, and size and rotation controls.
Master basic shape edits and advanced vector editing in Figma, adjusting size, angle, corner radius, color, and opacity, then use the pen tool to add points for logos and icons.
Learn basic and vector edits of lines and arrows in Figma, adjusting width, orientation, stroke color and dash styles, start/end points, and vector points to craft complex shapes.
Edit a circle in Figma by adjusting width, height, and rotation with constraint proportions. Then explore arc, sweep, and ratio controls before switching to vector editing with the pen tool.
Explore star and polygon creation in Figma: adjust radius and corner radius, convert to vector editing mode, modify counts for triangles and pentagons, and refine with rotation and midpoints.
Explore vector editing in Figma using the pen and line tools to craft icons and logos from scratch, with bend and bezier curves for precise shapes.
Master the comment, hand, and text tools in Figma, adjust fonts, sizes, line height, letter spacing, and text alignment, and explore auto width/height with fixed size.
Explore the framing tool in Figma, using desktop presets like iMac, and learn to create and edit shapes, duplicate objects, and apply colors with the eyedropper and hex codes.
Master boolean groups in Figma to combine two objects with union, subtract, intersect, and exclude, and flatten to a single editable shape while top-layer fill and stroke propagate.
Explore how to use image fill and masking in Figma to create circular shapes with alpha channel images, crops, halos, and drop shadows, and compare their control and complexity.
master the sliced text effect in Figma by combining boolean selection, masking, and vector shapes to reveal a sharp cut through text, with color contrast and fine-tuned alignment.
Master alignment, tidy up, and distribute options in the Figma frame. Align single or multiple objects to the containing frame using left, horizontal center, right, top, vertical center, and bottom.
Master alignment and distribution in figma to center, nest, and radiate shapes from a frame, and distribute vertical and horizontal spacing to tidy up icons.
Explore the Figma grid system within the frame tool, adding and customizing layout grids, adjusting size, color, opacity, and column settings, and aligning columns with margins and gutters.
Master figma grid layouts to align text and navigation on a product page, using columns, rows, and nested frames. Practice resizing, offsets, and color choices to improve readability and appeal.
Explore how horizontal and vertical constraints in Figma govern an object's position and resizing, including left, right, top, bottom, center, and scale options, with practical anchor points and padding.
Discover fixed position while scrolling in mobile and tablet UI, keeping top navigation and bottom tab bar visible as content scrolls, with frames, icons, and app bar examples.
Use constraints to anchor icons to left and right, resize frames, and apply a three-column grid with margins and gutters for consistent app bar and floating action button alignment.
Master Figma's auto layout to convert elements into frames, align text, icons, and backgrounds into consistent button designs, and let auto layout automatically treat backgrounds as a frame background.
Explore Figma auto layout options, including direction, spacing, padding, alignment, advanced settings, and how presets like packed spacing and space between shape your layouts.
Take a deep dive into Figma's auto layout options, including hug content resizing, direction, spacing, and padding, and learn practical techniques for building responsive navigation bars and frames.
Master nested auto layouts in Figma to build multi-layer UI blocks, from text rows and avatars to the connect button, with precise padding, spacing, and reusable layouts.
Learn how Figma auto layout resizing works, including hug content versus fill container, and how inner elements and frames resize together, with fixed versus flexible widths.
Explore Figma auto layout by adjusting padding values, using equal and individual paddings, and applying nine alignment options to position children; compare packed and space between distribution.
apply auto layout to build a menu bar with text and icons in Figma. adjust padding and spacing, align items, and explore overlapping avatars with negative spacing and canvas stacking.
Master auto layout in Figma to build scalable UI components, like user lists and to-do lists, with padding, spacing, and shadows, then reuse layouts for nested forms and dropdowns.
Learn to design alert popups with Figma auto layout, mastering text wrapping, fill container resizing, and creating variations; then build a responsive calendar UI.
Design a responsive card with image, title, description, and a text button, guided by grids and auto layout for a scalable, fill container layout.
Master building a responsive card design in Figma using auto layout, padding, and resizing options like fill container and hug content.
Create a responsive website header and content blocks in figma using auto layout, flattening the logo, and applying fill container and space-between packing for affiliate pages and equal-height testimonials.
Explore the latest Figma features, including absolute positioning, auto layout resizing with fixed width and fill options, and text baseline alignment, plus practical tips for stacking and strokes.
Build responsive real-world user interface designs in Figma
If you're tired of stretching your head while using Figma. Then, this course is the complete guide to learning how to build amazing things in Figma. For absolute beginners — with hands-on exercises.
Figma is a web-based graphics editing and user interface design app that works on your browser. That means you can access your projects from any device without installing software. It has collaboration facilities on the same file in real-time. So, your team can join you online taking the project from brainstorming to prototypes. Figma is not limited to UI design. It has the full potential to use as a daily graphics designing tool. By the end of this project, you will be able to use Figma with full potential.
From this course, you learn,
Navigation and Interface: Familiarize yourself with Figma's interface, including the different panels, menus, and shortcuts.
Vector Graphics: Learn how to create and manipulate vector graphics in Figma, including shapes, paths, and vector networks.
Layers and Frames: Understand how layers and frames work in Figma, including layer organization, frame creation, and layer styles.
Components and Assets: Discover how to create and use components and assets to streamline your design workflow and maintain consistency.
Prototyping: Learn how to create interactive prototypes in Figma using the built-in prototyping tools.
Design Style: Understand the benefits of design style and how to create and maintain a design system.
Collaboration and Sharing: Learn how to collaborate with other designers and stakeholders and share your designs with them.
Plugins and Integrations: Explore Figma's extensive plugin library and how to integrate Figma with other tools in your workflow