Pen2Figma
Импорт макетов pen.dev в Figma с сохранением автолейаута, компонентов, переменных и тем.
Скачать плагин
Pen2Figma превращает файлы .pen в нативные редактируемые слои Figma. Правила откалиброваны по собственному рендереру Pen, поэтому детали, в которых легко допустить ошибки (выравнивание обводки, геометрия многоугольников, углы градиентов, направление дуг, выбор темы, межбуквенный интервал), обрабатываются на основе фактических результатов рендеринга Pen. Бесплатно, без аккаунта и без ограничений.
Возможности
- Автолейаут
- Направление, промежутки, отступы, выравнивание, размеры hug, fill и фиксированный, абсолютно позиционированные дочерние элементы.
- Компоненты и экземпляры
- Повторно используемые компоненты Pen становятся компонентами Figma; экземпляры сохраняют переопределения, в том числе вложенные, а смена иконки становится заменой экземпляра.
- Переменные и режимы тем
- Каждая ось темы (светлая, тёмная и т. д.) становится коллекцией переменных с режимами; псевдонимы сохраняются, а фреймы остаются в своей теме.
- Библиотеки
- Перетащите вместе с макетом файлы библиотек .pen, и они будут связаны автоматически.
- Стили
- Сплошные заливки, линейные, радиальные и угловые градиенты, заливка изображением, обводка по сторонам, тени и размытие, скругления, дуги и векторы.
- Текст
- Шрифты и начертания подбираются из установленных; текст CJK, как и в Pen, переходит на PingFang SC или Noto Sans SC.
- Иконки
- lucide, Material Symbols, phosphor и feather в тех же версиях, что и в Pen.
Установка
Pen2Figma пока нет в Figma Community, поэтому его нужно импортировать вручную, и это работает только в настольном приложении Figma.
- Скачайте архив выше и распакуйте его.
- В настольном приложении Figma откройте меню и выберите Plugins → Development → Import plugin from manifest…
- Выберите распакованный
manifest.json. После этого Pen2Figma появится в разделе Plugins → Development.
Как пользоваться
- Запустите Pen2Figma и перетащите файл
.pen(вместе с используемыми файлами библиотек.penи изображениями) на холст Figma или выберите файлы в плагине. - Выберите фреймы и запустите импорт.
- Всё попадёт на текущую страницу, а в итоговой сводке будет указано, что стоит проверить.
Конфиденциальность
Преобразование полностью выполняется внутри плагина, ваши файлы никуда не загружаются. Сетевые запросы нужны только для получения иконок и изображений, на которые ссылается макет.
Известные ограничения
Шейдеры, mesh-градиенты, узлы скриптов и веб-страниц не имеют аналогов в Figma и импортируются как явно помеченные заглушки. В тарифах Figma с одним режимом на коллекцию остальные темы получают фиксированные значения.
Pen2Figma — независимый инструмент UISurf, не связанный с pen.dev и Figma и не одобренный ими.
История версий
- Первая публичная версия.
- Автолейаут, компоненты и экземпляры с вложенными переопределениями, переменные с режимами тем, библиотеки, градиенты, изображения, эффекты и иконки.
- Запасные шрифты для CJK, 10 языков интерфейса, светлый и тёмный интерфейс вслед за Figma.