Media & ContentBeginnerPreview
Figma for Non-Designers
A hands-on course for marketers, founders, PMs, and operators who keep getting handed Figma links and need to do more than just look. You leave able to navigate any file, leave precise comments designers act on, edit text and swap images safely, and build your own wireframes, mockups, and social graphics with auto layout, components, and the Community library.
For marketers, founders, product managers, and operators who get handed Figma links and need to view, comment, edit, and build simple assets without becoming a designer.
Course content
Workbook & downloads
Put the course into practice — a printable workbook plus editable templates you can fill in and reuse.
Preview the workbook
This workbook turns the course into hands-on practice you can do in a single Figma file. You will navigate a real file, run a clean comment review, make safe edits in a duplicated copy, and build a wireframe, a mockup with auto layout and components, and an on-brand marketing asset you export correctly. Keep the included templates open as you work — they become your permanent shortcut sheet, comment-review tracker, and asset-export plan. Before any editing exercise, duplicate the file to your own drafts so you can experiment without risk.
Finding Your Way Around a Figma File
Get set up, learn the four panels, and read the layer tree so any shared file stops feeling intimidating.
Exercise: Set Up Access and a Safe Copy
Get into Figma and create a private copy you can practice in without touching anyone's master file.
- Sign in at figma.com (or install the desktop app) and open a file someone has shared with you.
- Check the top-right toolbar to confirm your access level: Can view, Can comment, or Can edit.
- Right-click the file in your dashboard and choose Duplicate, or use the main menu to Save to your drafts.
- Confirm the duplicate is in your own Drafts — this is the only file you will edit in later exercises.
Exercise: Navigation Drill
Build the muscle memory that makes Figma feel calm. Do each move three times until it is automatic.
- Press Shift+1 to fit the whole page on screen and get your bearings.
- Click a layer in the left panel, then press Shift+2 to fly straight to it.
- Hold the space bar and drag to pan; hold Cmd/Ctrl and scroll to zoom; press Shift+0 to reset to 100 percent.
- Find the page dropdown above the layers and switch between any pages in the file.
Worksheet: Read-the-File Worksheet
Open a real file and fill this in to prove you can read its structure before commenting or editing.
- File name
- My access level (view / comment / edit)
- Number of pages and their names
- Name of one top-level frame (screen) on the main page
- Three layers nested inside that frame (from the Layers panel)
- One component instance you spotted (diamond icon) and where it is
Checklist: Oriented-and-Safe Check
- Signed in and the shared file is open
- Access level confirmed in the top-right toolbar
- A duplicate saved to my own Drafts for editing practice
- Shift+1, Shift+2, space-drag pan, and Cmd/Ctrl-scroll zoom all working
- Found the page dropdown and switched pages
- Can read the layer tree: frames, groups, text, and instances
Commenting and Collaborating Like a Pro
Leave precise, actionable comments, run a tidy review loop, and use version history as your safety net.
Exercise: Precise Comment Drill
Press C to enter comment mode and practice pinning feedback exactly where it belongs, written so no one has to ask a follow-up question.
- Pin a comment directly on a specific headline and request an exact change, including the precise replacement words.
- Pin a second comment on a button and say what and why (for example, make this stand out more than the link below it).
- Use @ to mention a teammate so the right person is notified.
- Reply within one of your own threads and add an emoji reaction to practice the thread tools.
Worksheet: Comment Rewrite Worksheet
Turn vague feedback into pinned, actionable comments. Write the weak version, then the rewrite you would actually post.
- Vague comment 1 (e.g., 'make it pop')
- Rewrite 1 (what + why + exact value)
- Vague comment 2 (e.g., 'this looks off')
- Rewrite 2 (what + why + exact value)
- Vague comment 3 (e.g., 'fix the spacing')
- Rewrite 3 (what + why + exact value)
- Who I would @mention for each and why
Checklist: Clean Review-Loop Check
- Did one focused top-to-bottom pass instead of scattered comments over days
- Each comment pinned precisely to its element, not loosely nearby
- Each comment states what to change and why
- Exact values given where known (copy, price, label)
- One issue per comment thread
- Used the Comments panel to confirm no duplicate or stray threads
Exercise: Version History Safety Net
Prove to yourself that you cannot permanently break a file by practicing restore before you start editing for real.
- Open the main menu, choose File, then Show version history.
- Add a named checkpoint such as 'Before practice edits'.
- Make a deliberate change in your duplicate, then open history, select the checkpoint, and choose Restore.
- Confirm the file returned to the earlier state and that the restore itself is reversible.
Editing Files Without Breaking Anything
Make the edits non-designers make most — text, images, color, and components — without disturbing the design.
Exercise: Safe Text and Image Swap
In your duplicated file, change content without moving the layout. Undo immediately if anything jumps.
- Double-click a headline until the text cursor appears, retype it with similar length, and press Escape.
- Click an image once, open Fill in the right panel, click the thumbnail, and upload a replacement of similar shape.
- Set the new image to Fill, Fit, or Crop so it sits the way the original did.
- If any element shifts when you only meant to select it, press Cmd/Ctrl+Z right away.
Worksheet: Recolor Decision Worksheet
Before changing any color, decide whether you mean to affect one element or everything using a shared style. Fill this in for each change.
- Element I want to recolor
- Does its Fill swatch show a shared-style icon? (yes / no)
- Intent: just this element, or everywhere it is used?
- Action: set a plain Fill (local) OR edit the shared style (global)
- New color (hex or eyedropper source)
- Contrast check passed? (text readable on its background)
- If part of a system I do not own: comment requested instead? (yes / no)
Exercise: Override vs Detach
Learn to edit component instances safely by feeling the difference between an override and a detach.
- Find a component instance (diamond icon) and swap its text as an override — note the master is unaffected.
- Toggle a variant on the instance (for example Primary to Secondary) if the component has variants.
- Right-click a second instance and choose Detach instance (Cmd/Ctrl+Alt+B), then edit it freely.
- On a third instance, right-click and choose Reset all changes to see it snap back to the master.
Checklist: Did-Not-Break-It Check
- Working in a duplicate, not anyone's master file
- Changed content (text, images) but did not move the layout
- Replacement copy kept a similar length so it still fits
- Recolored with intent: local Fill for one element, shared style only for global changes
- Edited instances with overrides; detached only when truly needed
- Never entered and edited a main component by accident
- Used undo or version history the moment something went wrong
Building Wireframes, Mockups, and Marketing Assets
Create your own designs: a low-fidelity wireframe, a tidy mockup with auto layout and components, and an exported on-brand asset.
Worksheet: Wireframe Plan
Plan a screen before you draw it, then build it with frames, rectangles, and text in grayscale. Keep it deliberately plain.
- Screen to wireframe (e.g., landing page, sign-up, dashboard)
- Frame preset and size (e.g., Desktop 1440, iPhone 16 393x852)
- Sections top to bottom (e.g., header, hero, features, footer)
- Key elements per section (buttons, inputs, images as boxes)
- Placeholder labels to add (Headline, Subheadline, CTA text)
- One accent decision (which single non-gray color, if any)
Exercise: Build a Mockup with Auto Layout and a Component
Upgrade one section of your wireframe into a real mockup using auto layout for spacing and a component for reuse.
- Select a section's elements and press Shift+A to add auto layout; set direction, gap, and padding.
- Use one gap value (e.g., 16) and one padding value (e.g., 24) consistently across the mockup.
- Build a button or card you like, select it, and press Cmd/Ctrl+Alt+K to make it a component.
- Copy the component twice as instances, then edit the master once and watch all instances update.
Exercise: Marketing Asset from a Community Template
Produce a polished, on-brand graphic without designing from scratch, then export it at the correct size.
- Open figma.com/community, search for the asset you need (e.g., Instagram post template), and Duplicate it into your files.
- Swap the headline text, replace images via Fill, and recolor to your brand using the eyedropper on your logo.
- Replace any placeholder logo with your real logo file.
- Select the outer frame, add an Export setting, choose PNG at 2x, export, and confirm nothing is cut off.
Checklist: Ship-the-Asset Check
- Built at the correct frame size from the start (e.g., 1080x1080 for an Instagram post)
- Wireframe kept plain and grayscale to focus on layout
- Auto layout applied so spacing is even and elements align themselves
- At least one reusable component built and reused as instances
- Marketing asset made on-brand: real headline, brand colors, real logo
- Exported the whole frame in the right format (PNG/JPG/SVG) and scale (1x/2x)
- Community resource license checked for commercial or client use
- Editable Figma source saved, not just the exported image
Your Action Plan
- Day 1: Sign in, open a shared file, confirm your access level, and duplicate it to your Drafts as a safe practice copy.
- Day 2: Run the navigation drill until Shift+1, Shift+2, pan, and zoom are automatic, then read one screen's layer tree top to bottom.
- Day 3: Do a single top-to-bottom comment review on a real file — pin precise comments, give exact values, and tidy threads in the Comments panel.
- Day 4: Practice version history: add a named checkpoint, make a change, and restore it so you trust you cannot break anything.
- Day 5: In your duplicate, edit text and swap an image via Fill without moving the layout, undoing instantly if anything shifts.
- Day 6: Practice recoloring with intent (local Fill vs shared style) and edit a component instance with overrides, then try one detach.
- Day 7: Build a grayscale wireframe for a screen you actually need using frames, rectangles, and text.
- Day 8: Upgrade one section into a mockup with auto layout and a reusable button or card component.
- Day 9: Build a real marketing asset from a Community template, make it on-brand, and export it at the correct size and format.
- Ongoing: Reuse your shortcut sheet and components instead of starting cold, and always duplicate a file before editing someone else's work.
Pairs well with
Courses members commonly take alongside this one.
Flagship CoursePreview
Freelance Business Foundations: Position, Price, Sell, and Deliver High-Value Services
Freelancing · Beginner · 16h
Self-pacedPreview
Client GrowthPreview
Freelance Client Acquisition: Outreach, Leads, Referrals, and Deal Flow
Freelancing · Beginner · 15h 30m
Self-pacedPreview
Sales SystemPreview
Freelance Sales & Proposals: Discovery Calls, Scoping, Objections, and Closing
Freelancing · Intermediate · 16h
Self-pacedPreview