10 плагинов в Figma, которые спасают от рутинной работы

Коротко

Эти плагины помогают быстрее собирать палитры, строить связи, переносить веб-страницы, создавать простую 3D-графику и приводить в порядок слои и текст. Перед установкой проверьте совместимость, дату обновления и разрешения: каталог Figma и функции плагинов меняются.

Привет! Меня зовут Лера Ган, я дизайнер в AGIMA. Хочу поделиться с вами плагинами в Figma, которые помогают ускорить и облегчить мою работу. Я пользуюсь этими инструментами почти каждый день, поэтому отрываю эту подборку от сердца. Некоторые плагины разделят вашу жизнь на «до» и «после», так что пользуйтесь на здоровье и экономьте свое время.

1. Image Palette

Этот плагин поможет собрать доминирующие цвета с изображения. Если в качестве референса у вас есть фото или изображение продукции от заказчика, то Image Palette достанет из него цвета без пипетки в Figma. Плюс эти цвета уже будут хорошо сочетаться друг с другом.

2. Color Wheel Palette Generator

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

Для удобства можно воспользоваться такими же функциями на сайте calcolor.co — сохраняйте.

3. Quick Tracing

Если вы не владеете Adobe Illustrator и его функцией трассировки (или вам просто лень его открывать), а вам нужно перевести логотип из растрового формата в вектор, то плагин Quick Tracing быстро справится с этим.

Но он работает хорошо только с простыми изображениями. Для сложных логотипов с кучей деталей всё-таки лучше использовать Adobe Illustrator.

4. Autoflow

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

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

5. html.to.design

Пример: вам прислали ссылку на сайт и дали задачу поправить поле или короткий текст. Вопрос «А есть ли у нас макеты?» остается риторическим — придется вручную копировать страницу.

Я такое делала не раз, но теперь плагин html.to.design помогает выполнять подобные задачи намного быстрее. Конечно, при переносе возникают маленькие косяки, но их поправить намного быстрее, чем рисовать страницу с нуля.

6. Fig3D

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

7. Image Editor

Если вы по какой-то причине не хотите запускать Photoshop для работы с изображениями, то попробуйте воспользоваться этим плагином. В нем можно изменить яркость и контраст, добавить размытие или шумы, изменить гамму и многое другое. Иногда получаются интересные картинки, советую хотя бы «поиграться» с ним.

8. Webgradients

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

сайт Haikei — там можно выбрать фон и изменять его настройки.

9. No Numbers

Вы создали фрейм, его нейминг, например, «Frame 286» — это как минимум некрасиво, как максимум разработчики будут вспоминать вас недобрым словом. Плагин No Numbers убирает нумерацию с фрейма, группы или фигуры. Ну а лучше всего, конечно же, сразу правильно называть слои :)

10. Text Prettier

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

А если вам нужно сократить текст или убрать из него вводные или ненужные по смыслу слова, то в этом поможет сервис Главред.

Больше полезных примеров, лайфхаков и вдохновения найдете в нашем телеграмм-канале AGIMA Design.

Оригинал статьи: AGIMA.

Впервые опубликовано: 8 января 2025 г. года.