How To Optimize Large and Slow Figma Files, a practical case study by Doctolib on how they reduced heavy Figma files by 83% — with private nested components, auto-layout, helper components and properties standardization. Kindly shared by Jérôme Benoit and shared by Jackie Torizani.
If you run into heavy and slow files, cascade your libraries down. Split your library files out into multiple design files. Find the highest concentration of layers and reduce them. Remove draft material. Remove unnecessary hidden layers from regular frames and main components.Then, split components into smaller ones and consider using overrides instead of variants. You can also use Placeholder components — empty components where you can use overrides freely. Avoid hidden layers and create helper components (such as Swappers).
Finally, expose shared properties as component properties, and nest standalone properties in dedicated variants. Make unused nested components private. And: avoid importing large assets and simplify complex SVGs.
Useful resources:
- How To Rescue Your Figma File From The Depths Of Hell, by Alice Packard
- Small File Sizes With Cascading Libraries, by Jules Mahé
- How We Optimized A Large Design System Component, by Amie Chen
- Layer Counter Figma Plugin, by Alex Wang
- Downsize Figma Plugin, by Alex Einarsson
- How To Reduce Figma Memory Usage, by Anna Rzepka
- Organize Figma Files Like A Pro; A Complete Guide (Medium wall), by Edward Chechique
- How To Structure A Good Figma Component Library, by Luis Ouriach
- Figmalion: Organizing Figma Files, by Eugene Fedorenko