Penpot: бесплатная альтернатива Figma с открытым кодом

Ты рисуешь экраны своего будущего приложения, открываешь Figma — и упираешься в ограничения бесплатного тарифа: всего три файла, а за полноценную работу просят платную подписку. Знакомо? У этой проблемы есть элегантное решение — Penpot: полноценный редактор дизайна интерфейсов, который полностью бесплатен и имеет открытый исходный код. Ниже — что такое Penpot, чем он отличается от Figma и от ИИ-генераторов макетов, как начать в нём работать и в каких случаях он действительно заменяет Figma, а в каких — пока нет.

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

Что такое Penpot простыми словами

Penpot — это бесплатный редактор дизайна интерфейсов с открытым исходным кодом (open-source). Если совсем коротко: это то же самое по назначению, что Figma, — инструмент, в котором рисуют экраны приложений и сайтов, — но с принципиально другой моделью: код программы открыт, а пользоваться облачной версией можно бесплатно.

Разберём название по частям, потому что каждое слово здесь важно:

• Редактор дизайна интерфейсов. В Penpot ты создаёшь макеты: экраны мобильного приложения, страницы сайта, кнопки, формы, меню. Это не графический редактор для иллюстраций и не ИИ-генератор картинок — это рабочий инструмент проектирования интерфейсов, как Figma, Sketch или Adobe XD.
• С открытым исходным кодом. Исходный код Penpot опубликован и доступен любому. Это значит две вещи: во-первых, проект не может внезапно «закрыться» и забрать твои данные — сообщество всегда может продолжить разработку; во-вторых, ты можешь установить Penpot на собственный сервер и держать все свои макеты у себя, а не в чужом облаке.
• Бесплатный. Облачная версия на официальном сайте бесплатна, и у неё нет жёсткого лимита на количество проектов. Для сравнения: у бесплатного тарифа Figma ограничение в три файла — дальше нужна платная подписка.

Работает Penpot прямо в браузере — ничего устанавливать не нужно. Открыл сайт, зарегистрировался, рисуешь. А если захочешь полный контроль, есть self-hosted вариант: развёртываешь Penpot на своём сервере через Docker, и вся система вместе с данными принадлежит тебе.

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

Отдельно стоит сказать про совместимость: Penpot умеет открывать и редактировать файлы в формате, совместимом с Figma. Если у тебя уже есть наработки в Figma или дизайнер прислал тебе файл, их можно перенести в Penpot через импорт и продолжить работу там. Это сильно упрощает переход: не нужно перерисовывать всё с нуля.

Внутри Penpot построен на веб-стандартах: макеты в его основе — это SVG, а не закрытый проприетарный формат. Для вайбкодера это приятный бонус: то, что ты нарисовал, легко экспортируется в форматы, понятные и разработчику, и ИИ-агенту. SVG — это, по сути, текстовое описание графики, поэтому его можно открыть в любом браузере, вставить прямо в HTML-страницу и даже попросить ИИ-агента «прочитать» такой файл и сверстать по нему экран.

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

Что реально можно сделать в Penpot с нуля:

• экраны мобильного приложения — от стартового до настроек;
• страницы сайта или лендинга;
• прототип с кликабельными переходами между экранами;
• набор компонентов: кнопки, карточки, поля ввода, иконки;
• простые векторные иллюстрации и схемы;
• макет-референс для ИИ-агента, который будет верстать интерфейс.

Чем Penpot отличается от Figma AI

Тут важно не запутаться, потому что названия похожи, а продукты — совершенно разные.

Figma AI — это функции искусственного интеллекта, встроенные внутрь платной Figma: генерация черновиков дизайна по текстовому описанию, автоматические подсказки и тому подобное. Мы уже подробно разбирали это в статье Figma AI: как использовать ИИ для дизайна интерфейса приложения. Ключевое: Figma AI живёт внутри Figma, и чтобы им пользоваться, нужна сама Figma — с её тарифами и ограничениями.

Penpot — вообще другой продукт. Это не «функция внутри чего-то», а самостоятельный редактор, полная замена самой Figma для ручного дизайна. В нём нет ИИ-генерации макетов: ты рисуешь экраны сам, как в классической Figma. Зато в нём нет и подписки: весь инструмент бесплатен и открыт.

Проще говоря:

• Figma AI — ИИ-помощник внутри платного редактора.
• Penpot — бесплатный и открытый редактор без ИИ, но и без платных тарифов.

Если тебе нужна именно ИИ-генерация дизайна — Penpot тут не конкурент. Если нужен рабочий стол для ручного дизайна без счёта за подписку — это как раз он.

Есть и обратная сторона: раз в Penpot нет ИИ, весь дизайн ты делаешь сам. Для кого-то это минус — «зачем рисовать руками». Но на практике ручной контроль часто оказывается плюсом: ты точно знаешь, почему каждый элемент стоит именно там, и можешь поправить любую мелочь за секунды, не перегенерируя макет целиком.

Эти два подхода, кстати, не исключают друг друга. Ничто не мешает тебе держать в арсенале оба инструмента: Figma AI — для быстрой генерации черновиков, если у тебя есть доступ к Figma, и Penpot — как основной бесплатный редактор, где черновик доводится до ума руками. Вопрос всегда один: какая задача стоит прямо сейчас — быстро получить идею или аккуратно её оформить.

Чем Penpot отличается от Uizard и других ИИ-генераторов

С ИИ-инструментами вроде Uizard разница ещё принципиальнее. Uizard генерирует макеты из текста автоматически: ты описываешь «приложение для учёта задач с тёмной темой» — и получаешь готовый черновик экранов. Мы разбирали его в статье Uizard: макеты интерфейса из текста. Похожим образом работает и Google Stitch, о котором у нас тоже есть обзор: Google Stitch: дизайн интерфейса из текста.

Penpot так не умеет — и не пытается. Это классический инструмент ручного дизайна: ты сам рисуешь прямоугольники, расставляешь тексты, собираешь компоненты, выравниваешь по сетке. Как в Figma, только бесплатно и с открытым кодом.

Возникает честный вопрос: а зачем в 2026 году рисовать руками, если ИИ может сгенерировать? Ответов несколько:

• Точность. ИИ-генератор даёт черновик «примерно как ты описал». Когда нужен конкретный экран с конкретным расположением элементов — ручной редактор точнее и быстрее, чем десять итераций промптов.
• Понимание. Пока рисуешь сам, ты реально разбираешься, из чего состоит интерфейс: где заголовок, где отступы, как связаны экраны. Это понимание потом очень помогает ставить задачи ИИ-агенту в коде.
• Отсутствие подписок. Генераторы макетов — коммерческие сервисы со своими лимитами и тарифами. Penpot бесплатен целиком.

На практике эти инструменты не конкурируют, а дополняют друг друга: сгенерировал черновик в ИИ-сервисе → доработал руками в Penpot → передал в разработку.

Вот как это выглядит на живом примере. Допустим, ты делаешь свою «Змейку» и хочешь экран рекордов. Можно попросить генератор: «таблица рекордов змейки в тёмной теме» — и получить за пару минут четыре варианта, из которых ни один не совсем твой: где-то шрифт не тот, где-то кнопка «Назад» стоит не там. А можно открыть Penpot и за полчаса нарисовать ровно тот экран, который нужен: заголовок «Рекорды», список из десяти строк, твой лучший результат подсвечен, внизу кнопка «Играть снова». Этот макет ты экспортируешь в PNG и отдаёшь ИИ-агенту — и он сверстает именно то, что ты задумал, до пикселя.

Есть у ручного дизайна и ещё одно неочевидное преимущество: повторяемость. ИИ-генератор каждый раз выдаёт новый результат, и два сгенерированных экрана могут быть в разных стилях. В Penpot ты один раз собираешь компоненты — кнопку, поле ввода, карточку — и дальше все экраны получаются единообразными автоматически, потому что построены из одних и тех же кирпичиков.

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

Зачем Penpot вайбкодеру на курсе

На курсе ты собираешь приложение вместе с ИИ-ассистентом: ставишь задачи словами, Claude Code пишет код. Казалось бы, зачем тут вообще редактор дизайна? Но есть несколько ситуаций, где Penpot оказывается ровно тем, что нужно.

Сразу обозначим главную мысль раздела: в вайбкодинге макет — это не «красивая картинка для портфолио», а инструмент коммуникации с ИИ-агентом. Чем точнее ты показал, что хочешь, тем меньше итераций «не то, переделай» и тем быстрее получается готовый экран. А раз макет нужен регулярно, вопрос цены и лимитов инструмента перестаёт быть абстрактным.

Первый случай: нужен полноценный редактор интерфейсов, но не хочется платить за Figma Professional. Бесплатный тариф Figma ограничен тремя файлами. Для одного пробного макета этого хватит, но если ты рисуешь несколько проектов — учебную «Змейку», свой следующий проект, макет для друга, — три файла кончаются мгновенно. В Penpot такого потолка нет: рисуй сколько угодно проектов бесплатно.

Второй случай: важно, чтобы данные хранились у тебя, а не у сторонней компании. Макеты — это тоже интеллектуальная собственность: там наброски твоих идей, структура продукта, иногда — коммерческие планы. Открытый код Penpot и возможность self-hosted развёртывания дают вариант, где файлы физически лежат на твоём сервере и никуда не утекают. Для большинства новичков это избыточно, но знать, что такая возможность есть, полезно.

Третий случай: нужно показать ИИ-агенту, что именно ты хочешь. Когда ты просишь Claude Code «сделай красивый экран настроек», результат — лотерея. А когда ты прикладываешь макет — «сделай вот так» — результат предсказуем. Penpot экспортирует макеты в SVG и PNG, и эти картинки можно передавать ИИ-агенту как референс: агент увидит точное расположение элементов, цвета и размеры.

Четвёртый случай: обучение. Нарисовать интерфейс руками — лучший способ понять, как устроены экраны приложений. После пары макетов в Penpot ты начнёшь замечать, что интерфейсы состоят из повторяющихся блоков, что отступы бывают системными, что кнопки — это компоненты. Это знание напрямую улучшает твои промпты: вместо «сделай красиво» ты пишешь «сделай карточку с заголовком, описанием и кнопкой внизу, отступы как на макете».

Соберём сравнение с бесплатной Figma в одну таблицу:

Как видно, Penpot выигрывает именно там, где болит у новичка: цена, отсутствие потолка на файлы и контроль над данными. А проигрывает там, где сильна экосистема Figma, — в готовых библиотеках и плагинах. Для учебных и первых собственных проектов первый список важнее.

Как это работает на практике

Теперь коротко и по делу: как начать работать с Penpot.

Шаг 1. Регистрация. Заходишь на официальный сайт Penpot и бесплатно регистрируешься в облачной версии. Это обычная регистрация по email, ничего платить не нужно. Если ты продвинутый пользователь и хочешь свой сервер — есть self-hosted вариант через Docker: разворачиваешь контейнеры по инструкции из документации, и Penpot работает на твоей инфраструктуре. Новичку на старте облака более чем достаточно.

Шаг 2. Создание проекта. Внутри всё устроено знакомо: создаёшь проект, в нём — файлы, в файлах — страницы и доски (artboards) под экраны. Если ты когда-нибудь открывал Figma, интерфейс покажется родным: слева слои и страницы, в центре холст, справа свойства выбранного элемента. Доска — это, по сути, рамка одного экрана: задаёшь ей размер под телефон или десктоп и рисуешь внутри. Для «Змейки» хватит трёх-четырёх досок: стартовый экран, игровое поле, экран рекордов, настройки.

Шаг 3. Рисуешь экраны. Инструментарий классический:

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

Разберём на примере той же «Змейки». Создаёшь доску под мобильный экран, включаешь на ней сетку. Первым делом добавляешь игровое поле — просто тёмный прямоугольник. Поверх него — строку со счётом: текст «Очки: 0» слева и иконку паузы справа. Под полем — четыре кнопки управления. Кнопку рисуешь один раз, делаешь компонентом и размножаешь: теперь, если поменяешь цвет или скругление в оригинале, обновятся все четыре. Десять минут — и у тебя аккуратный макет игрового экрана, который не стыдно показать и по которому ИИ-агент сверстает интерфейс один в один.

Шаг 4. Импорт и экспорт. Если у тебя уже есть готовые файлы Figma, их можно импортировать: файлы .fig переносятся в Penpot через плагин и открываются для редактирования. В обратную сторону работает экспорт: свои макеты и отдельные элементы ты сохраняешь в SVG или PNG — эти файлы отдаёшь разработчику или прикладываешь к задаче ИИ-агенту.

Шаг 5. Передача в работу. Дальше два пути. Классический: разработчик (или ты сам) открывает макет и верстает по нему. Вайбкодинговый: ты прикладываешь экспортированный экран к промпту для Claude Code — «сверстай экран как на этом изображении» — и получаешь код, максимально близкий к задумке.

Шаг 6. Прототипирование (по желанию). Когда экранов несколько, их можно связать в кликабельный прототип: назначаешь кнопке переход на другой экран — и макет «оживает». Такой прототип удобно покрутить самому или показать друзьям до того, как написана хоть строчка кода: сразу видно, удобно ли расположены элементы и логичны ли переходы между экранами.

Пара практических советов, которые сэкономят время:

• Начинай с компонентов. Собери кнопку, поле ввода и карточку один раз, сделай их компонентами — и дальше собирай экраны из готовых блоков, как из конструктора.
• Задай сетку сразу. Выравнивание по сетке — главное отличие аккуратного макета от «кривого». Включи её на доске до того, как начнёшь расставлять элементы.
• Не рисуй иконки вручную. Бери готовые из открытых библиотек в формате SVG и вставляй в макет — Penpot отлично работает с векторной графикой.
• Экспортируй экраны целиком, а не по кусочкам. Для ИИ-агента один цельный скриншот экрана информативнее пяти фрагментов.

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

Есть ли ограничения у бесплатной версии

Короткий ответ: жёстких ограничений, как у Figma, нет. Облачная версия Penpot бесплатна без строгого лимита на число проектов — это заметно щедрее, чем три файла на бесплатном тарифе Figma. Все основные функции редактора — компоненты, прототипирование, совместная работа — доступны бесплатно.

Почему так щедро? Потому что у Penpot другая модель: это open-source проект, а не классический freemium-сервис, где бесплатный тариф намеренно урезан, чтобы подтолкнуть тебя к оплате. Здесь бесплатность — следствие открытости, а не маркетинговый крючок. Поэтому не нужно опасаться, что после пары месяцев работы всплывёт пэйвол и заберёт твои макеты в заложники.

Но честный обзор обязан назвать и слабые места. Они есть, и знать о них лучше заранее:

• Сообщество и библиотеки меньше. У Figma огромная экосистема: тысячи готовых наборов компонентов, иконок, шаблонов и плагинов от сообщества. У Penpot библиотека скромнее — что-то придётся рисовать самому, а не брать готовое.
• Не все плагины Figma имеют аналоги. Если ты активно используешь сложные плагины — автолейаут-магию, генераторы контента, специфические экспортёры, — в Penpot их может просто не быть. Базовый набор есть, экзотика — нет.
• Производительность на очень сложных файлах. На тяжёлых макетах с сотнями экранов и тысячами слоёв Penpot может работать медленнее Figma. Для учебных проектов и макетов небольших приложений это незаметно, но для огромных дизайн-систем разница ощущается.
• Нет ИИ-функций. Если ты привык, что черновик за тебя генерирует нейросеть, в Penpot его не будет — всё рисуется руками. Для кого-то это минус, для кого-то — способ лучше разобраться в дизайне.
• Self-hosted требует навыков. Развёртывание своего сервера через Docker — это терминал, контейнеры и базовое администрирование. Если слово «Docker» пока ни о чём тебе не говорит, пользуйся облачной версией — она ничем не хуже для повседневной работы.

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

Полезно и правильно расставить ожидания. Penpot — не «Figma, но даром» в смысле полного один-в-один копирования: экосистема и накопленные вокруг Figma материалы пока сильнее. Но это и не «игрушечный редактор»: по базовым возможностям ручного дизайна — фигуры, текст, компоненты, сетки, прототипы, совместная работа, экспорт — он полноценный. Разрыв ощущается не в том, «можно ли нарисовать экран» (можно, и удобно), а в количестве готовых надстроек вокруг.

Честный вывод: когда Penpot — правильный выбор

Соберём всё вместе.

Penpot — отличный вариант, когда:

• важна бесплатность — без подписок, без потолка в три файла;
• важен открытый код — ты понимаешь ценность того, что инструмент не исчезнет и не поменяет условия в одностороннем порядке;
• нужно хранить данные у себя — self-hosted вариант решает это полностью;
• ты рисуешь макеты для своих проектов и передаёшь их разработчику или ИИ-агенту в SVG/PNG;
• ты только учишься дизайну интерфейсов и хочешь спокойно экспериментировать, не считая оставшиеся файлы и не боясь, что пробный период истечёт.

Стоит остаться на Figma, когда:

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

Для типичного пути вайбкодера — набросать экраны приложения, показать их ИИ-агенту, собрать продукт — Penpot закрывает задачу полностью и при этом не просит ни копейки. А если однажды понадобится ИИ-генерация черновика, его всегда можно сделать в Uizard или Google Stitch и доработать руками.

Хорошая стратегия для новичка выглядит так: начни с облачного Penpot — он бесплатный и ничего не требует настраивать. Нарисуй в нём экраны своего учебного проекта и попробуй связку «макет → экспорт в PNG → промпт для ИИ-агента». Если через пару проектов упрёшься в реальные ограничения — например, понадобится конкретный плагин или общая библиотека команды на Figma, — тогда и будешь решать вопрос подписки, уже с опытом и пониманием, за что платишь. Скорее всего, для личных проектов этого момента не наступит вообще.

Частые вопросы

Penpot правда полностью бесплатный?

Да. Облачная версия бесплатна и не имеет жёсткого лимита на количество проектов — в отличие от бесплатной Figma с её тремя файлами. Проект развивается как open-source, и базовые функции редактора доступны без оплаты: компоненты, прототипы, совместная работа, экспорт. Актуальные условия всегда можно проверить на официальном сайте проекта.

Смогу ли я открыть свои старые файлы Figma в Penpot?

Да, Penpot умеет импортировать файлы Figma: файлы .fig переносятся через плагин и открываются для редактирования. Простые макеты переезжают обычно без проблем; у очень сложных файлов с экзотическими эффектами возможны неточности — после импорта стоит пройтись по экранам глазами.

Нужно ли что-то устанавливать на компьютер?

Нет, облачная версия работает прямо в браузере: зарегистрировался и рисуешь. Установка нужна только для self-hosted варианта — когда ты разворачиваешь Penpot на собственном сервере через Docker. Это сценарий для продвинутых пользователей, на старте он не нужен.

Есть ли в Penpot ИИ-генерация дизайна, как в Figma AI?

Нет. Penpot — классический инструмент ручного дизайна, ИИ-генерации макетов в нём нет. Если нужен ИИ-черновик, используй связку: сгенерировал в Uizard или Google Stitch, доработал руками в Penpot. О том, как устроен ИИ-подход, читай в статье про Figma AI.

Как передать макет из Penpot ИИ-агенту или разработчику?

Экспортируешь нужный экран или элемент в SVG или PNG и прикладываешь файл к задаче. Для ИИ-агента вроде Claude Code это работает отлично: «сверстай экран как на этом изображении» даёт куда более предсказуемый результат, чем текстовое описание «сделай красиво».

Подойдёт ли Penpot для командной работы?

Да, совместное редактирование и работа в команде поддерживаются. Но если команда большая и уже глубоко завязана на экосистему Figma — общие библиотеки, плагины, отлаженные процессы, — переезд имеет смысл только осознанно: Penpot выигрывает в бесплатности и открытости, но уступает в богатстве экосистемы.

Заключение

Penpot — редкий случай, когда слово «бесплатная альтернатива» не означает «урезанная поделка». Это зрелый редактор интерфейсов: браузерный, с компонентами, сетками, прототипированием, импортом из Figma и экспортом в SVG/PNG. Платишь ты за эту бесплатность не деньгами, а более скромной экосистемой: меньше готовых плагинов и шаблонов, чем у Figma.

Для вайбкодера это часто идеальный расклад: макетов на десяток экранов Penpot хватает с запасом, подписка не нужна, а открытый код и self-hosted вариант дают гарантию, что инструмент останется твоим навсегда. Нарисуй экраны своего следующего приложения в Penpot, экспортируй их и передай ИИ-агенту — так ты получишь именно тот интерфейс, который задумал, а не тот, который агент придумал сам. А заодно прокачаешь навык, который пригодится в любом будущем проекте.

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