Penpot

Назначение

Penpot — open-source платформа для дизайна интерфейсов и совместной работы. Её сильная сторона — прозрачность формата и возможность поставить платформу на собственные серверы: файлы и данные не обязаны жить у вендора.

Penpot проектирует экраны, компоненты и прототипы; результат передаётся в разработку как макет и CSS-значения.

Возможности и форматы

• Браузерный редактор с совместным редактированием и комментариями.
• SVG как основной формат: слои, иконки и иллюстрации переносятся в код без растровой потери.
• Flex layout и Grid layout для адаптивных макетов.
• Компоненты с переопределениями, библиотеки и дизайн-токены.
• Прототипирование переходов и взаимодействий.
• Плагины на JavaScript и API для автоматизации.
• Облачный тариф и self-hosted установка; роли и права в команде.
• Экспорт в SVG, PNG и PDF; CSS-значения и размеры доступны в инспекторе.
• Импорт из других редакторов ограничен и требует проверки на конкретном файле.

Практический сценарий

Адаптивная страница на Flex. Соберите карточку услуги в компонент, задайте отступы и цвет через токены, продублируйте её в сетку из трёх колонок. Переключите контейнер на Flex и проверьте поведение на ширине 390: элементы должны переноситься, а не сжиматься до нечитаемого размера. Экспортируйте макет в SVG и сравните с макетом в редакторе.

Проверка результата: компонент меняется один раз и обновляется во всех местах; на мобильной ширине нет переполнения; экспорт открывается в браузере без искажений.

Ограничения

• Экосистема плагинов, шаблонов и интеграций меньше, чем у Figma.
• Импорт сложных файлов из других редакторов не гарантирует полного сохранения компонентов и прототипов.
• Часть продвинутых возможностей (сложные переменные, продвинутое прототипирование) развивается медленнее и требует проверки под конкретный сценарий.
• Self-hosting означает эксплуатацию: обновления, резервные копии, доступы и безопасность на вашей стороне.
• Производительность на очень больших файлах зависит от браузера и конфигурации.

Когда выбирать

Выбирают, когда важны открытый код, контроль над данными и возможность self-hosting. Для командной дизайн-системы с большой экосистемой сравните с Figma; для открытого формата .pen и агентов на холсте — с pen.dev; для нативной работы macOS — со Sketch.

Связанные материалы

• UI-дизайн — токены, компоненты и адаптивные сетки.
• Доступность — контраст и клавиатурные сценарии прототипа.
• Дизайн рекламных материалов — когда из редактора нужен статичный материал.

Материалы и источники

• Penpot
• Penpot: возможности
• Penpot: справка
• По официальной документации, 2026-11-04.