Тормозит файл? Долго прогружается? Не знаете как собрать компонент, чтобы он расходовал минимум памяти? В статье поделюсь рекомендациями, которые помогут решить эти проблемы
1. Следите за используемой памятью в Memory usage
Чтобы отслеживать загруженность файла нужно открыть Memory usage в главном меню редактора.
Тут вы можете увидеть, что слои делятся на две категории: слои внутри файла и импортируемые слои из внешних компонентов. Если с первым все понятно, то второе для многих бывает новостью. Если принести в файл инстанс из другого файла, то вместе с инстансом подгрузятся слои всех вариантов этого компонента.
Также в Manage memory можно включить отображение расходуемой памяти по страницам. Это поможет выявить наиболее тяжелые страницы файла. Важно понимать, что фигма прогружает не все слои сразу, а динамически, т.е. страницы прогружаются по мере их открытия. Поэтому, быстро переключая страницы, вы можете заметить как увеличивается используемая память.
2. Дробите файл на несколько
Самый простой и эффективный способ уменьшить вес файла — раздробить его на несколько.
3. Дробите файл на страницы
Фигма прогружает слои не все сразу, а постранично, по мере открытия страниц. Поэтому важно не перегружать страницы, а максимально дробить их на более мелкие.
4. Помните, что большое количество вариантов компонента ведет к увеличению расходуемой памяти
Перенося в файл инстанс из сторонней библиотеки, Figma загружает целиком все варианты этого компонента. Например, на скриншоте видно, что кнопка, включающая в себя 8 слоев, неcет за собой в файл 1293 слоя. Каждое последующее использование будет прибавлять только 8 слоев, потому что все варианты уже сохранены в памяти.
5. Удаляйте слои, находящиеся за модальным окном
Если весь сценарий состоит из модальных окон, то нет большого смысла во всех макетах длинного сценария показывать слои на фоне модальных окон. Я в таких случаях первый экран показываю с фоном, а остальные — без. Но важно, чтобы все участники команды понимали, что в реализации фон все-таки должен быть.
6. Используйте Swap instance вместо создания большого количества вариантов
При таком подходе вам не придется рисовать кучу вариантов компонента, которые будут расходовать память файла. Можно выбрать предпочтительные инстансы для свапа, которые будут предлагаться по умолчанию.
7. Используйте Boolean properties для включения и выключения слоев вместо вариантов или обычных скрытых слоев
Boolean properties занимают меньше памяти, чем обычные скрытые слои. Зачастую их использование экономит даже больше памяти, чем варианты, но это нужно тестировать, потому что в разных ситуациях бывает по-разному.
8. Сжимайте изображения и по возможности уменьшайте их количество
Растровые изображения сильно расходуют память файла, поэтому бывает полезно их сжимать. Сжать можете с помощью плагина в фигме, например, с помощью Downsize.
9. Удаляйте скрытые слои
Скрытые слои тоже расходуют память файла, поэтому от них желательно избавиться. Для обнаружения скрытых слоев может пригодиться режим контуров, который включается по шорткату shift+O
10. Избавляйтесь от бесполезных слоев
Удаляйте слои, которые не несут никакой пользы. Это могут быть лишние: группы, фреймы, автолейауты, прямоугольники, эллипсы.
И не забывайте следить за неймингом слоев. Так вам будет проще разобраться в структуре компонента и определить лишние слои.
11. Большое количество точек в векторе тоже влияет на загруженность файла
Следите, чтобы в вашем файле не было очень тяжелых иллюстраций, иконок или логотипов.
12. Архивные макеты выносите в отдельный файл
Многие дизайнеры любят хранить архивные макеты (драфты) в одном файле с основными макетами. Чтобы уменьшить вес файла, перенесите архивные макеты в отдельный файл.
13. Не используйте прямоугольник для добавления фона к фрейму или компоненту
Для добавления цвета на фон просто добавьте заливку к фрейму или компоненту.
14. Для отображения маленьких изменений не дублируйте всю страницу, а оставьте только небольшой фрагмент экрана.
Не забудьте удалить слои, которые не видны в отображаемом фрагменте. Еще важно, чтобы не терялся контекст и все участники команды понимали, что должно быть в остальной части экрана, которую мы вырезали.
15. Объединяйте слои в иконках
Если ваши иконки собраны из большого количества слоев, то имеет смысл объединить слои в один через ПКМ - Flatten
Спасибо, что прочитали до конца мою первую статью!
Буду рад вашим лайкам и подпискам на VC :)
Согласна с однофамилицей 🤓
Для чистки скрытых слоёв (9п) использую этот плагин https://www.figma.com/community/plugin/750292779381900360
Очень полезная статья, спасибо
Раскрою 4 пункт.
При добавлении варианта в новый файл Фигма считывает все слои компонентов и загружает их. Каждое последующее дублирование объекта будет увеличивать слои на кол-во в одном экземпляре.
Дробите наборы вариантов, используйте параллельные структуры и вложенности
Руслан, спасибо за статью! Очень вовремя попала на нее)
Круто, кратко и лакончино!
Но только что проверил руками и, кажется, в пункте 4 не раскрыт вопрос со слоями.
Да, если мы добавляем в новый файл новый компонент, число слоёв увеличивается на большое число, но повторное использование этого компонента, добавляет +1 слой к общему числе слоёв. Думаю, это важное уточнение)
Да, все так, спасибо)
Только не всегда +1 слой. Зависит от того, сколько слоев в этом варианте. Если в нем 6 слоев, то добавится +6
Насчёт пункта "9. Удаляйте скрытые слои":
Нереализуемо если скрытые слои в компонентах (а так чаще всего). Но вроде как, копии компонентов уже не жрут память, только мастер компоненты
Реализуемо, если заняться рефакторингом и все аккуратно пересобрать. Но да, на это нужно время.
Копии тоже жрут)