Penpot: дизайнерский рай без подписки и ограничений

Знакомая ситуация? Дизайнер присылает макет в Figma, а разработчик тратит часы на выковыривание стилей и адаптацию под реальные компоненты. Мечтаете о toolchain, где дизайн и код живут в симбиозе? Знакомьтесь с Penpot — первым open-source инструментом для совместной работы, где SVG, CSS и JSON становятся единым языком общения между специалистами.

Почему разработчики влюбляются в Penpot

В отличие от проприетарных аналогов, Penpot создавался с учетом потребностей frontend-разработчиков:

• Inspect Mode — мгновенная генерация CSS/SVG кода для любого элемента
• Нативные Design Tokens — синхронизация переменных между дизайном и кодом
• Режим разработчика — точные замеры, спецификации и экспорт ресурсов

Кстати, в версии 2.0 появилась поддержка CSS Grid Layout — теперь дизайнеры могут создавать макеты, которые разработчики буквально копипастят в проект.

Технические особенности

Под капотом у Penpot интересная технологическая кухня:

;; Основной стек технологий
{:frontend [clojurescript react]
 :backend  [clojure postgresql]
 :ops      [docker kubernetes]}

Архитектурно проект разделен на:

1. Frontend — SPA на ClojureScript с React
2. Backend — REST API на Clojure (JVM)
3. Общее ядро — бизнес-логика на Clojure (компилируется в JS и JVM)

5 причин попробовать прямо сейчас

1. Бесплатно и без ограничений — даже Figma-like constraints и компоненты
2. Self-hosted вариант — развертывание на своих серверах через Docker
3. Плагины — расширение функциональности через Penpot Hub
4. Импорт из Figma — миграция без потери данных
5. Живое сообщество — 23k+ участников в Discourse

Когда особенно полезен

• В стартапах с ограниченным бюджетом на софт
• При работе над opensource проектами
• Для образовательных целей (нет ограничений на студентов)
• В командах с гибридом дизайнеров-разработчиков

Личный опыт внедрения

В нашем агентстве перешли на Penpot полгода назад. Что изменилось:

• Время на верстку макетов сократилось на 30%
• Исчезли бесконечные уточнения по отступам
• Дизайнеры стали чаще экспериментировать, зная что «это точно сверстают»

Как начать

Проще всего через облачный сервис:

# Или развернуть локально
$ docker-compose -f docker-compose.yaml up

Полный гайд по установке есть в документации.

Penpot — не просто «еще один дизайнерский инструмент». Это мост между визуальным творчеством и кодом. Если устали от:

• Ежемесячных подписок
• Ведротства с экспортом ресурсов
• Несовместимости дизайн-систем

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