I'm available for business trips to other cities for projects lasting a month or longer.
На главную
на 18 мин.
10 января 2025

10 заповедей, которым нужно следовать, работая в Figma | (Ф)

Разобрали азы работы в Фигме — всё, что нужно знать начинающему об одном из самых популярных графических редакторов. Заповеди пригодятся на первых этапах знакомства и будут полезны тем, у кого уже есть небольшой опыт. Лайфхаки тоже в наличии!
Анастасия Нечипоренко
обложка

Заповедь 1: Проектируй с целью

Работа над любым проектом начинается с понимания задачи. Когда вы делаете дизайн без цели, результат может быть красивым, но неэффективным. Прежде чем приступить к работе, важно разобраться, для чего создаётся проект и как он повлияет на пользователей и бизнес.

Шаги по определению цели проекта

01
Задайте себе и клиенту правильные вопросы.

Чем больше вопросов вы зададите, тем лучше. Для придумывания вопросов можно устроить мозговой штурм с коллегами или использовать метод «5 почему». Самые важные вопросы — те, которые не возникают сразу. Представьте, что дизайн уже сделан, что может произойти?
02
Сформулируйте ключевой вопрос: «Какую задачу должен решить дизайн?»

Примерные ответы:
привлечение новой аудитории;
увеличение продаж или конверсии;
создание визуально запоминающегося бренда.
03
Определите метрики успеха.

Конкретные показатели помогут вам и клиенту понять, достиг ли проект цели. Это могут быть:
увеличение количества лайков;
прирост подписчиков;
увеличение времени, проведённого пользователями на сайте;
кликабельность ссылок или кнопок.
04
Опишите конечный результат.

На основе задачи и метрик сформулируйте чёткое видение результата. Это поможет сосредоточиться на главном и исключить второстепенные детали.

Почему важно знать свою целевую аудиторию

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

Целевая аудитория — это группа людей, для которых создаётся продукт. Они могут быть объединены по определённым категориям: возрасту, полу, профессии, интересам, уровню дохода, образу жизни и т. д.

Чтобы лучше узнать вашу ЦА, можно провести интервью, опросы или изучить конкурентов.

Какие цели закроет понимание аудитории:
точное попадание в потребности;
создание эмоционального отклика;
подбор наиболее подходящих визуальных решений.
Рекомендация: чтобы больше узнать про важность исследования перед началом разработки дизайна, прочитайте книгу Дональда Нормана «Дизайн привычных вещей». Она рассказывает, как избежать типичных ошибок проектирования, улучшить пользовательский опыт и сделать дизайн не просто красивым, но и удобным.
«Дизайн привычных вещей», Дональд Норман
как работать в фигме

Заповедь 2: Используй компоненты

Преимущества компонентов в Figma

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

Как использовать компоненты в Figma

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

Внесите в элемент все настройки и, кликнув по нему правой кнопкой мыши, выберите Create component.
как работать в figma
02
Создайте варианты.

Если у элемента есть несколько состояний (например основная кнопка, кнопка при наведении, неактивная кнопка), создайте для всех них главные компоненты. И при именовании этих элементов для удобства используйте систему со слэшами: Название элемента/Значение первого свойства/Значение второго свойства/…/Значение N-ного свойства. Затем выделите их и используйте функцию Combine as variants, которая находится на правой панели настроек.
как работать в фигме
03
Используйте копии компонентов.

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

Заповедь 3: Организация слоёв и страниц

Грамотная организация слоёв и страниц помогает работать в Фигме более продуктивно. Чем лучше структурирован файл, тем легче в нём ориентироваться как вам, так и другим участникам команды.

Советы по именованию слоёв и страниц для удобного доступа

Давайте слоям осмысленные названия.

Вместо Rectangle 1 или Frame 5 используйте Button/Primary, Icon/Search.
Группируйте связанные элементы.

Для более упорядоченного вида объединяйте слои в группы или фреймы. Например, все элементы карточки с текстовыми слоями, иконками, задним фоном, картинками объедините в фрейм Card/Product_Name.
Отдавайте предпочтение функции Frame, а не Group, так как фреймы более гибкие и позволяют использовать автолейауты, сетки и ограничения.
как работать в фигме
Используйте страницы для разделения больших проектов, например, по экранам или этапам работы.
как работать в figma

Заповедь 4: Применяй сетки и макеты

Как сетки помогают в создании гармоничного дизайна

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

Типы сеток бывают следующие:
Пиксельная сетка (Grid) — равномерная сетка из квадратов. Полезна для создания иконок или мелких иллюстраций.
Сетка из колонок (Column Grid) — вертикальные ряды. Используется для адаптивных макетов.
Сетка из строк (Row Grid) — горизонтальные ряды. Используется для построения вертикальных структур. Например, разделения контента на блоки.
Комбинируйте разные виды сеток для большего контроля над вертикальным и горизонтальным выравниванием.
как работать в фигме

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

Шаблоны макетов — это заранее подготовленные размеры и структуры фреймов, которые соответствуют стандартным разрешениям экранов (десктоп, планшет, мобильные устройства и т. д.). Эти макеты позволят легко адаптировать интерфейс к разным устройствам.
как работать в figma

Заповедь 5: Поддерживай единый стиль

Создание и использование стилей текста, цветов и эффектов

Используя стили текста, цветов и эффектов в Фигме, вы сможете создать дизайн, который будет легко поддерживать в будущем.
01
Как создать стиль текста:
Выберите текстовый блок.
Настройте параметры текста (шрифт, размер, интервал).
В панели справа нажмите на иконку Style рядом с параметрами текста.
Нажмите «+» и сохраните стиль с названием, например: H1, Body, Caption.
как работать в фигме
02
Как создать стили цветов:
Выберите объект или слой, к которому применён нужный цвет.
В панели справа зайдите в раздел Fill и нажмите на иконку Style.
Нажмите «+», задайте имя (например: Primary Blue, Secondary Gray, Accent Red) и сохраните стиль.
как работать в figma
Разделите цветовые стили на категории.

Основные цвета (Primary): ключевые цвета интерфейса, используемые для кнопок, заголовков и акцентных элементов.

Вспомогательные цвета (Secondary): нейтральные или дополняющие оттенки.

Фоновые цвета (Background): для задников и разделителей.

Текстовые цвета: чёрный, тёмно-серый, светло-серый.

Статусные цвета: ошибки (красный), успехи (зелёный), предупреждения (жёлтый).
03
Как создать стили эффектов:
Примените эффект к элементу через раздел Effects.
Настройте параметры (например, тени: X, Y, Blur).
Нажмите Style и c помощью «+» добавьте стиль.

Советы по поддержанию единого стиля

Создайте дизайн-систему.

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

Ограничьтесь 2−3 основными цветами и их оттенками.Избегайте визуального шума из-за слишком большого количества цветов.
Следите за отступами и размерами.

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

Заповедь 6: Сотрудничай с командой

Как эффективно работать в команде в Figma

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

Комментарии и обратная связь

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

Заповедь 7: Тестируй и улучшай

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

Как проводить тестирование дизайна

01
Создайте интерактивные прототипы: настройте переходы между экранами, чтобы показать, как будет работать интерфейс. (Настроить прототип в Фигме можно во вкладке Prototype на правой панели настроек).
как работать в фигме
02
Проведите пользовательские тесты: соберите группу людей из своей целевой аудитории, чтобы проверить удобство дизайна.
03
Проанализируйте результаты и дорабатывайте дизайн.
Тестирование превращает ваш проект в Фигме из гипотезы в проверенное решение.

Заповедь 8: Используй плагины и инструменты

Как плагины могут ускорить процесс разработки

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

Краткий обзор полезных плагинов для Figma

Trace Image — приложение переводит картинки в векторы.

Text Prettier — если надоело следить за висячими предлогами, кавычками-ёлочками и длинными тире, используйте этот плагин — он сам всё сделает!

Iconify — коллекция бесплатных иконок.

Filter/effects — обработка фотографий.

Photopea — приложение-фотошоп внутри Фигмы.

Grid for Tilda Publishing — сетки под разные разрешения устройств.

To Path — располагает текст/вектор по кривой.

Clean Document — автоматически организует ваш файл.
как работать в figma

Заповедь 9: Документируй свой процесс

Документирование процесса помогает понять, почему были приняты определённые решения и как вы работали над проектом. И при обсуждении проекта вы сможете дать чёткий ответ на вопрос «Какую пользу принесёт дизайн?»

Как это помогает в будущем и для других участников команды

Собранная информация о проекте может пригодиться в будущем, если вы будете работать над аналогичным заданием в Фигме. Можно переиспользовать готовые решения и сократить время работы. А если к задаче подключится новый участник, ему будет легче вникнуть в суть проекта, и вы избежите лишних обсуждений.

Что стоит документировать?

01
Начальные исследования и брифинг с клиентом.
Какая цель проекта?
Описание целевой аудитории.
Основные требования и ограничения.
Ожидаемые результаты.
02
Процесс принятия решений и изменения.

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

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

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

Заповедь 10: Не бойся экспериментировать

Стандартные шаблоны и традиционные подходы, безусловно, полезны, но именно эксперименты позволяют создавать уникальные проекты. Эксперименты — это не всегда быстрый результат. Сначала может не получаться, и вы будете возвращаться к началу. Но чем больше проб, тем больше новых идей будет появляться.
01
Создавайте разные варианты одного экрана.
02
Используйте разные инструменты и подходы.
03
Собирайте обратную связь.
Один из барьеров для многих дизайнеров — страх неудачи. Однако эксперименты дают право на ошибку и ошибочный выбор. Ошибка — это возможность для анализа и улучшений. Каждое неудачное решение помогает понять, что работает, а что нет.

Читайте также