Figma: tips and triсks. Часть II

Продолжаем рассказывать про фишки Figma, которые упрощают дизайнерам жизнь. Во второй части гайда от Middle Designer digital-агентства ZephyrLab Михаила Иванова делимся подборкой полезных плагинов. Запоминайте, пробуйте и фиксите результат!

TextCutter

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

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

Master

Мощный и удобный менеджер компонентов, который позволяет создать мастер-компонент из уже нескольких готовых элементов. К тому же, умеет создавать связь между мастером и независимым от него элементом. Так что если вы создали много схожих элементов без использования компонентов — плагин незаменим.

Важное условие: необходимо создавать мастер-компонент из логически схожих элементов, иначе плагин может сломать дизайн и даже cmd + z не поможет. Лучше применять его на дубликатах элементов.

Chart

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

Важное условие: в бесплатной версии Figma доступны только линейные графики. Учтите это и предусмотрите апгрейд, если вам нужны другие.

SmoothShadow

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

Важное условие: тень применяет только на ось Х, а после использования плагина слетают прочие настройки панели Effects.

Lucid icons

Быстрый доступ к базовым иконкам. Удобно работает в связке с quick actions (cmd+P). Все иконки легко редактировать с помощью «stroke». Плагин помогает набросать вайрфрейм и при этом сэкономить время на отрисовке базовых иконок.

Text style generator и Color styleguide

Плагины создают UI-кит на основе стилей текста и цвета в проекте. В результате формируется auto layout frame библиотеки стилей из инстансов, благодаря чему очень легко редактируется.

Используйте, когда нужно создать UI-кит или дизайн-систему.

Remove bg и Benzin

Искусственный интеллект, помогающий обрезать фон (даже с волосами). Поэтому если не хотите тратить 20+ минут в фотошопе на обтравку, плагин вас выручит.

Важное условие: плагин Remove ИП умнее, но требует платной версии, чтобы обтравливать изображения в высоком качестве. Базовая подписка жмет его.

Easometric и Oblique

Easometric перекладывает объекты в изометрию (left, right, top left, top right), а Oblique создает проекции любой формы.

В дуэте они применяются для создания изометрии, проекций и тени, а также с целью получить Fake 3D.

Mesh gradients

Создает изображения меш-градиента с базовой 2D сеткой. Позволяет редактировать вершины с помощью кривых Безье. В промо-дизайне очень полезен!

Blobs и Noise

Вспомогательные инструменты для создания градиентов: Blobs создает абстрактные фигуры, к которым можно применить эффект Layer Blur, а Noise — эффект шума. Плюс два инструмента для промо-дизайна.

Breakpoints и Responsify

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

Плагин Responsify автоматически создает фреймы вашего дизайна для всех устройств в Figma. Оба они пригодятся, чтобы показать адаптивность вашего дизайна для разработки и/ или просто произвести wow-эффект на заказчика.

Важное условие: макеты должны быть собраны с учетом настроек constraints и auto layout.