Рейтинг в Figma: SVG

SVG Motion - это плагин для анимации векторных линий с помощью свойства "Stroke". Он позволяет быстро создавать анимированные логотипы, фоны, заголовки, загрузчики и многое другое. Анимацию можно экспортировать в форматах SVG, GIF и Webm. Доступны бесплатный и Pro планы с разными функциями, включая разные типы анимации, настройки скорости, рандомизацию линий и шаблоны.

SVG Export позволяет экономить время при экспорте наборов SVG, создавая и назначая пресеты для оптимизации экспорта. Это отличный инструмент для создания библиотек иконок с чистым и согласованным SVG-кодом, использующий svgo для оптимизации. С его помощью можно уменьшить размеры файлов SVG, просматривать изменения кода и внешнего вида иконок в реальном времени, использовать свойство CSS currentColor для автоматического наследования цвета текста и применять названия слоев в качестве классов. Также можно создавать и управлять пресетами для разных типов иконок, экспортировать в ZIP-архив или SVG-спрайт.

Advanced SVG Export позволяет оптимизировать SVG прямо перед экспортом из Figma, избавляя от необходимости использовать сторонние инструменты. Настраиваемые параметры оптимизации стали возможны благодаря использованию SVGO.

SVG Animate позволяет с легкостью создавать потрясающие анимации, не требуя сложных обходных путей и углубления в код. Вы можете анимировать каждый элемент вашего дизайна Figma индивидуально, используя простой, но мощный редактор анимации. Он позволяет настраивать такие параметры, как положение по осям X и Y, масштаб, поворот и прозрачность, а встроенный предпросмотр поможет добиться идеального результата. После этого вы можете скачать или скопировать анимированный SVG и вставить его на свой веб-сайт, используя легкую встраиваемую библиотеку на основе GreenSock GSAP.

Этот плагин позволяет копировать SVG-код в виде React-компонента, избавляя от необходимости его преобразования вручную. Просто щелкните правой кнопкой мыши по иконке или любому другому SVG-элементу, выберите в меню "Plugins" пункт "SVG to JSX", и код компонента будет скопирован в буфер обмена. Это упрощает вставку SVG-изображений в React-проекты, сохраняя их структуру и стили.

SVG to Image - это простой способ импортировать SVG в Figma как растровые изображения. Плагин позволяет масштабировать изображения при импорте, используя привычные методы, такие как @2x, @3x, по ширине или высоте, с некоторыми ограничениями по максимальным значениям. Это удобное решение для тех, кто хочет быстро и легко использовать SVG в своих проектах Figma.

Этот плагин позволяет легко преобразовывать выбранные фреймы или изображения Figma в SVG-код. После выбора нужного элемента в Figma, плагин предлагает три формата SVG: для HTML, CSS или как тег IMG. Просто выберите нужный формат, и код автоматически скопируется в буфер обмена, готовый для вставки в ваш редактор кода.

WaveCraft позволяет пользователям генерировать SVG-изображения, имитирующие культовые волны macOS Big Sur, непосредственно в Figma, создавая красивые фоны, баннеры и заголовки. Плагин предлагает широкие возможности настройки, включая размер, цвета, формы волн, градиенты и множество параметров конфигурации, позволяя адаптировать каждый дизайн под конкретные нужды проекта. После создания, эти SVG легко добавляются на холст Figma, обеспечивая бесшовную интеграцию и дальнейшее редактирование.

Этот плагин решает проблему дублирующихся ID градиентов и масок в SVG-файлах, которая возникает при использовании нескольких SVG-иконок с одинаковыми ID на одной странице. Он добавляет случайные числа к ID внутри SVG-кода, включая ссылки на градиенты и маски, чтобы обеспечить их уникальность. Это позволяет избежать конфликтов стилей и гарантировать правильное отображение всех иконок на странице, избавляя от необходимости вручную переименовывать ID.

SVG animation позволяет автоматически сопоставлять и отображать анимацию между несколькими кадрами с одинаковой структурой. После сопоставления можно настроить параметры и экспортировать изображения. Это удобный инструмент для создания анимированных SVG-изображений, упрощающий процесс согласования движений между разными кадрами.

Легко экспортируйте ваши варианты в SVG с помощью этого плагина. Figma variants удобны, но их экспорт может быть затруднительным из-за отсутствия контроля над схемой именования. Этот плагин позволяет экспортировать варианты двумя способами: создавая папки на основе названий вариантов для объединения наборов компонентов или создавая плоскую структуру с полезными именами файлов, основанными на каждом имени варианта. Булевы варианты будут использовать имя свойства для "true" или "on" состояния, в то время как "off" или "false" состояния будут опускать свойство.

One Click SVG упрощает работу с SVG-иконками, автоматически подготавливая их для вставки в HTML. Плагин делает иконки адаптивными, уникализирует ID градиентов и масок, а также позволяет создавать монохромные версии (fill="currentColor"). Настраиваемые параметры, такие как отключение изменения ширины и удаление непрозрачности, обеспечивают гибкость в управлении стилем и размером иконок. Это значительно ускоряет процесс разработки, избавляя от ручной правки кода.

icon-transfor - это плагин, предназначенный для преобразования выбранных SVG-изображений в формат dataURL или base64 для использования в качестве background-image. Он позволяет быстро и удобно получать готовый код для вставки SVG-изображений в CSS-стили веб-страниц, поддерживая множественный выбор и различные форматы данных. Плагин в основном предназначен для десктопных версий, но в будущем планируется поддержка браузеров.

Забудьте о скучной ручной экспорте графики в SVG и открытии их в текстовом редакторе, чтобы получить SVG-код. С этим плагином код SVG доступен одним щелчком мыши! Вы просто выбираете нужный элемент, нажимаете кнопку, и вуаля: ваш SVG-код готов к использованию. Плагин позволяет быстро скопировать SVG-код выбранного векторного объекта, фрейма, группы или текстового слоя прямо из Figma.

VectorSymbols - это инструмент для экспорта векторных иконок из Figma в формате SVG Symbol. Он позволяет выбирать компоненты и фреймворки с векторными слоями, настраивать правила заливки (nonzero или evenodd) для лучшей совместимости и гибкости. Инструмент генерирует SVG Symbol файл с CSS-переменными для стилизации, JSON файл с данными и исходные SVG файлы. VectorSymbols также предлагает функции для настройки ограничений, толщины обводки и добавления тегов к компонентам для удобного поиска.

SF Symbols Optimizer - это Figma плагин, который экспортирует иконки в формате SVG для использования в качестве пользовательских символов в SF Symbols (версий 5 и 6). Он позволяет преобразовывать фреймы и компоненты Figma в SVG-файлы, совместимые с SF Symbols, поддерживая вариации размера и толщины (Small, UltraLight, Regular, Black). Полученные SVG-файлы добавляются в Xcode как ресурсы, становясь доступными для всех весов и масштабов, что упрощает интеграцию иконок в приложения iOS.

Легко создавайте и настраивайте SVG-паттерны прямо в Figma с помощью этого мощного инструмента. Генерируйте сложные узоры, настраивая количество строк и столбцов, размеры фигур и интервалы. Выбирайте круги, квадраты или треугольники, подбирайте цвета и рандомизируйте размеры для придания органичного вида. Просматривайте паттерны в реальном времени и применяйте их к своим дизайнам. Идеально подходит для создания уникальных фонов, добавления текстуры к иллюстрациям и формирования повторяющихся элементов дизайна, значительно упрощая ваш рабочий процесс.

Tracer – бесплатный плагин для Figma, позволяющий преобразовывать растровые изображения в масштабируемую векторную графику SVG, используя Potrace. Он работает в автономном режиме, обеспечивая конфиденциальность, и предлагает точное преобразование. Плагин находится в стадии бета-тестирования, и приветствуются отзывы пользователей для его дальнейшего развития.

SVG Exporter – это простой и быстрый инструмент для экспорта SVG-файлов с заданными настройками. Он позволяет установить префикс для файлов, удалять атрибуты ширины и высоты для адаптивности, удалять цвета для последующей стилизации через CSS, добавлять градиенты с использованием CSS-переменных, а также автоматически создавать простые CSS-анимации для обводок, что упрощает добавление интерактивности к иконкам.

Optimize.svg позволяет оптимизировать SVG код, полученный из слоев/фреймов, настраивая параметры оптимизации под ваши нужды. Просто выберите фрейм/слой в режиме разработчика (Dev Mode) и получите оптимизированный SVG код, готовый к вставке в код. Инструмент использует svgo.js и предлагает переключаемые опции, такие как ширина Viewbox, использование имен слоев (в качестве ID или классов), удаление Doctype и XMLNS, слияние путей и стилей, преобразование фигур и многое другое, чтобы добиться максимальной эффективности и минимального размера файла.

Этот плагин предназначен для быстрого копирования текстовых и фреймовых стилей (хотя их работа может быть нестабильной, так как он разработан для личного использования). Дополнительно, он позволяет конвертировать векторные изображения в SVG-код, тег или CSS стили "background-image".