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

Сайт Figma
Перейти

В 2023 году Atman был сертифицирован Webflow по направлениям: CMS, Layouts Level 01, Layouts Level 02, Webflow 101, Webflow Experts Certification. Подробнее про сертификацию.

Подробности

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.
Передаем доступы и исходники

Где применяем

Описание процесса, этапности и сроков

Примеры проектов

Назад
Вперед
russianalfalfa.com
russianalfalfa.com

russianalfalfa.com

russianalfalfa.com

Имиджевый лендинг
Животноводство
edu.apkit.ru
edu.apkit.ru

edu.apkit.ru

edu.apkit.ru

Веб-портал
Образование
урокцифры.рф
урокцифры.рф

урокцифры.рф

урокцифры.рф

Веб-портал
Образование
Behance
oddsjam.com
oddsjam.com

oddsjam.com

oddsjam.com

Проектирование и дизайн
Спорт
nordglass.asahi.ru
nordglass.asahi.ru

nordglass.asahi.ru

nordglass.asahi.ru

Имиджевый лендинг
Промышленность

Вопросы и ответы

Вперед

Вперед

Вперед

Смотреть еще

Все технологии
Перейти
GitGit

Git

Сервис совместной разработки с историей изменений и хранением кода.

TildaTilda

Tilda

Конструктор сайтов и система управления контентом.

VectaryVectary

Vectary

Инструмент создания и модификации 3D-изображений в режиме онлайн.