Дизайн-система в Figma: 9 советов


20.10.2021 Время чтения - 4 минуты 1175

В этой статье я перечислил несколько быстрых и простых методов, которые помогут ускорить рабочий процесс дизайна в Figma. Большинство из этих идей подходят, когда у вас есть именно дизайн-система или огромные файлами. Но могут пригодиться и для повседневного использования Figma.

С некоторыми из них вы, возможно, уже знакомы, но, надеюсь, неожиданно найдете здесь и пару самородков.

Давайте начнем…

1. Используйте Selection colors при массовом изменении цветов

An example of Selection Colors being used on Mobile App design in Figma

При работе с более значимыми компонентами и необходимости быстрой смены цвета не тратьте время, щелкая на отдельные элементы и меняя цвета один за другим.

Используйте панель Selection colors, чтобы изменить эти цвета одновременно и гораздо быстрее.

2. Чистая дизайн-система – с этим полезным шорткатом можно поддерживать порядок в слоях

An example of a keyboard shortcut being used in Figma to collapse the Layers Panel

Каюсь, раньше я оставлял свою панель слоев похожей на организованный хаос. С открытыми группой за группой, элементом за элементом, что затрудняло нахождение реально нужных элементов в слоях.

Используйте простое сочетание клавиш Alt + L , чтобы сворачивать все слои, сохранять чистоту панели и не терять фокус.

3. Чтобы быстрее найти текстовые стили, просто используйте поиск

An example of the Text Styles Search feature being used in Figma

При замене текстовых стилей не прокручивайте бесконечные варианты. Используйте поиск.

Быстрее набрать «Headline 2» или «H2», чем просматривать длиннющий список текстовых стилей в поисках подходящего варианта.

И думайте, что вам всегда нужно забегать вперед и вводить полное название стиля в поле поиска. Например, «Headline 37».

Что-нибудь вроде «H 37» – это все, что вам нужно.

Работайте с краткими и понятными вещами, чтобы ускорить дизайн.

4. Для более быстрой навигации по цветовым стилям выберите параметр «Список»

An example of the List option being selected in the Colors Panel in Figma

Как я уже упоминал, при работе с большой дизайн-системой полезно как можно быстрее перемещаться по цветовым стилямстилям текста и т. д.

На мой взгляд, переключение на параметр «Список» (а не «Сетка») всегда упрощает просмотр ваших цветовых стилей. Так отображаются и названия, а не одни только образцы цвета.

5. Дизайн-система с большим количеством слоев – используйте эти шорткаты, чтобы перемещаться быстрее

An example of keyboard shortcuts being used to navigate quickly through the Layers Panel in Figma

В прошлом я был повинен в том, что прокручивал и щелкал по многочисленным группам и родительским контейнерам в слоях, чтобы найти нужный элемент.

Сэкономьте время и не используйте мышь.

Используйте клавиши Tab и Enter, чтобы быстро просматривать и искать элементы на панели «Слои».

Ой. И зажимайте Shift при использовании клавиш, о которых я только что упомянул, чтобы точно так же вернуться вверх.

6. Быстрая замена компонентов с этим удобным шорткатом

An example of a keyboard shortcut being used in Figma to quickly swap out elements in a design

Этот совет доказал свою полезность при работе над различными версиями дизайна. И лучше всего работает при замене иконок в проекте.

Например, выберите иконку на панели «Assets». Затем, удерживая Alt + Cmd, начните перетаскивать ее в свой дизайн, где тут же заметите фиолетовую рамку вокруг уже существующей иконки. А после просто моментально поменяйте их местами.

7. Меняйте размер компонентов с поддержкой Auto-Layout в мгновение ока

An example of the Eye icon being used in the Layer Panels in Figma to quickly hide and show elements in a design

При работе с основным компонентом, который вы вставили в свой проект, нажмите на значок глаза в слоях, чтобы быстро скрыть ненужные элементы.

Этот удобный маленький значок также заставит ваш компонент менять размер и выравниваться именно так, как вам нужно.

8. Избегайте путаницы с выравниванием текста при использовании Auto-Layout

An example of Text Alignment being used on a text element in Figma

Когда дело доходит до компонентов с Auto-Layout, есть одна вещь, которая может вызвать у пользователей небольшое замешательство. Это то, почему эти надоедливые текстовые элементы не выравниваются так, как все остальное в компоненте.

Больше никаких беспокойств.

Работая с текстовыми элементами, не забудьте перейти в настройки выравнивания и поменять его там, чтобы ваш текст правильно соотносился с остальными элементами.

9. Компонент неправильно меняет размер? Вы проверили интервал?

An example of the Auto Layout spacing options being used on a design in Figma

На некоторых компонентах с Auto-Layout можно увидеть странные визуальные причуды при попытке изменить их размер вручную.

Например, с чем-то простым, вроде Chip Component. Вы вводите текст, чтобы изменить название, и все отлично подстраивается.

Но когда вы хотите пойти дальше и воспользоваться боковыми точками для изменения размера вручную, все не всегда выглядит так хорошо.

На самом деле здесь нет проблем. Просто перейдите в настройки Auto Layout и измените интервал с Packed на Space Between.

Надеюсь, вы нашли здесь несколько полезных советов, которые примените уже сейчас, а ваша дизайн-система станет лучше.

Figma – отличный инструмент со столькими ценными и экономящими время шорткатами, что я уверен, вы откроете для себя еще много таких.