Иногда достаточно внести несколько небольших изменений в работу, чтобы быстро улучшить свои навыки. Эти советы помогут вам ускорить рабочий процесс и добиться высочайшего качества ваших проектов. Кому-то они могут показаться очевидными. Но фишка в том, что мы часто отмахиваемся от самого очевидного совета, хотя он и является основой профессионального развития.
1. Используйте компоненты для создания наборов элементов
Когда вам нужно создать большое количество вариантов кнопок, полей ввода и так далее, вы можете потратить много драгоценного времени. Что, если вы решите, что радиус скругления 8 пикселей выглядит лучше, чем 12 пикселей, или вы хотите внести другие корректировки.
Используя родительские компоненты для создания различных опций и состояний, мы можем упростить эту задачу. Вам нужно внести коррективы в родительский компонент, и это приведет к изменениям во всех дочерних компонентах.
Для этого создайте родительский компонент со всеми свойствами, текстом и значками, которые есть во всех параметрах. После этого в дочерних компонентах нужно просто скрыть ненужные элементы.
Сами родительские компоненты не обязательно должны быть частью дизайна, их можно разместить рядом на одной странице или во фрейме. Использовать “.” или “_” в имени, чтобы предотвратить их размещение в составе библиотеки компонентов.
2. Сохраняйте файлы с обложками
При большом количестве проектов бывает сложно найти нужный файл в Figma.
Создание обложки — простое и эффективное решение, которое сделает проекты узнаваемыми и легкими для поиска.
Все, что нужно для создания обложки:
- Создайте страницу в документе и назовите ее «Обложка» (необязательно, но не обязательно).
- Нарисуйте рамку для обложки (оптимальный размер 1920 x 960).
- Заполните обложку элементами дизайна, такими как логотип или другие символические изображения, которые помогут вам и вашей команде узнать проект.
- Щелкните правой кнопкой мыши на рамке и выберите «Установить как миниатюру».
3. Используйте стили буквально для всего
Думайте о стилях как о компонентах для цвета, текста, эффектов и штрихов.
При проектировании со стилями мы можем экспериментировать с штрихами, текстом и цветом на любом элементе дизайна с примененным стилем, не теряя времени. Быстрое изменение, и дизайн автоматически обновляется во всех случаях, на которые ссылается этот стиль.
Заманчиво использовать пипетку и просто заполнять цвета там, где мы хотим, но я настоятельно рекомендую использовать этот передовой метод как можно чаще. Стили избавят нас от головной боли и позволят вносить исправления на лету.
Кроме того, если вы хотите организовать свои компоненты в папки, например «Фирменные цвета», используйте косую черту для разделения имени: Фирменные цвета / основные.
4. Организуйте наборы опций с помощью Автомобиль Макет
Знаете ли вы, что можно организовать варианты элементов с помощью автоматической компоновки? Щелкните, чтобы выбрать кадр с набором выделения, и нажмите Shift + A. Auto Layout упрощает расположение компонентов.
Это подводит нас к следующему пункту…
5. Используйте Auto Layout для всего
Auto Layout — один из самых важных навыков, которыми должен обладать современный UI-дизайнер.
Auto Layout меняет правила игры в продуктовом дизайне. Это обеспечивает более точный подход к разработке продукта и поддерживает согласованность и масштабируемость в файле проекта.
Если вы еще не освоили Auto Layout, я не могу не порекомендовать его Бесплатный экспресс-курс Пабло Стэнли по Auto Layout. 👈
Создавая дизайн с помощью Auto Layout, мы можем сэкономить много времени, удаляя контент, добавляя контент, создавая строки с похожим контентом, создавая адаптивные компоненты и многое другое.
Я разрабатываю каждую страницу с помощью Auto Layout. Это дает вам возможность быстро регулировать интервалы или добавлять и удалять контент. Поэтому нет необходимости попиксельно перемещать элементы для их настройки и тратить на этот процесс лишнее время.
6. Создайте блок-схемы для экранов
По мере роста файлов дизайна они могут легко сбивать с толку других людей, которые не сидят над этим дизайном изо дня в день.
Чтобы клиенту или коллеге было проще понять дизайн, вы можете показать, как работает программа, продемонстрировав блок-схемы.
Для этого я использую не очень известный прием — просто копирую коннектор из FigJam и вставляю в Figma. После этой манипуляции все функции контакта сохранятся, и вы сможете изменить его по своему усмотрению. Это очень практичный способ создания блок-схем для демонстрации и визуализации работы приложения.
7. Используйте сдержанностьпп (Ограничения)
Используйте ограничения, чтобы структура была организована и настраиваема. Эта функция отвечает за то, как будут реагировать объекты, когда мы изменяем размер их фреймов в Figma. Ограничения помогают вам контролировать, как ваш дизайн будет выглядеть на экранах разных размеров и на разных устройствах. Это упростит задачу и избавит нас от необходимости вносить коррективы каждый раз, когда нам нужно изменить размер кадра.
Если вы когда-нибудь захотите игнорировать ограничения, устанавливающие границы объектов в кадре, все, что вам нужно сделать, это удерживать нажатой клавишу CMD или CTRL при изменении размера кадра.
8. Создайте макеты для компонентов
Создать компонент для карты — это хорошо, но что, если вам нужен целый список карт? Здесь на помощь приходят макеты. Они экономят много времени и облегчают нашу жизнь.
Идею макетов популяризировал Брэд Фрост в Книга Методология атомарного дизайна“, и это довольно простая концепция.
Вот как это работает: допустим, у нас есть компонент, а это записи в блоге. Этот компонент содержит изображение и текст. Что ж, мы могли бы клонировать компонент и разместить десять его экземпляров на каждой монтажной области, где должен быть список блогов.
Или мы можем создать макет блога, а затем поместить этот макет в файл проекта. Теперь, когда вам нужно добавить контент или изменить пространство между компонентами, это можно настроить в родительском макете блога.
9. Организация компонентов
Нет ничего хуже, чем открыть чужой файл дизайна и понять, что у вас нет возможности внести изменения в основные компоненты, не щелкнув правой кнопкой мыши и нажав «Перейти к основному компоненту». Эта проблема возникает, когда компоненты не организованы отдельно от проекта.
Такая неорганизованность, безусловно, приводит к ненужным действиям и трате времени. Поэтому я всегда рекомендую перемещать все родительские компоненты на предназначенную им страницу или в отдельное место в файле проекта. Это упрощает замену компонентов и поиск несоответствий. Еще лучше, когда дизайнеры организуют свои компоненты с помощью заголовков. Например, отдельная страница для кнопок, цветовых стилей, полей ввода и так далее.
Чем лучше выглядят файлы дизайна, тем лучше будет выглядеть сам дизайн.
10. Используйте ткацкий станок
Что такое Лум? Loom позволяет записывать экран и быстро отправлять видео. Очень выручает, когда время обсуждения дизайна не совпадает или нужно написать много текста. Это незаменимый инструмент для удаленной работы. Loom сэкономит бесчисленное количество совещаний и драгоценное время, которое вы можете потратить на дизайн.
Если ваша команда находится в разных часовых поясах, у вас сумасшедший график, у вас нет офиса или вы просто не можете общаться, попробуйте использовать Loom.
Читайте также:
Ключевые принципы Soft UI: плюсы и минусы тренда
10 главных правил дизайнерской этики, которые должен знать каждый
3 популярных тренда веб-дизайна на июнь 2021 года
