Convert Figma logo to code with AI

penpot logopenpot

Penpot: The open-source design tool for design and code collaboration

37,128
1,899
37,128
434
View on GitHub

Top Related Projects

excalidraw's avatar

excalidraw

90,228

Virtual whiteboard for sketching hand-drawn like diagrams

goabstract's avatar

Awesome-Design-Tools

35,361

The best design tools and plugins for everything 👉

tldraw's avatar

tldraw

38,419

whiteboard SDK / infinite canvas SDK

Quick Overview

Penpot is an open-source design and prototyping platform for cross-domain teams. It's a web-based tool that allows designers and developers to collaborate on creating user interfaces, with a focus on vector graphics and responsive design. Penpot aims to bridge the gap between design and development teams by providing a shared workspace and exportable assets.

Pros

  • Open-source and self-hostable, giving users full control over their data and infrastructure
  • Browser-based, making it accessible across different operating systems without installation
  • Supports SVG natively, ensuring high-quality vector graphics and easy integration with web technologies
  • Collaborative features allow real-time teamwork and version control

Cons

  • As a relatively new project, it may lack some advanced features found in more established design tools
  • The learning curve might be steeper for users accustomed to other popular design software
  • Community and ecosystem are still growing, which may result in fewer resources and plugins compared to commercial alternatives

Getting Started

To get started with Penpot, you can either use the cloud version or self-host it:

  1. Cloud version:

    • Visit https://penpot.app/
    • Sign up for a free account
    • Create a new project and start designing

  2. Self-hosting:

    • Ensure you have Docker and Docker Compose installed
    • Clone the repository: 
      git clone https://github.com/penpot/penpot.git
    • Navigate to the project directory: 
      cd penpot
    • Start the application: 
      docker-compose up -d
    • Access Penpot at http://localhost:9001

For more detailed instructions and configuration options, refer to the official documentation in the repository.

Competitor Comparisons

excalidraw logo

excalidraw

90,228

Virtual whiteboard for sketching hand-drawn like diagrams

Pros of Excalidraw

  • Lightweight and fast, focusing on simple sketches and diagrams
  • Collaborative features built-in, allowing real-time editing
  • Extensive library of pre-made shapes and icons

Cons of Excalidraw

  • Limited advanced design features compared to Penpot
  • Less suitable for complex UI/UX design projects
  • Fewer export options and design asset management capabilities

Code Comparison

Excalidraw (React-based):

const App = () => {
  return (
    <div className="App">
      <h1>Excalidraw</h1>
      <Excalidraw />
    </div>
  );
};

Penpot (ClojureScript-based):

(defn main-panel []
  [:div.app
   [:h1 "Penpot"]
   [penpot-canvas]])

Both projects use different technologies, with Excalidraw leveraging React for its UI, while Penpot utilizes ClojureScript. This difference impacts the overall architecture and development approach of each project.

Excalidraw is more focused on simplicity and ease of use for quick sketches and diagrams, making it ideal for brainstorming sessions and simple illustrations. Penpot, on the other hand, offers a more comprehensive design tool suite, catering to professional UI/UX designers with advanced features and better integration with design workflows.

goabstract logo

Awesome-Design-Tools

35,361

The best design tools and plugins for everything 👉

Pros of Awesome-Design-Tools

  • Comprehensive collection of design tools and resources
  • Community-driven and regularly updated
  • Easy to navigate and find specific tools

Cons of Awesome-Design-Tools

  • Not an actual design tool, just a curated list
  • Lacks hands-on design capabilities
  • May become outdated if not maintained consistently

Code Comparison

Awesome-Design-Tools:

## UI Design Tools

* [Figma](https://www.figma.com/) — A design platform for teams who build products together.
* [Sketch](https://www.sketch.com/) — A design toolkit built to help you create your best work.
* [Adobe XD](https://www.adobe.com/products/xd.html) — A vector-based tool for designing and prototyping.

Penpot:

(defn create-shape [shape-type]
  (case shape-type
    :rectangle (Rectangle.)
    :circle (Circle.)
    :text (Text.)
    (throw (ex-info "Invalid shape type" {:type shape-type}))))

The code comparison shows that Awesome-Design-Tools is primarily a markdown file listing various design tools, while Penpot is an actual design application with functional code for creating shapes and other design elements.

tldraw logo

tldraw

38,419

whiteboard SDK / infinite canvas SDK

Pros of tldraw

  • Lightweight and fast, focusing on simplicity and ease of use
  • Extensive keyboard shortcuts for efficient drawing and editing
  • Strong community support and active development

Cons of tldraw

  • Limited advanced design features compared to Penpot
  • Less suitable for complex, professional-grade design projects
  • Fewer collaboration features for team-based workflows

Code Comparison

tldraw:

import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'

export default function App() {
  return <Tldraw />
}

Penpot:

(ns app.main
  (:require [app.config :as cfg]
            [app.util.dom :as dom]
            [app.util.object :as obj]))

(defn ^:export init
  []
  (let [config (obj/get js/window "penpotConfig")]
    (cfg/init! config)
    (dom/init!)))

Both projects are open-source design tools, but they cater to different needs. tldraw is more focused on quick, simple diagramming and sketching, while Penpot offers a more comprehensive design environment. tldraw's JavaScript/TypeScript codebase may be more accessible to web developers, whereas Penpot's ClojureScript implementation might have a steeper learning curve but potentially offers more flexibility for complex features.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

penpot header image

License: MPL-2.0 Penpot Community Managed with Taiga.io Gitpod ready-to-code

Website • Getting Started • User Guide • Tutorials & Info • Community

Youtube • Peertube • Linkedin • Instagram • Mastodon • X


Penpot video


Penpot is the first open-source design tool for design and code collaboration. Designers can create stunning designs, interactive prototypes, design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast. And all of this with no handoff drama.

Penpot is available on browser and self host. It’s web-based and works with open standards (SVG, CSS and HTML). And last but not least, it’s free!

Penpot’s latest huge release 2.0, takes the platform to a whole new level. This update introduces the ground-breaking CSS Grid Layout feature, a complete UI redesign, a new Components system, and much more. Plus, it's faster and more accessible.

🎇 Penpot Fest is our design, code & Open Source event. Check out the highlights from Penpot Fest 2023 edition!

Table of contents

Why Penpot

Penpot expresses designs as code. Designers can do their best work and see it will be beautifully implemented by developers in a two-way collaboration.

Plugin system

Penpot plugins let you expand the platform's capabilities, give you the flexibility to integrate it with other apps, and design custom solutions.

Designed for developers

Penpot was built to serve both designers and developers and create a fluid design-code process. You have the choice to enjoy real-time collaboration or play "solo".

Inspect mode

Work with ready-to-use code and make your workflow easy and fast. The inspect tab gives instant access to SVG, CSS and HTML code.

Self host your own instance

Provide your team or organization with a completely owned collaborative design tool. Use Penpot's cloud service or deploy your own Penpot server.

Integrations

Penpot offers integration into the development toolchain, thanks to its support for webhooks and an API accessible through access tokens.

What’s great for design

With Penpot you can design libraries to share and reuse; turn design elements into components and tokens to allow reusability and scalability; and build realistic user flows and interactions.


Open Source


Getting started

Install with Elestio

Penpot is the only design & prototype platform that is deployment agnostic. You can use it or deploy it anywhere.

Learn how to install it with Elestio and Docker, or other options on our website.

Open Source


Community

We love the Open Source software community. Contributing is our passion and if it’s yours too, participate and improve Penpot. All your designs, code and ideas are welcome!

If you need help or have any questions; if you’d like to share your experience using Penpot or get inspired; if you’d rather meet our community of developers and designers, join our Community!

You will find the following categories:


Community


Contributing

Any contribution will make a difference to improve Penpot. How can you get involved?

Choose your way:

To find (almost) everything you need to know on how to contribute to Penpot, refer to the contributing guide.


Libraries and templates


Resources

You can ask and answer questions, have open-ended conversations, and follow along on decisions affecting the project.

💾 Documentation

🚀 Getting Started

✏️ Tutorials

🏘️ Architecture

📚 Dev Diaries

License

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) KALEIDOS INC

Penpot is a Kaleidos’ open source project