Running a Competitor Teardown in Figma: A Step by Step Workflow

Introduction

A competitor analysis in Figma works best as a repeatable file: three or four competitors, the same pages captured at the same width, one set of categories, and a dated comparison table at the end. A folder of loose screenshots isn't a teardown.

This tutorial assumes you know Figma's basics and want a structure you can reuse each quarter. The prerequisite is access to the competitor pages you plan to study. The steps are: choose competitors and questions, capture each page, set up the file, measure what can be measured, build the comparison, and decide what to change. It describes analyzing public pages. It does not describe republishing anyone's design as your own.

Pick the competitors and the questions

Start with who you are comparing against. Figma's competitive analysis guide separates direct competitors, which offer similar products to your target customers, from indirect ones, which sell similar products to different customers or different products to the same customers. For a page teardown, start with direct competitors.

Keep the list short. Figma's competitor analysis template says "three to four competitors is usually enough," and recommends choosing competitors with similar offerings, identities, and values. More rows make the table harder to read and don't improve the conclusions.

Then write the categories before you capture anything. The same template lists pricing, product quality, customer support, marketing, and user experience as common ones. For a design teardown, narrow them to things you can see on a page:

1. Hero layout and the primary call to action.
2. Navigation structure and number of top-level items.
3. Pricing page layout (not the prices themselves, unless you verify them).
4. Type scale: heading and body sizes.
5. Spacing rhythm and color usage.

Deciding up front stops the file from becoming a pile of observations with no common frame. Figma's guide lists websites, social media, press coverage, blog posts, FAQs, and customer reviews as data sources. A page teardown only uses the first, so note that reviews and positioning need separate research.

Capture each page

You have two options, and the right one depends on what you need to measure.

Screenshots

Screenshots are enough for layout and flow comparisons. Figma's image help article lists the ways in: paste from the clipboard, drag and drop onto the canvas, the color picker's Image fill, or Place image/video with Shift Command K on Mac or Shift Ctrl K on Windows. Place image/video is the useful one for a batch, because you can click the canvas to place each file at its original size or use Place all.

Two limits matter. Figma has no dedicated image layer, so every screenshot is a rectangle with an image fill. And assets larger than 4096 x 4096 px are scaled so the longest side is 4096 px or less. A full-page capture of a long landing page can exceed that height, so small text in the lower sections may blur. Capture tall pages in sections if you plan to read details in them. Compare this approach with a screenshot plus image trace if you are tempted to trace the result.

Editable layers

When you need real values, import the page as layers instead. UnHTML is a Figma plugin that takes a self-contained .html file, a Safari .webarchive, or a scene.json captured by its open source CLI and builds frames, text, images, vectors, and auto layout from the page's CSS. You choose a viewport (Desktop 1440, Mobile 390, or a custom width) and get an import report listing substituted fonts, frames that reverted to absolute positioning, and skipped images.

Be clear about what you get: it's faithful, editable structure, not a pixel-exact clone. Missing fonts are swapped (Inter by default), and the report logs every swap, so check it before you trust any type measurement. Live sites, remote assets, and pages built by JavaScript should be captured with the CLI first. For pages behind authentication, see capturing a page behind a login. Only capture pages you are entitled to view, and respect the site's terms.

Set up the teardown file

Structure beats polish. Frames are containers, and the ones that sit directly on the canvas are top-level frames. Figma shows their names on the canvas and bolds them in the Layers panel, according to the frames help article. That makes frame names your labels, so use them.

A layout that holds up:

• One row per competitor, one column per page type (home, pricing, product).
• The same width for every capture: 1440 px for desktop, 390 px for mobile.
• A frame name like competitor-a / pricing / 1440 / 2026-10-24, so the date you looked is part of the file.
• Clip Content turned on for each capture frame. It hides anything extending past the frame edge, which keeps oversized screenshots from overlapping their neighbors.

Quick-add duplicates a frame and shifts its neighbors to make room, which helps when you add a fourth competitor late. Your own product goes in the first row, captured the same way, so the comparison is fair.

Measure what you can measure

Eyeballing a screenshot gives you impressions. Measuring gives you numbers for a table. With screenshots you can still measure by overlaying rectangles and reading their sizes, but it is slow and only as accurate as the capture. With imported layers you can select a text layer and read its size, line height, and fill directly.

Collect the same fields for every competitor:

The example entries are placeholders for the format, not measurements of any real site. Fill in your own.

If the colors repeat, pull them into shared styles; the walkthrough on how to extract color styles from an imported page covers that. Record where a number came from. A value read from an import whose font was substituted is weaker than one read from a page where the report shows no swap.

Build the comparison board

Now pull it together on one surface. Figma's template approach is a table with your company next to each competitor and the categories down the side, which you can build in FigJam or as a frame in your design file. Put the measurements in the cells, and link each cell back to its capture frame so anyone can check it.

Two rules keep it honest. First, date everything. A competitor's pricing, limits, and page layout change, so a cell that says "checked 2026-10-24" is useful and an undated one is not. Do not copy prices from memory; read them from the competitor's own pricing page on the day you write them down, and leave the cell empty if you cannot verify it. Second, stay unbiased. The template's guidance is that if a competitor beats you in most categories, treat that as a chance to improve rather than a reason to dismiss the comparison.

Turn findings into decisions

Figma's four steps end with applying insights to a strategic plan. For a design teardown, that means turning the table into a short list of decisions:

1. Where your page is clearly behind (for example, a pricing layout that needs more scanning cues).
2. Where every competitor does the same thing, which is probably a convention you should follow.
3. Where nobody does something, which may be a gap or may be a bad idea. Test before you commit.

Keep the file internal. The point is to learn what works and why, then design your own answer. If your findings suggest new tokens or components, building a design system from an imported site shows how to organize them. Repeat the teardown on a schedule, using the same frame names and dates, so you can see change over time.

Frequently Asked Questions

How many competitors should a Figma teardown cover?

Figma's own template guidance says three to four is usually enough. More than that and the comparison table stops being readable. Pick competitors with similar offerings and audiences.

Is it legal to tear down a competitor's page in Figma?

Looking at a public page and recording what you observe is ordinary research. Republishing someone else's design as your own is a different matter and a copyright question. This article is not legal advice. Keep the file internal and ask counsel if you are unsure.

Should I use screenshots or editable layers for a teardown?

Screenshots are enough for layout and flow comparisons. Editable layers help when you need real spacing, type sizes, and colors, because you can inspect them instead of estimating.

Can UnHTML clone a competitor's page exactly?

No. UnHTML produces faithful, editable layers, not a pixel-exact clone. Its import report lists font substitutions, absolute-positioning fallbacks, and skipped images, so read it before relying on any measurement.