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

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

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

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

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

Tone Curve

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

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

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

Gradient Blob

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

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

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

TinyImage Compressor

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

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

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

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

Beautiful Shadows

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

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

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

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

FigMeme

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

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

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

Больше о Figma