Free Software Tools learning guide
Learn Figma for Website Prototyping
Learn Figma for Website Prototyping — a free beginner-level guide covering learn figma for website prototyping. Learn with clear explanations, real...
What you will learn
- Getting Started with Figma
- Setting Up Frames and Pages
- Layout Grids, Columns, and Guides
- Designing with Shapes, Text, and Styles
- Building Components and Variants
- Linking Screens and Creating Basic Prototypes
- Responsive Design with Constraints and Auto Layout
- Advanced Prototyping: Animations and Microinteractions
- Collaboration, Feedback, and Handoff
- Testing, Iteration, and Design System Integration
1. Getting Started with Figma
Jump‑in: Your First Design Sprint in Figma Imagine you’ve just been hired to mock‑up a landing page for a new coffee‑subscription startup. The deadline is tomorrow, the client wants to see a clickable prototype, and you’ve never opened Figma before. Where do you start? In the next few minutes you’ll open a fresh Figma file, locate the panels that will become your command centre, learn the vocabulary that designers use every day, and flip between pages to organise your work. By the end of this chapter you’ll be comfortable enough to open a new project, move around the interface, and talk about frames, layers, and components with confidence. --- 1. The Figma Workspace at a Glance When you first log in to Figma (either via the web at figma.com or the desktop app) you land on the Dashboard – a gallery of recent files and teams. Clicking New File opens the Editor, the canvas where all design activity happens. The editor is divided into several distinct zones; each one serves a specific purpose. 1.1 Toolbar (Top) The thin horizontal bar that stretches across the top of the window contains the most frequently used tools: | Icon | Name | Quick use | |------|------|-----------| | Move tool | Move | Click‑drag to reposition objects; also the default cursor. | | Frame tool | Frame | Create containers that can hold other objects – the backbone of any layout. | | Rectangle, Ellipse, etc. | Shape tools | Draw rectangles, circles, polygons, lines, and arrows. | | Pen tool | Pen | Sketch custom vector paths. | | Text tool | Text | Add typographic content. | | Slice tool | Slice | Mark export‑ready sections (used later). | | Comment icon | Comment | Drop sticky‑note comments for collaboration. | | Zoom controls | – | Zoom in/out or fit canvas to window. | | Undo / Redo | – | Standard shortcuts (⌘Z / ⌘ShiftZ). | Most of these icons expand into sub‑menus when you click and hold, revealing extra options (e.g., the Shape tools let you choose between rectangle, line, arrow, etc.). 1.2 Layers Panel (Left) The vertical column on the left lists every layer in your file, arranged hierarchically. Think of it as the “outline” of your design: - Pages sit at the top level. Each page holds its own collection of frames and objects. - Frames appear as bold entries; they can contain other layers. - Objects (shapes, text, images) are indented under the frame that houses them. You can drag items to reorder them, nest objects inside frames, or hide/show layers using the eye icon. The panel also includes a search bar to quickly locate a …
2. Setting Up Frames and Pages
Why Pages and Frames Matter for Web Prototypes Imagine you’ve just landed a freelance contract to design a multi‑page corporate website. The client wants to see concepts for the home page, a product showcase, a blog, and a contact form—each with a desktop, tablet, and mobile version. Without a clear structure, you’ll quickly lose track of which screen belongs to which device, and you’ll spend precious minutes hunting through a tangled canvas. Pages and frames are Figma’s built‑in filing system. Pages let you separate whole design phases (e.g., Wireframes → High‑Fidelity Mockups → Final Assets). Frames act like digital canvases that mimic real device screens, keeping your layers organized and your design scalable. Mastering these two tools early saves you from chaos later and lets you focus on creativity instead of file management. --- 1. Adding and Renaming Pages 1.1 The purpose of pages in a web‑design workflow - Design phases – Keep early sketches separate from polished mockups. - Team collaboration – Others can jump to the relevant section without scrolling through unrelated artboards. - Version control – Quickly compare iterations by toggling page visibility. 1.2 Creating a new page 1. Open the Dashboard and double‑click a project to open the Editor (you already know how to start a new file). 2. In the left‑hand Layers panel, locate the Pages list at the top. 3. Click the + button next to “Pages.” A new page appears named Page 1 by default. Tip: If you’re working on a brand‑new website, start with three pages: Wireframes, Mockups, and Assets. You can always add more later. 1.3 Renaming a page 1. Double‑click the page name (e.g., Page 1). 2. Type a descriptive label, such as Wireframes – Desktop or Mockups – Mobile. 3. Press Enter to confirm. Pro tip: Use a consistent naming convention like Phase – Device. This pattern makes the file searchable via the search bar and instantly tells collaborators what they’re looking at. 1.4 Reordering and duplicating pages - Reorder: Drag a page up or down in the list to change its position. The order you set is the order shown in the Layers panel, which can help you prioritize work. - Duplicate: Right‑click a page and select Duplicate. This creates a copy with all its frames and layers intact—perfect for branching a design direction without altering the original. --- 2. Building Frames for Common Device Sizes 2.1 What a frame really is In the previous chapter you learned that a frame is a container that can hold other objects, similar to a group but with its own dimensions and properties. For web design, frames become your artboards—each one represents a specific screen size. 2.2 Selecting a preset device …
3. Layout Grids, Columns, and Guides
A Real‑World Problem: The Header That Won’t Align You’ve just opened a fresh Figma file to design the homepage for a new tech startup. The brief says the header must contain a logo on the left, a navigation menu in the middle, and a call‑to‑action button on the right—all perfectly spaced, no matter whether the browser window is 1200 px wide or 320 px wide. Without a systematic way to divide the space, you’ll quickly find yourself guessing margins, moving objects back and forth, and wondering why the design looks “off” on different screen sizes. The answer lies in layout grids, columns, and guides—the invisible scaffolding that keeps web layouts consistent and adaptable. Below we’ll walk through everything you need to set up a column grid, tweak its properties, and use rulers and guides for pixel‑perfect alignment. By the end, you’ll also understand the crucial distinction between fixed and fluid grids, so you can choose the right approach for any project. --- Understanding Layout Grids What Is a Layout Grid? A layout grid is a set of invisible lines that you attach to a frame. These lines act as reference points for positioning objects, just like the ruled lines on a notebook page. Figma offers three grid types: | Grid Type | Typical Use | Visual Shape | |-----------|-------------|--------------| | Column | Web pages, apps (horizontal division) | Vertical strips | | Row | Vertical rhythm, typographic baselines | Horizontal strips | | Grid | Complex layouts, print designs | Square cells | For website prototyping we almost always start with a column grid because web designs are built from left to right. Fixed vs. Fluid Grids | Aspect | Fixed Grid | Fluid (Stretch) Grid | |--------|----------------|--------------------------| | Definition | Columns have a set pixel width; margins and gutters stay the same regardless of frame size. | Columns expand or shrink to fill the frame; margins stay constant while gutters stretch proportionally. | | When to Use | When you need a precise, pixel‑perfect layout (e.g., a high‑fidelity mockup for a developer handoff). | When you want the design to respond to different screen widths without manually resizing every element. | | Behavior on Resize | Columns may overflow or leave empty space if the frame becomes narrower or wider. | Columns always fill the available width, keeping the overall layout balanced. | Think of a fixed grid like a set of rigid bookends—everything inside stays the same size. A fluid grid is more like a rubber band that stretches while keeping the outer edges anchored. --- Adding a Column Grid to a Frame You already know how to create a frame from the Frames tool (Chapter 2). Let’s …
4. Designing with Shapes, Text, and Styles
A UI Element Comes to Life Imagine you’re designing the landing page for a new coffee‑shop app. The first thing users will see is a hero banner: a bold rectangle with a headline, a short paragraph, and a call‑to‑action button. With just a few clicks you can turn a blank canvas into that banner—no code required. In this chapter you’ll learn how to draw the rectangle, shape the text, and apply reusable color and effect styles so the hero looks polished and ready for the next step: turning it into a component. --- 1. Drawing the Building Blocks 1.1 Selecting the Shape Tool 1. Open the Dashboard, click New File, and you’ll be in the Editor. 2. In the left‑hand toolbar locate the Shape tools (the icons for rectangle, line, and ellipse). 3. Click the Rectangle icon or press R on your keyboard. Tip: If you need a perfect square, hold Shift while you drag. 1.2 Creating a Rectangle 1. Click anywhere on the canvas and drag to the desired size. 2. Release the mouse button. A new layer appears in the Layers panel, automatically named “Rectangle 1”. 3. With the rectangle still selected, look at the Properties Panel under the Design tab. Here you can edit dimensions directly (e.g., width = 1440 px, height = 400 px) or fine‑tune the X/Y position. 1.3 Editing Shape Properties - Corner radius – round the corners by entering a value (e.g., 8 px) or dragging the corner‑radius handle that appears on the shape. - Stroke – add an outline by toggling the Stroke switch. Choose a weight (e.g., 2 px) and a color from the swatch. - Fill – set the interior color. Click the fill swatch, then pick a hue from the color picker or type a hex code (e.g., F5E8D0). All changes are instantly reflected on the canvas, and because the rectangle lives inside a frame (the page you created earlier), it will snap to any layout grids you’ve set up. 1.4 Drawing Circles and Lines - Ellipse (O shortcut): Click‑drag to draw a circle; hold Shift for a perfect circle. - Line (L shortcut): Click once to set the start point, move the cursor, then click again to set the end point. Both shapes appear as separate layers and can be edited with the same Properties Panel controls—stroke, fill, opacity, and effects. 1.5 Grouping Shapes If your hero banner needs a background rectangle plus a decorative circle, select both layers (hold Shift and click each), then press Ctrl + G (or Cmd + G on Mac) to Group them. The group behaves like a single object for moving, aligning, or applying a shared style later on. --- 2. Adding …
5. Building Components and Variants
Turning a Button Into a Reusable Component Imagine you’re designing the homepage of a new SaaS product. The hero section needs a Primary Call‑to‑Action button that appears in three visual states: Default, Hover, and Active. Rather than copy‑pasting the same rectangle and text three times, you can capture the whole button as a single component and let Figma handle the state switches for you. 1. Assemble the layers 1. Create the base shape – Use the Rectangle tool to draw a 200 × 48 px button on the canvas. 2. Add the label – With the Text tool, type “Get Started” and center it vertically and horizontally inside the rectangle. 3. Apply styles – Choose the fill colour, stroke, corner radius, and text style you defined earlier (see Designing with Shapes, Text, and Styles). All three objects now sit together inside the same frame (the frame you created in the previous chapter). In the Layers panel you should see a hierarchy like: 2. Convert the layers into a component 1. Select the frame – Click the frame name “Button / Primary” in the Layers panel. 2. Create the component – Press ⌘ + Alt + K (Mac) or Ctrl + Alt + K (Windows). - The frame border turns blue, indicating it is now a Component. - In the Assets panel you’ll see a new entry with the same name. Tip: Naming conventions matter. Rename the component to Button/Primary (use a slash to create a logical hierarchy) so it appears neatly in the library later. 3. Test the component instance Drag a copy of the component from the Assets panel onto the canvas. This copy is an instance—any change you make to the master component will automatically reflect here. Try editing the label text on the instance; you’ll see the master stays unchanged, proving the power of instances. --- Adding Variants for Interaction States A variant is a sibling component that shares the same underlying structure but differs in appearance or behaviour. Variants live inside a variant set, which Figma treats as a single component with configurable properties (e.g., State = Default | Hover | Active). 1. Create the first variant (Default) Your newly‑made Button/Primary component already represents the Default state. 1. With the component selected, click + Add variant in the right‑hand Properties panel. 2. Figma automatically creates a second component side‑by‑side and opens the Properties section. 2. Define the property 1. In the Properties panel, you’ll see a field labelled Property 1. Rename it to State. 2. The first component shows State = Default. 3. Click the second component and change its label to State = Hover. 3. Style the Hover variant 1. Select the Hover component. 2. …
6. Linking Screens and Creating Basic Prototypes
From Static Mock‑up to Clickable Flow Imagine you’ve just finished a clean homepage design for a boutique coffee shop. The layout looks great, the typography is spot‑on, and the brand colors are consistent across the frames you created in the Editor. But a client asks, “Can I see how the site will feel when a user clicks ‘Menu’ or ‘Contact’?” That’s where prototyping steps in. By linking your frames with simple click interactions, you turn a collection of static screens into a navigable mock‑up that can be presented, tested, and iterated on—without writing a single line of code. In this chapter you’ll learn how to: Connect frames with click interactions to simulate navigation. Choose from the core transition types—Dissolve, Slide, and Instant—and understand when each feels natural. Preview your prototype in Presentation mode so you can walk through the flow just as a real user would. All of this builds directly on the frames, layers, and components you assembled in earlier chapters, so you’ll see how the pieces fit together. --- 1. Setting the Stage: Organize Your Screens Before you start linking, make sure your design files are ready for prototyping. 1.1. Name Your Frames Clearly A tidy naming convention helps you locate the right destination when you create a link. Home – the landing page. Menu – the coffee menu screen. Contact – the contact form. You can rename a frame by selecting it in the Layers panel and typing a new name. Consistent names also appear in the prototyping panel, reducing the chance of linking to the wrong screen. 1.2. Group Related Screens on a Single Page If you’re working on a multi‑page website, keep all related screens on one Page (e.g., “Coffee Shop Site”). This keeps the Dashboard tidy and makes it easier to toggle between design and prototype views. 1.3. Verify Component States If you built a navigation bar as a Component with variants for “default” and “hover,” ensure each variant is placed on the appropriate frame. The prototype will respect the visual state you see in the design view. --- 2. Adding Interaction Triggers Figma’s prototyping workflow revolves around interaction triggers—the events that start a transition. The most common trigger for website navigation is On Click. 2.1. Open the Prototype Tab Select any layer (e.g., a button or a navigation link) and switch from the Design tab to the Prototype tab in the right‑hand sidebar. If you don’t see the tab, make sure you’re not in the Comment mode. 2.2. Create a Connection 1. Select the source element (e.g., the “Menu” text link). 2. Drag the blue node (a small circular handle) that appears on the right side of the element onto the destination frame …
7. Responsive Design with Constraints and Auto Layout
A Real‑World Challenge: Making a Navigation Bar Work on Any Screen Imagine you’ve just finished designing a sleek homepage for a new startup. The hero section looks perfect on a desktop monitor, but when you shrink the browser window to a tablet width, the navigation links spill out of the frame, and the logo gets cut off. A client asks, “Can we see how this will look on a phone?” The answer lies in two powerful Figma features you’ve already glimpsed: constraints and auto layout. By teaching the elements in your design how they should behave when their container changes size, you can prototype a single layout that adapts gracefully from large screens to tiny ones. The following sections walk you through applying constraints, building auto‑layout stacks, and testing responsiveness—step by step, with no prior knowledge assumed. --- 1. Why Constraints Matter When you created frames in Chapter 2, you gave each screen a fixed size (e.g., 1440 × 1024 px). Inside those frames, objects such as a logo, navigation links, and a search icon sit at specific coordinates. If the frame’s dimensions change, those objects stay where they were, which often leads to overlapping or disappearing elements. Constraints tell Figma how an object should stay positioned relative to its parent frame (or to the nearest auto‑layout group). Think of them as invisible “rules” that say: “Keep this element centered horizontally.” “Maintain a fixed distance from the right edge.” “Stretch to fill the available width while keeping a constant height.” When you resize the parent, Figma automatically recalculates the child’s position based on those rules. This is the first line of defense for responsive design. 1.1 Core Constraint Options | Option | What It Does | Typical Use Cases | |--------|--------------|-------------------| | Left / Right / Top / Bottom | Keeps a fixed distance from the chosen edge(s). | Buttons anchored to a corner, footer bars. | | Center (horizontal or vertical) | Keeps the element centered along the chosen axis. | Logos, central headings. | | Scale | Proportionally resizes the element as the parent grows or shrinks. | Decorative shapes that should maintain aspect ratio. | | Left & Right (or Top & Bottom) | Stretches the element to fill the space between two edges. | Input fields, background rectangles. | When you first encounter a constraint, the term parent refers to the immediate frame or group that contains the object. If the object lives inside an auto‑layout group, the group itself becomes the parent. --- 2. Applying Constraints Step‑by‑Step Below is a practical walk‑through using the navigation bar from our opening scenario. Follow each step in the Editor—the same workspace you used for creating shapes and text …
8. Advanced Prototyping: Animations and Microinteractions
Bringing Motion to Life: Why Animations Matter Imagine a visitor lands on a SaaS homepage. The hero image slides gently as they scroll, a “Learn More” button ripples when hovered, and a sign‑up modal slides up from the bottom the moment they click Subscribe. Those subtle motions are not just eye‑candy; they guide attention, communicate hierarchy, and make the experience feel polished. In this chapter you’ll learn how to add those richer interactions in Figma: Overlay prototypes for modal dialogs and pop‑ups. Animation easing curves that give motion a natural feel. Scroll‑based effects such as parallax and reveal‑on‑scroll. All of this builds on the foundations you already covered—frames, components, linking screens, and basic prototype flows. By the end you’ll have a small, fully animated prototype you can share with developers or stakeholders. --- 1. Overlay Prototypes: Simulating Modals and Pop‑Ups 1.1 What Is an Overlay? An overlay is a screen that appears on top of the current frame without navigating away. In UI terms, it’s the technique used for modal dialogs, dropdown menus, and lightboxes. Figma treats overlays as separate frames that are attached to a trigger interaction. 1.2 Preparing the Modal Component 1. Create a new frame (use the Frame tool) that will serve as the modal dialog. Size it to the typical modal width (e.g., 600 × 400 px). Add a background rectangle with a slight drop shadow—this gives depth. 2. Turn the modal into a component (select the frame → Create Component). Name it Modal/Subscribe. Naming conventions help you locate it later. 3. Add inner elements: Title (Text tool) → “Subscribe to our newsletter”. Input field (use a rectangle + placeholder text). Primary button (Component you already built in Chapter 5). 4. Define a close icon: Use the Pen tool or import an “X” icon. Place it in the top‑right corner and add a Hover interaction later. 1.3 Connecting the Trigger 1. Go to the screen where the Subscribe button lives (e.g., the hero section). 2. Select the button layer, then open the Prototype tab in the right panel. 3. Drag the blue node to the modal component you just created. In the interaction dialog, set: - Trigger: On Click - Action: Open Overlay - Overlay Position: Center (or Top‑Center if you prefer a slide‑down effect) - Overlay Background: Dim (choose a 40 % black overlay) 4. Close interaction: Select the close icon inside the modal component. Add an interaction: On Click → Close Overlay. Now you have a functional modal that appears without leaving the current page. 1.4 Fine‑Tuning the Overlay Overlay size – If the modal should not cover the whole screen, set a custom size in the overlay dialog. Dismiss on outside click – …
9. Collaboration, Feedback, and Handoff
Bringing the Team Into the Loop Imagine you’ve just finished a sleek homepage mock‑up for a new e‑commerce brand. The layout, typography, and component states look exactly how the product owner envisioned, but the development team still needs to see how those pixels translate into code, and the marketing lead wants to leave a note on the hero image about the copy. All of this can happen without leaving the Figma file. Figma’s real‑time collaboration model lets you invite teammates, control what they can do, collect feedback directly on the design, and hand off ready‑to‑use assets to developers—all from the same workspace. The steps below walk you through each part of that workflow, assuming you have already created frames, components, and basic prototypes in earlier chapters. --- Inviting Collaborators and Setting Permission Levels 1. Where to Invite 1. Open the file you want to share. 2. In the top‑right corner of the Editor, click the Share button (the little paper‑plane icon). A modal appears showing the current collaborators and a field to add new ones. 2. Adding People Enter an email address (or a Google Workspace group) and press Enter. As you type, Figma will suggest contacts from your organization—this speeds up the process for larger teams. 3. Choosing Permission Levels Figma offers three main permission tiers: | Permission | What they can do | Typical use case | |------------|------------------|------------------| | Can view | Open the file read‑only; cannot edit layers or components. | Stakeholders who only need to see the design. | | Can edit | Add, move, or delete layers; create components; modify prototypes. | Designers, product managers, or anyone who will contribute to the design. | | Can comment (new in 2023) | Add comments but cannot change the design itself. | Developers or reviewers who should not alter the visual work. | Select the appropriate level from the dropdown next to each collaborator’s name. For a typical handoff, you might: Give developers “Can comment” so they can ask questions without risking accidental changes. Grant the product owner “Can edit” to allow quick copy tweaks. Keep executives at “Can view” for a clean, distraction‑free preview. 4. Sharing a Link If you prefer a quick, temporary share: 1. In the same Share modal, toggle “Allow anyone with the link”. 2. Choose the default permission for link‑based access (usually “Can view”). 3. Copy the generated URL and paste it into Slack, email, or your project management tool. Tip: Turn on “Prevent viewers from downloading” if your design contains sensitive assets. This option is available under File Settings Permissions. 5. Managing Teams and Projects For larger organizations, it’s helpful to keep files inside Projects (folders within a Team). From the …
10. Testing, Iteration, and Design System Integration
Running a Quick Usability Test in Figma Imagine you’ve just finished a high‑fidelity prototype of a newsletter signup flow. The screens look polished, the interactions are smooth, and you’re eager to find out whether real users can complete the form without stumbling. The fastest way to get that answer is to run a quick usability test directly from Figma, using a prototype sharing link. 1. Prepare the prototype for testing 1. Select the start frame – In the Editor, click the frame that should launch when the test begins (usually the home screen). 2. Check interaction settings – Verify that all Links you created in Linking Screens and Creating Basic Prototypes work as expected. 3. Enable overflow scrolling – If any screen contains scrollable content (e.g., a long list of benefits), make sure the frame’s Scrolling property is set to Vertical or Horizontal in the right‑hand panel. Tip: Turn on Present mode (⌘ + P on macOS, Ctrl + P on Windows) to preview the flow yourself before sharing it. 2. Generate a sharing link 1. Click the Share button in the top‑right corner of the Dashboard. 2. In the dialog, switch the Link sharing toggle to Anyone with the link. 3. Under Access, choose Can view – this gives testers read‑only access, preventing accidental edits. 4. Click Copy link. You now have a URL that anyone can open in a browser, no Figma account required. 3. Set up a test environment - Choose a testing method – For a rapid test, a think‑aloud session (the participant narrates their thoughts while navigating) works well. - Create a simple script – Write a few short prompts, such as: 1. “Please sign up for the newsletter.” 2. “If you get stuck, tell me what you’re looking for.” - Record the session – Use screen‑recording software (e.g., Loom, OBS) or simply take notes if you’re testing in person. 4. Collect feedback inside Figma While the participant interacts with the prototype, they can also leave Comments directly on the canvas: 1. In the prototype view, click the Comment icon (the speech bubble) in the top‑right toolbar. 2. Click anywhere on the screen to drop a comment pin. 3. Type observations like “Button label is unclear” or “Too many steps”. All comments appear in the Comments panel, where you can filter by Unresolved to focus on outstanding issues. 5. Analyze the findings After the session, review the recorded video (or notes) and the Comments. Look for patterns such as: - Confusion points – Where users hesitated or asked “What does this do?” - Task failures – Steps that users couldn’t complete. - Positive signals – Elements that users praised (“I like the clear progress bar”). …
Continue learning
- Learn to Use Slack for Business: A Beginner's GuideLearn to Use Slack for Business: A Beginner's Guide — a free beginner-level guide covering learn to use slack for business. Learn with clear...
- Photoshop Basics for Absolute Beginners: Step-by-Step GuidePhotoshop Basics for Absolute Beginners: Step-by-Step Guide — a free beginner-level guide covering learn to use photoshop for absolute beginners. Learn...
- Excel for Bookkeeping: A Beginner's Step-by-Step GuideExcel for Bookkeeping: A Beginner's Step-by-Step Guide — a free beginner-level guide covering learn how to use excel for bookkeeping. Learn with clear...
- Microsoft Word for Beginners: A Step-by-Step GuideMicrosoft Word for Beginners: A Step-by-Step Guide — a free beginner-level guide covering beginner's guide to using microsoft word. Learn with clear...