---
title: Penpot
description: "Open-source редактор для интерфейсов и совместной работы: SVG-формат, Flex/Grid, прототипы, self-hosting и границы экосистемы."
---

## Назначение

**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](https://wpcraft.ru/kb/design/tools/figma.md); для открытого формата `.pen` и агентов на холсте — с [pen.dev](https://wpcraft.ru/kb/design/tools/pen-dev.md); для нативной работы macOS — со [Sketch](https://wpcraft.ru/kb/design/tools/sketch.md).

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

- [UI-дизайн](https://wpcraft.ru/kb/design/ui.md) — токены, компоненты и адаптивные сетки.
- [Доступность](https://wpcraft.ru/kb/design/ux/accessibility.md) — контраст и клавиатурные сценарии прототипа.
- [Дизайн рекламных материалов](https://wpcraft.ru/kb/design/marketing/advertising-design.md) — когда из редактора нужен статичный материал.

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

- [Penpot](https://penpot.app/)
- [Penpot: возможности](https://penpot.app/features)
- [Penpot: справка](https://help.penpot.app/)
- По официальной документации, 2026-11-04.