Location>code7788 >text

Figma Alternative to Penpot Installation and Usage Tutorial

Popularity：813 ℃/2024-08-22 12:10:13

Figma is undoubtedly a giant in the design world. It has revolutionized the design process and taken collaboration to a whole new level. However, with the news of Adobe's acquisition of Figma, many designers and developers have begun to worry: how will Figma evolve in the future? Will those great features get the axe?

Out of white whoring instinct, everyone is looking for a strong and reliable alternative to Figma. One name that is rapidly rising to the top of the list of candidates is Penpot.

Penpot is more than just a design tool, it represents a whole new philosophy of design. As the first truly open source design and prototyping tool, Penpot is redefining the way designers and developers collaborate. It not only inherits many of the best features of Figma, but also surpasses it in some ways.

In this article we will introduce the core features of Penpot, its technical architecture, and how to install and use it.

Penpot Introduction

Penpot is the first open source design tool for design and code collaboration. It was developed by Spanish company Kaleidos and officially released in 2015. As a browser-based design tool, Penpot supports core functionality such as vector graphics editing, prototyping, and component library building, while also offering unique code collaboration capabilities.

Penpot's core philosophy is "Design with Code in Mind". It uses open standards (such as SVG, CSS, and HTML) as the underlying technology to ensure that the design output can be used directly by developers. This approach dramatically shortens the design-to-development transition time and improves the overall efficiency of the team.

As of today, Penpot has nearly 32,000 stars on GitHub and has over 160 contributors.

The latest release of Penpot version 2.0 brings a number of significant improvements to further enhance the design and development collaboration experience:

  1. CSS Grid Layout: Introduces the powerful CSS Grid Layout feature, enabling designers to create more flexible, responsive layouts while generating code that conforms to modern web standards.
  2. New UI design: The redesigned user interface not only improves aesthetics, but more importantly, optimizes workflow and improves operational efficiency.
  3. Improved component system: The new component system makes it easier to create, manage and reuse design elements, helping to keep designs consistent and maintainable.
  4. Performance Optimization: Overall performance has been significantly improved, especially when dealing with large and complex projects, with faster response and smoother operation.
  5. Enhanced Accessibility: The new version has a number of accessibility improvements that make it easy for more users to use Penpot.

Penpot's Technical Architecture

To fully understand the power of Penpot, we need to delve into its technical architecture.

Penpot uses a typical SPA architecture. The front-end is written using the ClojureScript and React frameworks and is served by a static web server. It talks to a backend application that persists data in a PostgreSQL database.

The backend is written in Clojure so that code and data structures can be easily shared between the front and back ends. Finally the code is compiled into JVM bytecode and run in a JVM environment.

The overall structure is as follows:

Let's look at the architecture of each component separately.

back-end architecture

Penpot's backend is primarily written in Clojure, a functional programming language that runs on the JVM. The backend is responsible for CRUD operations, integrity verification, and data persistence.

Key components include:

  • HTTP server: Handles API requests and routing.
  • RPC system: Allows the front-end to safely call back-end functions.
  • comprehensive database: Uses PostgreSQL to store core data.
  • File Storage: Used to store media attachments.
  • asynchronous task system: Handles time-consuming operations such as sending emails and telemetry data collection.
  • WebSocket: Enabling real-time collaboration and notifications.

front-end architecture

Penpot's front-end is written in ClojureScript, which is a version of the Clojure language compiled to JavaScript. It uses the React framework, wrapped by the rumext library.

The main modules include:

  • Global state management: Uses a Redux-like event loop paradigm.
  • UI Components: Includes core functional modules such as dashboards, workspaces, viewers, and more.
  • rendering engine: Responsible for converting designs into SVG elements.
  • Web Worker: Handles time-consuming operations such as generating thumbnails and maintaining geometric indexes.

exporter

Penpot also includes a specialized exporter application that uses a headless browser to ensure that the exported results are exactly as seen on the screen. This component can generate export files in bitmap, PDF or SVG formats.

Penpot's Core Functions

With Penpot's technical architecture in mind, let's take a look at the practical value it can bring to designers and developers:

Creating for designers

  1. Intuitive design interface: Penpot provides a familiar and powerful design environment where designers can easily create complex designs.
  2. responsive design: With CSS Grid layouts, designers can easily create designs that fit a variety of screen sizes.
  3. Components and design systems: Penpot's component system allows for the creation of reusable design elements, dramatically improving efficiency and consistency.
  4. Interactive prototypes: Designers can add interactions and animations to create high-fidelity prototypes.
  5. Real-time collaboration: Multiple designers can work on a single file at the same time, increasing team efficiency.

Designed for Developers

  1. Inspection mode: Developers have easy access to CSS, HTML, and SVG code for their designs.
  2. Precise specifications: Penpot takes the guess work out of providing accurate sizes, colors and other design specifications.
  3. Design Token: Developers can directly use colors, fonts, and other style variables defined in the design.
  4. version control: Penpot supports version history for easy tracking of design changes.
  5. APIs and Webhooks: Allows integration of Penpot into existing development workflows.

Teamwork

  1. Real-time comments: Team members can add comments directly to the design to promote effective communication.
  2. Rights Management: A flexible permissions system ensures that the right people access the right content.
  3. shared library (computing): Teams can create and share design resources to maintain consistency.
  4. Export Options: Supports export in multiple formats to meet different scenarios.

Install Penpot

Penpot has a variety of installation methods, students with technical skills can be deployed through Docker images. Need to deploy more components , in addition to the front-end , back-end and exporter , but also need to deploy two databases PostgreSQL and Redis , if you also want to achieve high availability , then the object storage is also essential .

For those of you who don't have a technical background, you don't have to worry about installation.Sealos App StoreOne-click deployment application templates are provided, and deployment can be done with a single mouse click, which is very silky smooth.You don't need to buy a separate server with a public IP, you can just pay for it on a per-volume basis.

If you want to deploy a Penpot quickly and don't want to get bogged down in a tedious installation and configuration processYou can try Sealos.

Open directlyPenpot Application Templates, and then click "Go to Sealos Deployment" in the upper right corner.

If this is your first time usingSealosIf you want to deploy a template, you need to register and log in to your Sealos public cloud account, and you will be redirected to the template's deployment page immediately after logging in.

You don't need to fill in anything, just click "Deploy Application" in the upper right corner to start the deployment. After the deployment is completed, click "Details" to enter the details page of the front-end application.

Wait for the app status to change to running, then click on the external address to open Penpot's web interface.

First click on "Create Account" to register an account:

Fill out the questionnaire, there are five steps in total:

Once you've filled it out you can start using it officially, you can choose to create a team or use it independently on your own.

In addition to this, there is another way to open it, by first refreshing the Sealos desktop (i.e., in the interface refreshes the browser), then you'll notice an additional icon on the Sealos desktop:

Clicking directly on this icon will open the Penpot web interface.

Isn't it a bit of déjà vu? Yes, it does.Windows shortcuts!

If a stand-alone operating system can do it, Sealos Cloud OS can do it too.

Basic use of Penpot

To officially start using Penpot, you first need to understand some basic concepts and operations.

drawing board

The drawing board is the most basic container object in Penpot and is usually used to create designs of a specific size. You can choose a specific size for your screen or for printing, depending on your needs.

  • To create a drawing board: Use the Drawing Board tool in the toolbar, or press the shortcut key B.
  • To select a board: click the board name or Ctrl/⌘ + click the board area.
  • To set the thumbnail: select the panel, right click and select "Set as thumbnail" or press Shift + T.
  • Cropping content: The drawing board can choose whether or not to crop its content.
  • Display in Viewing Mode: Controls whether the drawing board is displayed as a separate screen in Viewing Mode.

color plate

Penpot provides powerful color management tools, including color pickers and color panels.

color picker

  1. pipette tool: Picks up the color from any object in the viewport.
  2. Color Configuration: Switches between RGB, color wheel, or HSV.
  3. Color Type: solid color, linear gradient, radial gradient or image.
  4. slider (computer interface element): Adjusts brightness, saturation, or opacity.
  5. numerical value: Accurately sets the red (R), green (G), blue (B), and transparency (A) values.
  6. storehouse: Switch between recently used colors and libraries.

color panel

  • It can be shown/hidden from the main menu, toolbar buttons, or the launcher in the color picker.
  • Use the menu to switch between libraries.
  • You can switch the size thumbnail size.

subassemblies

Components are objects or groups of objects that can be reused in multiple files, helping to keep the design consistent.

Creating Components

  1. Selects an object or a group of objects.
  2. Press Ctrl + K or right click and select "Create component".

Component Operation

  • Replicating components: Creates a copy of the component linked to the main component.
  • Replication as a master component: Copy from asset sidebar to new master component.
  • Deleting a Master Component: Operating with caution removes components from the asset library at the same time.
  • Recovery of the main component: A deleted master component can be recovered from a component copy.
  • Component Grouping: Use the slash (/) to name or the "Group" option to create groups of components.
  • Find Components: Components can be found in the Assets panel and the Design viewport.

Component Override

  • Allows modification of a specific replica while maintaining synchronization with the master component.
  • Overrides can be reset to revert to the primary component state.

Component Exchange

Allows easy replacement of component copies:

  1. Select a component copy.
  2. Click on the component name in the right sidebar to launch the exchange menu.
  3. Select the components to be exchanged and click.

prototyping

Penpot allows prototyping of interactions by connecting drawing boards to simulate how users navigate between screens.

Connecting the drawing board

  1. Open a file containing at least two drawing boards.
  2. Activate "Prototype mode" in the right sidebar.
  3. Select the layer that triggered the interaction.
  4. Drag the connection from the selected layer to the target panel.
  5. Automatically create process starting points.
  6. Launch the interaction prototype in view mode.

interactive trigger

Define the user action that initiates the interaction, including:

  • On click
  • Mouse enter
  • Mouse leave
  • After delay

interactive action

Define the events that occur after triggering an interaction, including:

  • Navigate to
  • Open overlay
  • Toggle overlay
  • Close overlay
  • Previous screen
  • Open URL

Interactive animation

Defines the transition effects between panels when an interaction is triggered, including:

  • Dissolve
  • Slide
  • Push

Flows

Allows multiple starting points to be defined within the same page for better organization and presentation of prototypes:

  • Automatic creation of starting points
  • Adding a starting point from the prototype sidebar
  • Adding a starting point from the drawing board menu
  • Toggle between different processes in view mode

fixed element

Can fix the position of an object during scrolling, suitable for prototyping elements such as fixed headers, navigation bars and floating buttons.

Figma Export

Penpot also provides aFigma PluginFigma is a program for exporting Figma designs. It supports exporting basic shapes, panels, groups, fills, and has basic support for text and images. However, key features such as automatic layout and components are not supported.

summarize

While commercial design software such as Figma currently dominates the market, open source tools such as Penpot are rapidly emerging and may overtake commercial software in the future. The open source model allows more developers to participate, which can lead to a faster rate of innovation and greater adaptability of functionality. At the same time, the transparency and customizability of open source tools may better meet the needs of different teams and eventually become the new industry standard.

<Previous