УДК 004.

92

FIGMA: ПРОТОТИПИРОВАНИЕ И АНИМАЦИЯ

Н. А. Варламова
Омский государственный технический университет, г. Омск, Россия

Аннотация – статья посвящена изучению функционала программы Figma, в

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

Ключевые слова – графический дизайн, Figma, прототип, анимация,

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

II. ПОСТАНОВКА ЗАДАЧИ

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

III. ТЕОРИЯ
Figma — кросс-платформенный онлайн-сервис для дизайнеров интерфейсов и веб-
разработчиков. Программа позволяет разрабатывать интерфейсы в режиме онлайн [1]. У
Figma две ключевые особенности: доступ к макету прямо из окна браузера и возможность
совместной работы над документами.
Данный сервис помогает создавать:
- Интерактивные прототипы сайтов и мобильных приложений;
- Элементы интерфейса — иконки, кнопки, меню, окна, формы обратной связи;
- Векторные иллюстрации.
В Figma все документы хранятся в облаке [2]. Благодаря этому в редакторе можно
коллективно работать над макетами и открывать их по ссылке, без скачивания. Можно
заходить в Figma через браузер или же скачать программу на компьютер. Она подходит как
для Windows, так и для Mac. В десктопной версии можно работать офлайн, а когда
появляется доступ к интернету, изменения синхронизируются.

49
 Рассмотрим подробнее возможности Figma именно в части создания прототипов
приложений и сайтов. Прототипирование – второй этап создания пользовательского
интерфейса информационной системы, на котором закладывается функциональность,
создаются ссылки, оценивается логика сценариев, предусмотренных в интерфейсе,
накидывается расположение основных управляющих элементов, и все это должно быть
представлено максимально наглядно как для заказчика, так и для разработчика. Еще одно
важное свойство прототипа – мнокократные итерации по доведению его до идеала. Дело в
том, что параллельно с оцениванием внешних качеств, после каждой итерации
прототипирования проводится тестирование за выявление ошибок в интерфейсе,
соответственно, чем быстрее можно внести в прототип исправления, тем быстрее идет
работа. В этом плане возможности Figma в части онлайн-доступа к макету неоценимы.
Преимущества Figma для веб-дизайнеров очевидны (как и для мобильных
дизайнеров): вы создаёте прототип и отрисовываете макет в одной программе. Это позволяет
после утверждения набросков сразу переходить отрисовке [3].
За последний год прототипирование в Figma значительно развилось [4]. Были
добавлены: мокапы устройств, фиксированные объекты, скроллинг и переходы.
Прототипирование в Figma бесплатное, и оно привязано к дизайну, поэтому больше нет
необходимости экспортировать экраны.
Мокапы устройств. Добавление ряда контейнеров – от iPhone и Android до Apple
Watch – в дизайне поможет проекту стать завершенным. Это также поможет другим
участникам команды получить контекст о масштабах дизайна.

Рис. 1. Мокапы устройств

Фиксированные объекты. В Figma можно зафиксировать верхние и нижние

колонтитулы в прототипировании. Также можно присоединять объекты, такие, как строки
состояния или кнопки сверху, снизу или по бокам фрейма c ограничениями.
Области скроллинга. Это совершенно новый уровень взаимодействия для
инструмента проектирования экрана. Можно разрешить скроллинг отдельных фигур в
родительском фрейме, который сам может быть прокручиваемым. Также есть возможность
представить карусель изображений, вертикальные списки и «скролл в любом направлении».
Переходы. Можно добавить постепенное исчезновение, слайд и пуш эффекты для
привязки кадров. Эти тонкие переходы имитируют анимацию нативных мобильных
приложений, поэтому прототипы выглядят профессионально.
Основные преимущества прототипирования в Figma [5]:

50
 1. В реальном времени: Изменение цвета заливки или размера шрифта в дизайне.
Прототип отражает изменения в реальном времени.
2. Связанные комментарии: В других инструментах комментарии отделены от
приложения. В Figma они связаны, поэтому не нужно переключаться между
вкладками при внесении изменений в дизайн, на основе фидбека.
3. Режим конференции TED: Возможность открыть прототип в мобильном браузере и
использовать телефон в качестве пульта дистанционного управления для
просмотра презентации.

IV. РЕЗУЛЬТАТЫ ЭКСПЕРИМЕНТОВ

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

Рис. 2. Макет сайта

Рис. 3. Анимирование макета сайта

51
 Рис. 4. Макет приложения для телефона

Рис. 5. Анимирование скроллинга

Рис. 6. Финальный вид скроллинга

Результаты проведенного исследования говорят о том, что интерфейс данной

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

52
выполнения работы. В ходе работы не возникло никаких проблем с применением и
использованием функций сервиса.

V. ВЫВОДЫ И ЗАКЛЮЧЕНИЕ
В заключение данного исследования хочется отметить, что Figma является
востребованным сервисом. Рабочие процессы дизайнеров не должны поддерживаться при
помощи постоянной синхронизации, обновления, интеграции и сохранения. Они должны
просто работать.
Figma позволяет заменить стандартный набор инструментов на одну простую
программу. Дизайнеру важны скорость работы над проектом и коммуникация в процессе.
Эти и многие другие задачи позволяет решить онлайн-сервис Figma. С монстрами
прототипирования, например, Axure Figma тягаться сложно, но она выигрывает своей
универсальностью и возможностью нарисовать полноценный сайт.
У Figma низкий порог вхождения и мощный потенциал при кажущейся простоте.

ИСТОЧНИК ФИНАНСИРОВАНИЯ. БЛАГОДАРНОСТИ

Научный руководитель: Большакова М.С. ассистент кафедры «Дизайн», ФГБОУ ВО
«Омский государственный технический университет», Омск, Россия.

СПИСОК ЛИТЕРАТУРЫ
1. Figma 3.0! Стили, прототипирование и дизайн в масштабе. URL:
https://ux.pub/figma-3-0-stili-prototipirovanie-i-dizajn-v-masshtabe/ (дата обращения:
25.04.2020).
2. Что такое figma: возможности и принципы работы. URL:
https://skillbox.ru/media/design/chto_takoe_figma/ (дата обращения: 27.04.2020).
3. Прототипирование в figma. URL: https://https://figma.info/blog/articles/2019-04-22-
prototipirovanie-v-figma.html (дата обращения: 27.04.2020).
4. Figma: обзор программы для веб-дизайна. URL: https://sendpulse.com/ru/blog/figma
(дата обращения: 27.04.2020).
5. Прототипирование в figma. URL: https://vc.ru/design/64379-prototipirovanie-v-figma
(дата обращения: 04.05.2020).

УДК 004.925.3 : 628.97

РОЛЬ ОСВЕЩЕНИЯ В 3D ВИЗУАЛИЗАЦИИ

А. П. Кормилицына
Омский государственный технический университет, г. Омск, Россия

Аннотация – данная статья посвящена проблеме освещения виртуального

пространства в дизайн-проектах. Показана роль освещения в организации
пространственной среды, выявлены основные возможности и преимущества
освещения в 3D визуализации. Описаны эффективные методы работы с освещением.
Среди основных уровней освещения рассмотрены естественное, искусственное и

53