В этой статье я перечислил несколько быстрых и простых методов, которые помогут ускорить рабочий процесс дизайна в Figma. Большинство из этих идей подходят, когда у вас есть именно дизайн-система или огромные файлами. Но могут пригодиться и для повседневного использования Figma.
С некоторыми из них вы, возможно, уже знакомы, но, надеюсь, неожиданно найдете здесь и пару самородков.
Давайте начнем…
1. Используйте Selection colors при массовом изменении цветов
При работе с более значимыми компонентами и необходимости быстрой смены цвета не тратьте время, щелкая на отдельные элементы и меняя цвета один за другим.
Используйте панель Selection colors, чтобы изменить эти цвета одновременно и гораздо быстрее.
2. Чистая дизайн-система – с этим полезным шорткатом можно поддерживать порядок в слоях
Каюсь, раньше я оставлял свою панель слоев похожей на организованный хаос. С открытыми группой за группой, элементом за элементом, что затрудняло нахождение реально нужных элементов в слоях.
Используйте простое сочетание клавиш Alt + L , чтобы сворачивать все слои, сохранять чистоту панели и не терять фокус.
3. Чтобы быстрее найти текстовые стили, просто используйте поиск
При замене текстовых стилей не прокручивайте бесконечные варианты. Используйте поиск.
Быстрее набрать «Headline 2» или «H2», чем просматривать длиннющий список текстовых стилей в поисках подходящего варианта.
И думайте, что вам всегда нужно забегать вперед и вводить полное название стиля в поле поиска. Например, «Headline 37».
Что-нибудь вроде «H 37» – это все, что вам нужно.
Работайте с краткими и понятными вещами, чтобы ускорить дизайн.
4. Для более быстрой навигации по цветовым стилям выберите параметр «Список»
Как я уже упоминал, при работе с большой дизайн-системой полезно как можно быстрее перемещаться по цветовым стилям, стилям текста и т. д.
На мой взгляд, переключение на параметр «Список» (а не «Сетка») всегда упрощает просмотр ваших цветовых стилей. Так отображаются и названия, а не одни только образцы цвета.
5. Дизайн-система с большим количеством слоев – используйте эти шорткаты, чтобы перемещаться быстрее
В прошлом я был повинен в том, что прокручивал и щелкал по многочисленным группам и родительским контейнерам в слоях, чтобы найти нужный элемент.
Сэкономьте время и не используйте мышь.
Используйте клавиши Tab и Enter, чтобы быстро просматривать и искать элементы на панели «Слои».
Ой. И зажимайте Shift при использовании клавиш, о которых я только что упомянул, чтобы точно так же вернуться вверх.
6. Быстрая замена компонентов с этим удобным шорткатом
Этот совет доказал свою полезность при работе над различными версиями дизайна. И лучше всего работает при замене иконок в проекте.
Например, выберите иконку на панели «Assets». Затем, удерживая Alt + Cmd, начните перетаскивать ее в свой дизайн, где тут же заметите фиолетовую рамку вокруг уже существующей иконки. А после просто моментально поменяйте их местами.
7. Меняйте размер компонентов с поддержкой Auto-Layout в мгновение ока
При работе с основным компонентом, который вы вставили в свой проект, нажмите на значок глаза в слоях, чтобы быстро скрыть ненужные элементы.
Этот удобный маленький значок также заставит ваш компонент менять размер и выравниваться именно так, как вам нужно.
8. Избегайте путаницы с выравниванием текста при использовании Auto-Layout
Когда дело доходит до компонентов с Auto-Layout, есть одна вещь, которая может вызвать у пользователей небольшое замешательство. Это то, почему эти надоедливые текстовые элементы не выравниваются так, как все остальное в компоненте.
Больше никаких беспокойств.
Работая с текстовыми элементами, не забудьте перейти в настройки выравнивания и поменять его там, чтобы ваш текст правильно соотносился с остальными элементами.
9. Компонент неправильно меняет размер? Вы проверили интервал?
На некоторых компонентах с Auto-Layout можно увидеть странные визуальные причуды при попытке изменить их размер вручную.
Например, с чем-то простым, вроде Chip Component. Вы вводите текст, чтобы изменить название, и все отлично подстраивается.
Но когда вы хотите пойти дальше и воспользоваться боковыми точками для изменения размера вручную, все не всегда выглядит так хорошо.
На самом деле здесь нет проблем. Просто перейдите в настройки Auto Layout и измените интервал с Packed на Space Between.
Надеюсь, вы нашли здесь несколько полезных советов, которые примените уже сейчас, а ваша дизайн-система станет лучше.
Figma – отличный инструмент со столькими ценными и экономящими время шорткатами, что я уверен, вы откроете для себя еще много таких.
