Как сделать кнопку в фигме

Добавил пользователь Morpheus
Обновлено: 08.09.2024

Как можно оживить свой сайт? Например, анимацией. Сделать это просто, особенно если воспользоваться нашим руководством с примерами, которое отлично подойдет тем, кто только осваивает тонкости сервиса.

Зачем нужна анимация в дизайне

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

В маркетинге анимация может влиять на конверсию: по данным Marketing Sherpa, компания Dell провела email-кампанию с использованием gif-анимаций и добилась конверсии на 109% больше обычного – более чем в два раза. Звучит круто! Но как сделать анимацию?

Инструменты для создания анимации в Фигме

В Фигме есть несколько способов создания анимации. Будем идти от простого к сложному.

Анимации в прототипировании

Прототипирование — это создание схематичного макета сайта или приложения. В Фигме его можно сделать интерактивным: создать несколько последовательных экранов и соединить их, задав анимации перехода.

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

Выделим первый созданный Rectangle и перейдем во вкладку Prototype — она расположена в меню справа. В графе Interaction нажмем кнопку с плюсиком — так мы создадим новые взаимодействия с фигурой.

В этом списке мы должны выбрать, в каком случае будет происходить действие:

On click — при клике на объект (если выбран весь фрейм, а не объект, – то при клике на любую область фрейма).
On drug — при перетаскивании.
While hovering — при наведении.
While pressing — при удержании клика.
Key/gamepad — при нажатии на горячую клавишу.
Mouse enter — при появлении курсора в области объекта.
Mouse leave — при покидании объекта курсором.
Mouse down — в начале клика.
Mouse up — в конце клика.

Для примера оставим On click.

Далее выберем, что будет происходить после совершения выбранного нами события. Для этого нажимаем на список, где написано None, и открываем тем самым список вариантов:

None — ничего не происходит.
Navigate to — перейти к (другому объекту/фрейму).
Open overlay — наложить поверх текущего фрейма.
Scroll to — пролистать до другого объекта в рамках одного фрейма.
Swap overlay — заменить один фрейм другим.
Back — перейти назад.
Close overlay — закрыть объект, наложенный поверх фрейма с помощью Open Overlay.
Open link — перейти по ссылке.

Чтобы наш большой Rectangle из первого фрейма превратился в маленький из второго, укажем в данном меню пункт Navigate to. Поскольку у нас всего два фрейма, Фигма проставляет его автоматом. Если фреймов больше, тогда нужно выбрать его из списка рядом с Navigate to или кликнуть на кружочек на боковой стенке объекта, после чего перетащить появившуюся синюю стрелочку к нужному фрейму.

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

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

Ниже в меню мы видим заголовок Animation, где мы как раз можем выбрать, каким образом будет происходить переход:

Instant — мгновенно.
Dissolve — растворение.
Smart animate — умная анимация (о ней поговорим ниже).
Move in — перемещение внутрь.
Move out — перемещение наружу.
Push — смахивание.
Slide in / Slide out — перемещение с растворением.

У всех переходов, кроме Instant, можно выбрать степень плавности, с которой он будет происходить, а также продолжительность. Эти настройки находятся ниже выбора типа самого перехода.

Linear — линейно (плавно).
Ease in — анимация начнется медленно и будет ускоряться к концу.
Ease out — анимация начнется быстро и будет замедляться к концу.
Ease in and out — анимация начнется медленно, ускорится и затем снова замедлится.
Ease in back — анимация отскакивает назад от исходной точки, а затем ускоряется.
Ease out back — анимация начинается быстро, затем замедляется и проскакивает вперед от конечной заданной точки.
Ease in and out back — анимация медленно отскакивает назад от исходной точки, ускоряется и снова замедляется, проскакивая вперед от конечной точки.
Custom — пользовательский вариант, позволяет вручную установить и настроить плавность.

Попробуем в нашем примере поставить переход Dissolve и плавность Ease in.

Таким образом мы задали анимацию изменения квадрата при клике на него. Запустим ее с помощью кнопки Present в верхнем меню справа или нажав на синюю стрелочку Flow 1 рядом с фреймом.

Так можно создавать интерактивные дизайны, чтобы заказчик не просто смотрел на них, но и взаимодействовал с элементами.

Умная анимация (Smart animate)

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

Продолжим работать с нашими квадратами и применим Smart animate. Для разнообразия сделаем второй квадрат зеленым и повернем его на 45 градусов. Затем зададим взаимодействие между квадратами и установим переход Smart animate.

Примеры простых анимаций

Изменение кнопки при наведении

Создадим новый фрейм и поместим внутри него кнопку. Для этого формируем Rectangle, добавляем текст и выбираем необходимый цвет — например, фиолетово-розовый градиент. Продублируем этот фрейм и поменяем цвет. В данном случае просто сделаем градиент темнее. Также можно немного увеличить текст.

В блоке Animation выбираем Dissolve и Easy out, чтобы анимация получилась плавной. Теперь смотрим, что получилось:

Перетаскивание ползунка

Сделаем ползунок, при перетаскивании которого изменяется высота столбцов под ним. Техника его создания не отличается от той. которая была описана в предыдущем примере. Отличается только способ самой анимации.

Создаем элементы дизайна: с помощью Rectangle – столбцы и сам ползунок с закругленными краями. Эллипсом делаем круг, который будем перетягивать на другую сторону.

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

Дублируем эти же настройки для нашего второго фрейма, только там в качестве события Navigate to будет первый фрейм. И смотрим, что получилось:

Выпадающее меню

Итоги

Что такое Figma

Раньше команде дизайнеров было сложно одновременно работать над одним проектом, показывать готовые варианты клиентам и отдавать макеты разработчикам. Чтобы открыть макет, нужно было скачивать, устанавливать и настраивать отдельные программы типа Adobe Photoshop.

Возможности Figma

Создание прототипов

Отрисовка элементов интерфейса

Работа с векторными объектами

Создание блок-схем

Плюсы и минусы Figma

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

Не работает без интернета

Ограниченные возможности работы с текстом

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

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

Нельзя добавить плагины

Нельзя настроить горячие клавиши

Основные инструменты Figma

Фреймы

Модульная сетка

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

Компоненты

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

Векторные формы

В онлайн-сервисе есть основные векторные объекты: прямоугольник, линия, треугольник, стрелка, круг и звезда. Они позволяют отрисовывать кнопки, плашки и другие элементы интерфейса. Создать векторные объекты можно инструментом Shape Tool.

Изображения

В макет можно добавить любое изображение и начать работу с ним. Для этого нужно открыть панель File и использовать инструмент Place Image или просто перетащить нужные картинки с рабочего стола.

История версий

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

Кому пригодится Figma

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

Дизайнерам

Дизайнеры могут создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений, а также работать с векторной графикой.

Разработчикам

Блогерам

Smm-специалистам

Smm-специалисты могут использовать многочисленные шаблоны для постов в соцсетях, чтобы создавать баннеры для ютуба, рекламу в инстаграме и др. А также создавать рекламные объявления на основе готовых шаблонов для фейсбука.

Менеджерам

Редакторам

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

Начало работы в Figma

Для начала работы нажмите кнопку Sign up в правом верхнем углу, чтобы зарегистрироваться в сервисе

Для регистрации нужно ввести адрес электронной почты и сгенерировать пароль.

После регистрации вы можете начать работу над своим первым проектом. Чтобы открыть рабочую область нажмите на крестик рядом с вкладкой Drafts. Все файлы, которые вы открывали ранее, можно увидеть во вкладке Recent, она находится выше.

Так создаётся новый файл

После того как откроется рабочая область, создайте фрейм и задайте размер вашему будущему макету. Можно ввести данные самостоятельно в поле Design либо выбрать размер из готовых шаблонов.

Начать работу совсем несложно. Это простая и интуитивно понятная программа, но чтобы освоить все её тонкости и дополнительные возможности, придётся потратить время: посмотреть ролики на ютубе и почитать обучающие статьи. В сети можно найти много роликов по работе с онлайн-сервисом. Также разработчики создали большую базу знаний, найти ответ на интересующий вопрос или инструкцию по применению того или иного инструмента можно на сайте Figma.center. Если нет много времени на освоение сервиса, можно выбрать более короткий путь.

Как быстро освоить онлайн-сервис Figma

Срок обучения: 1 месяц

Стоимость обучения: бесплатно

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

Срок обучения: 3 дня

Стоимость обучения: бесплатно

Срок обучения: 4 месяца

Стоимость обучения: 22 400 руб.

Коротко о главном

У Figma есть все возможности для того, чтобы дизайнеры справлялись с работой максимально быстро и легко. Рассказываем, какие хоткеи есть и как их использовать.

Горячие клавиши (hotkeys) — это комбинации клавиш, нажатие на которые позволяет выполнять различные действия в той или иной программе, не прибегая к её меню. Это быстро и просто.

В Figma горячие клавиши называются Keyboard Shortcuts, а посмотреть весь их список можно, нажав на знак вопроса в правом нижнем углу.

Или используйте для открытия списка сочетание горячих клавиш Ctrl + Shift + ?. Да, они могут пригодиться даже здесь.

Весь список горячих клавиш поделён на несколько групп. Расскажем о каждой по порядку.

Essential keyboard shortcuts

Essential keyboard shortcuts — это Основные клавиатурные сокращения.

Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ? + \ на Mac.

Чтобы выбрать инструмент Пипетка, нажмите i на Windows и Ctrl + С на Mac.

Чтобы открыть Меню, нажмите Ctrl + / на Windows и ? + / на Mac.

Tools

Tools — это Инструменты.

Чтобы выбрать стандартный инструмент выделения, нажмите V.

Чтобы выбрать инструмент для создания фреймов, нажмите F.

Чтобы выбрать Перо, нажмите P.

Чтобы выбрать Карандаш, нажмите Shift + P.

Чтобы выбрать Текст, нажмите T.

Чтобы выбрать Прямоугольник, нажмите R.

Чтобы выбрать Эллипс, нажмите O.

Чтобы выбрать Линию, нажмите L.

Чтобы выбрать Стрелку, нажмите Shift + L.

Чтобы добавить или показать комментарии,нажмите С.

Чтобы выбрать Пипетку, нажмите i на Windows и Ctrl + С на Mac.

Чтобы выбрать Нож, нажмите S.

Чтобы показать или скрыть Линейки, нажмите Shift + R.

Чтобы показать или скрыть Обводку всех элементов, нажмите Ctrl + Shift + 3 на Windows и ? + Y на Mac.

Чтобы показать или скрыть Пиксельный просмотр, нажмите Ctrl + Alt + Y на Windows и Ctrl + P на Mac.

Чтобы показать или скрыть Сетку, нажмите Ctrl + Shift + 4 на Windows и Ctrl + G на Mac.

Чтобы показать или скрыть Пиксельную сетку, нажмите Ctrl + ‘ на Windows и ? + ‘ на Mac.

Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ? + \ на Mac.

Чтобы показать или скрыть Курсоры других пользователей, нажмите Ctrl + Alt + \ на Windows и Alt + ? + \ на Mac.

Чтобы показать или скрыть Только слои, нажмите Alt + 1.

Чтобы показать или скрыть Только компоненты, нажмите Alt + 2.

Чтобы показать или скрыть Панель дизайна, нажмите Alt + 8.

Чтобы показать или скрыть Панель прототипа, нажмите Alt + 9.

Zoom — это Приближение или Масштабирование.

Чтобы переместить Zoom по рабочему пространству, нажмите Space + drag.

Чтобы увеличить масштаб, нажмите +.

Чтобы уменьшить масштаб, нажмите -.

Чтобы включить отображение 1:1 к экрану, нажмите Shift + 0.

Чтобы масштабировать все рабочее пространство, нажмите Shift + 1.

Чтобы масштабировать выделенный элемент, нажмите Shift + 2.

Чтобы масштабировать предыдущий фрейм, нажмите Shift + N.

Чтобы масштабировать следующий фрейм, нажмите N.

Чтобы найти предыдущую страницу, нажмите Page Up.

Чтобы найти следующую страницу, нажмите Page Down.

Чтобы найти предыдущий фрейм, нажмите Home.

Чтобы найти следующий фрейм, нажмите End.

Text — это Текст.

Чтобы выделить текст жирным, нажмите Ctrl + B на Windows и ? + B на Mac.

Чтобы выделить текст курсивом, нажмите Ctrl + i и ? + i на Mac.

Чтобы подчеркнуть текст, нажмите Ctrl + U и ? + U на Mac.

Чтобы вставить и сопоставить элемент, нажмите Ctrl + Shift + V.

Чтобы выровнять текст по левому краю, нажмите Ctrl + Alt + L на Windows и ? + Alt + L на Mac.

Чтобы выровнять текст по центру, нажмите Ctrl + Alt + T на Windows и ? + Alt + T на Mac.

Чтобы выровнять текст по правому краю, нажмите Ctrl + Alt + R на Windows и ? + Alt + R на Mac.

Чтобы выровнять текст по ширине, нажмите Ctrl + Alt + J на Windows и ? + Alt + J на Mac.

Чтобы изменить размера текста, нажмите Ctrl + Shift + на Windows и ? + Shift + на Mac.

Чтобы изменить расстояние между символами, нажмите Alt + .

Чтобы изменить расстояние между строками, нажмите Alt + Shift + .

Shape

Shape — это Векторные изображения.

Чтобы выбрать Перо, нажмите P.

Чтобы выбрать Карандаш, нажмите Shift + P.

Чтобы выбрать Заливку, нажмите B.

Чтобы удалить заливку, нажмите Alt + /.

Чтобы удалить обводку, нажмите /.

Чтобы поменять местами обводку и заливку, нажмите Shift + X.

Чтобы преобразовать в кривые, нажмите Ctrl + Shift + O на Windows и ? + Shift + O на Mac.

Чтобы работать с точками векторных изображений, нажмите Ctrl + E на Windows и ? + E на Mac.

Selection

Selection — это Выделение.

Чтобы выделить всё, нажмите Ctrl + A на Windows и ? + A на Mac.

Чтобы выделить всё, кроме чего-либо, нажмите Ctrl + Shift + A на Windows и ? + Shift + A на Mac.

Чтобы отменить выделение, нажмите Esc.

Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click Windows и ? + click на Mac.

Чтобы выделить слой на боковой панели, нажмите Ctrl + right click Windows и ? + right click на Mac.

Чтобы выделить дочерний элемент, нажмите Enter.

Чтобы выделить родительский элемент, нажмите Shift + Enter.

Чтобы выделить следующий по порядку элемент, нажмите Tab.

Чтобы выделить предыдущий по порядку элемент, нажмите Shift + Tab.

Чтобы сгруппировать элементы, нажмите Ctrl + G на Windows и ? + G на Mac.

Чтобы разгруппировать элементы, нажмите Ctrl + Shift + G на Windows и ? + Shift + G на Mac.

Чтобы преобразовать в фрейм, нажмите Ctrl + Alt + G на Windows и ? + Alt + G на Mac.

Чтобы показать или скрыть элемент, нажмите Ctrl + Shift + H на Windows и ? + Shift + H на Mac.

Чтобы заблокировать или разблокировать элемент, нажмите Ctrl + Shift + L на Windows и ? + Shift + L на Mac.

Cursor

Cursor — это Курсор.

Чтобы выделить элемент при клике, нажмите Alt.

Чтобы копировать элемент при движении, нажмите Alt.

Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click на Windows и ? + click на Mac.

Чтобы показать иерархию выделенного элемента, нажмите Ctrl + right click на Windows и ? + right click на Mac.

Чтобы изменить размер относительно центра элемента, нажмите Alt.

Чтобы изменить размер пропорционально, нажмите Shift.

Чтобы переместить во время изменения размеров элемента, нажмите Ctrl на Windows и ? на Mac.

Edit — это Редактирование.

Чтобы копировать, нажмите Ctrl + C на Windows и ? + C на Mac.

Чтобы вырезать, нажмите Ctrl + X на Windows и ? + X на Mac.

Чтобы вставить, нажмите Ctrl + V на Windows и ? + V на Mac.

Чтобы вставить поверх выделенного элемента, нажмите Ctrl + Shift + V на Windows и ? + Shift + V на Mac.

Чтобы создать копию, нажмите Ctrl + D на Windows и ? + D на Mac.

Чтобы переименовать, нажмите Ctrl + R на Windows и ? + R на Mac.

Чтобы экспортировать элемент, нажмите Ctrl + Shift + E на Windows и ? + Shift + E на Mac.

Чтобы копировать свойства элемента, нажмите Ctrl + Alt + C на Windows и ? + Alt + C на Mac.

Чтобы вставить скопированные свойства, нажмите Ctrl + Alt + V на Windows и ? + Alt + V на Mac.

Transform

Transform — это Трансформирование.

Чтобы отразить по горизонтали, нажмите Shift + H.

Чтобы отразить по вертикали, нажмите Shift + V.

Чтобы создать маску, нажмите Ctrl + Alt + M на Windows и ? + Alt + M на Mac.

Чтобы включить редактирование векторных объектов или изображений, нажмите Enter.

Чтобы вставить изображение, нажмите Ctrl + Shift + K на Windows и ? + Shift + K на Mac.

Чтобы обрезать изображение, нажмите Alt + dbl-click.

Чтобы задать прозрачность элементу 10%, нажмите 1.

Чтобы задать прозрачность элементу 50%, нажмите 5.

Чтобы задать прозрачность элементу 100%, нажмите 0.

Arrange

Arrange — это Выравнивание.

Чтобы переместить на уровень ближе к переднему плану, нажмите Ctrl + ] на Windows и ? + ] на Mac.

Чтобы переместить на уровень дальше от переднего плана, нажмите Ctrl + [ на Windows и ? + [ на Mac.

Чтобы переместить на передний план, нажмите Ctrl + Shift + ] на Windows и ? + Shift + ] на Mac.

Чтобы переместить на задний план, нажмите Ctrl + Shift + [ на Windows и ? + Shift + [ на Mac.

Чтобы выровнять по левой стороне, нажмите Alt + A.

Чтобы выровнять по правой стороне, нажмите Alt + D.

Чтобы выровнять по верхней стороне, нажмите Alt + W.

Чтобы выровнять по нижней стороне, нажмите Alt + S.

Чтобы выровнять согласно горизонтальной линии элементов, нажмите Alt + H.

Чтобы выровнять согласно вертикальной линии элементов, нажмите Alt + V.

Чтобы выровнять с распределением горизонтального пространства, нажмите Ctrl + Shift + Alt + H на Windows и ? + Shift + Alt + H на Mac.

Чтобы выровнять с распределением вертикального пространства, нажмите Ctrl + Shift + Alt + V на Windows и ? + Shift + Alt + V на Mac.

Components

Components — это Компоненты.

Чтобы показать все компоненты, нажмите Alt + 2

Чтобы создать компонент, нажмите Ctrl + Alt + K на Windows и ? + Alt + K на Mac.

Чтобы преобразовать компонент во фрейм, нажмите Ctrl + Alt + B на Windows и ? + Alt + B на Mac.

Чтобы открыть многопользовательскую библиотеку, нажмите Ctrl + Alt + O на Windows и ?+ Alt + O на Mac.

Так выглядят горячие клавиши в Figma. Надеемся, вы запомните их и будете ими пользоваться. А пока запомнить их не получается, обращайтесь к этой статье — она вам поможет.

Каждый, кто работал с Google Docs, знает, насколько удобно хранить и редактировать документы онлайн. Можно вместе работать над статьями, открывать их с любого компьютера, создавать инструкции и презентации с общим доступом.

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

Что такое Figma

Это графический редактор для веб-дизайна. В Figma можно создавать:

интерактивные прототипы сайтов и мобильных приложений;
элементы интерфейса — иконки, кнопки, меню, окна, формы обратной связи;
векторные иллюстрации.

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

Можно заходить в Figma через браузер или же скачать программу на компьютер. Она подходит как для Windows, так и для Mac. В десктопной версии можно работать офлайн, а когда появляется доступ к интернету, изменения синхронизируются.

Преимущества Figma для работы

Исходники документов хранятся в облаке

Не нужно пересылать макеты, выкладывать их в облако и контролировать версии. Просто заходишь в аккаунт Figma и видишь оригинал. Если сотрудника нет на работе, не придется искать макет на его компьютере — все в командном доступе.

Командная работа над макетами

Как и в Google Docs, в Figma можно работать над документом вместе: давать доступ на просмотр и редактирование, параллельно работать над макетом — на экране будут видны курсоры разного цвета.

Благодаря этому все участники проекта лучше понимают контекст. Например, дизайнер разрабатывает прототип приложения, а UX копирайтер прямо в Figma пишет тексты для интерфейса.

Инструмент бесплатен для индивидуальных пользователей

Если вы работаете в аккаунте сами, все функции бесплатны. Просто регистрируетесь и начинаете работать. Можно давать доступ на просмотр документа — это тоже бесплатно.

Бесплатные email рассылки

Создайте аккаунт в SendPulse и отправляйте до 15 000 писем бесплатно каждый месяц!

Сколько стоит Figma

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

Бесплатный план

План дает базовые возможности:

прототипирование в Figma;
атрибуты кода;
доступ для просмотра и комментирования;
хранение документов без ограничений;
импорт документов из Sketch и других форматов.

нельзя совместно редактировать документы;
история версий хранится 30 дней.

$12 за пользователя с правами редактирования/месяц

Расширенные возможности для командной работы:

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

$45 за пользователя с правами редактирования/месяц

Это план для больших организаций.

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

Как начать работать с Figma

Приветственное письмо от Figma

Интерфейс понятный — слева панель со слоями, которая включает элементы проекта, сверху панель инструментов, справа панель свойств.

Интерфейс Figma

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

Уведомление с подсказкой

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

Как научиться работать в Figma

Практические уроки по работе с Figma на русском есть на YouTube каналах:

Возможности Figma

Прототипирование

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

Все экраны размещены на одной странице. Переключаться между окнами не нужно. Вы создаете связи и видите, как работа с интерфейсом выглядит в реальности:

Создание связей между элементами в режиме прототипирования в Figma

Когда прототип готов, включаете режим презентации. В презентации можно нажимать на кнопки, переходить между разделами сайта, кликать на пункты меню.

Компоненты

Компоненты в Figma можно делать основными (Master components) и зависимыми (Instances). Если вы нарисовали кнопку, сделали ее компонентом, а потом скопировали, то первая кнопка будет основным компонентом, а вторая — зависимым. Изменения, которые вы внесете в основной компонент, будут применятся к зависимому.

Изменения в компонентах

Создать зависимый компонент можно несколькими способами: удерживать Alt при перетаскивании, использовать команду Duplicate или обычный копипаст:

Создание зависимых компонентов в Figma

Изменения к зависимым компонентам в одном проекте применяются автоматически. Если зависимый компонент используется в другом файле, Figma предлагает изменить и его, но вы можете этого не делать.

Векторные сетки

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

Векторные сетки в действии

Встроенное комментирование, редактирование и доступ

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

Совместное редактирование в Figma

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

Комментирование проектов в Figma

Контроль версий

В Figma можно отслеживать историю действий каждого сотрудника, просматривать и восстанавливать предыдущие версии документа. Сервис автоматически сохраняет версии при закрытии вкладки проекта, или если пользователь не вносил изменения в последние 30 минут.

Просмотр истории версий документа в Figma

В бесплатной версии видны изменения за последние 30 дней. В платной сохраняется история всех изменений с момента создания проекта.

Как работать в Figma: создаем макет электронной книги

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

1. Залогиниться и создать новый документ.

3. Заполнить проект слоями: текстовыми блоками, прямоугольниками и рисунками.

Вот, что у нас получилось:

Ограничения Figma

Редактор создан в первую очередь для веб-дизайна. Поэтому в нем неудобно работать с полиграфией. В Figma нет CMYK палитры и переключения размерности сетки на см/мм. Чтобы подготовить макет для баннера, листовки или ролл-апа для печати, нужно созданный в Figma файл загрузить в другую программу, что предназначена для полиграфии. И только потом его отдавать на печать.

Еще одно ограничение Figma в том, что макеты из Photoshop нельзя импортировать прямо. Один из вариантов — перевести их в формат Sketch, а потом перенести в Figma.

Подведем итог

Figma выглядит как хорошо продуманный инструмент, сделанный дизайнерами для дизайнеров. Главные достоинства редактора:

Позволяет совместно работать над документами — создавать и редактировать командой в режиме реального времени.
Хранит документы в облаке — макеты не занимают место на диске, их не нужно заливать, чтобы показать коллегам или заказчику.
Кроссплатформенность — возможность работать с редактором на Windows, Mac, Linux.
Возможность создавать интерактивные прототипы, векторные сетки, главные и зависимые компоненты.

Надеемся, что обзор сделал для вас Figma более понятной и вдохновил на работу. Создавайте в Figma макеты и маркетинговые материалы для email рассылок в SendPulse!

Маркетолог и копирайтер. Люблю работать с инструментами, эффективность которых легко измерять. Поэтому люблю email рассылки:) Лучшими практиками делюсь с вами.

Читайте также: