Guides

How to optimize your shadcncraft Figma file for speed

A practical guide to slimming down your shadcncraft Figma file. Cut unused pages, icons, components, and images so your working copy loads fast, without ever touching the originals.
Ha
Hamish O'Neill
7 min read
Optimizing a shadcncraft Figma file for speed

The shadcncraft Figma UI kit is built to be comprehensive. A full copy includes every component, multiple icon sets, full theming, block layouts, and the documentation pages that explain how it all fits together. That completeness is the point, but it also means a freshly duplicated file carries a lot more than most teams will use day to day. On the desktop app, on older machines, or in large team files, that can make things feel heavy or slow.

The good news: you can slim your working copy down to just what you need, and you never lose the originals. The source file stays intact, so you can always re-duplicate a fresh copy if you want something back.

Here are the most effective ways to make your copy faster, in rough order of impact.

Why Figma files get heavy

Before the fixes, it helps to know where the weight comes from. Most of it is one of these:

  • Large embedded images. High-resolution screenshots and photos are the single biggest contributor to file size.
  • Dense, layout-heavy pages. Pages packed with detailed frames take more memory to render.
  • Lots of components, variants, and icons. Thousands of icons and variant-heavy component sets add up, especially if you only use a fraction of them.
  • Hidden layers. Figma still stores and renders information about layers even when they are switched off.
  • A bloated app cache. Over time the desktop app builds up cached data that can slow everything down.

One thing worth knowing: Figma only loads the pages you actually open, and it only measures memory for loaded pages. So the single most effective move is usually to delete whole pages you do not need, rather than tidying inside them.

Start here: find out what is eating memory

Before you delete anything, let Figma show you where the weight is. There is a built-in memory meter:

  1. Open the Main menu (top left) and hover over View.
  2. Select Memory usage. A meter appears in the left sidebar.
  3. Click Manage memory, then toggle Show memory in layers panel.

You can now see how much memory individual layers and components are using, which makes it easy to target the worst offenders first. The same panel includes Figma's own memory-reduction tips.

1. Reduce the size of images in the file

Large raster images are the most common reason a file feels heavy. If you have added your own screenshots, photos, avatars, or product imagery to mockups, those originals get stored in the file at full resolution.

To trim them down:

  • Compress images before you place them, rather than pasting full-resolution screenshots straight in.
  • Replace any oversized images already in the file with smaller, optimized versions.
  • Delete images you are no longer using. Empty or off-canvas frames with leftover imagery still count toward file weight.
  • To compress images that are already on the canvas, Figma recommends the free Downsize plugin.

2. Delete the documentation page

The documentation pages are useful when you are getting started, but they are some of the most layout-heavy pages in the file. They are built with dense, detailed frames that consume memory.

Once you are comfortable with how the kit works, you can safely delete them:

  1. In the left-hand pages panel, right-click the documentation page.
  2. Select Delete page.

If you ever need the docs again, you can refer to the original file or re-duplicate a fresh copy. Nothing is lost permanently.

3. Delete any unused icon libraries

shadcncraft ships with several icon sets so you can pick the style that fits your product. Most teams only use one. The rest are extra weight you can remove.

Decide which icon set you are standardizing on, then delete the pages or sections for the ones you are not using. This is often one of the biggest single reductions, since icon libraries contain thousands of individual components.

One caution: deleting an icon set you have already used in your designs will affect those instances. So trim the sets you are confident you will not need, ideally before you start building on top of the kit. As always, the originals stay in the source file if you change direction later.

4. Delete components and variants you do not use

Beyond icons, the kit includes a large component library, and many components have several variants for sizes, states, and types. Variant-heavy component sets are one of the bigger contributors to memory usage. If there are whole component groups your product will never use, you can remove them the same way you remove icon sets.

The same caution applies: deleting a component you have already placed in your own designs will affect those instances, so remove sets you are sure about, and do it early where you can.

5. Remove hidden layers

Hidden layers are a surprisingly large contributor to memory, because Figma still has to store and render information about them even though you cannot see them on the canvas. As you customize the kit, delete the layers you have switched off rather than leaving them hidden in place. The memory panel above is the quickest way to spot heavy hidden layers.

6. Stop unused variables and components from publishing

If your team publishes the shadcncraft file as an internal library, you can control exactly what gets pushed to the files that consume it. Hiding the pieces you do not want designers pulling directly keeps your assets panel clean and reduces the overhead of publishing. This is most useful for base or internal components and for token collections you manage but do not want everyone selecting by hand.

To hide a component from publishing, put a period in front of its name. For example, rename a base Button to .Button. Figma removes it from publishing and tucks it into a hidden group in the assets panel.

To hide a whole collection of variables from publishing, prefix the collection name with a period or an underscore. For example, rename a Tokens collection to .Tokens or _Tokens. You can also choose exactly which styles, components, and variables to include in the publish dialog each time you publish the library.

A quick note on expectations: hiding things from publishing is about keeping your team library tidy and reducing what gets synced to other files, rather than shrinking the source file itself. For raw file size, the deletion steps above do the heavy lifting.

7. Clear your Figma cache

If the app itself feels sluggish rather than the file being large, a stale cache is often the cause. Clearing it forces Figma to rebuild fresh, which frequently fixes slowdowns and rendering hiccups in the desktop app.

Figma has a step-by-step guide here: Clear the Figma desktop app cache.

This does not delete any of your work. It only clears temporary local data.

If your file is still slow

A few more things that help at the app level rather than inside the file:

  • Close other Figma files and tabs. Each open file uses memory, and every browser tab has an active memory limit of around 2GB that the desktop app shares too.
  • Reload the file. Reloading often frees up memory and clears a temporary slowdown.
  • Watch the memory meter. Figma warns you at 60% (yellow) and 75% (red) of the limit, and locks the file at 100%, so it is best to act before you get there.
  • If a file is too heavy to open at all, you can load it with low-resolution images by adding ?thumbnails-only=1 to the end of the file URL, then trim it down from there.

A good order to work through

Start with the memory panel so you know what to target. Clear the cache to rule out a sluggish app, then delete whole pages you do not need, since the documentation and unused icon sets give the biggest wins. After that, trim large images, hidden layers, and any component sets you will not use. Leave the publishing controls until last, once your file is set up the way your team will actually use it.

If anything in the kit is not behaving the way you expect after this, reach out and we will help you sort it.

Ha
Hamish O'Neill
Founder, shadcncraft
SBIOTJ

Join 3,000+ builders shipping with shadcncraft

Design and assemble full pages faster with production-ready blocks built for real products.
  • Production-ready blocks and components
  • Clean React and Tailwind parity
  • Built for SaaS, marketing, and ecommerce teams
Get the design system
Join Now CTA

Real support from the team behind shadcncraft

Get help within 24 hours from the people who build and maintain the system.
Email
Prefer a direct line? Send us a message and we'll get back to you as soon as possible.
Discord
Get quick support, share feedback, or connect with other builders.
Feedback
Got something to say about anything shadcncraft? We'd love to hear it.