techlist.io
KREN
figma

#FigmaTip Roundup: Spring cleaning edition | Figma Blog (opens in new tab)

figmadesign-systemscomponent-librariesregular-expressionsfile-organization

The post presents a set of Figma organization tips framed as “spring cleaning” for design files and systems. It focuses on reducing clutter, improving file discoverability, and making shared libraries easier for teams to navigate. The central recommendation is to use Figma’s built-in naming, sorting, thumbnail, and organizational features regularly.

Batch Rename Layers

  • Select multiple layers, right-click, and choose Rename, or use Command + R.
  • Rename layers uniformly, add numerical suffixes or prefixes, or replace parts of existing names.
  • Regular expressions provide more advanced naming control.
  • This is especially useful for cleaning up large projects with duplicated or inconsistently named layers.

Create Custom File Thumbnails

  • Add a new page at the top of the page list and create a single 640×320 frame.
  • Use the frame to display a title, description, images, project status, or version information.
  • Match the frame and canvas background colors for a clean thumbnail.
  • Custom thumbnails make files easier to scan and identify in the file browser.

Sort and Review Files

  • Use the file browser’s sorting options to find clutter.
  • Sort by File Name to locate unnecessary files, including those still named “Untitled.”
  • Sort by Date Created or Last Modified to identify outdated or inactive work.

Clean Up Team Libraries

  • Review components for redundancy, outdated elements, or items that no longer serve the team.
  • Remove components by opening the Components tab, right-clicking an item, and selecting Remove from Library.
  • Components can also be hidden from the library by adding a period (.) or underscore (_) to the beginning of their names.

Organize Components with Frames and Pages

  • Use frames and pages to group components and design-system elements into meaningful collections.
  • This reduces reliance on long names separated by forward slashes.
  • A clearer structure makes shared libraries easier for teammates to browse and maintain.

Regularly applying these techniques can keep Figma files, layers, and libraries manageable as projects grow, improving both individual workflows and team collaboration.