Автоматизация в Figma - это использование плагинов, API и других инструментов для автоматизации повторяющихся задач, оптимизации рабочих процессов и расширения функциональности Figma, позволяя дизайнерам и командам работать более эффективно и продуктивно за счет снижения ручного труда и повышения согласованности.
Remove BG – это плагин, который позволяет автоматически удалять фон с изображений одним щелчком мыши, используя API remove.bg. Для работы требуется учетная запись remove.bg. Плагин значительно упрощает и ускоряет процесс обработки изображений, избавляя от необходимости вручную выделять объекты и фон.
2. To Path
last night |
04.12.2020 |
Установок: 349 215 ( +946) |
Лайков: 9240 ( +75) | Комментариев: 85
To Path позволяет размещать объекты или текст вдоль любой кривой в Figma. Выберите кривую, затем фигуру, группу или текст, и плагин автоматически клонирует и распределит их по заданной траектории. Редактируйте исходный объект или кривую, и изменения будут отображаться в реальном времени. Идеально подходит для создания повторяющихся узоров, размещения текста по кругу или любой другой сложной компоновки.
Icons8 Background Remover – это бесплатный плагин для Figma, позволяющий быстро и легко удалять фон с одного или сразу нескольких изображений. Он не требует регистрации, подписки или API-ключа, и не имеет ограничений на количество обрабатываемых изображений. Просто выберите картинки, запустите плагин, и получите изображения с прозрачным фоном, сохранив исходные размер и качество.
Map Maker позволяет быстро создавать настраиваемые карты, поддерживая Google Maps и планируя интеграцию с другими сервисами. Он прост в использовании: выбираете слой, настраиваете адрес, тип карты, масштаб, маркеры и даже JSON стили. Редактируйте существующие карты, меняя настройки, и просматривайте результат в реальном времени.
5. html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
html.to.design от ‹div›RIOTS позволяет импортировать существующие веб-сайты в Figma в виде полностью редактируемых макетов. Вместо создания элементов дизайна с нуля, можно использовать HTML и CSS веб-сайта, что значительно ускоряет процесс редизайна, создания прототипов, сбора мудбордов и получения обратной связи по дизайну. Поддерживается импорт как публичных, так и защищенных паролем сайтов, а также HTML/CSS кода напрямую.
Figma to HTML - это плагин для Figma, который позволяет легко конвертировать ваши дизайны Figma в код, сохраняя при этом все детали дизайна и цвета. Это достигается благодаря применению принципов хорошего дизайна и четких инструкций, что позволяет получить точную копию вашего дизайна в коде. Если вы столкнулись с ошибками или вам нужна поддержка, пожалуйста, посетите наш трекер проблем на GitHub.
uiGradients – это плагин для Figma, позволяющий одним щелчком мыши добавлять градиенты к группам, текстам и фреймам. Выберите элемент, к которому нужно применить градиент, и запустите плагин. Выбирайте из более чем 350 градиентов для мгновенного добавления к вашим элементам. Официальный плагин Figma от www.uigradients.com.
Morph - это плагин для Figma, позволяющий создавать впечатляющие эффекты, такие как скевоморфизм, неон, глитч, отражение, стекло, градиент и другие, всего одним кликом. Просто выберите фигуру, вектор или текст, выберите нужный эффект и настройте его параметры для достижения желаемого результата. Плагин предоставляет возможность комбинировать различные эффекты и создавать уникальные дизайны. Все эффекты доступны абсолютно бесплатно и без регистрации.
Find and Replace позволяет искать и заменять текст или названия слоев в вашем Figma файле, подобно текстовому редактору. Вы можете быстро найти нужные элементы, используя текстовый поиск или поиск по названию слоя, и заменить их на новые значения. Это удобный инструмент для массового редактирования контента и организации структуры вашего дизайна.
Rename It - это плагин для Figma, который помогает организовать ваши файлы, позволяя быстро и пакетно переименовывать слои и фреймы. Вы можете использовать последовательную нумерацию или буквенное обозначение слоев, добавлять ширину и высоту, преобразовывать регистр названий, заменять слова и символы в именах выбранных слоев. Кроме того, плагин позволяет быстро переименовывать слои, используя панель быстрого запуска Figma, что упрощает и ускоряет процесс организации ваших проектов.
Table Creator - плагин для Figma, позволяющий легко создавать настраиваемые таблицы с изменяемыми размерами и автоматической подстройкой под контент. Управляйте дизайном, изменяя компоненты, и обновляйте все таблицы при изменении дизайна. Используйте команды плагина для упрощения выбора столбцов и строк. Создавайте шаблоны и применяйте их для стандартизации внешнего вида таблиц в ваших проектах.
Google Sheets Sync позволяет напрямую синхронизировать контент из Google Sheets в ваш Figma-файл. Просто укажите shareable-ссылку на Google Sheets, правильно назовите слои Figma, используя "#" и имя значения, которое хотите синхронизировать (например, "#Title"), и запустите плагин. Плагин позволяет указывать конкретный лист в workbook, используя его имя на странице или фрейме Figma. Также поддерживается динамическая подстановка изображений, если указать URL картинки в Google Sheets и назвать векторный слой в Figma соответствующим образом (например, "#image").
Плагин Table Generator автоматизирует добавление табличных данных. Просто скопируйте и вставьте данные в поддерживаемом формате CSV, и таблица будет сгенерирована автоматически. Плагин предоставляет настраиваемые параметры, которые можно настроить для предварительного определения стилей ячеек таблицы, таких как ширина, высота, отступы, размер шрифта, выравнивание текста и радиус границы таблицы.
Similayer – это плагин для Figma, расширяющий возможности команды "Выбрать все с...". Он позволяет выделять слои, похожие на выбранный, на основе различных свойств, таких как стиль текста, цвет заливки, радиус скругления углов, компоненты и многое другое. Это значительно упрощает работу с большим количеством слоев, позволяя быстро заменять компоненты, изменять стили текста или выделять элементы с определенными параметрами.
Clean Document – это плагин для Figma, который позволяет автоматизировать организацию и очистку ваших дизайн-документов. Он включает в себя функции для удаления скрытых слоев, разгруппировки групп с одним слоем, приведения координат к целым пикселям, интеллектуального переименования слоев на основе их типа и содержимого, сортировки слоев по положению и общей очистки документа. Используйте его для поддержания порядка, оптимизации структуры и повышения удобства работы с вашими файлами Figma.
Styler - это плагин Figma, позволяющий эффективно управлять стилями в ваших проектах. Он позволяет создавать, переименовывать, обновлять и удалять стили, а также применять их к слоям на основе совпадения имен. С помощью Styler можно легко обновлять цветовые палитры, клонировать стили между проектами, объединять стили из разных систем и быстро менять типографику. Плагин поддерживает пакетное создание стилей цвета и текста, упрощая создание и поддержание дизайн-систем.
17. Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Попрощайтесь с рутинным кодированием! Этот бесплатный плагин автоматически преобразует ваши макеты Figma в адаптивные веб-страницы (HTML, Tailwind, Svelte или styled-components) или мобильные приложения (Flutter или SwiftUI), точно сохраняя каждую деталь вашего дизайна. Он экономит время, создавая оптимизированный и чистый код, соответствующий вашему видению, и предоставляет полную гибкость в выборе фреймворка. Обработка происходит локально, обеспечивая конфиденциальность ваших дизайнов.
Super Tidy помогает поддерживать порядок в вашем дизайне, выравнивая, переименовывая и переупорядочивая фреймы в соответствии с их положением на холсте. Он выравнивает фреймы по заданной сетке с выбранным вами шагом, переименовывает их и сортирует в списке слоев, основываясь на их позиции на холсте.
Мгновенно превратите любой фрейм в потрясающий 3D-макет с помощью плагина "3D Transformer"! Просто выберите фрейм или изображение, запустите плагин и настройте параметры для достижения желаемого 3D-эффекта. Плагин позволяет вращать фрейм в 3D-пространстве, работает с фреймами и изображениями, автоматически сохраняет последние использованные значения и позволяет быстро переключаться между разными изображениями без закрытия окна. Готовый 3D-макет можно использовать в вашей работе как обычное изображение.
Figma Redlines – это незаменимый инструмент для дизайнеров, позволяющий значительно упростить и ускорить процесс подготовки макетов к передаче разработчикам. Плагин автоматизирует создание детальных красных линий с измерениями и спецификациями для выбранных объектов, давая полный контроль над стилем, цветом, шрифтом и единицами измерения. Redlines автоматически группирует созданные элементы, обеспечивая порядок и удобство в работе, тем самым экономя время и силы дизайнеров.
Framer позволяет бесплатно экспортировать дизайны из Figma в HTML, упрощая процесс создания веб-сайтов. Просто скопируйте элементы из Figma и вставьте их в Framer, который автоматически адаптирует дизайн, сохраняя структуру слоев и групп. Затем вы сможете доработать дизайн, добавить интерактивность и опубликовать его на бесплатном домене. Framer преобразует ваши макеты в оптимизированный HTML, CSS и React код, обеспечивая быструю загрузку и хорошую видимость в поисковых системах.
Oblique позволяет создавать наклонные проекции любой формы, что полезно для добавления теней, 3D-глубины и визуальной перспективы. Он автоматически вычисляет точки касания, гарантируя корректные проекции от любых входных фигур. В отличие от 3D-движков, Oblique рассчитывает грани самостоятельно, что обеспечивает скорость и простоту результатов, хотя и без некоторых функций, таких как перспектива и освещение.
Color Designer – это плагин для Figma, который позволяет генерировать оттенки, тона и цветовые гармонии на основе выбранных слоев или локальных стилей. С его помощью можно легко создавать ступенчатые градиенты между двумя цветами. Плагин прост в использовании и поддерживает только сплошные заливки, тесно интегрируясь с пользовательским выбором и локальными стилями Figma.
PixCut Background Remover – это плагин для Figma, разработанный Wondershare, который позволяет бесплатно и автоматически удалять фон с изображений. Пользователи могут бесплатно обработать до 10 изображений в месяц. Для начала работы необходимо зарегистрироваться на сайте pixcut.wondershare.com и получить бесплатный app-key. Затем, выбрав изображение и запустив плагин, вы получите картинку с прозрачным фоном, сохранив исходный размер и качество. PixCut – это многофункциональный онлайн-редактор изображений, предлагающий широкий спектр инструментов, включая удаление водяных знаков, пакетную обработку, увеличение изображений с сохранением высокого разрешения и многое другое.
Color Overlay - это плагин для Figma, который позволяет быстро и легко перекрашивать растровые изображения. Он накладывает на выбранное изображение слой сплошного цвета, подобно эффекту Color Overlay в Photoshop. Все изменения неразрушающие и сохраняются как слои фона в фрейме. Платная версия плагина позволяет применять эффекты к нескольким изображениям одновременно, удалять или заменять отдельные цвета на изображении.
Ищите и вставляйте SVG-версии логотипов и брендов прямо в Figma. Этот простой плагин с понятным интерфейсом экономит ваше время и усилия. Просто откройте Vector Logos, найдите нужный логотип и кликните, чтобы добавить его в свой дизайн. Продолжайте создавать прекрасные проекты, не тратя время на поиск векторных логотипов в других местах.
BlendingMe - это простой и удобный плагин для создания плавных переходов между двумя линиями, эллипсами или прямоугольниками. Просто выберите два объекта, укажите количество шагов смешивания и нажмите "Создать". Плагин позволяет в реальном времени настраивать траекторию смешивания, цвет, толщину обводки, прозрачность и другие параметры. Вы можете менять положение, размер, поворот объектов, добавлять размытие и изменять радиус скругления углов. Как только результат вас устроит, просто закройте плагин.
Раскройте свой творческий потенциал с помощью плагина Nisa Text для Figma, который изменит ваш подход к редактированию текста. Оптимизируйте задачи, повысьте продуктивность и откройте новые горизонты в дизайне. Плагин предлагает такие функции, как обтекание текста вокруг фигур, создание многоколоночного текста, размещение текста по кругу, расстановка переносов, преобразование текста в переменные и удаление ссылок. С Nisa Text вы сможете с легкостью разделять, объединять, сортировать и преобразовывать текст, а также выравнивать его по вертикали и горизонтали.
Diagram Basics в FigJam помогает быстро создавать блок-схемы и диаграммы, предоставляя готовые шаблоны и легенды. Это позволяет визуализировать процессы, идеи и концепции, экономя время на старте проекта и обеспечивая единообразие оформления благодаря стандартизированным элементам.
Master - плагин для Figma, позволяющий быстро создавать компоненты из существующих объектов, сохраняя все переопределения. Он помогает превратить обычные фреймы и группы в компоненты, привязать объекты к существующим компонентам (даже из других файлов) и клонировать компоненты. Master особенно полезен, когда необходимо преобразовать множество однотипных элементов в компоненты, обеспечить единообразное редактирование повторяющихся элементов или повторно подключить отсоединенные от мастер-компонента экземпляры.
Styles and Variables Organizer – незаменимый инструмент для управления дизайн-системой, внедрения дизайн-токенов, очистки устаревших дизайн-файлов и применения новых переменных/стилей ко всему файлу. Он позволяет легко связывать значения в вашем дизайн-файле со стилями и переменными, оценивать их использование, объединять и привязывать значения к выбранному стилю/переменной, выделять все элементы, использующие одинаковые значения, фильтровать режимы и свойства переменных и автоматически объединять все доступные стили/переменные одним щелчком мыши.
Sorter - это плагин для Figma, позволяющий сортировать слои в выбранном порядке. Он предлагает несколько вариантов сортировки, включая: по положению (слева направо, сверху вниз), по алфавиту (по возрастанию и убыванию), в обратном порядке и в случайном порядке. Плагин работает как с верхним уровнем фреймов, так и с дочерними элементами, сортируя их относительно родительского элемента. Также доступна опция сортировки только дочерних элементов выбранных слоев.
Confetti для Figma позволяет любому пользователю создавать потрясающие узоры из конфетти. Выберите один или несколько слоев, которые станут частицами конфетти, и настройте параметры, такие как прозрачность, поворот и размер, чтобы создать идеальный узор. Confetti использует сетку для расположения частиц, позволяя точно контролировать их размещение по вертикальным столбцам и горизонтальным рядам. Работает с компонентами, что позволяет мгновенно обновлять конфетти, не пересоздавая узор.
Создавайте красивые, плавные тени с контролем направления, цвета и прозрачности с помощью Shadow Maker. Этот инструмент упрощает создание реалистичных теней, избавляя от необходимости ручной настройки, которая отнимает много времени. Редактируйте цвет, направление, прозрачность, размытие и другие параметры теней. Предлагаются как упрощенный режим редактирования, так и продвинутый режим с редактированием кривых Безье.
Symbol Icons Browser позволяет легко просматривать и копировать символы из SF Symbols, Material Icons и Font Awesome. Просто установите соответствующие шрифты, найдите нужный символ и скопируйте его глиф в буфер обмена, вставьте в текстовый объект или создайте новый текстовый объект с этим символом прямо на холсте.
Chroma Colors позволяет создавать стили цвета из выделенных объектов. Просто выберите объекты с заливкой, запустите плагин, и он автоматически сгенерирует цветовые стили. Название стиля цвета будет совпадать с названием слоя. Используйте "/" в имени слоя для создания групп стилей. Стили сортируются от большего к меньшему.
Быстро добавляйте разнообразные многослойные тени к вашему дизайну. Shadowkit предоставляет готовые решения с высокой производительностью, с ограниченным набором настроек для быстрой и эффективной работы. Идеален для тех, кто хочет быстро придать дизайну глубину и визуальную привлекательность, не тратя время на сложные настройки теней.
38. Scale
Max Di Capua |
28.02.2022 |
Установок: 37 235 ( +24) |
Лайков: 779 | Комментариев: 31
Scale позволяет масштабировать выбранные фреймы, их содержимое и эффекты до указанной ширины или высоты. Поддерживается множественный выбор фреймов и слоев. Масштабирование можно производить по ширине, высоте или в процентах, а также выбирать точку привязки для масштабирования.
Find and Replace Colors - это плагин для Figma, созданный для дизайнеров и команд, работающих с шаблонами, которые нуждаются в быстрой замене цветов. Он позволяет находить все экземпляры определенного цвета на странице и заменять их на новые, заданные пользователем. Плагин поддерживает работу с различными типами слоев и заливок, упрощая унификацию цветовой палитры в импортированных или незавершенных макетах, где отсутствует единая система стилей.
Bannerify Banner Studio – это плагин Figma для создания анимированных баннеров. Он позволяет легко анимировать элементы дизайна, экспортировать их в различные форматы (HTML, GIF, MP4 и другие) для рекламных платформ, добавлять видео и Lottie анимации, а также генерировать привлекательные страницы предпросмотра для клиентов. Bannerify экономит время, автоматизируя процесс создания баннеров и упрощая взаимодействие между дизайнерами и разработчиками.
Automator – это инструмент, который позволяет создавать пользовательские автоматизации в Figma посредством перетаскивания элементов, что значительно упрощает и ускоряет выполнение рутинных задач. Он предоставляет доступ к более чем 100 действиям, раскрывающим возможности API плагинов Figma, и позволяет автоматизировать трудоемкие процессы одним кликом. Начните использовать Automator, чтобы повысить производительность и сэкономить время при работе в Figma.
TeleportHQ позволяет экспортировать ваши Figma прототипы в HTML/CSS, React, Next.js, Vue, Nuxt и Angular, упрощая передачу дизайна разработчикам. Вы можете экспортировать компоненты и дизайн-систему в TeleportHQ, интегрировать сгенерированный код в кодовую базу вашего веб-приложения и опубликовать свой веб-сайт одним щелчком мыши. С TeleportHQ разработчики могут легко настраивать адаптивность, тестировать и публиковать свои веб-сайты, делая процесс передачи дизайна и разработки максимально эффективным.
RTL PLZ - плагин для Figma и FigJam, предназначенный для работы с текстом справа налево (RTL), таким как арабский, персидский или иврит. Он автоматически меняет порядок символов для правильного отображения RTL-текста, сохраняя оригинальный текст для восстановления. Плагин предлагает инструменты для редактирования отдельных слоев и пакетной обработки, поиска и замены текста, поддерживает многослойный реверс и обработку специальных символов. Также есть возможность сброса изменений и перекомпоновки текста при изменении размеров текстового блока.
FishText in Russian by Pavel Sherer – это удобный плагин для Figma, позволяющий быстро генерировать реалистичный текст-заполнитель на русском языке (рыбу). Он идеально подходит для прототипирования и дизайна, когда необходимо заполнить макет контентом, но настоящий текст еще не готов. Плагин умеет создавать отдельные предложения, абзацы и заголовки, а также заполнять текстовые слои, автоматически подстраиваясь под их размеры. Он позволяет создавать новые текстовые слои в группах и запоминает настройки, упрощая процесс работы.
С помощью Change Text вы можете массово редактировать текстовое содержимое нескольких слоев, групп и фреймов. Также, плагин позволяет заменять текст в выбранных слоях, что значительно упрощает процесс внесения изменений в макет. В будущих обновлениях планируется добавление функции генерации текста.
BENZIN позволяет бесплатно и автоматически удалять фон с изображений всего одним кликом и за считанные секунды, значительно экономя ваше время. Для использования плагина потребуется учетная запись на benzin.io.
SVG Export позволяет экономить время при экспорте наборов SVG, создавая и назначая пресеты для оптимизации экспорта. Это отличный инструмент для создания библиотек иконок с чистым и согласованным SVG-кодом, использующий svgo для оптимизации. С его помощью можно уменьшить размеры файлов SVG, просматривать изменения кода и внешнего вида иконок в реальном времени, использовать свойство CSS currentColor для автоматического наследования цвета текста и применять названия слоев в качестве классов. Также можно создавать и управлять пресетами для разных типов иконок, экспортировать в ZIP-архив или SVG-спрайт.
Faker - это плагин для Figma, который позволяет быстро генерировать реалистичные placeholder тексты. Он заменяет существующий текст в выбранных объектах на случайные данные, такие как имена, адреса, электронные почты, URL, заголовки и многое другое. Faker основан на библиотеке faker.js и предоставляет широкий спектр вариантов текста, включая Lorem Ipsum, данные о компаниях, финансах, интернет-тексты и даже "хакерский" жаргон. Это идеальный инструмент для дизайнеров, которым нужно быстро заполнить макеты реалистичным контентом для демонстрации или тестирования.
Content Buddy позволяет редактировать текст в нескольких слоях, экземплярах и компонентах файлов Figma и FigJam. Плагин ищет текстовые слои в выбранной области и отображает их списком. Вы можете выбрать отдельные элементы или сразу несколько, чтобы заменить оригинальный текст во всех слоях, где он встречается. Замена может быть простой текстовой или с использованием AI для перевода, итерации или изменения длины текста. Для AI-замен требуется токен OpenAI API.
50. LilGrid
Wayne Sang |
01.08.2024 |
Установок: 25 685 ( +10) |
Лайков: 533 ( +1) | Комментариев: 11
LilGrid автоматически упорядочивает элементы в сетку, что идеально подходит для организации иконок или других дизайн-элементов на странице. Просто выберите элементы или позвольте плагину упорядочить все верхние элементы страницы. Настройте количество столбцов и расстояние между ними, а также включите сортировку для алфавитной организации. LilGrid запоминает ваши последние настройки, что делает его удобным инструментом для быстрой организации. Он изменяет только позиционирование элементов, и вы всегда можете отменить действие.