Figma - перспективный инструмент современного веб-дизайнера

Основное назначение Figma - это инструмент для разработки сайтов, который в последнее время «вытесняет» своих конкурентов в веб-дизайне, таких как Adobe Photoshop, Sketch, Adobe XD. Главное преимущество Figma – кроссплатформенность, не перегруженность инструментария и инновационная особенность, заключающаяся в возможности осуществления параллельной работы нескольких пользователей в одном проекте.

Figma объединяет в себе все нужные функции для реализации дизайна: работа с графикой (UI любой сложности), проектирование UX, создание макетов прототипирование, работа с компонентами и многое другое. Данное программное обеспечение является комбинацией инструментов, платформ и приложений, позволяющей создавать логичный и простой дизайн с точки зрения UX/UI.

Работа с Figma может осуществляться двумя способами: работа онлайн через браузер и декстопная версия.

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

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

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

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

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

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

Артборды или рабочие области проектов называются в Figma Фреймами (Frames). Фрейм – это, своего рода, от-

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

В Figma имеется возможность автоматического создания модульных сеток и гибкой работы с ними (рисунок 1).

Инструмент масштабирования позволяет изменять размеры нескольких элементов одновременно. Scale Tool позволяет пропорционально масштабировать объекты в выбранной области. Это значительно ускоряет работы с несколькими объектами одновременно.

Инструмент под названием «Ограничения» увеличивает и / или пропорционально уменьшает объекты. Кроме того, каждый объект может быть закреплен неподвижно вверху внизу, вверху слева и внизу слева и т. д. Фиксированные позиции предназначены только для фреймов, но в одном файле можно разместить много фреймов. Например, если вы закрепите кнопку в правом левом углу и масштабируете основу проекта, кнопка останется на своем месте.

Удобно реализована функция работы с компонентами. Это наиболее часто применимо для проектирования кнопок, когда создается компонент родитель (главная кнопка), а дочерние компоненты (копии) модифицируются вместе с внесением изменений в родителя. После создания компонента, его группа появится в библиотеке компонентов. Затем возможно использование необходимого количества копий элемента и помещение их в разные места в пределах одного кадра или нескольких кадров. В результате изменения любого элемента, другие тоже будут изменятся. Но если один из Экземпляров (копии) будет изменен, он не будет передан другим. Этот сценарий актуален, когда есть объект, который должен быть одинаковым на каждой странице.

Командная библиотека (Team Library) позволяет обмениваться стилями и компонентами между файлами и командами, а также синхронизировать стили и экземпляры компонентов.

Инструмент Smart Selections предназначен для выравнивания объектов на одинаковом расстоянии между ними. Он работает на горизонтальной или вертикальной осях одновременно - что особенно подходит для создания галерей и графических презентаций.

Чтобы быстро расположить элементы, в Figma присутствуют авто-линейки. Кроме того, под каждым элементом виден его размер, при нажатии на него. Сетка макета может быть настроена для точного указания размеров элементов, а линейки могут быть настроены для пропорционального разделения кадра. Есть также линейки для всех кадров в рабочем пространстве. Шрифты в Figma - это шрифты Google.

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

Figma поддерживает экспорт файлов в форматах PNG, JPG, SVG и PDF. Вы можете экспортировать один или несколько слоев одновременно или использовать инструмент «Срез» и выбрать любую часть кадра для экспорта. Также

Рисунок 1. Работа с модульными сетками

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

Процесс создания векторных фигур в Figma просто и удобно реализован. Пользователи могут легко манипулировать формой объектов, а элементы управления интуитивно понятны и просты. При выборе и наведении курсора на многоугольник появляются 2 якоря управления внутри ограничительной рамки - для настройки параметров.

• •    количество - это количество углов;

• •    радиус угла - это то, насколько вы хотите, чтобы каждая точка была острой или округленной.

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

Прототипирование. Является значительным преимуществом Figma над другими аналогичными инструментами он-лайн-дизайна. Это опция позволяет дизайнерам демонстрировать интерактивную модель продукта, как в действии, и, следовательно, выглядеть более привлекательной и понятной для клиента. Соединения могут быть установлены с любого объекта внутри фрейма – начинается процесс с создания точек соединения на объекте в прототипе.

Триггер определяет, что инициирует действие: щелчок объект, наведение курсора на объект, перемещение курсора вверх или вниз и т. д. Функция «Задержка» позволяет настроить всплывающее окно и время, после которого оно будет отображаться, если пользователь на странице и не взаимодействует с ним. Существует 3 типа действий:

• 1.    Навигация - переход между фреймами.

• 2.    Обмен - наложение оверлеев (новое наложение сохранит те же настройки наложения, что и у оригинала).

• 3.    Оверлей - открытие фрейма над текущим фреймом.

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

Режим презентации имеет шаблоны и превью рамок для разных устройств, таких как iPhone, iPad, Google Pixel, Surface Pro, Google Nexus, Apple Watch, а также превью для социальных сетей. В этом режиме вы можете расположить превью по горизонтали или вертикали, отредактировать размер, цвет фона, установить начальный кадр для прототипов.

В результате опытного использования данного программного продукта были выявлен ряд следующих недостатков.

• 1.    Недостаточно полноценно реализована возможность работы с анимацией и видео, не хватает функционала и шаблонов.

• 2.    Отсутствует возможность отслеживать историю изменений пошагово.

• 3.    Нестабильность синхронизации приложения с облачным хранилищем, иногда требуется перезапуск.

• 4.    Нет разнообразия инструментов для редактирования изображений.

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