Поскольку дизайн-инструменты постоянно развиваются, нам бывает трудно уследить за новинками. В этой статье мы подробно рассмотрим Penpot, первый инструмент для дизайна и прототипирования с открытым исходным кодом, созданный с учетом веб-стандартов, что делает его идеальным выбором как для дизайнеров, так и для разработчиков.
Мир разработчиков наполнен инструментами с открытым исходным кодом. Общедоступные, бесплатные языки программирования, фреймворки и даже редакторы кода, в которые каждый может внести свой вклад — основа свободного, открытого веба.
Однако с дизайн-инструментами всё иначе. Когда дело доходит до проектирования, главная роль отводится платным, коммерческим инструментам — большинство из них были созданы или позже приобретены крупными технологическими компаниями. К счастью, и в этом пространстве начали появляться некоторые альтернативы.
Одна из них — Penpot, приложение с открытым исходным кодом, которое недавно начало набирать популярность. С более чем 250 тыс. подписчиков и 20 тыс. звезд на GitHub, Penpot уже сделал себе имя и стал достойной альтернативой другим инструментам проектирования.
Открытый исходный код — не единственное, что делает Penpot уникальным. У программы также есть несколько крутых функций, благодаря которым ее можно назвать по-настоящему эффективным инструментом для совместной работы дизайнеров и разработчиков. Любопытно узнать больше? Давайте посмотрим вместе.
Правильный дизайн-инструмент
Я никогда не мог понять одну вещь: почему приложения для проектирования интерфейсов, впоследствии реализуемых с помощью веб-технологий, зачастую совсем не соответствуют стандартам этих самых технологий?
Например, они предлагают причудливые инструменты верстки, следующие совершенно иной логике, чем та, по которой строится верстка в вебе. Или включают инструменты рисования, которые работают иначе, чем цифровая графика, так что после экспорта вашей работы вы получаете странные, неожиданные результаты. Почему?
На самом деле ответ довольно прост. Для большинства инструментов проектирования функции, связанные с разработкой, всегда были второстепенными. Основанные на различных шаблонах и стандартах, они часто сбивали разработчиков с толку и разочаровывали их.
Именно в этом и заключается отличие Penpot от конкурентов. Инструмент был создан командой дизайнеров и разработчиков, приоритетом которых с самого начала была эффективная совместная работа.
Как и другие веб-приложения, Penpot можно использовать в любой операционной системе или браузере. Но чтобы сделать доступ к нему по-настоящему свободным и демократичным, при его создании были использованы открытые веб-стандарты. Например, дизайн-файлы Penpot сохраняются в формате SVG — это самый популярный формат изображений для векторной графики в вебе.
На практике это означает не только лучшую совместимость с веб-технологиями, но и естественное соответствие между дизайном и кодом. С Penpot вам не нужно экспортировать в SVG, ваша графика по умолчанию является SVG.
То же самое касается перевода стилей из дизайна в код. Penpot не нужно генерировать значения CSS. Он может просто считывать и предоставлять их непосредственно из макета.
Отличный пример — Flex Layout, функция верстки Penpot, которая не только работает точно так же, как CSS Flexbox, это фактически и есть CSS Flexbox. Мы протестируем ее вместе в конце статьи.
Открытый исходный код и почему это важно
Прежде чем мы более глубоко погрузимся в сам инструмент, давайте немного поговорим об Open Source (открытом исходном коде). Почему это так важно и что это значит для вас?
Приложение бесплатное
В цифровом мире характеристика “Open Source” обычно означает, что исходный код инструмента, приложения или фреймворка доступен для просмотра, изменения и распространения всем желающим. Но почему это важно при выборе дизайн-инструмента?
Прежде всего, код приложения на 100% бесплатен и доступен для коммерческого использования. Все функции, которые сегодня являются бесплатными, останутся таковыми. Я пробовал множество инструментов, но никогда не видел столь же функционального и надежного приложения, которое было бы полностью бесплатным, даже для большой команды. По этому критерию Penpot намного опережает всех своих конкурентов.
Безопасность и контроль
Но вопрос не только в деньгах. Открытый исходный код также гарантирует большую прозрачность, контроль и безопасность. Любой желающий может проверить код приложения на предмет потенциальных уязвимостей или добавить в инструмент новые функции, отвечающие конкретным потребностям. Кроме того, открытый исходный код не может контролироваться одной организацией или корпорацией, а пользователи не привязаны к конкретной экосистеме.
Все это справедливо и для Penpot. На первый взгляд это может показаться не особенно важным и привлекательным, но если ваша компания когда-нибудь захочет получить полный контроль над стандартами безопасности своих инструментов или избежать привязки к конкретным поставщикам цифровых продуктов, выбор приложения с открытым исходным кодом может иметь большое значение.
Безграничные возможности кастомизации
Вы когда-нибудь использовали плагины в инструментах для дизайна? Если да, то вам, вероятно, будет приятно услышать, что Penpot выводит кастомизацию на совершенно новый уровень. Пользователи могут изменять код инструмента для удовлетворения любых потребностей, настраивая его по мере необходимости.
Вы не только можете расширить функционал приложения. Вы можете буквально редактировать его как вам угодно, чтобы оно соответствовало рабочему процессу и специфическим потребностям вашей команды.
Вы можете управлять им самостоятельно
Открытый исходный код позволяет запускать Penpot на своих серверах, имея полный контроль над своими данными и самим приложением.
Вы можете быть спокойны за судьбу инструмента
Наконец, открытый исходный код обеспечивает уверенность в будущем. Пользователи всегда будут иметь контроль над инструментом, с которым они работают. Независимо от того, что произойдет дальше, вы сможете использовать Penpot на своих условиях. Люди могут быть уверены, что у них всегда будет доступ к инструменту и рабочим файлам (а не зависеть от потенциальных изменений в бизнесе, ценовой политике и т.д.).
Я надеюсь, что к этому моменту у вас не осталось сомнений относительно того, сколько преимуществ дает работа с Open Source инструментами. Теперь давайте посмотрим на сам Penpot.
В чем Penpot нет равных
Если вы хорошо знакомы хотя бы с одним из популярных дизайн-инструментов, в Penpot вы будете чувствовать себя как дома. Интерфейс довольно предсказуем и предлагает все основные функции, которые могут вам понадобиться.
Ненавязчивые элементы управления, высокая производительность — все работает именно так, как вы ожидаете. Но когда дело доходит до передачи макетов разработчикам, Penpot действительно нет равных.
Я уже упоминал Flex Layout, оригинальную функцию Penpot. Если вы когда-либо использовали модель Flexbox в CSS, она может показаться вам знакомой. На самом деле, это именно она и есть: CSS Flexbox прямо внутри дизайн-приложения!
Это означает не только более точное соответствие дизайна и кода, чем в других подобных приложениях (по крайней мере, если вы планируете использовать CSS flexbox), но и более широкие возможности внутри самого инструмента (например, вы можете разместить элементы автоматического лейаута в несколько рядов).
Такие продвинутые функции верстки помогают в разработке отзывчивого дизайна. Учитывая возможности Penpot, есть большая вероятность, что во многих случаях вам больше не придется создавать отдельные дизайны для разных контрольных точек (breakpoints).
Все это было бы невозможно, если бы не замечательная вкладка Inspect. Penpot предоставляет вам весь необходимый CSS-код, а также исходный SVG-код любого выбранного компонента.
Довольно точно!
… и в чем он не преуспел (пока)
Несмотря на все похвалы, Penpot не идеален. Будучи относительно молодым инструментом, он не может конкурировать с гигантами, доминирующими в этой области.
Если вы тщательно сравните его с другими популярными опциями, вы определенно обнаружите, что в нем не хватает некоторых функций, а какие-то из имеющихся не так продвинуты, как у конкурентов. Например, инструменты компонентов и функции прототипирования Penpot все еще относительно просты и ограничены.
Тем не менее создатели Penpot продолжают активно развивать свой продукт. Вы можете узнать, чем занимается команда прямо сейчас здесь.
Потенциал развития Penpot как инструмента с открытым исходным кодом нельзя недооценивать. Сообщество разработчиков уже довольно внушительно, и я верю, что оно будет только расти. Это конкурентное преимущество, которое недоступно инструментам с закрытым исходным кодом.
Увидев, на что способен Penpot сегодня, я не могу дождаться, что же будет дальше.
Возьмем, к примеру, реализацию Flex Layout. Представьте, как здорово было бы иметь аналогичный инструмент для CSS Grid. Кто сделает это лучше, чем Penpot? Спойлер: если вы внимательно изучите дорожную карту, то узнаете, что команда уже работает над этой функцией.
Резюме
Несмотря на то, что Penpot появился относительно недавно, это довольно надежное приложение для дизайна. Его главное преимущество — сокращение разрыва между дизайнерами и разработчиками.
Я считаю, что открытый исходный код и возможность внесения изменений пойдут только на пользу нашей индустрии, и надеюсь, что другие создатели инструментов последуют этому примеру.
Если вы хотите попробовать Penpot, вы можете сделать это здесь совершенно бесплатно.
