Most messy Figma files are not messy because of bad design. They are messy because nobody spent the first fifteen minutes setting the file up properly. Then a client asks for “the final version of the homepage” and you are scrolling through forty untitled frames called Frame 427.
This guide shows you exactly how to set up a workspace in Figma from scratch, using an organization-first approach: teams and projects, pages, naming conventions, frames, layout grids and shared team libraries. It works for a solo freelancer and for a product team, whether you are designing furniture catalogues, e-commerce pages or a SaaS dashboard.
First, two meanings of “workspace” in Figma
Before you start clicking, clear up a common confusion. The word workspace is used in two very different ways:
- Workspaces (the Enterprise feature): an admin-level container used to group teams and members inside a Figma organization. Only available on the Enterprise plan and only created by organization admins.
- Your working workspace (the design file itself): the canvas, pages, frames, panels and libraries you actually work in every day. This is what 95% of people mean when they search how to set up a workspace in Figma.
This article covers the second one in depth, then gives you the Enterprise steps at the end so both bases are covered.
Quick answer: the 8-step setup
- Create (or join) a team and add a project for the client or product.
- Create a new design file and name it with a clear convention.
- Build your page structure (cover, design, components, archive).
- Agree on naming conventions for pages, frames and layers.
- Add frames for each breakpoint using the presets panel.
- Apply layout grids and save them as grid styles.
- Define color, text and effect styles plus variables.
- Publish or enable your shared team libraries.
Step 1: Understand the Figma hierarchy before you build
A clean workspace starts with knowing where things live. Figma nests everything like this:
| Level | What it is | Example |
|---|---|---|
| Organization | Your whole company account (paid plans) | Mebel Pro |
| Workspace (Enterprise only) | A group of teams and members | Marketing, Product, Retail |
| Team | People who share projects and permissions | Web Design Team |
| Project | A folder of files for one client or product | Client – Nordic Kitchens |
| File | The document you design in | NK – Website Redesign |
| Page | A tab inside the file | 02 Desktop |
| Frame / Section | Containers on the canvas | Home / Desktop / 1440 |
Create your team and project (2 minutes)
- Open the Figma file browser (the dashboard, not a file).
- In the left sidebar, click Create new team (or select an existing team).
- Inside the team, click New project and name it after the client, brand or product.
- Click New design file inside that project.
Rule of thumb: one project per client or product, never one giant project called “Work”. On Mac or Windows the steps are identical; only the shortcut key changes (Cmd on macOS, Ctrl on Windows). Related reading: Migrating to Figma.
Step 2: Build your page structure
Pages are your filing cabinet. Decide the structure once, reuse it on every project. A structure that works for client work:
| Page name | What goes on it |
|---|---|
| 00 Cover | Project name, client, status, version, owner, last update |
| 01 Brief & References | Requirements, sitemap, moodboard, competitor screenshots |
| 02 Wireframes | Low fidelity flows and layouts |
| 03 Desktop | Final desktop screens, grouped in sections |
| 04 Mobile | Final mobile screens |
| 05 Components | Buttons, cards, forms, navigation, icons |
| 06 Styles & Tokens | Color, typography, spacing, shadows, grids |
| 99 Archive | Rejected ideas and old versions, kept out of the way |
To add a page, open the Pages panel at the top of the left sidebar and click the plus icon. Drag to reorder, right-click to duplicate or rename.
Three small habits that pay off fast
- Number your pages (00, 01, 02) so the order never depends on someone’s mood.
- Use dividers: a page named
---or••••separates “work in progress” from “delivered”. - Keep the cover page first. Figma uses the first frame on the first page as the file thumbnail, so your dashboard stays readable.
Note on plans: the free Starter plan limits the number of pages per file, so if you cannot add more pages, check your plan before blaming the software. Anyone digging further should read Beautify your Figma workspace.
Step 3: Agree on naming conventions
Naming is the cheapest form of documentation. Pick one pattern and stick to it across files.
| Item | Pattern | Good example |
|---|---|---|
| File | Client – Project – Type | Nordic Kitchens – Website – UI |
| Frame (screen) | Screen / State / Width | Product Page / Default / 1440 |
| Component | Category/Name | Button/Primary |
| Color style | Group/Role/Shade | Brand/Primary/600 |
| Text style | Level/Size | Heading/H2 Desktop |
The slash matters: in Figma, a slash creates groups in the assets and styles panels. Button/Primary and Button/Secondary automatically fold into one tidy “Button” folder.
Two more rules worth enforcing with your team:
- Never ship a file with layers called Rectangle 12 or Group 8. Rename with Cmd/Ctrl + R.
- Use lowercase and hyphens for exported assets so developers do not fight with file names.
Step 4: Set up frames the right way
A frame is not just a box, it is a responsive container. Press F (or A) and pick a preset from the right panel instead of drawing random rectangles. You will find the same thinking at another shop that gets it right.
Recommended breakpoint frames
| Device | Frame width | Columns | Margin | Gutter |
|---|---|---|---|---|
| Mobile | 390 px | 4 | 16 px | 16 px |
| Tablet | 768 px | 8 | 32 px | 24 px |
| Laptop | 1280 px | 12 | 64 px | 24 px |
| Desktop | 1440 px | 12 | 80 px | 24 px |
Frame hygiene checklist
- One screen per frame, placed on a single horizontal row per user flow.
- Wrap related frames in a Section (Shift + S) named after the flow, for example “Checkout flow v2”.
- Turn on Clip content for screens so overflow does not leak onto the canvas.
- Use Auto layout (Shift + A) inside frames for anything stacked or spaced.
- Keep consistent spacing between frames (200 px is comfortable) so prototypes stay readable.
Step 5: Add layout grids and a spacing system
Select a frame, then in the right panel click the plus next to Layout grid. You get three types:
- Grid: a uniform square grid, perfect at 8 px for spacing checks.
- Columns: your responsive layout columns (see the table above).
- Rows: useful for baseline typography or banner layouts.
Once a grid is configured, click the style icon and save it as a grid style (for example Grid/Desktop 12col). Now every new desktop frame is one click away from being correct. Toggle grid visibility with Shift + G.
Pair the grid with an 8-point spacing scale: 4, 8, 16, 24, 32, 48, 64. Store these as number variables so auto layout padding and gaps stay consistent across the whole file. See figma.com for their take.
Step 6: Create styles and variables before you design screens
Ten minutes here saves days of rework later. On your 06 Styles & Tokens page, define:
- Color styles or variables: brand, neutral, semantic (success, warning, error), plus surface and border colors. Add a light and dark mode if the project needs it.
- Text styles: H1 to H6, body large, body, caption, label, button. Create desktop and mobile versions.
- Effect styles: shadows and blurs, named by elevation (Elevation/1, Elevation/2).
- Grid styles: one per breakpoint.
Every style you skip today becomes a hardcoded hex value that someone has to hunt down before handoff.
Step 7: Set up shared team libraries
A library is a file whose published components, styles and variables can be reused in any other file in your team. This is what turns a single file into a real workspace.
How to publish a library
- Open the file containing your components and styles.
- Open the Assets panel in the left sidebar, then click the library (book) icon.
- Click Publish, review the list of items, add a short description of what changed.
- Confirm. Team members get an update notification in their files.
How to use a library in another file
- Open the target file and go to Assets > Libraries.
- Toggle on the libraries you need (brand foundations, UI kit, icons).
- Drag components straight from the Assets panel onto your canvas.
- When the library owner publishes changes, click Review and accept updates.
How many libraries should you have?
| Library | Contents | Who maintains it |
|---|---|---|
| Foundations | Colors, typography, spacing, grids, icons | Design lead |
| UI Kit | Buttons, inputs, cards, tables, modals | Design system owner |
| Brand assets | Logos, illustrations, product photography | Marketing |
| Client-specific | Overrides for one client only | Project designer |
Step 8: Lock down permissions and collaboration
- Invite teammates as editors, clients and developers as viewers with comment access.
- Share a link to a specific frame rather than the whole file when you ask for feedback.
- Use branching (available on paid plans) for experiments instead of duplicating the file five times.
- Point developers to Dev Mode and keep a “Ready for dev” section status so nobody builds a draft.
- Resolve comments as you go; an unresolved comment thread is a hidden to-do list.
Your 15-minute setup timeline
| Minutes | Task |
|---|---|
| 0 to 2 | Create team, project and file with proper names |
| 2 to 5 | Add numbered pages and a cover frame |
| 5 to 8 | Create breakpoint frames and sections |
| 8 to 11 | Apply layout grids, save grid styles |
| 11 to 14 | Enable team libraries, import colors and text styles |
| 14 to 15 | Invite collaborators, set permissions, duplicate as template |
Pro move: once this file is set up, right-click it in the file browser and choose Duplicate. Rename it “00 TEMPLATE – Project starter” and never build a file from zero again.
Common mistakes to avoid
- Designing on the canvas without frames. Loose shapes cannot be exported, prototyped or inspected properly.
- One page for everything. If a page takes three seconds to load, split it.
- Copy-pasting components instead of using instances. You lose every future update.
- No archive page. Deleting client-rejected ideas always backfires two weeks later.
- Nameless versions. Use version history and add a label before every client presentation.
- Personal drafts. Files left in Drafts are not shared with the team and disappear when someone leaves.
Bonus: creating a Workspace on Figma Enterprise
If you are an organization admin on the Enterprise plan and you need the actual Workspaces feature to group teams, here is the flow:
- From the file browser, click Admin in the left sidebar.
- Open the Content tab.
- Click Workspaces, then New workspace.
- Name it, assign one or more workspace admins, then assign teams and members.
- To switch between them later, click All workspaces in the sidebar and select one.
| Workspace | Team |
|---|---|
| Enterprise plan only | Available on all plans |
| Groups several teams and members | Groups projects and files |
| Managed by org or workspace admins | Managed by team admins |
| Used for governance and reporting | Used for daily collaboration |
FAQ
Can two people work on the same Figma file?
Yes. Figma is built for real-time multiplayer editing. Everyone with edit access sees live cursors and changes instantly. To avoid conflicts, split work by page or section, use branching for big experiments, and leave comments instead of editing someone else’s frames.
Is Figma difficult to learn?
The basics (frames, shapes, text, auto layout) take a few hours. Setting up a workspace like the one above takes fifteen minutes once you know the pattern. The advanced side (variables, modes, component properties, Dev Mode) takes longer, but you do not need it on day one.
How can I effectively organize my Figma files?
Use one project per client or product, numbered pages inside each file, slash-based naming for components and styles, sections to group flows, and shared libraries for anything reused more than twice. Keep an archive page and a template file.
Can I build a website with Figma?
You can design and prototype a complete website in Figma, and Figma Sites lets you publish simple sites directly. For production-grade sites you will still hand off to development or a CMS, but a well-structured Figma workspace makes that handoff dramatically faster.
How do I change workspace in Figma?
On Enterprise, click All workspaces in the file browser sidebar and pick the one you need. If you simply want to move between teams and projects, use the sidebar; to move a file, right-click it and choose Move to project.
How many pages can I have in one file?
Paid plans allow unlimited pages. The free Starter plan caps pages per file, so if you cannot add a new page, either upgrade or split the work into several files linked from the cover page.
Final word
Setting up a workspace in Figma is not admin busywork, it is the cheapest insurance policy you can buy against chaos on client projects. Build the structure once, save it as a template, and every future project starts organized instead of ending in a rescue mission.