How we use Figma templates to facilitate collaboration at Shopify | Figma Blog (opens in new tab)

Shopify developed a standardized Figma template to make project files easier for designers, product managers, engineers, and other collaborators to navigate. The template applies Shopify’s lightweight “Get Sh*t Done” framework—Think, Explore, and Build—while presenting build-ready work first. Consistent file structure, clear status indicators, dates, links, and annotations reduce confusion about a project’s current state and next steps.

The Problem: Collaboration Creates File Complexity

• Figma makes collaboration easy, but projects accumulate designs, prototypes, feedback, and multiple versions over time.
• Teams were using different file-organization methods, making it difficult to find:
  • The latest designs
  • Approved layouts
  • Prototypes intended for user testing
  • Relevant project context and contacts
• Shopify’s template provides a predictable structure across files and helps teams start projects faster.

The Template’s Project Structure

• The template is based on Shopify’s “Get Sh*t Done” framework:
  • Think: Understand the problem space.
  • Explore: Investigate and test possible solutions.
  • Build: Finalize the chosen direction for implementation.
• Pages appear in reverse process order, with build-ready work placed first so collaborators see the most important information immediately.
• Teams should create the cover and project overview first, then begin documenting the Think phase before moving into exploration.

Cover and Project Overview

• The cover communicates:
  • Project name
  • Owning team
  • Current project status
• A cover also makes files easier to identify in Figma’s grid view.
• The status indicator should be updated as the project progresses.
• The project overview provides:
  • Additional context
  • Links to briefs, research, and related documents
  • Contact information for questions and feedback
• Links to documents or Slack profiles can be added directly to the Figma file for quick access.

Think: Establish the Foundation

• The Think section collects the information needed to understand the project and begin design work.
• Useful content includes:
  • User flows and journey maps
  • Job stories
  • Design sprint explorations
  • Screenshots and previous designs
  • Inspiration and links to external documents
• Its purpose is to preserve the project’s background and problem space before solutions are explored.

Explore: Investigate Possible Solutions

• Explore is the flexible collaboration area where teams diverge, test ideas, and converge on promising approaches.
• Recommended practices include:
  • Create separate pages for different devices or form factors.
  • Add titles to explorations and flows.
  • Use badges to show the state of each exploration.
  • Add a date to every new page to indicate freshness.
  • Keep user-testing prototypes on separate pages.
  • Use sticky notes for commentary, ideas, and feedback.
• This section is expected to contain substantial collaboration, comments, and alternative layouts.

Build: Prepare the Chosen Direction

• Once a solution is selected, move the relevant pages or layouts from Explore into Build.
• This keeps finalized work separate from experimentation and makes implementation-ready designs easier to find.
• The structure supports a clear transition from exploration to delivery while preserving earlier thinking and feedback.

Using a shared template like Shopify’s gives every collaborator the same mental model for navigating Figma files. Teams should adapt the sections as needed, while consistently maintaining project status, dates, ownership, context, and a clear separation between exploratory and implementation-ready work.