Introduction
When working on complex wireframes or pages with many elements (icons, thumbnails, cards, images), visual order can quickly become chaotic. It's common to want to arrange these elements by size to visualize variations or identify incorrect proportions. The Sort by Size plugin for Figma addresses this need: it allows, based on our experience, to sort selected layers by width, height, or surface area, then arrange them neatly in a line.
Context
In a design system or rich mockup, multiple elements can look similar but diverge slightly in dimensions — a card slightly wider, a thumbnail slightly taller, etc. These small visual inconsistencies can undermine design coherence.
Without a dedicated tool, you often have to manually sort layers, check their dimensions one by one, or reorganize them manually. This becomes tedious as the number of elements grows. Sort by Size automates this process so that layout and visual analysis are clearer.
Plugin Features
Sort by Different Metrics
This plugin offers three criteria for sorting layers: width, height, or surface area. Depending on your project context, you can choose the most relevant criterion to visually order the selected elements.
Arrange in a Line Neatly
After sorting, Sort by Size automatically arranges the layers in a row, properly aligned according to the sorted order. This allows you to observe dimensional variations in a clear order and identify deviations easily.
Step-by-Step Usage
Select the Relevant Layers
To get started, you need to select the elements (shapes, images, cards, icons, etc.) that you want to sort. The plugin will only apply to those you have explicitly selected.
Apply the Sort and Organization
Once the layers are selected, launch Sort by Size. Choose the criterion (width, height, or area), then confirm. The plugin will then sort your elements by this criterion and arrange them in an ordered line, from smallest to largest (or according to the implemented order). The result is immediate and visually relevant.
Advantages and Use Cases
Clear Visualization of Variations
Seeing elements arranged by size allows you to identify suspicious or inconsistent values very quickly — for example a card that's significantly oversized or a thumbnail narrower than the rest.
Time Savings in Visual Organization
Instead of manually repositioning layers or sorting them by hand, the tool does it for you. Very useful when working on rich mockups or when you want to visually audit a page.
Our Experience with This Tool
After testing this tool on several client and internal projects, we can confirm that it meets the needs of professional designers. Our team uses it regularly in its daily workflow, which allows us, based on our experience, to validate its effectiveness in real production conditions.
Points tested in detail:
- Performance on large files (500+ frames)
- Compatibility with complex design systems
- Stability during intensive use
- Integration into team workflow
Points of Attention (tested in real conditions)
In the interest of transparency, here are the limitations we identified during our testing:
- Processing time can be extended on very large files
- Requires a stable internet connection for certain features
- Learning curve for beginner users
Conclusion
Sort by Size is a simple but very practical plugin for anyone who wants to analyze or organize elements in Figma according to their dimensions. By automatically sorting your layers by width, height, or area, it improves readability and visual control. If you're looking for a quick way to order your components and identify dimensional gaps, this plugin deserves a place in your UI toolkit.
