Figma — это удивительный инструмент для дизайна, который помогает вам создавать пользовательские интерфейсы вашей мечты. Плагины Figma являются важным инструментом в процессе проектирования, помогая создавать более сложные макеты и дизайны. В этой статье мы рассмотрим некоторые из наших любимых надстроек Figma.
При использовании Figma для проектирования шаблоны, значки и плагины облегчают вашу работу и максимально увеличивают вашу энергию, оставляя больше места для творчества.
Существует множество доступных плагинов Figma, и каждый день разрабатывается все больше. Как дизайнеру, знакомому с интерфейсом, для того, чтобы ориентироваться в них, не требуется опыта, поскольку они, как правило, интуитивно понятны и хорошо документированы.
Как установить плагин Figma
Поиск плагинов Figma включает в себя поиск по ключевому слову и изучение широкого спектра ресурсов на странице сообщества в приложении, а также нажатие кнопки «Установить «, чтобы добавить плагин в свою учетную запись.
Вам придется обновить вкладку дизайна, чтобы появились новые установленные плагины.
Плагины адаптивного дизайна
Прежде всего, мы рассмотрим некоторые из лучших плагинов Figma для адаптивного дизайна.
Душа
Плагин анимации для Figma
Anima может преобразовать ваши высококачественные прототипы Figma в удобные для разработчиков HTML, CSS, React и Vue. Вы можете создать один прототип для всех размеров экрана, используя контрольные точки и булавки. Этот плагин был создан Anima, а также дает вам доступ к живым интерактивным прототипам и позволяет встраивать видео, анимацию, реальные поля ввода, эффекты наведения и пользовательский код, работая непосредственно из Figma, чтобы сэкономить время. Для доступа к определенным функциям может потребоваться членство в Anima.
CSSGen
Плагин CSSGen Figma
CSSGen, созданный Microsoft и Ori Ziv, позволяет генерировать код Sass или Less из ваших локальных стилей Figma. Этот плагин считывает все используемые стили в документе Figma и позволяет экспортировать их в Sass или Less.
Ответить
Ответить плагин
С Responsify вы можете быстро тестировать свои проекты на устройствах разных размеров. Вы должны выбрать любой фрейм, компонент или экземпляр и запустить плагин Responsify, чтобы увидеть, как ваш дизайн выглядит на нескольких экранах. Он был создан Брайаном Ловином.
Демонстрация плагина Responsify
Создатели
Плагин Makers Figma
«От Figma к сайту»: возможность Makers автоматически публиковать проекты Figma в пользовательском домене — это то, что принесет пользу сообществу. Особенно для простых проектов. С помощью этого плагина вы можете создавать целевые страницы, портфолио и персональные сайты. Чтобы успешно использовать этот плагин Figma, вы должны проектировать с использованием их встроенных компонентов или дублировать свою работу, если у вас уже есть дизайн.
Ассистент
Плагин помощника Figma
Assistant от Grida мгновенно сгенерирует удобный и читаемый код для производства. Он дает мгновенную обратную связь о вашем дизайне с рабочим кодом, а также исполняемый и адаптивный предварительный просмотр. Помощник — это проект с открытым исходным кодом.
Контрольные точки
Плагин Breakpoint Figma
Точки останова были созданы Floweare и позволяют просматривать адаптивный макет внутри фрейма Figma. Он работает даже без открытого окна плагина, и любой в вашей команде может изменить размер кадра без установленного плагина. Это поможет вам быстрее и качественнее принимать дизайнерские решения. И вы также можете поделиться анимированными прототипами.
Код пользовательского интерфейса
Демонстрация плагина UIcode
UIcode позволяет мгновенно получить чистый код для вашего мобильного дизайна прямо в Figma. Он может генерировать и экспортировать код для всех экранов сразу или для каждого экрана в отдельности. Этот плагин был создан Techsteps, и он снижает вашу рабочую нагрузку, поскольку код требует минимальных доработок от разработчиков.
Плагин IUcode Figma
Плагины для управления цветом
Эти плагины Figma улучшают визуальную привлекательность вашей работы, принимая от вашего имени несколько решений, связанных с цветом. Вы можете создавать различные цветовые палитры, градиенты и более интуитивно понятный макет, и все это требует меньше времени и усилий, чем обычно.
Набор цветов
Плагин ColorKit Figma
Создавать аналогичные палитры стало еще проще. С Color Kit все, что вам нужно сделать, это ввести код цвета вместе с другими значениями, такими как количество оттенков, и вы получите цветовую палитру, которая будет включать различные оттенки цвета. Этот плагин был создан Tushar и может генерировать более светлые или более темные оттенки любого цвета.
Спектр
Палитра Спектр
Spectrum, созданный Миланом Махешвари, позволяет создавать цветовые системы, создавать сложные векторные изображения и мгновенно применять их к иллюстрациям, изображениям и интерфейсам. Этот процесс происходит без задержек — это отличная новость для вашего рабочего процесса. Вы можете попрощаться с пробами и ошибками, когда дело доходит до цветов.
CoShuffler
Плагин CoShuffler Figma
CoShuffler, созданный Эндрю Г., позволяет применять различные цвета к большому количеству объектов. Поэтому, если вы делаете итерации для ресурсов (например, кнопок) для проекта, CoShuffler делает большую часть работы за вас, применяя цвета к объектам, используя предварительно выбранную палитру.
Пикасо
Плагин Pikaso Figma
Иногда самая сложная часть проекта — решить, с каких цветов начать. Мы все были там. Даниэль Дануэга и Рейнальди Сиаризал создали Pikaso, чтобы помочь вам принимать решения быстрее и эффективнее, предоставляя вам выбор на основе одного актива, предоставленного клиентом. Это может быть логотип или изображение.
демо Пикасо
Крутые цвета
Демонстрация ярких цветов
Dopely Colors имеет широкий спектр палитр, поэтому может быть очень полезен, когда вы испытываете творческий блок или
Хроматическая фигма
Хроматическая демонстрация Figma
С помощью Chromatic Figma вы можете использовать цветовые пространства, отличные от RGB, для создания красивых и однородных для восприятия градиентов и цветовых шкал. Результаты обычно более естественны и эстетичны, чем в традиционном пространстве RGB. Этот плагин был создан Петтер Нильссон.
Случайно большие градиенты
Случайно отличное изображение
«Если вам грустно, используйте оттенки синего». С помощью Accidentally Great Gradients вы можете создавать партии градиентов и выбирать из них лучшие. Настройте яркость и насыщенность или просто сделайте все случайным образом и позвольте плагину случайно выбрать отличный градиент для вашего проекта. Этот плагин был создан Йоханом и использует шкалу HSL для создания множества градиентов.
Случайно отличная демка
Коко
Плагин Коко Фигма
Ищете вдохновение прямо посреди работы? Как насчет плагина, который позволяет вам изучить коллекцию официальных цветовых палитр бренда, популярные варианты цветов и последние тенденции палитры? Coco от UXPlugins позволяет вам делать все это. Вы также можете проверить контрастность и убедиться, что выбрали правильные цвета для своего дизайна с помощью простого рабочего процесса.
Плагины ресурсов изображений
Далее мы рассмотрим некоторые выдающиеся плагины Figma для управления изображениями.
Фотографии
Фотографии избранное изображение
Приложение Photos было создано Эмином Синани и позволяет искать и вставлять фотографии в файлы Figma из Unsplash, Google, Flickr, Pixabay, Pexels, Giphy и Tenor. Плагин Photos также позволяет вам находить
Плагин для фотографий Figma
Удалить БГ
Icons8 Удалить БГ демо
Вы можете удалить фон изображения с помощью команды Удалить фон. Он использует API, который позволяет ему распознавать основной объект на фотографии и стирать окружение вокруг него — как инструмент выбора объекта.
Удалить плагин BG Figma
Трассировщик изображений
Плагин Image Tracer Figma
Image tracer берет все выбранные вами слои и объединяет их вместе в одно изображение (независимо от того, являются ли они уже вектором). Затем он преобразует новое изображение в
Палитра из изображения
Палитра из изображения
Палитра из изображения позволяет выбрать изображение на компьютере и создать цветовую палитру. Это означает, что изображение не обязательно должно быть в вашем файле Figma, а все цвета генерируются внутри вашего приложения. Это дает вам доступ к цветовому коду каждого блока цвета в палитре (простым нажатием на него), и вам не нужно быть в сети, чтобы создавать цветовые палитры.
Плагин Palette From Image Figma
Плагины для шрифтов
Давайте посмотрим на плагины Figma, облегчающие работу со шрифтами.
Просмотрщик шрифтов
Плагин для просмотра шрифтов Figma
Если вы пытаетесь выбрать шрифты для проекта, Font Viewer может ускорить ваш процесс и показать локальный шрифт и
Сканер шрифтов
Плагин FontScanner Figma
Вы
Типовая шкала
Избранное изображение в масштабе
Шкала шрифтов была создана Сэмом Смитом и полезна для анализа типов. Он генерирует модульную шкалу для вашей типографики на основе выбранного вами соотношения. За пару кликов вы можете превратить одну строку текста в гармоничную типографскую шкалу на монтажной области.
Плагин Typescale Figma
Изменить шрифт
Плагин Изменить шрифт Figma
Change Font был создан Юрием Зеленковским и позволяет менять шрифт в файлах FigJam и Figma с помощью панели поиска быстрых действий.
Вы можете выбрать текстовые слои, соединители, фигуры с текстом, заметки или блоки кода или выбрать определенный фрагмент текста, запустить быстрые действия (нажмите command+ /в macOS или Ctrl+ /в Windows), написать «Изменить шрифт» и нажать Tab, отфильтровать список, введя название шрифта, и выберите нужный шрифт, нажавenter/return
Плагины иллюстраций
Давайте теперь рассмотрим некоторые полезные плагины Figma, которые помогут вам создавать иллюстрации.
Иллюстрации
Плагин иллюстрации
Этот плагин Figma дает вам доступ к бесплатным популярным библиотекам иллюстраций для вашего проекта. Иллюстрации позволяют вставлять высококачественные иллюстрации в Figma путем перетаскивания. Иллюстрация ниже была создана hexorial.studio.
HANDZ 3D Illustration
Плагин HANDZ 3D Figma
Плагин HANDZ предоставляет библиотеку
люди
Плагин Humaaans Figma
Библиотека иллюстраций Humaaans от Текесте Кидану помогает создавать красочные иллюстрированные проекты в Figma. Вы можете использовать предоставленные иллюстрации или смешивать и сочетать иллюстрации, чтобы создать свою собственную уникальную работу.
Артифай Иллюстрации
Плагин Artify Figma
С этим плагином вы потратите меньше времени на поиск и сортировку и больше времени на проектирование. Artify предлагает более 5000 иллюстраций в форматах SVG и PNG, к которым вы можете получить доступ из Figma. Есть несколько стилей иллюстрации на выбор. Он был создан ByPeople.
Плагины анимации
Следующие плагины Figma предоставляют способы добавления анимации в ваш проект Figma.
Фигмоушен
Плагин Figmotion Figma
Figmotion — это инструмент для анимации, встроенный прямо в Figma. Это означает, что нет необходимости переключаться на совершенно отдельный инструмент движения, такой как After Effects, во время работы. Figmotion делает работу разработчика более управляемой, и в качестве бонуса он создан с учетом
Фигма в видео
Плагин SUPA Figma to Video
С Figma to Video от SUPA вы можете превратить свои проекты Figma в анимационные видеоролики. Плагин создан командой SUPA и работает на базе видеоредактора SUPA, который помогает точно настроить анимацию и порядок появления элементов.
SUPA’s Figma plugin
Плагины каркаса
Далее мы рассмотрим некоторые плагины Figma, которые позволяют быстро создавать каркасы в Figma.
Поток товаров
Плагин ItemFlow Figma
Сеансы вайрфрейминга, раскадровки и мозгового штурма могут быть улучшены с помощью ItemFlow. Это помогает вам соединять элементы на экране, оптимизируя скорость и производительность вашего рабочего процесса. Этот плагин был создан AgitoReiKen и полезен для проектирования сложных систем и их архитектуры.
ProToFlow
Плагин ProToFlow Figma
ProToFlow генерирует стрелки потока для вашего проекта на основе взаимодействия с прототипом. Вы также можете использовать настраиваемые коннекторы из FigJam, скопировав коннектор из FigJam в свой файл, и плагин сделает всю тяжелую работу. Этот плагин был создан Уоллом и Саидом Алипуром.
Проволочная коробка
Плагин Wire Box Figma
Преобразование обратно в
Плагины для повышения производительности
Следующие плагины Figma предоставляют возможности для повышения вашей производительности.
Писатель для Фигмы
Плагин Writer for Figma
Writer создал плагин Writer для Figma, чтобы помочь вам создавать безошибочный контент в ваших проектах. Он использует ИИ для проверки орфографии, грамматики, удобочитаемости и пунктуации, а также статистики, такой как время чтения, количество слов и длина предложения. С помощью этого плагина Figma вы можете убедиться, что ваш контент четкий, последовательный и безошибочный. Обратите внимание, что вам необходимо иметь подписку Writer, чтобы войти в плагин.
Текстовый комплект CopyDoc
Плагин CopyDoc Text Kit Figma
Плагин CopyDoc Text Kit позволяет вам управлять всем текстом в вашем дизайне Figma в одном месте. Эти группы текста можно легко экспортировать, импортировать, локализовать, проверять на орфографию и обновлять. Этот плагин был создан Figmatic, и его документацию можно найти здесь.
Организатор
Плагин Design System Organizer Figma
Плагин Design System Organizer, созданный Floweare, упорядочивает вашу работу, управляя именами с помощью /похожих папок. Копируйте стили между файлами. Массовая повторная привязка экземпляров и стилей к новым мастерам с теми же именами. Вы также можете организовывать стили и компоненты между файлами и управлять путями, такими как «компоненты/ввод/контур», через интерфейс, похожий на папку, с массовым переименованием.
Переименовать
Плагин Rename It Figma
Плагин Rename It был создан Родриго Соаресом. Переименовать Это помогает организовать вашу работу, позволяя вам пакетно переименовывать слои и кадры. Вы также можете переименовать сразу несколько слоев, переименовать слой (слои) с шириной%Wи высотой%Hслоя и заменить любые слова или символы из выбранных слоев.
Плагины для помощи в разработке макетов
Следующие плагины Figma поддерживают дизайн макета в ваших проектах.
Генератор сеток
Генератор сеток
Найти правильный размер сетки для монтажной области проще с помощью плагина Grids Generator от Tal Snir. С его помощью можно сохранять шаблоны сетки, применять автоматические сетки к фреймам, отображать и скрывать все сетки в выбранных фреймах одним щелчком мыши, а также удалять и обновлять шаблоны.
Демонстрация генератора сеток
Передача макета
С помощью этого плагина дизайнер и разработчик могут видеть макет каждого кадра и варианты компонентов, которые использовались для его сборки. Layout Handoff был создан Tal Snir и полезен для работы с вариантами.
Связанный: 5 лучших инструментов передачи дизайна в 2022 году
Демонстрация передачи макета
Плагины специальных возможностей
Не забывайте о доступности! Эти плагины Figma помогают сделать ваши проекты доступными для всех пользователей.
Способный
Плагин Able Figma
Плагин Sondre Kvam Able делает ваш дизайн доступным, сохраняя при этом приятный внешний вид. С минимальными усилиями вы можете добавить цветовой контраст в свой дизайн и учесть такие вещи, как дальтонизм. Able также сравнивает контраст между двумя выбранными вами слоями. Таким образом, вы можете держать Able открытым и случайным образом выбирать слои для сравнения без повторного запуска или обновления плагина.
авторазмер текста
Плагин autosizetext был создан Austen Novis и автоматически меняет размер текста, чтобы он помещался в текстовом поле. Если текст слишком мал, он увеличится, чтобы соответствовать границам, а если текст слишком велик, он уменьшится, чтобы соответствовать границам. Это помогает автоматически масштабировать текст для удобочитаемости.
авторазмертекст изображения
Сильный
мощный плагин
Stark — это набор интегрированных инструментов специальных возможностей для дизайна вашего продукта. Пакет включает в себя моделирование зрения, проверку контрастности и порядок фокусировки. Этот плагин был создан Старком, и вам может потребоваться войти в эту службу для доступа.
Старк демо плагин
Расширенный контраст
расширенная демонстрация контраста
Этот плагин использует усовершенствованный алгоритм перцептивного контраста (APCA) для создания доступных цветовых комбинаций, которые выглядят хорошо. Расширенный контраст был создан Яносом Пауэром и Максом Веллом, и он сравнивает цвета в вашем дизайне, чтобы проверить, как люди видят контраст на самом деле.
Цвет HCL
Демонстрация цвета HCL
Цветовое пространство HCL выравнивает кажущуюся яркость оттенков и позволяет более точно контролировать контрастность.
HCL Color был создан Алексом Буртом и полезен для проектов, которые передают смысл с помощью цвета, где использование обычного HSV/L может привести к ложным паттернам, потому что оттенки имеют разную яркость, а наш мозг считает легкость более важной, чем оттенок.
Плагины шаблонов электронной почты
Создаете шаблоны электронной почты с помощью Figma? Эти плагины Figma помогут с этой сложной задачей.
Ампир
Плагин Ampier Figma
Плагин Ampier создает макеты электронной почты AMP и HTML для ваших кампаний в вашей среде проектирования. Код можно экспортировать в виде архива или напрямую подключить к Ampier. Этот плагин был создан Тоддом и в настоящее время находится в
Отправить по электронной почте
Плагин Emailify
С помощью Emailify вы можете создавать и экспортировать адаптивные, готовые к производству электронные письма в формате HTML из Figma, не требуя никаких сторонних приложений,
Демонстрация по электронной почте
Marka Email Generator
The Marka Email Generator plugin
Marka Email Generator экспортирует
Плагины для создания SVG
Добавляете SVG в Figma? Эти плагины сделают вашу жизнь немного проще.
Капли
изображение капли
Иногда самые простые вещи самые лучшие. Если вашему дизайну нужны уникальные формы для эстетического ощущения, вам пригодятся Blobs. Он позволяет создавать органические формы капель одним нажатием кнопки. Каждая сгенерированная форма уникальна. Вы можете контролировать, насколько уникальна форма, а также количество точек, которые она имеет. Блобы создаются в SVG.
демонстрация плагина
Линейный синтезатор
демонстрация линейного синтезатора
Line Synthesizer от Tom Quinonero позволяет создавать волновые паттерны и стили с помощью ручек звукового стиля. Ручки также придают ему уникальный винтажный вид.
BlendingMe
изображение
BlendingMe — лучший способ создать переход для двух линий, эллипсов или прямоугольников. Все, что вам нужно сделать, это выбрать два объекта, которые вы хотите смешать, указать количество шагов смешивания, и плагин сделает всю тяжелую работу. Он также позволяет вам изменять путь наложения, цвет, толщину обводки и непрозрачность во время работы плагина. BlendingMe был создан Анашкиным Андреем.
Закрыть путь
демонстрация близкого пути
Закрыть путь позволяет легко закрыть любой открытый путь между выбранными объектами. Он работает с прямыми соединениями и изогнутыми соединениями.
Плагины контента
Контент — это король, так что дайте ему королевское обращение с этими плагинами.
Контентная катушка
демонстрация ролика с контентом
Content Reel был создан Microsoft и Юджином Гаврилоффом, и с его помощью вы можете более эффективно разрабатывать макеты, вытягивая текстовые строки, изображения и значки из одной палитры. Это упрощает совместную работу, позволяя создавать собственный текстовый и графический контент с возможностью просмотра или поиска контента, чтобы найти опубликованные наборы текстовых строк, изображений и значков.
Макет
изображение плагина мокапа
Вы можете получить доступ к библиотеке высококачественных макетов, которые помогут вашей презентации с помощью плагина Mockup. Графика и предлагает трансформацию перспективы. Он имеет несколько функций, таких как четко названные и удобно структурированные слои, которые позволяют легко интегрировать его в ваш дизайн.
Студия макетов
демонстрация студии mockuuups
Mockuuups Studio предлагает более 1000 различных сцен. Он был создан Mockuuups и содержит все необходимое для создания макетов продуктов, маркетинговых материалов и визуального контента для социальных сетей или сообщений в блогах.
Проверьте Очень Крипто
Независимый плагин Crypto Figma
Lorem Ipsum Crypto был создан Чансом Хадсоном и позволяет генерировать примеры адресов криптовалюты для кошельков Ethereum, Zkopru и Bitcoin. Однако сгенерированные адреса нельзя использовать для получения транзакций. Соответствующие закрытые ключи либо не создаются, либо уничтожаются сразу.
Плагины для иконок
Если вы работаете с иконками в Figma, эти плагины помогут вам в рабочем процессе.
Иконировать
демонстрация плагина iconify
Iconify был создан Iconify и Вячеславом Трушкиным и предлагает более 100 000 иконок в формате PNG и SVG. Он позволяет вам иметь доступ к значкам Material Design, Font Awesome, Jam Icons, EmojiOne, Twitter Emoji и 100 другим наборам стилей значков для вашего дизайна.
Иконки начальной загрузки
Плагин Bootstrap Icons Figma
С помощью значков Bootstrap вы можете добавлять значки из библиотеки значков Bootstrap непосредственно в виде SVG в свои проекты Figma. Bootstrap Icons содержит список из более чем 1400 значков и имеет открытый исходный код (MIT). Это означает, что вы можете скачать, использовать и расширять его бесплатно.
Осознанные иконки
Осознанные иконки
Lucide Icons — это библиотека значков с открытым исходным кодом, ответвление Feather Icons с постоянно растущей библиотекой. Этот плагин был создан Эриком Феннисом, а иконки абсолютно бесплатны для личного и коммерческого использования.
Иконки дизайна материалов
Иконки дизайна материалов
Этот плагин, созданный Icons8, дает вам доступ к библиотеке значков дизайна материалов с 27 000 новых значков, доступных в форматах PNG и SVG. Вы можете искать значки по названию или прокручивать весь список. Отфильтруйте по категории, измените стиль и размер и выберите один из стилей: заполненный, контурный, округлый и т. д.
Заключение
На Figma доступно несколько плагинов и инструментов, облегчающих вашу работу, и хотя мы рассмотрели некоторые из них, многие из них создаются каждый день. Изучение сообщества Figma — один из способов узнать о них больше.
