Figma Fundamentals: Use Figma Like a Pro

Figma is a collaborative design tool that supports website and app design, prototyping, and sharing, enabling UX workflows with personas, user flows, wireframes, and iterative testing.

Explore the exercise files structure, see that each course section has a corresponding folder with starter Figma files you can begin from, and import one to start your project.

Learn to set up local fonts in Figma by installing the figments font helper to enable Google Fonts and local font access in the browser, and manage activation or uninstallation.

Create a brand new file in Figma from drafts or the plus button, choose a blank canvas or presets, and start with a lo fi wire frame kit.

Learn to create and manage frames in the editor, using the frame tool to build iPhone-sized canvases, rename layers, duplicate frames, and apply grids and zoom.

Use pages in Figma to organize frames and components across mobile, tablet, and desktop, keeping design elements on separate pages and switching between them as you work.

Learn to create and style shapes in figma, starting with a white circle button and an orange bar. Use ellipse and rectangle tools, fills and strokes, and alignment shortcuts.

Learn to combine and edit shapes in Figma by building a map pin icon with two circles, using a subtract boolean operation, editing anchors, and applying fills.

Learn to draw in Figma using the pen tool and vector networks to carve a bag icon from a rectangle, then apply fill, stroke, and grouping.

Learn to add and arrange images in Figma, import SVG, JPEG, and other formats, resize and crop fills within frames, align evenly, and explore fill versus crop for polished visuals.

Learn how to mask images in Figma using a circle, apply masks, manage groups, adjust image scale, blend modes, and apply background blur and other effects for polished visuals.

Pull content from a ui kit in figma to reuse ios and android components and navigation bars. Copy, paste, import svgs and fig files, then align and distribute spacing.

Learn to add and format text in Figma by using click-to-type or drag-to-create text boxes, then refine with move and scale tools, alignment, color picking, font choices, and paragraph spacing.

Learn to manage layers and frames in Figma, control stacking order, lock and hide content, and use and edit color and text styles to build reusable components.

Create a master component as a reusable template, then make instances that adapt color, size, and text; organize them in assets for centralized reuse.

Learn to resize content with constraints in Figma, keep items centered, and scale elements within frames to create layouts and components.

Learn to build interactive prototypes in Figma by connecting frames, configuring transitions, previewing on chosen devices, and sharing with collaborators for feedback.

Prototype interactivity in Figma by turning the footer into a component, linking taps from the home frame to the menu page, and applying instant, dissolve, or smart animate transitions.

Thank you for watching the tutorials as the program grows with frequent updates. Continue practicing, look for what's new, and come back often as things change quickly.

Explore the exercise files folder by chapter and open fig files as needed. Learn to import a fig file from the upper left corner in figma.com and start working.

Discover how Figma fits into a ux design workflow—from wireframes and prototypes to real-time collaboration, testing, iteration, and use of symbols, frames, and code.

Sign up and tour the web-based Figma workspace, explore the interface, enable local fonts, and create your first file to start collaborating on design projects.

Learn how to import sketch files into Figma, including using import or drag and drop, preserving pages and layers, and pasting UI elements into your design for a ready-to-edit workflow.

Learn how to set up frames in Figma, create app screens at iPhone 8 size, configure layout grids, clip content, and organize frames and content across pages.

Learn to create and edit vector shapes in Figma using rectangle and ellipse tools, adjust fills and corner radii, align with smart guides, and apply booleans.

Learn to edit vector shapes with the pen tool, boolean operations, and smart guides to create an icon, then apply fills, strokes, and color with the eyedropper.

Import and place images in frames, adjust fit and crop, and apply masks with ellipses to create layered visuals and explore image edits in Figma.

Master adding and formatting text in Figma, including font choices from local and Google fonts, sizing, color, alignment, line height, and organizing content with layers and rectangles.

Learn to create and edit components in Figma, reuse content with master components and instances, and manage changes, detaching instances, constraints, and adjusting properties like text and color.

Apply constraints and versioning in Figma to keep icons and navigation bars responsive within frames, while using layout grids and grouping to manage components and track changes with version history.

Build and test interactive prototypes by connecting objects across frames with the prototype tab, preview transitions in a browser, and share with comments.

Create and connect screens in a Figma prototype for a travel app by linking frames with transitions, setting origin, and showcasing overlays, blur effects, and sharing options.

Create and manage a team in Figma by inviting members, assigning admin, edit, or view roles, and setting permissions; then create projects, share files, and integrate Slack for collaboration.

Learn how team libraries centralize components, publish them as a shared library, and enable collaboration on a design system across files and team members.

Preview your figment project on a device with Figment Mirror to share with others, gather feedback, and view frames or components directly on the canvas.

Learn to share Figma files for real-time collaboration by inviting others, using view or edit links, watching cursors, and leveraging version history and auto-save.

Learn to comment in Figma files, tag teammates with @, and manage comments across files, projects, and teams with email notifications, resolved comments, and multiplayer cursors.

Learn how to export designs from Figma, set formats and scales, apply and save export settings with suffix naming, and copy assets for use in other apps.