Всем привет! Меня зовут Денис, я тимлид команды дизайна в DLS и ревьюер в Яндекс Практикуме. В DLS мы разрабатываем сложные интерфейсы для бизнеса и простых пользователей. Я решаю организационные вопросы и помогаю коллегам разобраться в задачах. А после работы занимаюсь этим же, но уже в Практикуме, на курсах «Дизайнер интерфейсов» и «Дизайн мобильных и кросс‑платформенных приложений». По сути, выступаю в роли первого арт‑директора или тимлида для молодых дизайнеров.
В этой заметке я хочу поделиться подборкой плагинов, которые точно будут полезными для начинающих и опытных дизайнеров интерфейсов.
Справка: Figma — это один из основных инструментов дизайнера интерфейсов. А плагины — это особые расширения, которые можно запустить прямо внутри приложения. Плагины помогают упростить рутину, оперативно внести изменения в макет или отредактировать картинку. |
Remove BG: автоматическое удаление фона с изображений
![](https://habrastorage.org/getpro/habr/upload_files/25c/989/d79/25c989d795db7342613ae0ebb73a9908.png)
Плагин хорошо справляется с удалением контрастных фонов всего в пару кликов. Выберите фото, запустите плагин, и фон будет мгновенно удалён.
Photopea: Photoshop внутри Figma
![](https://habrastorage.org/getpro/habr/upload_files/123/4fb/6f6/1234fb6f653d1fdc790068e13194ee9d.png)
Если функций Remove BG не хватает, а устанавливать Photoshop не хочется, попробуйте Photopea. Этот плагин запускает аналог Photoshop прямо в Figma. С ним вы можете корректировать цвет, применять эффекты, вырезать изображения и не только — почти всё, что можно делать в Photoshop, доступно в этом плагине.
Unsplash: бесплатный фотосток прямо в Figma
![](https://habrastorage.org/getpro/habr/upload_files/3d2/ba1/1d4/3d2ba11d4a362af075f0cf2c43c683ec.png)
Этот малыш дает доступ к огромной библиотеке стоковых фото, которые можно бесплатно использовать в своих работах.
Typography Style Guide: типографика в проекте в два клика
![](https://habrastorage.org/getpro/habr/upload_files/81a/8c5/5b1/81a8c55b1cc5fd0d00ea6ba7fbf49519.png)
Невероятно полезный плагин для создания гармоничных и эстетически приятных проектов. Пара кликов — и у вас готов визуально привлекательный гайд по типографике, содержащий все локальные текстовые стили вашего файла.
Color Style Guide: поможет создать палитру
![](https://habrastorage.org/getpro/habr/upload_files/0a5/3d7/7ef/0a53d77ef4d2233ba2ac7e3a7d741b5f.png)
А этот плагин от разработчика Typography Style Guide станет лучшим помощником в работе с цветами. Он помогает создавать подробные гайды по цветовым стилям: автоматизирует процесс и обеспечивает визуальную согласованность во всей вашей документации и дизайн-системе.
Vectary 3D Elements: простота и элегантность в 3D
![](https://habrastorage.org/getpro/habr/upload_files/c8b/d6b/377/c8bd6b3778e5d958756c6d1484a02ffb.png)
Простота всегда в моде, но кто сказал, что 3D нельзя сделать элегантным и минималистичным? С этим поможет Vectary 3D Elements — плагин, который позволяет легко интегрировать 3D-элементы в ваш проект.
Pixel Perfect: сделает кнопки и отступы идеальными
![](https://habrastorage.org/getpro/habr/upload_files/ff1/da2/14e/ff1da214e624ae7a432734361aab2b23.png)
Дробные значения делают макеты неаккуратными и неудобными для вёрстки. Также такие проекты менее качественно рендерятся, и результат в итоге получается не очень.
Pixel Perfect в два клика исправляет дробные значения в макетах — и делает проекты более профессиональными и удобными для использования в разработке.
Find and replace: гроза опечаток
![](https://habrastorage.org/getpro/habr/upload_files/070/8d7/547/0708d75477ab968c9f3c4c35f9f3b375.png)
Ситуация: вы заметили опечатку, которая повторяется в большом количестве элементов. Элементы макета при этом не всегда представлены компонентами, а часть текста выполнена оверрайтом.
В таком случае поможет Find and replace — с плагином вы сможете выделить слово, предложение или целый текст, и заменить его на новый во всём макете.
Pitchdeck Presentation Studio: легко экспортирует сайт в PowerPoint
![](https://habrastorage.org/getpro/habr/upload_files/b57/8e1/79e/b578e179e7f1d3204a34d11eb3c92d4a.png)
Дизайнер работает с разными заказчиками. И некоторые из них просят экспортировать макет сайта в PowerPoint. И это их право — даже если это противоречит отраслевым стандартам. А ещё иногда формат PPTX пригождается для презентаций.
Если с условным PDF дела обстоят замечательно, то экспорт в PPTX в Figma изначально не предусмотрен. Для этого и нужен Pitchdeck Presentation Studio.
Contrast: доверяй, но проверяй
![](https://habrastorage.org/getpro/habr/upload_files/909/85a/d8f/90985ad8f531c7de12a6a3f952f72063.png)
Представьте ситуацию: вы подобрали цвета для проекта, но сомневаетесь в их контрастности. Contrast поможет всё проверить и найти гармоничные сочетания.
Со временем у каждого дизайнера вырабатывается чувство цвета, но на начальных этапах лучше не рисковать, поэтому я советую попробовать этот плагин всем новичкам.
Если вы хотите узнать больше об инструментах дизайнера, подпишитесь на мой канал «Lorrrem ? Дизайн привычных вещей» в Телеграме — там я делюсь своими мыслями и полезными ресурсами.
Помните, что список выше — не универсальный. Чем дольше вы будете развивать свои навыки, тем полнее будет ваш личный список инструментов, программ, сервисов и плагинов. Делитесь своими фаворитами и находками в комментариях!
themen2
Спасибо за плагины