# penpot/penpot

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/penpot-penpot).**

44,336 stars · 2,508 forks · Clojure · mpl-2.0

## Links

- GitHub: https://github.com/penpot/penpot
- Homepage: https://penpot.app
- awesome-repositories: https://awesome-repositories.com/repository/penpot-penpot.md

## Topics

`clojure` `clojurescript` `design` `prototyping` `ui` `ux-design` `ux-experience`

## Description

This project is a browser-based collaborative design platform that provides a comprehensive workspace for interface design, interactive prototyping, and design system management. It functions as a vector graphics editor that enables teams to create, manage, and iterate on designs in real-time, utilizing a component-based inheritance model to ensure consistency across complex projects.

The platform distinguishes itself through a deep integration of design and development workflows. It features a specialized developer handoff workspace that allows for the inspection of design properties, precise layout measurement, and the generation of production-ready code snippets. The system is built on a high-fidelity canvas engine that uses scalable vector graphics and standard web-native layout algorithms, such as flexbox and grid, to ensure that designs mirror browser-based rendering behavior.

Beyond core editing, the platform provides robust infrastructure for managing design systems at scale. This includes a hierarchical token-based cascading system for global style management, shared library management for cross-project asset synchronization, and an event-driven engine for building interactive prototypes. Users can further extend the workspace through a plugin-based architecture and configure webhooks to integrate design events with external systems.

## Tags

### User Interface & Experience

- [Collaborative Design Platforms](https://awesome-repositories.com/f/user-interface-experience/collaborative-design-platforms.md) — Building user interfaces and prototypes in a shared workspace where multiple team members can design and provide feedback simultaneously.
- [Component Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries.md) — The platform allows users to create reusable components to speed up the design workflow and ensure consistent user interface elements throughout a project. ([source](https://help.penpot.app/user-guide/design-systems/))
- [Design Component Systems](https://awesome-repositories.com/f/user-interface-experience/design-component-systems.md) — Manages reusable design elements by linking instances to a master source to propagate property updates and style changes automatically.
- [Design Handoff Tools](https://awesome-repositories.com/f/user-interface-experience/design-handoff-tools.md) — A specialized interface for inspecting design properties, measuring layouts, and generating code snippets to bridge the gap between design and implementation.
- [Component Variant Management](https://awesome-repositories.com/f/user-interface-experience/component-variant-management.md) — The platform allows users to switch between component variants in designs while preserving layer overrides based on shared names, types, and hierarchy levels. ([source](https://help.penpot.app/user-guide/design-systems/variants/))
- [Design Component Managers](https://awesome-repositories.com/f/user-interface-experience/design-component-managers.md) — The platform provides tools to create, duplicate, delete, and restore main components to manage reusable design elements across files and asset libraries. ([source](https://help.penpot.app/user-guide/design-systems/components/))
- [Design System Synchronization Tools](https://awesome-repositories.com/f/user-interface-experience/design-system-synchronization-tools.md) — The platform enables users to publish and connect shared design libraries across team files to reuse assets, synchronize updates, and maintain consistency throughout projects. ([source](https://help.penpot.app/user-guide/design-systems/libraries/))
- [Design Token Management](https://awesome-repositories.com/f/user-interface-experience/design-token-management.md) — The platform enables users to organize tokens into distinct sets to manage collections, enable specific groups, and override values using a cascading order. ([source](https://help.penpot.app/user-guide/design-systems/design-tokens/))
- [Flexbox Layout Engines](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-engines.md) — The platform enables users to align and distribute elements within containers automatically using standard layout properties to create flexible and responsive designs. ([source](https://help.penpot.app/user-guide/designing/flexible-layouts/))
- [Grid Layout Engines](https://awesome-repositories.com/f/user-interface-experience/grid-layout-engines.md) — The platform allows users to organize elements into two-dimensional rows and columns with control over alignment, spacing, and responsiveness using standard grid properties. ([source](https://help.penpot.app/user-guide/designing/flexible-layouts/))
- [Vector Design Editors](https://awesome-repositories.com/f/user-interface-experience/vector-design-editors.md) — A canvas-based tool for manipulating design layers, applying visual styles, and constructing responsive layouts using flexible grid and alignment properties.
- [Vector Graphics Rendering](https://awesome-repositories.com/f/user-interface-experience/vector-graphics-rendering.md) — Renders design elements directly into the browser using scalable vector graphics to ensure high-fidelity visual representation and precise manipulation.
- [Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/animation-libraries.md) — The platform allows users to apply smooth visual movements like dissolves or slides between screens by adjusting duration and easing settings to create a polished experience. ([source](https://help.penpot.app/user-guide/prototyping-testing/prototyping/))
- [Component Override Systems](https://awesome-repositories.com/f/user-interface-experience/component-override-systems.md) — The platform enables users to modify specific properties of component copies while maintaining inheritance or reset these changes to revert to the original state. ([source](https://help.penpot.app/user-guide/design-systems/components/))
- [Design Inspection Environments](https://awesome-repositories.com/f/user-interface-experience/design-inspection-environments.md) — The platform provides a view-only inspection mode within the workspace to safely examine design properties and layout details without modifying the original project files. ([source](https://help.penpot.app/user-guide/dev-tools/))
- [Design Synchronization Engines](https://awesome-repositories.com/f/user-interface-experience/design-synchronization-engines.md) — The platform enables users to push property changes from a modified component copy back to its main component to update all other instances automatically. ([source](https://help.penpot.app/user-guide/design-systems/components/))
- [Design System Management](https://awesome-repositories.com/f/user-interface-experience/design-system-management.md) — Centralizing visual styles and reusable components to ensure consistency and efficiency across large-scale product design and development projects.
- [Design Token Engines](https://awesome-repositories.com/f/user-interface-experience/design-token-engines.md) — The platform allows users to apply mathematical operators to numerical token values to build flexible design systems with dynamic relationships between different properties. ([source](https://help.penpot.app/user-guide/design-systems/design-tokens/))
- [Design Token Synchronization](https://awesome-repositories.com/f/user-interface-experience/design-token-synchronization.md) — The platform enables users to synchronize visual properties like colors and spacing across all designs to maintain a unified look and feel. ([source](https://help.penpot.app/user-guide/design-systems/))
- [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Applies design properties through a hierarchical structure of variables that allow for dynamic theme switching and global style management.
- [Interactive Prototyping Engines](https://awesome-repositories.com/f/user-interface-experience/interactive-prototyping-engines.md) — Executes interactive transitions and state changes by mapping user triggers to navigation paths within a defined flow graph.
- [Layer Selection Tools](https://awesome-repositories.com/f/user-interface-experience/layer-selection-tools.md) — The platform allows users to select specific layers or nested elements using click-and-drag, multi-select modifiers, or deep-selection shortcuts to bypass group boundaries. ([source](https://help.penpot.app/user-guide/designing/layers/))
- [Prototyping Environments](https://awesome-repositories.com/f/user-interface-experience/prototyping-environments.md) — A visual environment for linking design screens and defining user interactions to simulate product behavior and test navigation flows.
- [Prototyping Workflows](https://awesome-repositories.com/f/user-interface-experience/prototyping-workflows.md) — The platform allows users to connect individual design screens by drawing paths between them to establish the sequence of user journeys that can be previewed and tested. ([source](https://help.penpot.app/user-guide/prototyping-testing/prototyping/))
- [Component Variant Sets](https://awesome-repositories.com/f/user-interface-experience/component-variant-sets.md) — The platform enables users to combine multiple related components into a single unit to manage different states or variations efficiently within a design system. ([source](https://help.penpot.app/user-guide/design-systems/))
- [Design Specification Viewers](https://awesome-repositories.com/f/user-interface-experience/design-specification-viewers.md) — The platform enables users to display detailed information regarding the style, typography, and content of selected layers through a dedicated information panel for precise implementation. ([source](https://help.penpot.app/user-guide/dev-tools/))
- [Design System Managers](https://awesome-repositories.com/f/user-interface-experience/design-system-managers.md) — A centralized environment for defining, organizing, and synchronizing reusable design tokens, components, and shared asset libraries across projects.
- [Design Token Managers](https://awesome-repositories.com/f/user-interface-experience/design-token-managers.md) — The platform allows users to define reusable and semantic design tokens by assigning a unique name, a specific value, and a description within the system panel. ([source](https://help.penpot.app/user-guide/design-systems/design-tokens/))
- [Design Token Theming](https://awesome-repositories.com/f/user-interface-experience/design-token-theming.md) — The platform enables users to apply different token sets dynamically based on context like brand or platform by grouping and activating specific theme combinations. ([source](https://help.penpot.app/user-guide/design-systems/design-tokens/))
- [Layout Engines](https://awesome-repositories.com/f/user-interface-experience/layout-engines.md) — Calculates element positioning and responsiveness using standard web layout algorithms to mirror browser-native rendering behavior in the design environment.
- [Visual Styling Utilities](https://awesome-repositories.com/f/user-interface-experience/visual-styling-utilities.md) — The platform enables users to apply visual styles including border radius, shadows, and opacity to layers, or transfer these properties between elements using copy-paste shortcuts. ([source](https://help.penpot.app/user-guide/designing/layers/))
- [Component Swapping Utilities](https://awesome-repositories.com/f/user-interface-experience/component-swapping-utilities.md) — The platform allows users to substitute one component copy with another from the assets library to iterate on designs while maintaining the existing structure. ([source](https://help.penpot.app/user-guide/design-systems/components/))
- [Layout Positioning Utilities](https://awesome-repositories.com/f/user-interface-experience/layout-positioning-utilities.md) — The platform allows users to fix specific UI components like headers or navigation bars to the screen so they remain visible while content scrolls underneath them. ([source](https://help.penpot.app/user-guide/prototyping-testing/prototyping/))
- [User Journey Management](https://awesome-repositories.com/f/user-interface-experience/user-journey-management.md) — The platform enables users to group related screens into independent paths with unique starting points to help manage and share distinct user journeys within a project. ([source](https://help.penpot.app/user-guide/prototyping-testing/prototyping/))
- [Component Organization Tools](https://awesome-repositories.com/f/user-interface-experience/component-organization-tools.md) — The platform allows users to organize components into logical groups within the assets library using naming conventions, drag-and-drop actions, or menu commands. ([source](https://help.penpot.app/user-guide/design-systems/components/))
- [Design Asset Export Tools](https://awesome-repositories.com/f/user-interface-experience/design-asset-export-tools.md) — The platform allows users to export design assets using predefined presets directly from the inspection panel to prepare visual elements for implementation in your codebase. ([source](https://help.penpot.app/user-guide/dev-tools/))
- [Design Asset Navigators](https://awesome-repositories.com/f/user-interface-experience/design-asset-navigators.md) — The platform provides search tools to navigate between the design viewport and the assets panel to find and select main components quickly. ([source](https://help.penpot.app/user-guide/design-systems/components/))
- [Design Asset Repositories](https://awesome-repositories.com/f/user-interface-experience/design-asset-repositories.md) — The platform allows users to save visual elements and styles in a central repository to reuse them easily across multiple design projects and files. ([source](https://help.penpot.app/user-guide/design-systems/))
- [Design Management Systems](https://awesome-repositories.com/f/user-interface-experience/design-management-systems.md) — The platform enables users to organize designs using high-level containers that support screen-specific layouts, prototyping, and direct linking for team collaboration. ([source](https://help.penpot.app/user-guide/designing/layers/))
- [Design Token Aliasing](https://awesome-repositories.com/f/user-interface-experience/design-token-aliasing.md) — The platform allows users to link tokens to existing values using curly braces to create dynamic relationships that update automatically when the source token changes. ([source](https://help.penpot.app/user-guide/design-systems/design-tokens/))
- [Developer Design Handoff](https://awesome-repositories.com/f/user-interface-experience/developer-design-handoff.md) — Bridging the gap between designers and developers by providing tools to inspect layouts, measure elements, and generate production-ready code snippets.
- [Interaction Triggers](https://awesome-repositories.com/f/user-interface-experience/interaction-triggers.md) — The platform enables users to initiate transitions between different screens or states by assigning specific triggers like mouse clicks, hover movements, or automatic time delays. ([source](https://help.penpot.app/user-guide/prototyping-testing/prototyping/))
- [Navigation Actions](https://awesome-repositories.com/f/user-interface-experience/navigation-actions.md) — The platform enables users to control how users move through your prototype by setting specific actions like opening new screens, toggling overlays, or launching external websites. ([source](https://help.penpot.app/user-guide/prototyping-testing/prototyping/))

### Development Tools & Productivity

- [Developer Handoff Utilities](https://awesome-repositories.com/f/development-tools-productivity/developer-handoff-utilities.md) — The platform enables users to generate ready-to-use code snippets for markup and styling by selecting specific layers and switching to the code tab within the interface. ([source](https://help.penpot.app/user-guide/dev-tools/))
- [Plugin Architectures](https://awesome-repositories.com/f/development-tools-productivity/plugin-architectures.md) — Allows third-party code to interact with the design workspace through a sandboxed interface to add custom tools and functionality.
- [Plugin Managers](https://awesome-repositories.com/f/development-tools-productivity/plugin-managers.md) — The platform enables users to install and organize custom plugins to extend your design workspace functionality by adding tools directly from a central hub. ([source](https://help.penpot.app/user-guide/plugins-integrations/))

### Software Engineering & Architecture

- [Conflict Resolution Systems](https://awesome-repositories.com/f/software-engineering-architecture/conflict-resolution-systems.md) — Synchronizes concurrent user edits across multiple clients by resolving conflicts through a centralized server-side sequence of operations.

### Business & Productivity Software

- [Collaborative Feedback Tools](https://awesome-repositories.com/f/business-productivity-software/collaborative-feedback-tools.md) — The platform enables users to exchange contextual feedback directly on design elements to facilitate communication and improve collaboration between team members during the design process. ([source](https://help.penpot.app/user-guide/account-teams/))

### Security & Cryptography

- [Authentication Management](https://awesome-repositories.com/f/security-cryptography/authentication-management.md) — The platform provides tools to manage personal account settings and generate access tokens to authenticate and interact with the workspace securely. ([source](https://help.penpot.app/user-guide/account-teams/))