10 лучших приемов в Figma или как вырасти до уровня Senior

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

1. Используйте компоненты для создания наборов элементов

Когда нужно создать большое количество вариантов кнопок, полей ввода и так далее, вам может потребоваться куча драгоценного времени. Что если вы решите, что радиус скругления 8 пикселей выглядит лучше, чем 12, или захотите внести другие корректировки.

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

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

Сами родительские компоненты необязательно должны быть частью дизайна, их можно разместить рядом на той же странице или во фрейме. Используйте «.» или «_» в названии, чтобы предотвратить их размещение как часть библиотеки компонентов.

2. Сохраняйте файлы с обложками

При большом количестве проектов бывает трудно найти нужный файл в Figma.

Создание обложки – это простое и действенное решение, которое позволит сделать проекты узнаваемыми и упростит их поиск.

Все, что нужно для создания обложки:

1. Создайте страницу в документе и назовите ее «Обложка» (как вариант, но не обязательно)
2. Нарисуйте фрейм для изображения обложки (лучший размер для этого – 1920 x 960).
3. Наполните обложку такими элементами дизайна, как логотип или другими символическими изображениями, которые помогут вам и вашей команде узнать проект.
4. Щелкните на фрейм правой кнопкой мыши и выберите «Set as thumbnail» (Установить, как миниатюру).

3. Используйте стили буквально для всего

Воспринимайте стили как компоненты для цвета, текста, эффектов и обводки.

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

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

Кроме того, если вы хотите организовать свои компоненты в папки, например «Brand Colors», используйте слэш для разделения названия: Brand Colors / Primary.

4. Организовывайте наборы вариантов с помощью Auto Layout

Знаете ли вы, что можно организовать варианты элементов с использованием автоматического макета? Выделите нажатием фрейм с набором вариантов и нажмите Shift + A. С Auto Layout очень просто упорядочить компоненты.

Это плавно подводит нас к следующему пункту …

5. Используйте Auto Layout для всего

Auto Layout – один из самых важных навыков, которым должен обладать любой современный UI-дизайнер.

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

Если вы еще не освоили Auto Layout, я не могу не порекомендовать бесплатный ускоренный курс Пабло Стэнли по Auto Layout. 👈

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

Я разрабатываю каждую страницу, используя Auto Layout. Это дает возможность быстро регулировать интервалы или добавлять и удалять контент. Поэтому нет необходимости передвигать элементы попиксельно для их выравнивания и тратить на этот процесс лишнее время.

6. Создавайте блок-схемы для экранов

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

Чтобы облегчить процесс восприятия дизайна для клиента или коллеги, вы можете показать процесс работы программы, продемонстрировав блок-схемы.

Для этого я использую не очень известный прием – просто скопируйте и вставьте коннектор из FigJam в Figma. После этой манипуляции все функции коннектора сохранятся, и вы сможете видоизменять его на свое усмотрение. Это очень удобный способ создания блок-схем для демонстрации и визуализации работы приложения.

7. Используйте функцию Сonstraints (Ограничения)

Чтобы фрейм оставался организованным и адаптируемым, используйте Constraints. Эта функция отвечает за то, как будут реагировать объекты, когда мы изменим размер их фреймов в Figma. Constraints помогают контролировать внешний вид дизайна на экранах разных размеров и на разных устройствах. Это облегчит работу и избавит нас от необходимости вносить коррективы каждый раз, когда нужно изменить размер фрейма.

Если вы когда-нибудь захотите проигнорировать Constraints, устанавливающие ограничения для объектов в фрейме, все, что нужно сделать, это удерживать CMD или CTRL в процессе изменении размера фрейма.

8. Создавайте макеты для компонентов

Создание компонента для карточки — это здорово, но что делать, если нужен целый список карточек? Вот где пригодятся макеты. Они сэкономят массу времени и облегчат нам жизнь.

Идея макетов была популяризирована Брэдом Фростом в книге «Методология атомарного дизайна», и это довольно простая концепция.

Вот как это работает: допустим, у нас есть компонент и это сообщения в блоге. Этот компонент содержит изображение и текст. Что ж, мы могли бы клонировать компонент и разместить его в десяти экземплярах на каждом артборде, где должен быть список блогов.

Или мы можем создать макет блога, а затем поместить этот макет в файл проекта. Теперь, когда будет нужно добавить контент или внести изменения в пространство между компонентами, это можно настроить в родительском макете блога.

9. Организация компонентов

Нет ничего хуже, чем открыть чужой дизайн-файл и понять, что у вас нет возможности внести изменения в основные компоненты, не прибегая к щелканью правой кнопкой мыши и нажатию на «Go to the main component». Эта проблема возникает тогда, когда компоненты не организованны отдельно от дизайна.

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

Чем лучше будут выглядеть дизайн-файлы, тем лучше будут выглядеть сами дизайны.

10. Используйте Loom

Что такое Loom? Loom позволяет записывать экран и быстро отправлять видео. Он очень выручает, когда не совпадает время для обсуждения дизайна или вам приходиться набирать большое количество текста. Это незаменимый инструмент для удаленной работы. Loom сэкономит вам бесчисленное количество встреч и сохранит бесценное время, которые вы можете потратить на дизайн.

Если ваша команда находится в разных часовых поясах, у вас сумасшедшие графики, нет офиса или просто не можете поболтать – попробуйте использовать Loom.