Дизайн
#Руководства

5 полезных плагинов в Figma для веб-дизайнера

Как быстро сделать хорошие тени, оптимизировать размер картинки и скорректировать фотографию.

Иллюстрация: Оля Ежак для Skillbox Media

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

Рассказываем, какие плагины для Figma помогут вам сделать сайт или лендинг.

Tone Curve

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

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Tone Curve.
  3. Выделите любую фотографию на макете — она сразу откроется в окне плагина.
  4. В окне плагина измените кривые в любых доступных тонах — серых, красных, зелёных или синих.

Gradient Blob

Если на сайте не хватает декоративных элементов, попробуйте нагенерировать их через Gradient Blob. Этот плагин создаёт векторные пятна со случайными пропорциями, которые можно использовать в лендинге для выделения важной информации.

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Gradient Blob.
  3. В появившемся окне вы увидите изменяющееся пятно — нажимайте на него правой кнопкой мыши, и оно появится на макете.

TinyImage Compressor

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

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, выделите нужную картинку, на боковой панели в блоке Export нажмите на плюсик и укажите выходной формат JPG.
  3. Кликните правой кнопкой мыши на вашу картинку, в выпадающем меню перейдите в пункт Plugins и выберите TinyImage Compressor.
  4. В появившемся меню укажите, с каким качеством вы хотите её выгрузить из макета. Советуем делать сжатие не ниже 76%, чтобы качество изображения не пострадало.

Кстати, размер изображения из примера удалось сжать с 7 МБ до 2 МБ.

Beautiful Shadows

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

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши на нужный объект, в выпадающем меню перейдите в пункт Plugins и выберите Beautiful Shadows.
  3. В появившемся окне установите источник света в нужное положение и нажмите кнопку Apply.

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

FigMeme

Это — обновляемый склад мемов, который поможет сделать ваш лендинг веселее. Ну или просто развлечься после рабочего дня :-)

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите FigMeme.
  3. В появившемся окне выберите нужную картинку, и она появится на макете. Если сразу найти нужное у вас не получается, воспользуйтесь поиском вверху окна.

Самоучитель по Figma

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

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

Участвовать

Курс

Figma с нуля до PRO

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

Узнать про курс
Обучение: Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована