Penpot: открытая альтернатива Figma для дизайна, разработки и AI-автоматизации

Современный интерфейсный дизайн давно перестал быть изолированной задачей одного специалиста. Над цифровым продуктом одновременно работают UX/UI-дизайнеры, разработчики, аналитики, продуктовые менеджеры и специалисты по дизайн-системам. Поэтому командам нужен не просто графический редактор, а единое пространство, в котором макеты, компоненты, код и автоматизация связаны между собой.

Новым и наиболее заметным open-source-проектом в этой области стал Penpot — открытая платформа для проектирования интерфейсов, создания интерактивных прототипов и совместной работы продуктовых команд.

Penpot можно использовать в облаке, развернуть на собственном сервере, интегрировать с внутренними сервисами и подключить к AI-агентам через Model Context Protocol. Исходный код проекта опубликован на GitHub (более 57к звезд).

В этой статье подробно разберём:

• что такое Penpot и для каких задач он подходит;
• чем Penpot отличается от Figma;
• как скачать и установить Penpot;
• существует ли официальный Penpot Desktop;
• как работает Penpot MCP;
• что находится в репозитории Penpot GitHub;
• кому стоит переходить на эту платформу.

Что такое Penpot

Penpot — это открытая веб-платформа для UI/UX-дизайна, прототипирования и взаимодействия между дизайнерами и разработчиками.

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

Главное отличие Penpot от большинства коммерческих редакторов заключается в открытой архитектуре. Платформа использует стандарты веб-разработки, включая SVG, CSS, HTML и JSON. Благодаря этому дизайн рассматривается не как закрытая картинка внутри проприетарного формата, а как структурированный набор элементов, который понятен разработчикам, интеграциям и AI-агентам.

Penpot поддерживает два основных сценария использования:

1. Облачную версию, доступную через браузер.
2. Self-hosted-развёртывание на инфраструктуре пользователя или организации.

Интерфейс и основные возможности остаются одинаковыми независимо от того, используется облачная или самостоятельно размещённая версия.

Основные возможности Penpot

Проектирование интерфейсов

Penpot предоставляет привычный для UI/UX-дизайнера холст с фреймами, слоями, векторными объектами, текстом, изображениями и графическими эффектами.

В редакторе можно создавать:

• макеты сайтов;
• интерфейсы мобильных приложений;
• административные панели;
• личные кабинеты;
• дизайн-системы;
• прототипы SaaS-сервисов;
• шаблоны и библиотеки компонентов.

Интерфейс Penpot во многом понятен пользователям Figma, Sketch и Adobe XD, поэтому базовые принципы работы не приходится осваивать заново.

Интерактивное прототипирование

В Penpot можно связывать экраны переходами, создавать пользовательские сценарии и демонстрировать результат в режиме презентации.

Прототип доступен по ссылке, что позволяет показывать проект заказчику, тестировщикам или другим участникам команды без передачи исходного файла. В режиме Inspect разработчик может дополнительно изучать структуру, размеры, стили и код элементов.

Flex Layout и CSS Grid

Одна из сильных сторон Penpot — тесная связь макета с принципами современной вёрстки.

Для построения адаптивных интерфейсов платформа поддерживает Flex Layout и CSS Grid. Дизайнер может моделировать поведение блоков таким образом, чтобы структура макета была близка к будущей реализации в браузере.

Это особенно важно при работе над:

• адаптивными страницами;
• сложными таблицами;
• карточными интерфейсами;
• панелями управления;
• многоуровневыми формами;
• компонентами с динамическим содержимым.

Использование знакомой разработчикам логики уменьшает количество спорных ситуаций при переносе дизайна в HTML и CSS. Поддержка Flex Layout и CSS Grid позиционируется проектом как один из ключевых инструментов объединения дизайна и кода.

Компоненты, варианты и дизайн-токены

Penpot подходит для создания масштабируемых дизайн-систем.

В платформе доступны:

• переиспользуемые компоненты;
• варианты компонентов;
• общие библиотеки;
• стили;
• дизайн-токены;
• наборы типографики и цветов;
• системные значения отступов, размеров и эффектов.

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

Penpot объединяет Design Tokens, Components и Variants, превращая файл с макетами в единый источник данных для нескольких проектов и платформ.

Совместная работа

Penpot поддерживает редактирование файлов в реальном времени. Несколько участников команды могут находиться в одном проекте, просматривать действия коллег и обсуждать изменения.

Такой формат подходит как небольшим продуктовым командам, так и распределённым организациям, которым необходимо организовать совместную работу дизайнеров, разработчиков и менеджеров.

Inspect Mode для разработчиков

Режим Inspect предоставляет разработчику информацию о выбранном элементе:

• размеры;
• координаты;
• отступы;
• типографику;
• цвета;
• структуру;
• CSS-свойства;
• SVG-код;
• HTML-представление.

Официальное описание проекта указывает, что вкладка Inspect предоставляет доступ к SVG, CSS и HTML.

Однако автоматически полученный код не следует воспринимать как полностью готовую production-вёрстку. Его основная задача — точно передать значения, структуру и параметры дизайна. Архитектуру компонентов, семантику HTML, доступность, бизнес-логику и оптимизацию разработчик по-прежнему должен контролировать самостоятельно.

Плагины, API и вебхуки

Возможности Penpot можно расширять с помощью плагинов. Плагинная система позволяет добавлять собственные функции, создавать специализированные инструменты и связывать редактор с другими приложениями.

Для внешних интеграций предусмотрены:

• Plugin API;
• открытый API с токенами доступа;
• исходящие вебхуки;
• библиотеки и шаблоны;
• MCP-сервер.

Вебхуки могут уведомлять внешние приложения о событиях: создании или обновлении файла, появлении комментария и других действиях. Это позволяет включать Penpot в DesignOps-, DevOps- и GitOps-процессы.

Penpot скачать: доступные варианты

Запрос «Penpot скачать» может подразумевать разные задачи. Одному пользователю нужен обычный редактор, другому — серверная версия, а третьему — исходный код для доработки.

Вариант 1. Использовать Penpot в браузере

Самый простой способ начать работу — облачная версия Penpot. Устанавливать программу на компьютер не требуется: пользователь регистрируется, создаёт команду и открывает редактор в современном браузере.

Этот вариант подходит:

• начинающим пользователям;
• фрилансерам;
• небольшим студиям;
• командам без собственного системного администратора;
• тем, кто хочет оценить платформу перед миграцией.

Вариант 2. Установить Penpot на собственный сервер

Self-hosted Penpot можно разместить:

• на виртуальном сервере;
• в частном облаке;
• в локальной инфраструктуре организации;
• в Kubernetes-кластере;
• в изолированном корпоративном контуре.

К официальным вариантам установки относятся Docker Compose, Kubernetes с Helm, Elestio и TrueNAS. Платформа также может работать в частном облаке или on-premise-среде.

Self-hosting особенно востребован там, где важны:

• контроль над данными;
• внутренние политики безопасности;
• собственное резервное копирование;
• интеграция с корпоративной авторизацией;
• независимость от одного SaaS-поставщика;
• возможность модифицировать систему.

Быстрая установка Penpot через Docker Compose

Для production-развёртывания понадобятся Docker, Docker Compose, базовое понимание DNS и настройка reverse proxy. Официальная документация рекомендует использовать HTTPS.

Сначала необходимо получить файл конфигурации:

wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

Альтернативный вариант через curl:

curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

После этого контейнеры запускаются командой:

docker compose -p penpot -f docker-compose.yaml up -d

При стандартной конфигурации сервис начинает принимать подключения на локальном порту 9001. Для остановки используется команда:

docker compose -p penpot -f docker-compose.yaml down

Перед использованием в рабочей среде необходимо отдельно настроить:

• доменное имя;
• HTTPS-сертификат;
• reverse proxy;
• SMTP-сервер;
• регистрацию пользователей;
• резервное копирование PostgreSQL и файловых данных;
• ограничения доступа;
• конкретную версию Docker-образа.

Использование тега latest удобно для тестирования, но в производственной среде безопаснее закрепить определённую версию и обновлять её контролируемо.

Вариант 3. Скачать Penpot с GitHub

Разработчики могут клонировать основной репозиторий:

git clone https://github.com/penpot/penpot.git
cd penpot

Для запуска среды разработки необходимы Docker и Docker Compose V2. Официальная инструкция предлагает загрузить подготовленное окружение и запустить его следующими командами:

./manage.sh pull-devenv
./manage.sh run-devenv

Такой способ предназначен не для рядового дизайнера, а для разработчиков, которые хотят:

• изучить архитектуру Penpot;
• изменить frontend или backend;
• исправить ошибку;
• создать собственную сборку;
• разработать новую функцию;
• принять участие в развитии проекта.

Инструкции для production-сервера и development environment различаются. Не следует использовать среду разработки вместо корректно настроенного production-развёртывания.

Penpot Desktop: существует ли настольное приложение

Вокруг запроса Penpot Desktop часто возникает путаница.

Основной Penpot является веб-приложением. Его официально поддерживаемые сценарии — облачный сервис и self-hosted-развёртывание.

При этом существует отдельный проект Penpot Desktop, созданный сообществом. На официальной странице вариантов развёртывания он расположен в разделе неофициальных решений.

Penpot Desktop представляет собой настольную оболочку, которая открывает браузерную функциональность Penpot в отдельном приложении. Она предоставляет выделенное окно, вкладки, связь расширений файлов и возможность подключаться к разным экземплярам Penpot, включая облачные и локальные.

Важно понимать три момента:

1. Penpot Desktop является community-проектом, а не основной официальной редакцией Penpot.
2. Настольная оболочка сама по себе не отменяет необходимость подключения к облачному или самостоятельно развёрнутому экземпляру.
3. Для полностью локальной работы потребуется локально доступный сервер Penpot.

Penpot Desktop скачать: где искать установщик

По запросу «Penpot Desktop скачать» лучше не загружать приложение с неизвестных каталогов программ.

Безопаснее перейти к проекту через раздел неофициальных вариантов на официальном сайте Penpot, а затем открыть репозиторий и страницу Releases community-приложения. Перед установкой следует проверить:

• дату релиза;
• список изменений;
• открытые проблемы;
• архитектуру процессора;
• контрольные суммы, если они опубликованы;
• наличие цифровой подписи;
• отзывы сообщества.

Например, для macOS могут выпускаться разные сборки для Intel и Apple Silicon. В обсуждении проекта разработчик отдельно предупреждал, что некоторые macOS-установщики на определённом этапе распространялись без цифровой подписи.

Для корпоративной среды предпочтительнее браузерная версия или собственный сервер Penpot, поскольку эти варианты проще централизованно контролировать и обновлять.

Penpot GitHub: что находится в репозитории

Запрос Penpot GitHub обычно приводит к главному репозиторию проекта. В нём размещены исходный код, документация для разработчиков, Docker-конфигурации, тесты, экспериментальные функции и отдельные модули платформы.

Структура репозитория включает, в частности:

• frontend — клиентскую часть;
• backend — серверную логику;
• docker — контейнеры и конфигурации;
• plugins — инфраструктуру плагинов;
• mcp — компоненты AI-интеграции;
• render-wasm — модули рендеринга;
• exporter — сервисы экспорта;
• docs — документацию;
• common и library — общие библиотеки.

Основная часть кодовой базы написана на Clojure и ClojureScript. Также используются JavaScript, TypeScript, Rust, SCSS и HTML.

Проект распространяется по лицензии MPL 2.0. Она разрешает использование, изучение и модификацию кода, включая коммерческие сценарии, но требует соблюдать условия лицензии при распространении изменённых файлов.

На GitHub можно:

• отслеживать релизы;
• просматривать roadmap через задачи и обсуждения;
• сообщать об ошибках;
• предлагать улучшения;
• отправлять pull request;
• изучать архитектуру;
• создавать собственные ответвления проекта.

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

Penpot MCP: управление дизайном с помощью AI-агентов

Одно из наиболее перспективных направлений проекта — Penpot MCP.

MCP, или Model Context Protocol, — это протокол, через который AI-клиент получает доступ к внешним инструментам и структурированным данным. В случае Penpot MCP-совместимый агент может подключаться к открытому дизайн-файлу и взаимодействовать с его объектной моделью.

AI-агент способен читать и изменять:

• страницы;
• слои;
• компоненты;
• стили;
• дизайн-токены;
• библиотеки;
• структуру файла;
• отдельные графические элементы.

Это создаёт двусторонние сценарии design-to-code, code-to-design и design-to-design.

Что можно делать через Penpot MCP

В дизайнерских задачах AI-агент может:

• создавать цветовые и типографические токены;
• применять токены к существующим элементам;
• искать несогласованные стили;
• переименовывать слои по правилам команды;
• систематизировать компоненты;
• создавать варианты компонентов;
• обновлять палитру во всём файле;
• собирать новые экраны на базе существующей дизайн-системы.

В задачах разработки Penpot MCP позволяет:

• извлекать структуру экрана;
• анализировать стили и токены;
• преобразовывать значения в CSS-переменные;
• экспортировать выбранные ресурсы;
• связывать дизайн-компоненты с компонентами кодовой базы;
• генерировать HTML и CSS;
• проверять соответствие реализации макету.

Перечень таких сценариев приведён в официальной документации MCP-сервера.

Как устроен Penpot MCP

В архитектуре участвуют три основных элемента:

1. MCP-клиент — IDE, редактор или AI-приложение, в котором пользователь вводит запрос.
2. MCP-сервер — принимает команды агента и предоставляет инструменты для работы с Penpot.
3. MCP-плагин Penpot — работает внутри редактора и связывает сервер с открытым дизайн-файлом.

Плагин соединяется с сервером через WebSocket, а операции выполняются через Penpot Plugin API.

Подключение может быть удалённым или локальным. Для удалённого варианта пользователь включает MCP в разделе интеграций, создаёт персональный ключ, добавляет адрес сервера в AI-клиент и подключает открытый файл через меню Penpot.

Безопасность Penpot MCP

AI-агент может выполнять операции записи: создавать, перемещать, переименовывать, удалять и изменять элементы.

Поэтому начинать работу рекомендуется с команд только для чтения:

• показать список страниц;
• проанализировать структуру;
• вывести список компонентов;
• найти используемые цвета;
• проверить токены.

После проверки контекста можно переходить к небольшим обратимым изменениям. Официальная документация также рекомендует просить агента заранее описывать планируемые действия и избегать слишком широких команд наподобие «полностью переработай весь проект».

Ключ MCP необходимо хранить как пароль. Он даёт AI-клиенту доступ к возможностям, предоставленным сервером.

Penpot vs Figma: подробное сравнение

Сравнение Penpot vs Figma нельзя сводить к вопросу о том, какой редактор «лучше». Обе системы позволяют проектировать интерфейсы, работать с компонентами, создавать прототипы и передавать макеты разработчикам. Выбор зависит от инфраструктуры, требований к данным и процессов команды.

Penpot выделяется возможностью self-hosting и доступом к исходному коду. Figma, в свою очередь, предоставляет официальные desktop-приложения для Windows и macOS. Функциональность Figma Desktop в основном соответствует браузерной версии.

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

Важно также учитывать, что MCP уже не является уникальной возможностью только Penpot. Figma предоставляет собственный MCP-сервер, который может читать дизайн-контекст, генерировать код и в поддерживаемых сценариях создавать или изменять элементы на холсте.

Поэтому ключевой вопрос звучит не «у кого есть AI», а «какая модель инфраструктуры и автоматизации лучше соответствует требованиям организации».

Когда предпочтительнее Penpot

Penpot особенно интересен, если:

• нужен self-hosted-редактор;
• дизайн-файлы должны храниться в собственном контуре;
• организация стремится уменьшить зависимость от SaaS-поставщиков;
• важны открытые форматы;
• требуется модификация исходного кода;
• дизайн тесно связан с CSS Grid и Flexbox;
• команда хочет создавать собственные плагины и автоматизации;
• необходимо подключать AI-агентов к дизайн-системе;
• количество пользователей делает SaaS-лицензирование неудобным.

Когда переход с Figma может быть преждевременным

Миграцию стоит заранее протестировать, если команда:

• использует большое количество специфических плагинов Figma;
• зависит от сложных корпоративных процессов, построенных вокруг Figma;
• применяет функции, у которых нет полного аналога;
• работает с большим архивом файлов;
• ожидает официальное нативное desktop-приложение;
• не имеет ресурсов для администрирования self-hosted-инфраструктуры.

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

Как перенести проекты из Figma в Penpot

Для миграции существует Penpot Exporter — плагин, который преобразует файл Figma в ZIP-архив для последующего импорта в Penpot. Проект размещён в отдельном репозитории организации Penpot.

Перед массовым переносом рекомендуется:

1. Выбрать один типичный рабочий проект.
2. Экспортировать его через плагин.
3. Проверить компоненты, варианты и Auto Layout.
4. Сравнить шрифты и текстовые стили.
5. Проверить маски, эффекты и векторные объекты.
6. Протестировать интерактивные связи.
7. Оценить структуру библиотек.
8. Зафиксировать элементы, требующие ручной доработки.

Миграционные инструменты не всегда способны идеально воспроизвести все особенности закрытого формата. Поэтому перенос лучше рассматривать как управляемый проект, а не как одно нажатие кнопки.

Для крупной команды разумно сначала перенести дизайн-систему, настроить правила именования, токены и библиотеки, а уже затем импортировать продуктовые макеты.

Преимущества Penpot

Открытый исходный код

Код платформы можно изучать, проверять и изменять. Это важно для государственных организаций, крупных компаний и команд с особыми требованиями к безопасности.

Self-hosting

Организация самостоятельно определяет, где хранятся её проекты и кто получает к ним доступ.

Отсутствие жёсткой привязки к операционной системе

Основной редактор работает в браузере и не требует macOS или Windows.

Ориентация на разработчиков

SVG, CSS, HTML, Design Tokens, Flex Layout и Grid делают передачу дизайна в разработку более прозрачной.

Программируемость

API, плагины, вебхуки и MCP позволяют использовать Penpot как часть более крупной инженерной системы.

Возможность адаптации

При наличии компетенций компания может создавать собственные сборки, плагины, интеграции и процессы авторизации.

Недостатки и ограничения Penpot

Self-hosting требует администрирования

Необходимо обновлять контейнеры, следить за базой данных, создавать резервные копии, настраивать HTTPS и контролировать доступ.

Desktop-приложение не является основной официальной редакцией

Пользователям, которым нужен поддерживаемый настольный клиент, следует учитывать community-статус Penpot Desktop.

Миграция может потребовать ручной работы

Сложные Figma-файлы, плагины и нестандартные элементы могут переноситься не полностью.

Автоматически созданный код требует проверки

Inspect и MCP ускоряют handoff, но не заменяют разработчика и архитектурные стандарты проекта.

Экосистема конкретной команды может быть важнее набора функций

Даже технически подходящий редактор не принесёт пользы, если он не интегрирован с процессами, библиотеками и компетенциями сотрудников.

Кому подойдёт Penpot

Penpot можно рекомендовать следующим категориям пользователей.

Продуктовым командам

Дизайнеры и разработчики получают общую модель компонентов, токенов и адаптивных макетов.

Стартапам

Команда может начать с облачной версии, а по мере роста перенести систему на собственную инфраструктуру.

Веб-студиям

Платформа подходит для создания интерфейсов сайтов, интернет-магазинов, личных кабинетов и веб-сервисов.

Государственным и регулируемым организациям

Self-hosting помогает размещать данные в контролируемой инфраструктуре и применять внутренние политики доступа.

Open-source-проектам

Открытая модель разработки естественно сочетается с публичными репозиториями и распределённым участием сообщества.

AI- и automation-командам

Penpot MCP позволяет подключать дизайн-файлы к AI-агентам и создавать сценарии автоматизированного обслуживания дизайн-систем.

Часто задаваемые вопросы

Penpot — это полный аналог Figma?

Penpot решает многие аналогичные задачи: дизайн интерфейсов, компоненты, прототипы, совместное редактирование и передачу макетов разработчикам. Однако это самостоятельная платформа со своей архитектурой, возможностями и ограничениями.

Можно ли использовать Penpot бесплатно?

Исходный код Penpot открыт под лицензией MPL 2.0. Платформу можно самостоятельно развернуть на собственном оборудовании. При этом эксплуатация сервера может потребовать расходов на инфраструктуру и администрирование.

Где Penpot скачать для Windows?

Основной Penpot работает через браузер. Неофициальное community-приложение Penpot Desktop следует искать через официальный раздел self-hosting и связанный с ним репозиторий проекта.

Есть ли официальный Penpot Desktop?

Основной официальный продукт остаётся веб-платформой. Существующий Penpot Desktop является поддерживаемой сообществом инициативой и размещён среди неофициальных вариантов.

Можно ли установить Penpot на локальный компьютер?

Да. Серверную часть можно развернуть локально через Docker Compose. После запуска редактор открывается в браузере по локальному адресу.

Где находится Penpot GitHub?

Исходный код расположен в официальной GitHub-организации Penpot. Главный репозиторий называется penpot/penpot.

Что такое Penpot MCP?

Это MCP-сервер, который связывает Penpot с совместимыми AI-клиентами. Агент может анализировать файл, получать данные о компонентах и токенах, а при наличии разрешений — изменять дизайн.

Может ли Penpot MCP генерировать интерфейсы?

Да. Агент может создавать новые экраны на основе существующей дизайн-системы, добавлять элементы и применять токены. Качество результата зависит от структуры файла, используемой модели и точности задания.

Penpot или Figma — что выбрать?

Penpot стоит рассматривать, если приоритетом являются self-hosting, открытый исходный код, контроль данных и глубокая интеграция с разработкой. Figma может быть удобнее командам, которые уже используют её экосистему и предпочитают готовую облачную инфраструктуру с официальным desktop-клиентом.