00:00:00Это Penpot, инструмент для дизайна с открытым исходным кодом, который конкурирует с такими решениями, как Figma.
00:00:05Да, поначалу он похож на Figma, но работает совсем иначе.
00:00:10Потому что «под капотом» он использует настоящий CSS, а не то, что потом приходится конвертировать.
00:00:15И это кардинально меняет процесс передачи макетов в разработку.
00:00:18Позвольте показать, что я имею в виду.
00:00:20Penpot — это браузерный инструмент для проектирования интерфейсов и прототипирования.
00:00:29На первый взгляд, да, он похож на Figma или Sketch.
00:00:32Но на самом деле, вот в чем главное отличие.
00:00:35Penpot на 100% открыт, и он построен на реальных веб-стандартах.
00:00:40SVG, CSS Flexbox, Grid и HTML.
00:00:43Так что вместо проектирования в том, что потом нужно расшифровывать и деконструировать,
00:00:49вы сразу работаете так, как на самом деле устроен интернет.
00:00:52Вы можете развернуть его самостоятельно с помощью Docker одной командой,
00:00:54что я и сделаю в этом видео, ведь это как раз по моей части.
00:00:58Версии инструментов с открытым исходным кодом и их сравнение.
00:01:01В Penpot дизайнеры по-прежнему получают компоненты, макеты, прототипы.
00:01:06А разработчики — то, что действительно важно: результат, похожий на реальный код.
00:01:11Здесь нет странной промежуточной прослойки, не нужно гадать, что происходит.
00:01:14И это бесплатно.
00:01:15Неограниченное количество файлов и участников — вот почему это всех заботит.
00:01:20Если вам нравятся инструменты с открытым исходным кодом и советы по программированию, которые ускоряют работу,
00:01:23подписывайтесь на канал.
00:01:25У нас постоянно выходят новые видео.
00:01:27Penpot — это инструмент дизайна.
00:01:28Почему вам, как разработчику, стоит обратить на него внимание?
00:01:31Потому что он решает конкретную проблему.
00:01:34Проблему передачи проекта в разработку или конвертации дизайна в реальный код.
00:01:39Penpot делает дизайн естественным для веба.
00:01:42Поэтому, когда вы инспектируете объект, вы не гадаете, а читаете его свойства.
00:01:46Позвольте показать.
00:01:48Итак, время быстрой демонстрации.
00:01:50Это работает в реальном времени на моем self-hosted экземпляре Penpot.
00:01:54Я запустил его одной командой Docker Compose, используя официальный
00:01:58файл конфигурации, который мы только что настроили.
00:02:00Это было круто.
00:02:02Пришлось немного подождать, пока он запустится, но теперь всё работает отлично.
00:02:07И вот красивая посадочная страница, чистый интерфейс, где можно создать новый проект.
00:02:12Давайте что-нибудь построим, просто обычную карточку, ничего сложного.
00:02:16Просто контейнер, установим flexbox, добавим отступы.
00:02:21Добавлю заголовок, текст и кнопку.
00:02:24Может, добавим еще что-то, вторую карточку, я могу просто скопировать и вставить.
00:02:28Сделаю пару быстрых правок.
00:02:30Переключимся в режим инспектора.
00:02:32И вот это самая важная часть.
00:02:33Вы получаете чистую структуру в реальном CSS: свойства flexbox, отступы, лейаут.
00:02:39Это не примерный перевод, это то, что вы уже понимаете.
00:02:42Вы можете скопировать это и вставить прямо в свой проект.
00:02:46Также есть варианты, токены, потоки прототипа и экспорт в SVG.
00:02:51Это самое главное.
00:02:52Это убирает массу трений для
00:02:54команд разработки, особенно когда вы сами контролируете весь стек.
00:02:58Теперь поговорим о том, что вызывает скепсис у большинства разработчиков.
00:03:02Сначала кажется: круто, еще один дизайн-инструмент.
00:03:06Но разница не в том, как он выглядит, а в том, как он работает.
00:03:09Figma имитирует макеты.
00:03:12Автолейаут вдохновлен flexbox, но вам всё равно приходится переводить всё это у себя
00:03:16в голове.
00:03:17Penpot изначально ближе к реальному CSS, поэтому
00:03:21умственных усилий при конвертации дизайна в код гораздо меньше.
00:03:25А еще Lock-in, верно?
00:03:26Figma использует проприетарные файлы.
00:03:29У нас есть платные модели подписки.
00:03:31Penpot — открытый исходный код, так что можно разместить его у себя.
00:03:34Ваши данные остаются в форматах SVG, CSS и JSON.
00:03:38Процесс передачи макетов тоже другой, потому что в Figma это чувствуется как лишний слой, правда?
00:03:42Режим Dev Mode, плагины, лишние шаги.
00:03:45В Penpot всё встроено прямо в инструмент.
00:03:47Режим инспектора уже ближе к тому, что нам реально нужно.
00:03:50И справедливости ради, Figma — отличный инструмент.
00:03:53Я его использую, он огромный, это отполированная экосистема.
00:03:56Но Penpot с самого начала был создан с мыслями о разработчиках.
00:04:00Так что же разработчикам в нём нравится?
00:04:02Ну, самое главное, о чем я уже говорил, верно?
00:04:04Всё просто: проблема передачи макетов становится меньше.
00:04:07Для нас это важно.
00:04:08Вам больше не нужно заниматься обратной разработкой макетов.
00:04:11Вы читаете то, что напрямую переносится в CSS.
00:04:15Это касается и дизайн-токенов.
00:04:18Цвета, отступы, типографика — всё структурировано так, как вы уже привыкли
00:04:22думать при написании кода.
00:04:24И возможность хостинга на своем сервере — большое дело для некоторых команд.
00:04:27Если вас заботит конфиденциальность, внутренние инструменты, CI/CD, это всё имеет значение, да?
00:04:33Но открытый исходный код не идеален, ни один инструмент не идеален, даже Figma, верно?
00:04:37Penpot может испытывать трудности с очень большими файлами.
00:04:40Экосистема плагинов намного меньше.
00:04:43И если вы глубоко погружены в Figma, будет небольшой период привыкания,
00:04:47но, честно говоря, его очень легко освоить, потому что это другой образ мышления.
00:04:51Так что да, в некоторых местах он менее отполирован, но разрыв между дизайном и
00:04:56разработкой гораздо меньше, а это именно то, что многим из нас нужно.
00:04:59Стоит ли им пользоваться?
00:05:01Я думаю, да.
00:05:02Это было весело.
00:05:02Мне нравятся такие инструменты.
00:05:03Так что многим из вас, разработчики, да.
00:05:06Если вы работаете над пет-проектами или чем-то с большим количеством кода, это имеет смысл,
00:05:10особенно если вы хотите сэкономить, верно?
00:05:12Вы строите MVP, вы делаете что-то вроде этого,
00:05:14пытаетесь избежать зависимости от поставщика и
00:05:16хотите получать дизайн, который чисто транслируется в код.
00:05:19Ну, а если вы в крупной компании с огромными дизайн-системами,
00:05:23вы уже завязаны на Figma.
00:05:24Так что вряд ли вы перейдете на него, по крайней мере не за одну ночь, но
00:05:28не в этом же суть.
00:05:29Penpot не обязательно должен заменять всё, чтобы быть полезным.
00:05:31Для многих команд, для многих из вас, он покрывает большую часть того, что нужно,
00:05:35и ускоряет разработку.
00:05:36И именно поэтому всё больше разработчиков начинают его пробовать.
00:05:39Он сокращает время на передачу макетов в код.
00:05:45Если хотите попробовать, это легко.
00:05:46Зайдите на Penpot, используйте облачную версию или сделайте то, что сделал я.
00:05:50Разверните его самостоятельно через Docker, если хотите больше контроля, как здесь.
00:05:54Если вам нравятся инструменты с открытым кодом и подобные советы по кодингу,
00:05:57обязательно подпишитесь на канал Better Stack.
00:05:59Увидимся в следующем видео.