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.