Semenov
Design
Сайт использует файлы cookie
OK

Figma

Хороший пользовательский интерфейс дает больше конверсий. Его долго делать, но он определенно выгоден для бизнеса и полезен для людей.

Для чего нужна Фигма

В Фигме создаются кнопки, попапы, формы обратной связи, слайдеры, настраивается анимация. Здесь есть инструменты для простого редактирования фотографий и векторных объектов, что позволяет экономить время на запуске других графических редакторов. А еще, история всех внесенных изменений сохраняется автоматически.
Фигма — это основной инструмент дизайнера, который необходим для создания хорошего интерфейса. Здесь создана единая среда для работы целой команды, каждый участник которой может в реальном времени видить измения макета и оставлять свои комментарии по дизайну.
Особого внимания заслуживают продвинутые возможности программы, которые позволяют делать наиболее сложные интерфейсы.

Продвинутые возможности

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

Компоненты и стили

Варианты — это группы компонентов, которые объединяются в один. Благодаря этому, в любой момент можно выбрать, в каком состоянии показать элемент интерфейса. В качестве примера, я сделал обычную кнопку, которая, на самом деле, имеет 12 различных состояний.

Варианты

Auto layout

На мой взгляд, это самая сложная механика, которая есть в Фигме. Используя Auto layuot можно делать адаптивный интерфейс, который сам подстраивается под изменения:
На экранах с разным разрешением, все компоненты выглядят упорядоченно
Теперь можно легко редактировать контент не нарушая целостность дизайна
Составные элементы Auto layout имеют гибкие настройки
Отличный пример того, как работает auto layout в Figma.

Создание гайдлайнов

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

Интерактивные прототипы

Прототип — это модель сайта или приложения. С ней заказчику проще оценить, как люди будут пользоваться продуктом. Чтобы создать прототип сайта, дизайнер отрисовывает экраны и создаёт связи между ними.
Обычно прототип создается упрощенно, для того чтобы быстро оценить идею и внести в нее изменения, если нужно.
Здесь некоторые примеры прототипов, которые я делал для сайтов и мобильных приложений.
Если идея кажется перспективной, то можно начинать добавлять контент.
После этого становится понятно, как будет выглядеть итоговый результат.
Анимированный пример того, как работают переходы между экранами в дизайне мобильного приложения Aquarius.
Пример того, как визуально показать связи между экранами в дизайне мобильного приложения Aquarius.
Можно наглядно увидеть, как прототип сайта превращается в рабочий макет.
На первом этапе создается прототип сайта.
На втором этапе сайт заполняется контентом.

Высококлассная типографика

Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому я использую 12 колоночную модульную сетку (Bootstrap).

Сетка и направляющие

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

Управление шрифтами

Посмотреть разметку страницы
Хорошая типографика для пользователя, пример отличного результата, дизайнер Семенов Иван.
Хорошая типографика для пользователя, пример разметки страницы, дизайнер Семенов Иван.
Статья о помощи беженцам, пример хорошей типографики, дизайнер Семенов Иван.
Речь Фиделя Кастро, пример хорошей типографики, дизайнер Семенов Иван.
Заметка о югославских партизанах, пример хорошей типографики, дизайнер Семенов Иван.

Использование плагинов

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

Раскрытие потенциала производительности

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

Расширение творческих возможностей

Фигма поддерживает более 6 000 расширений своего функционала. Устанавливать и пользоваться всеми нет нужды, а вот разбираться и понимать какие из них помогают увеличить скорость работы очень полезно.