Figma

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

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

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

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

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

На мой взгляд, это самая сложная механика, которая есть в Фигме. Используя Auto layuot можно делать адаптивный интерфейс, который сам подстраивается под изменения:

На экранах с разным разрешением, все компоненты выглядят упорядоченно

Теперь можно легко редактировать контент не нарушая целостность дизайна

Составные элементы Auto layout имеют гибкие настройки

Прототип — это модель сайта или приложения. С ней заказчику проще оценить, как люди будут пользоваться продуктом. Чтобы создать прототип сайта, дизайнер отрисовывает экраны и создаёт связи между ними.

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

Здесь некоторые примеры прототипов, которые я делал для сайтов и мобильных приложений.

Если идея кажется перспективной, то можно начинать добавлять контент.

После этого становится понятно, как будет выглядеть итоговый результат.

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

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

Посмотреть разметку страницы