Figma

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

Сайт Figma

Подробности

Figma предоставляет широкий функционал:

Векторные инструменты: Рисование, редактирование кривых, работа с сетками и направляющими.
Компоненты и стили: Создание переиспользуемых элементов (кнопки, меню) с синхронизацией изменений.
Прототипирование: Настройка переходов, анимаций и интерактивности (клики, ховеры) для демонстрации логики приложения.
Авто-лейаут: Адаптивные макеты, автоматически подстраивающиеся под разные размеры экранов.
Режим разработчика: Экспорт кода (CSS, Swift, XML) для передачи макетов программистам.
Командная работа: Комментирование, совместное редактирование, контроль версий и история изменений.
Плагины: Расширения для генерации контента (Lorem Ipsum), иконок, проверки контрастности цветов.
Дизайн-системы: Создание и управление библиотеками компонентов для масштабируемых проектов.
Офлайн-режим: Работа без интернета с синхронизацией при восстановлении соединения.

Для каких целей можно использовать

Дизайн интерфейсов: Разработка UI/UX для сайтов, мобильных приложений (iOS, Android), SaaS-платформ.
Прототипы и MVP: Интерактивные макеты для тестирования гипотез и презентаций заказчикам.
Дизайн-системы: Унификация компонентов и стилей в крупных продуктах (например, корпоративных порталах).
Брендинг: Создание логотипов, айдентики, презентаций и маркетинговых материалов.
Командная разработка: Совместная работа дизайнеров, менеджеров и разработчиков над проектом.
Образование: Обучение веб-дизайну, проведение воркшопов с онлайн-доступом к материалам.
Иллюстрации: Отрисовка векторных изображений, иконок и инфографики.

Возможные недостатки

Зависимость от интернета: Без подключения функционал ограничен, даже в десктоп-версии.
Ограничения бесплатного тарифа: Только 3 проекта и 2 редактора, история изменений — 30 дней.
Сложность для новичков: Инструменты вроде Auto Layout требуют времени на освоение.
Производительность: Лаги при работе с большими файлами или сложными анимациями.
Нет встроенного 3D: Не подходит для трёхмерного моделирования (в отличие от Blender или SketchUp).
Экспорт кода: Сгенерированный код часто требует ручной доработки.
Цена для команд: Подписка Figma Organization стоит дороже аналогов (например, Adobe XD).
Риски облачного хранения: Конфиденциальные проекты могут быть уязвимы при утечке аккаунта.

Преимущества

Доступно онлайн

Для просмотра работы в Figma не требуется авторизация или специальное ПО: макеты можно смотреть и комментировать по ссылке в браузере. Это делает процесс прозрачным, упрощает коммуникацию с дизайнером и ускоряет внесение правок в макеты.

Командная работа из любой точки мира

Дизайнеры, иллюстраторы и верстальщики могут заходить и изменять макеты Figma онлайн в любое время, где бы они не находились. Это делает командную работу более гибкой, простой и комфортной.

Активное сообщество

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

Интерактивный прототип готов к вашим комментариям!

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

Дизайн-система — легко

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

Экспертиза Atman

Системный подход

При разработке дизайн-макетов в Figma создаем систему: цвета, шрифты, компоненты с набором вариантов. Так изначальный дизайн-концепт превращается в набор универсальных правил, элементов и блоков, которые можно переиспользовать для новых разделов сайта.

Прозрачный итеративный процесс

В проект включено 3 шага внутри Figma: прототип, дизайн-концепт и дизайн-макеты. На каждом шаге предусмотрен показ результата и прием замечаний. Итерации замечаний отражаем в Figma — можно увидеть, как улучшается макет после внесения изменений.

Плагин-пак для проектов

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

Передаем доступы и исходники

По завершению проекта предоставляем файл с доступами, в котором содержатся ссылки на просмотр и редактирование проекта в Figma. Кроме того, передаем исходники в формате .fig и .pdf.