Penpot — аналог Figma и революционный инструмент для дизайна

FigmaUX/UI 10.02.2024

Penpot — аналог Figma и революционный инструмент для дизайна

Обновлено 5.5.2024 — добавлен урок по Penpot

 

Привет! Сегодня я хочу рассказать вам о Penpot — аналог Figma. Это инструмент для дизайна и прототипирования, который набирает популярность среди дизайнеров и разработчиков. Penpot — это не просто еще одна платформа для дизайна; это целый новый мир возможностей, открытый благодаря принципам открытого исходного кода и совместимости с веб-стандартами. Давайте погрузимся в мир Penpot и узнаем, что делает его таким особенным.

https://penpot.app/

История Penpot

Penpot, сегодня известный как мощный инструмент для дизайна и создания прототипов, впервые появился на свет в 2016 году, изначально нося имя UXBOX. Этот амбициозный проект был задуман как решение, которое могло бы управлять сложными системами дизайна, оставаясь при этом полностью бесплатным и с открытым кодом. Главная миссия проекта заключалась в том, чтобы предложить инструмент, который одинаково удовлетворял бы потребности как дизайнеров, так и разработчиков.

 

демо uxbox - прототипа penpot
демо uxbox (2020 года) - предшественника Penpot

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

К концу 2020 года миру была представлена альфа-версия Penpot, которая заявила о себе как о мощном инструменте для дизайна и прототипирования, предназначенном для работы в разнообразных командных составах. В течение 2021 года команда Penpot активно работала над улучшением продукта, опираясь на обратную связь от пользователей, что способствовало укреплению его позиций на рынке как достойной альтернативы традиционным инструментам дизайна.

Penpot Fest 2023
Конференция Penpot 2023

К 2023 году Penpot уже активно использовался более чем 80 тысячами команд по всему миру, включая такие крупные организации, как Microsoft, IBM и Google. В феврале этого же года проект привлек дополнительные инвестиции в размере 12 миллионов долларов. Во многом, этот бурный рост обеспечили планы Adobe по покупке Figma (от этой сделки компании отказались в середине декабря 2023 года из-за позиции антимонопольных регуляторов).

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

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

 

5 причин, почему Penpot ждет крутое будущее

1. Открытый исходный код и свобода сообщества

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

2. Совместимость с веб-стандартами

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

3. Инструменты для совместной работы

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

4. Гибкость и настройка

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

5. Техническая независимость

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

Обзор функций Penpot

 

Дизайн

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

  • Компоненты: Ускорьте свой рабочий процесс с помощью многоразовых компонентов.
  • Flex-Layout: Это штука, которая выгодно отличает Penpot от Figma. Autolayout в Figma хорош, но он работает не совсем так как возможности верстки при помощи CSS. А у Penpot эта функция соответствует стандартам CSS.
  • Управление шрифтами: Используйте собственные шрифты.
  • Интерактивное прототипирование: Создавайте богатые взаимодействия, имитирующие поведение продукта.
  • Библиотеки: Храните элементы и стили для их повторного использования.
  • Векторный редактор: Мощный инструмент для редактирования векторов и выполнения булевых операций.
  • Бесконечное холст: Дизайн без ограничений на бесконечном холсте.
  • Также Penpot предлагает расширенные функции стилизации, такие как создание и редактирование теней, размытий, радиусов границ, обводок и многого другого...

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

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

  • Многопользовательский режим: Несколько участников могут одновременно работать над одним и тем же дизайном.
  • Комментарии: Обсуждайте дизайны и прототипы, предоставляя и получая обратную связь непосредственно в дизайне.
  • Общий доступ к презентациям: Создавайте общедоступные ссылки для ваших прототипов и презентаций.
  • Экспорт объектов: Настройте пресеты экспорта для различных форматов файлов.

Инструменты для Разработчиков

Инструменты для разработчиков в Penpot — аналог FigmaМногие дизайнеры и разработчики были разочарованы появлением специального (и платного) режима для разработчиков в Figma. Penpot же не отходит от "канона" такой функции и ориентирован на разработчиков, предоставляя интуитивно понятный интерфейс и инструменты для анализа кода и свойств.

  • Инспектор кода: Получайте готовые фрагменты кода для стилей CSS и разметки SVG.
  • Инспектор свойств: Получайте подробные спецификации о стиле и содержании объекта.
  • Измерения и расстояния: Легко измеряйте расстояния и размеры между объектами.

Функции Прототипирования

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

Прототипирование в Penpot

  • Взаимодействия: Penpot позволяет устанавливать триггеры и определять действия для добавления интерактивности к дизайнам. Это может включать клики, наведение мыши, таймеры и другие события.
  • Переходы: Добавляйте красивые переходы, такие как затухание, сдвиг, толчок и анимации, чтобы сделать взаимодействия более живыми и реалистичными.
  • Потоки: Установите несколько начальных точек, чтобы соответствовать различным путям пользователей в вашем продукте, что позволяет лучше организовать и представлять ваши прототипы.
  • Фиксация элементов при прокрутке: Фиксируйте положение объекта при прокрутке в режиме презентации, что идеально подходит для прототипирования фиксированных заголовков, панелей навигации и плавающих кнопок.

Заключение

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

 

 

Посмотреть эту публикацию в Instagram

 

Публикация от Курсы дизайна онлайн/оффлайн (@ux_mind_school)

 

А если вы хотите научиться веб-дизайну и освоить современные инструменты, по напишите нам в telegram и мы ответим на любые ваши вопросы

Читайте также:

Хотите быть в курсе событий?

Подпишись на e-mail рассылку! Там всё только по делу-)

    Email