Дизайн • 09 марта 2023 • 5 мин чтения
Рассказываем, как в Figma создать анимацию и эффект параллакса, перевести растровое изображение в векторное, выбрать цветовую гамму, настроить длинное тире и кавычки-ёлочки.
Что такое плагины в Figma
Чтобы Figma работала быстро, разработчики наполнили её базовыми элементами и добавили возможность подключать плагины — дополнительные инструменты, которые расширяют функционал программы. Благодаря плагинам дизайнеры быстрее оформляют макеты и подбирают для них интересную анимацию, изображения, цветовые сочетания, визуальные эффекты. Для российских пользователей в Figma доступны только личные аккаунты.
Курс «Дизайнер интерфейсов от Яндекс Практикума предназначен для тех, кто хочет научиться работать с современными инструментами и технологиями и быть в курсе последних тенденций.
Плагины по работе с графикой
Плагины для Figma, которые облегчат работу с векторными и растровыми изображениями, качеством изображений, цветовой гаммой и созданием статичных эффектов:
1. Image Tracer
Плагин помогает перевести растровое изображение в векторное, наложить эффект или новую заливку, разбить изображение на отдельные цветовые слои.
Плагин объединяет выбранные слои в одно векторное изображение
2. Insert Big Image
В Figma есть ограничение на разрешение изображений — не более 4096 рх. С помощью плагина Insert Big Image в макет можно встраивать изображения большего разрешения.
Плагин невидимо «разрезает» одно изображение на несколько других, меньших по размеру, а потом группирует
3. Image Palette
Плагин составляет небольшую цветовую палитру на основе изображения. Дизайнеру это пригодится для подбора цветов.
Плагин определяет цвета на основе медианного сканирования картинки. Если изображение неяркое или векторное, плагин выдаёт необычные сочетания, которые иногда нельзя описать через шестнадцатеричный код цвета
4. To Path
To Path помогает разместить объекты по изгибу кривой. Объектами могут быть произвольные фигуры, текст, компоненты.
Популярный эффект «текст по кругу» создаётся с помощью этого плагина
5. Blobs
Плагин генерирует объект в форме капли. Для этого нужно задать количество точек, которые с помощью кривых Безье сформируют фигуру. Можно контролировать уникальность объекта.
Плагин Blobs подойдёт для проектов с креативным дизайном
Плагины для работы с контентом
Топ плагинов Figma для работы с иллюстративным материалом, типографикой и аналитикой:
1. Iconify
Iconify — большая база иконок, которую удобно использовать в создании готового проекта и при составлении вайрфреймов — макетов будущих интерфейсов.
В плагине можно выбрать иконки из дизайн-системы Material Design и эмодзи. В библиотеке более 100 000 изображений
2. Unsplash и Pexels
Unsplash и Pexels — плагины от одноимённых фотостоков. Позволяют добавлять изображения в проект сразу, без поиска на сайте и скачивания материалов.
В фотостоке Unsplash собраны изображения в хорошем качестве, которые можно использовать в проектах бесплатно
3. UI Faces
Плагин добавляет в макет лица людей. Пригодится в оформлении дашбордов, экранов контактов, отзывов.
В UI Faces можно настроить параметры по полу, возрасту, эмоциям, цвету волос, а также указать фотостоки, где подбирать изображения
4. SBOL Typograph
Плагин настраивает кавычки «ёлочки» и „лапки“ вместо компьютерных, ставит неразрывные пробелы, убирает висячие предлоги, добавляет букву «ё», заменяет дефис на длинное тире, правильно оформляет телефонные номера и знаки валют.
Плагин разработан специально для форматирования кириллического текста
5. Chart
Плагин создаёт диаграммы, используя случайные или реальные данные. Данные можно импортировать из CSV, JSON, Google Sheets, REST API, вводить в таблицу или вставлять из Excel. Графики меняются при обновлении данных. Можно выбрать цветовое оформление и настроить толщину линий.
Среди диаграмм — круговые, гистограммы, линейные графики, шкала прогресса
Плагины для анимации
Лучшие плагины для создания в Figma 2D- и 3D-анимации, которая привлечёт внимание к сайту, лендингу и мобильному интерфейсу:
1. Figmotion
В Figmotion можно сделать анимацию на уровне Principle, Haiku или After Effects. Если экспортировать анимацию в формате Lottie JSON, то разработчик сможет встроить её в дизайн сайта или приложения.
Figmotion используют для создания интерактивных прототипов сайтов и лендингов, простой анимации в мобильных приложениях, например для переходов между экранами. Проект: Dribbble
2. Parallax
Плагин для создания эффекта параллакса. В платной версии есть доступ к 3D-эффектам и библиотеке с готовыми шаблонами. Анимацию можно экспортировать в формате HTML, SVG, GIF и WebM.
Параллакс — визуальный эффект, когда положение объекта меняется от действий пользователя: движения мыши, прокрутки, масштабирования экрана
3. Physics animation
Плагин помогает задать эффекты 2D-элементам, которые расположены на разных слоях. Например, блокировать объекты и накладывать на них анимацию, делать одни препятствием для анимации других, двигать не только отдельные элементы, но и целые группы. Анимация экспортируется в форматах WebM, GIF и SVG.
С плагином можно анимировать не только фигуры, но и тексты
4. SVG Motion
Плагин анимирует векторные линии, задаёт эффект размытия, накладывает векторную анимацию на растровые изображения.
SVG Motion используют для создания креативных лендингов и сайтов
5. LottieFiles
Видеоредактор для работы с GIF-анимацией. Можно использовать иллюстрации из внутренней библиотеки или создавать свои. У готовых анимированных изображений можно менять цветовые параметры и добавлять текст со слоганом бренда. Вся анимация сохраняется в форматах с открытым исходным кодом — dotLottie и Lottie JSON, удобных для вёрстки интерфейсов.
В библиотеке LottieFiles собрано больше 1000 бесплатных анимаций
Совет эксперта
Александр Старинский
Полезные плагины для Figma значительно облегчают работу дизайнера и помогают добиться интересных визуальных решений. В Figma Community можно найти плагины для разных задач — серьёзные и смешные.
Мой любимый плагин — Nicolas Cage Image Replacer. Он меняет изображения в макете на картинки с лицом Николаса Кейджа. С его помощью можно разрядить обстановку на проекте и сделать прототип неформальным.
Анастасия Павлова
Яндекс Практикум
Иллюстратор
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
