.webp)
.webp)
В этой статье мы познакомимся с плагинами Figma, которые повысят вашу производительность.
В нашем гайде вы узнаете много нового, начиная с информации об управлении цветом и файлах изображений и заканчивая SVG-объектами и анимацией.
Без преувеличения в Figma можно найти тысячи плагинов. Какие из них вы используете? Как часто вы прибегаете к их помощи? Мы нашли несколько самых эффективных и надеемся, что они помогут оптимизировать ваш рабочий процесс. Независимо от того, являетесь ли вы новичком или давно используете Figma, из нашей публикации вы узнаете, как проектировать быстро и без особых проблем.
ОГЛАВЛЕНИЕ #
Ниже мы разместим ссылки на конкретные плагины и гайды, которые могут вам понадобиться. Прокрутите вниз, чтобы получить общее представление о них, или пропустите оглавление. Также обратите внимание на другие инструменты.
Объемные изображения и 3D-перспективы в Figma #
Плагин Vectary 3D Elements делает все немного более объемным. Это один из самых простых способов добавления в ваш проект 3D-мокапов и объемных объектов, создания упаковки и осуществления трансформации элементов. Вы можете поместить свой дизайн Figma в предпочтительный 3D-мокап или придумать что-то новое. Чтобы начать работу, ознакомьтесь с подробным гайдом и видео об этом плагине.
Кроме того, в Figmockups и Clay Mockups 3D представлена более обширная коллекция 3D-мокапов. Fig3D преобразует элементы в объемные объекты, а также позволяет группировать слои и перемещать их все вместе в 3D-модель.
Доступность в Figma #
Все мы хотим создавать лучший опыт взаимодействия, который доступен для каждого. В некоторых случаях мы можем забыть о правильном цветовом контрасте или надлежащем порядке расположения вкладок. К счастью, для обеспечения доступности в Figma есть множество плагинов.
Stark — полнофункциональный инструмент создания доступной цифровой среды. Он включает в себя проверку контраста и симуляторы зрения. Stark позволяет менять порядок последовательности, учитывая уровень фокуса на контенте. Он также отображает коэффициент контрастности для двух любых объектов на выбор. В качестве альтернативы вы также можете применять плагин Contrast.
Geenes.app применяется для создания доступных цветовых палитр. Это надежный и тщательно разработанный инструмент, который позволяет создавать, поддерживать, синхронизировать и тестировать наборы цветов и их вариации. Трудно представить себе, что у кого-то, кто пользуется Figma, не установлен этот плагин!
Если вам нужно проверить, как изменение размера шрифта повлияет на ваш макет, Text Resizer поможет вам в этом. Он позволяет увидеть, что именно произойдет, если вы увеличите или уменьшите шрифт.
Редактор анимации в Figma #
На самом деле создание анимации в Figma не требует применения сложных внешних инструментов, таких как Adobe After Effects. Figmotion — это продвинутый плагин для анимации, и он находится прямо у вас под рукой. Вы выбираете фрейм, добавляете анимацию, а затем настраиваете время анимации с возможностью обновления переходов, ключевых фреймов и точек привязки.
Если вы хотите лучше разобраться в этом вопросе, в гайде по добавлению анимации в проекты есть целый практикум, в том числе различные варианты step-by-step анимации.
В Figma доступны аннотации #
Как вы обычно оперируете аннотациями при работе в Figma? Мы нашли два инструмента для их создания. Они обеспечивают эффективную коммуникацию по вопросам дизайна и сводят к минимуму недопонимания.
A11y Annotation Kit акцентирует внимание на функциях доступности, которыми дизайнеры могут захотеть поделиться при передаче дизайна в разработку. Можно добавлять пояснения к элементам, указывать порядок уровня фокуса на контенте или отмечать те объекты, которые доступны для клавиатуры (прим. актуально для тех, кто пользуется только клавиатурой). Этот плагин превращает зашифрованные формулировки WCAG (прим. Web Content Accessibility Guidelines, Руководство по обеспечению доступности веб-контента) в простые стикеры для расстановки акцентов на важнейших составляющих страницы. Все компоненты предварительно заполнены правильными элементами CSS или HTML.
Аннотации с красными линиями в Figma #
Комментирование дизайна с указанием детальных измерений и описаниями для того, чтобы ответственные разработчики могли разобраться в проекте, может занять много времени. Плагин Redlines все упрощает. С его помощью можно быстро измерить и рассчитать размеры любого выделенного объекта. Все, что вам нужно, это выбрать один или несколько объектов, настроить параметры красной линии и варианты разметки.
Автоматическое переименование фреймов и слоев в Figma #
Когда речь идет о наведении порядка в ваших проектных файлах, об этом позаботится Rename it. Вы можете группами переименовывать фреймы и слои. У вас также есть возможность менять названия сразу нескольких объектов с помощью настраиваемых фильтров. Если вы хотите изменить прописные буквы в названии на строчные или даже на “верблюжий” стиль (прим. стиль слитного написания нескольких слов, причем каждое из них начинается с заглавной буквы) для этого с комбинацией букв необходимо использовать %*.
Аватары для дизайн-макетов в Figma #
В некоторых случаях для проекта вам понадобятся аватары. Возможно им требуются дополнительные параметры. Вот где может помочь плагин UI Faces.
Все аватары собраны из различных источников (они всегда указаны), и их можно фильтровать по возрасту, полу и эмоциям. В любом случае вам необходимо проверить источник и лицензию, прежде чем их использовать. Также обратите внимание на плагин User Profiles.
Поиск логотипов брендов в Figma #
Возможно, вы хотите показать логотипы брендов в обзорах или отзывах. Как же быстро их отыскать? Не выходя из Figma с помощью BrandFetch можно с легкостью найти логотип практически любого бренда. Плагин без преувеличения содержит миллионы доступных логотипов. Существует также база данных с возможностью поиска того, что вам нужно.
Создавайте графики в Figma #
С помощью Chart процесс проектирования стал менее напряженным. Теперь можно легко создавать различные диаграммы с использованием реальных или рандомных данных. Плагин поддерживает копирование и вставку из Excel, Google Sheet, Numbers, а также синхронизируется с Google Sheets и виртуальным JSON. Кроме того, предусмотрена возможность импорта файлов в форматах CSV и JSON.
Charts Figma — это еще один плагин с похожим, но немного другим названием. С его помощью вы можете создавать информационные панели, презентации или любой другой тип визуализации данных. Плагин генерирует доступные для редактирования диаграммы в проекте в Figma, начиная от простых гистограмм и заканчивая сложными тепловыми картами. Вы также можете найти подробный гайд по использованию этого плагина.
Наведите порядок внутри фрейма в Figma #
Возможно, вы поместили несколько десятков иконок во фрейм. Как можно быстро расположить их в правильном порядке? Очевидно, что мы не будем делать это вручную. В этом нам поможет плагин LilGrid.
Маленький помощник автоматически выбирает элементы и размещает их по сетке. Вам просто нужно выделить то, что вы хотите упорядочить и нажать “Расположить по сетке”. Инструмент позаботится обо всем остальном. На вашей странице он переставит только элементы верхнего уровня. Безусловно, предусмотрена одноэтапная отмена, если вам нужно восстановить исходное состояние.
Приведите в порядок проекты в Figma перед передачей в разработку #
Скрытые слои, группы с одним объектом, положение элементов по осям X и Y не пиксель в пиксель — плагин Clean Document устраняет подобные мелкие недочеты, так что вам не придется этим заниматься. Это отличный помощник для доработки вашего проекта Figma перед передачей в разработку.
Заполнители содержимого в Figma #
С помощью плагина Content Reel вы можете быстро и легко проектировать макеты. Из него можно брать текстовые строки, изображения, иконки и аватары. Предусмотрена возможность искать или просматривать уже предоставленный набор данных, а затем добавлять в свои проекты или создавать контент с нуля.
Плагин позволяет составлять собственные текстовые строки и загружать до 20 изображений. Часто используемый контент закреплен на главном экране, что упрощает рабочий процесс.
Вы также можете запустить Random Name Generator, чтобы добавить случайные названия в свой макет.
Цветовые палитры в Figma #
Для создания приятного визуального дизайна очень важно разбираться в градиентах, палитрах, теории цвета и психологии. В Figma есть множество плагинов, которые сделают за вас большую часть этой работы.
Color Palette представляет идеальные цветовые палитры для ваших проектов. Вы можете выбирать из огромной коллекции или найти определенный цветовой код, название цвета или номер для применения в своем дизайне.
Palette Дастина Миерау, полезен в том случае, когда вы хотите создать цветовую палитру из изображений. Этот плагин использует искусственный интеллект, чтобы помочь вам сгенерировать цвета, которые будут наилучшим образом соответствовать вашему проекту. Вы можете выбрать до пяти контуров, и плагин заполнит их подходящими цветами.
Создать дизайн вокруг изображения легче всего с Image Palette plugin. Он может сформировать цветовую палитру из любой иллюстрации. Для выбора пяти наиболее заметных цветов плагин применяет алгоритм медианного среза, который обеспечивает высокий уровень точности.
С помощью плагинов UI Gradients и Web Gradients вам не нужно создавать или поочередно подбирать градиенты. Вместо этого вы можете добавить несколько градиентов в группы, текст и фреймы одним кликом.
Изгибы текста в Figma #
С помощью Arc plugin вы можете изогнуть текст вверх, вниз или даже в круг. Плагин открывает дополнительную панель инструментов для управления уровнем изгиба — другой вопрос, как разработчики будут это реализовывать.
Дизайн-токены в Figma #
Еще один плагин Figma, который вы, возможно, захотите добавить в свой инструментарий, разработан Лукасом Опперманном. Если вы устали от проблем, которые обычно возникают при работе с дизайн-токенами (прим. значения стиля элементов дизайна, такие как цвет, типографика, интервалы, тени и пр.), плагин Design Token решит их за вас. Стили и токены экспортируются и отправляются на хранение в GitHub, а токены автоматически конвертируются с помощью словаря стилей. Вам не нужно покидать Figma, и это по-настоящему сэкономит вам время.
Дизайн-системы с Figma #
Представьте, что вы вносите изменения в дизайн-систему своего проекта, и они сразу полностью там отображаются. Такое возможно с плагином Design System Manager.
Он позволяет вам устанавливать или обновлять тематические дизайн-токены на одной отдельной панели, управлять выбранными элементами, которые сгруппированы по стилю, и загружать в проект реальный контент в виде текста или изображений. Чтобы воплотить свой проект в жизнь, путем программирования вы можете получить доступ к дизайн-токенам через GraphQL API или экспортировать их в любом формате на ваш выбор: CSS, Less, Sass, JSON, YAML, Js, Swift и Android. Это действительно умное решение, которое делает работу с дизайн-системами намного более эффективной.
Мокапы устройств в Figma #
Качество презентации вашего проекта почти так же важно, как и сам дизайн. Плагин Mockuuups Studio содержит более 700 объемных мокапов устройств. С его помощью вы сможете легко создавать мокапы для продуктов, визуального контента или маркетинговых материалов. Ознакомьтесь с пошаговым видео о том, как им пользоваться.
Обычно мокапы выглядят лучше, когда устройство находится в человеческой руке. В этом случае может помочь All hands mockup generator. Он включает в себя большую и разнообразную коллекцию рук всех оттенков, форм и размеров. Выберите фрейм, выберите руку, и ваш дизайн будет импортирован в мокап прямо в Figma. Вы также можете ознакомиться с полной коллекцией рук.
Экспорт Figma в HTML, CSS, React #
HTML <> Figma позволяет экспортировать ваши проекты Figma в прототип HTML. Вы можете выбрать отдельные объекты или ввести URL-адрес, и плагин немедленно импортирует актуальные стили. Существует также расширение Chrome, которое сохраняет содержимое веб-страницы и импортирует его в качестве редактируемых слоев в Figma. В фоновом режиме он генерирует файл page.builder.json, у которого есть все свойства CSS текущей страницы.
Однако есть некоторые ограничения, поскольку поддерживаются не все типы элементов и не все свойства CSS. Помните, что все шрифты должны быть загружены в Figma, иначе будут использоваться резервные шрифты. Тем не менее, плагин является общедоступным, вокруг него сформировано большое сообщество, и его создатели активно над ним работают.
В качестве альтернативы существует также HTML Generator, который поддерживает шрифты Google. У него есть специальные параметры экспорта, и он генерирует HTML, CSS, файлы изображений, код SCSS и Figma To HTML. А если вам нужно что-то более сложное, Anima создает прототипы и преобразует их в код HTML, CSS и React — без каких-либо зависимостей. Фактически, вы можете создавать нестандартные интерактивные прототипы, отзывчивые дизайны и повторно используемые компоненты React. (У плагина есть бесплатный тариф, но для экспорта кода вам нужно будет оформить подписку за 31 доллар).
Экспорт Figma в Vue.Js #
Если вы хотите устранить некоторые трудности, которые может вызвать преобразование прототипа Figma в работающее приложение, плагин Клауса Шефера с открытым исходным кодом Figma-Low-Code создан для вас. Он позволяет использовать проекты Figma непосредственно в приложениях Vue.js.
Этот подход к разработке приложений на основе максимального использования готовых модулей значительно сокращает время передачи проекта дизайнерами разработчикам и количество внешнего кода. К тому же он обеспечивает точность дизайна Figma при передаче. Идея состоит в том, что вы создаете прототип в Figma, а затем используете плагин для добавления данных и метода привязки. Как только вы это сделаете, вы сможете использовать свой любимый редактор кода для реализации бизнес-логики, и ваше приложение готово к использованию. Изменения, которые вы внесете в файл Figma, автоматически распространятся и на веб-приложение.
Шаблоны писем в Figma #
Мало кто любит создавать электронные письма в формате HTML, но при их проектировании лучше использовать несколько небольших удобных плагинов, чтобы немного облегчить работу разработчика. Есть подробный гайд по созданию электронных писем в Figma, который включает новые дизайны для создания электронной почты с нуля.
Если вы ищете отзывчивые, готовые шаблоны электронных писем HTML для Figma, в Emailify есть десятки настраиваемых модулей контента. Вы сможете настроить текст, изображения, стили и параметры автоматического форматирования среди других функций без каких-либо других API, приложений или необходимых веб-сайтов.
Если вас не пугает идея написания HTML-кода электронной почты можно использовать Email Templates & Code вместе с Marka plugin. Вы можете проектировать настраиваемые электронные письма для информационных бюллетеней, маркетинговых писем и шаблонов в стиле блога. Кроме того, там содержится коллекция дизайнов, которые могут быть адаптированы под ваши требования.
Идеальная файловая структура в Figma #
Все мы знаем, что трудно думать о файловой структуре Figma, когда вы полностью поглощены текущим процессом проектирования пользовательского интерфейса. Однако, если вы помните о ней с самого начала, это облегчит передачу проекта разработчику. А при приближении дедлайна вы сэкономите себе много времени, потому что вам не нужно будет наводить порядок в своем дизайне. Луис Уриах опубликовал полезный практический гайд о том, как структурировать фреймы в Figma, который содержит логичные способы присвоения названий, описательные компоненты и создание последовательных интервалов.
Предварительный просмотр шрифтов в Figma #
Переключение между шрифтами вручную может быть немного утомительным, поэтому очевидно, что для этого в Figma есть специальные инструменты. Better Font Picker и Font Preview помогут вам выбрать шрифты с возможностью предварительного просмотра.
Шрифтовые пары Google Fonts для Figma #
Если вы используете шрифты Google Fonts, вам также может пригодиться плагин Google Font Pairings. Можно начать с Figma’s Google Fonts page. Каждый из шрифтов включает крошечный образец того, как он буд