Как организовать проект по дизайну интерфейса в пространстве Figma
В Figma нет единых правил, как именно организовывать проект, и это создает некоторую сложность. Помимо основных инструментов — страниц и фреймов — можно использовать визуализацию. Главное, чтобы стороннему наблюдателю было понятно, что происходит и куда смотреть.
Три главных предмета в фокусе внимания
-
Структура проекта
Страницы и фреймы, их названия и упорядоченность.
-
Договоренности о передаче результата
Должно быть конкретное место в файле (пространство на канве, несколько страниц), которое мы используем для передачи макетов разработчикам.
-
Коммуникация
В Figma можно создать язык коммуникации для команды. Например, если фрейм требует внимания копирайтера, то у него появляется большая красная рамка.
5 советов,
как делать хорошо
- Придумайте верхнеуровневую систему наименования
Как будут называться страницы и фреймы? Синхронизируйте эту систему с ожиданиями разработки.
- Привяжите все к фреймам первого уровня
Если вы двигаете фрейм, то должно двигаться все, что к нему привязано. Это позволяет как угодно размещать экраны и не терять элементы. Кстати, комментарии привязаны к фреймам верхнего уровня, а не нижнего.
- Фокусируйте внимание
Коллег почти никогда не интересуют версии, кроме последней. Используйте прозрачность или блюр, чтобы скрывать неактуальное. Используйте яркую жирную рамку и огромные стрелки, чтобы показать, куда смотреть.
- Опишите свой визуальный язык
Зафиксируйте все принципы организации пространства и опишите так, чтобы было понятно коллегам.
- Смотрите с высоты птичьего полета
Взгляд на макеты при минимальном масштабе (когда видно максимум макетов) выявляет структуру страницы.
Например
Визуализировали инструментами Figma поведение пользователя в физическом мире.
Первый проект, где мы сразу использовали новую (на момент работы) возможность Figma — переменные.
Хороший образец
Системой организации пространства пользовались разные люди: разработчики, аналитики, медики, менеджеры. Все понимали, как это работает.
Так делать не надо
Ничего не названо, все валяется на одной странице, внешнему наблюдателю вообще непонятно, что тут происходит и куда смотреть.
Инструменты
Стандартные формы Figma
Использовать для акцентов
Фреймы
Основной структурный элемент чего угодно со своими нюансами визуалиазции
Виджеты (не плагины)
Стикеры для заметок, логи, тудушки
Версионность
Помогает убрать визуальный мусор и ускоряет работу
В чужом дизайне невозможно разобраться, если в нем нет структуры. Если вы заботитесь о людях, которые будут смотреть ваш дизайн (программистах, менеджерах, эйчарах), то вам нужна структура.
Евгений Романовский, руководитель проектного офиса «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com
Собака Павлова
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
Кое-что показываем и рассказываем на весь интернет
, интересное в 
, полезное на 
Санкт-Петербург • Подгорица • Хайфа
Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169