Figma 101 - Learning the basics quickly

Explore Figma in the browser to design, prototype, and wireframe without installation. Create a one-screen wireframe, transform it into a high-fidelity design, then build a prototype for quick learning.

Figma 101 explains why Figma is browser-based, lightweight, and free for individuals, enabling fast, simultaneous collaboration and simple handoffs with shareable links stored in the cloud.

Sign up for Fima on Pigman dot com, create your first account, and start a new canvas. Learn to explore your browser-based workspace with recent files, plugins, and sketch imports.

Explore essential tools and panels in Figma, rename files, and work with frames and layers. Master shortcuts, background color, strokes, shadows, corner radius, lines, and exporting assets.

Learn to rapidly build blue blueprint-style wireframes for a contact app, using drag-and-drop elements, duplicating and grouping to layout names, filters, and an add icon.

Learn how to transform a wireframe into a high fidelity design in Figma, using frames, corner radii, gradients, profile image components, and scalable instances that update across screens.

Create quick, high-fidelity prototypes in Figma by linking screens, using auto animate and smart animate, and sharing interactive prototypes for feedback.

Start a design system in Figma, create color styles like primary, white, and gradient, and apply typography styles such as H1 and H2 to components, with changes cascading across screens.

Install and manage plugins in Figma to extend your workflow, then search, select, and import images like On Splash directly within your file.

Apply the basics of figma: wireframe to a high-fidelity design, add micro interactions, and prototype with animations, then complete the homework by sharing your progress.