SELF HOSTING

Hướng dẫn self-hosting và sử dụng Penpot: Công cụ miễn phí thay thế Figma

25/11/20252 views0

Bạn đang tìm kiếm một giải pháp thiết kế UI/UX miễn phí, mã nguồn mở và có khả năng tự host trên máy chủ riêng? Penpot chính là câu trả lời hoàn hảo. Đây là công cụ thiết kế đầu tiên dành cho cả designer lẫn developer, cho phép cộng tác thời gian thực mà không lo về chi phí bản quyền hay bị khóa dữ liệu trong hệ sinh thái đóng.

Với hơn 40.900 stars trên GitHub và cộng đồng hơn 1 triệu người dùng đăng ký, Penpot đang nhanh chóng trở thành lựa chọn hàng đầu thay thế Figma cho các đội ngũ quan tâm đến quyền kiểm soát dữ liệu và tính linh hoạt trong workflow thiết kế.

Penpot là gì?

Penpot là một nền tảng thiết kế và prototype mã nguồn mở, được phát triển bởi Kaleidos dưới giấy phép Mozilla Public License 2.0. Khác với Figma hay Adobe XD, Penpot được xây dựng hoàn toàn dựa trên các tiêu chuẩn web mở như SVG, CSS, HTML và JSON.

Những lợi ích chính của Penpot

Miễn phí không giới hạn: Không có hạn chế về số lượng designer, developer, file hay dự án. Bạn có thể mời toàn bộ team mà không lo về chi phí subscription hàng tháng.
Mã nguồn mở thực sự: Toàn bộ source code được công khai trên GitHub, cho phép cộng đồng đóng góp, tùy chỉnh và kiểm tra bảo mật. Điều này đảm bảo tính minh bạch và độ tin cậy cao.
Hỗ trợ SVG gốc: Penpot sử dụng SVG làm định dạng render chính, giúp các thiết kế có thể xuất ra với độ sắc nét vô hạn và kích thước file nhỏ gọn. Bạn có thể dễ dàng chỉnh sửa file SVG trong bất kỳ công cụ nào, kể cả code editor.
CSS Grid và Flex Layout thực sự: Đây là điểm khác biệt lớn so với Figma – Penpot sử dụng đúng mô hình CSS Flexbox và Grid, giúp developer có thể implement thiết kế chính xác mà không cần đoán ý designer.
Design Tokens tích hợp sẵn: Penpot là nền tảng đầu tiên tích hợp native Design Tokens theo tiêu chuẩn W3C, cho phép đồng bộ các giá trị thiết kế giữa design và code một cách liền mạch.

Tại sao nên self-host Penpot?

Self-hosting Penpot mang lại nhiều lợi thế đáng kể:

Kiểm soát hoàn toàn dữ liệu: Dữ liệu thiết kế được lưu trữ trên máy chủ của bạn, đảm bảo tuân thủ các quy định về bảo mật và quyền riêng tư như GDPR.
Không phụ thuộc vendor: Tránh tình trạng “vendor lock-in” khi nhà cung cấp thay đổi chính sách giá hoặc ngừng dịch vụ.
Tùy chỉnh linh hoạt: Có thể cấu hình theo nhu cầu riêng của tổ chức, tích hợp với hệ thống LDAP/SSO hiện có.
Hiệu năng ổn định: Không phụ thuộc vào kết nối internet hoặc tình trạng server của bên thứ ba.

Hướng dẫn self-hosting Penpot với Docker

Yêu cầu hệ thống

Trước khi bắt đầu, hãy đảm bảo máy chủ của bạn đáp ứng các yêu cầu tối thiểu sau:

Thành phần	Yêu cầu tối thiểu
CPU	1-2 cores
RAM	4 GB (khuyến nghị 8 GB cho team lớn)
Disk	Tối thiểu 10 GB (tùy thuộc vào số lượng assets)
Docker	Docker Engine hoặc Docker Desktop
Docker Compose	Phiên bản V2

Bước 1: Cài đặt Docker

Nếu chưa có Docker, hãy cài đặt theo hướng dẫn chính thức:

# Đối với Ubuntu/Debian
sudo apt update && sudo apt upgrade -y
sudo apt install docker.io docker-compose-plugin -y

# Kiểm tra Docker Compose V2
docker compose version

Đối với Windows hoặc macOS, tải Docker Desktop từ trang chính thức của Docker.

Bước 2: Tải file Docker Compose

Penpot cung cấp file docker-compose.yaml chính thức chứa đầy đủ cấu hình cần thiết:

# Tạo thư mục cho Penpot
mkdir ~/penpot && cd ~/penpot

# Tải file docker-compose.yaml
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

hoặc sử dụng curl:

curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

Bước 3: Cấu hình môi trường

Mở file docker-compose.yaml và cấu hình các biến môi trường quan trọng:

nano docker-compose.yaml

Các cấu hình cần thiết:

# Thay đổi PENPOT_PUBLIC_URI thành domain hoặc IP của bạn
PENPOT_PUBLIC_URI: https://penpot.yourdomain.com

# Tạo secret key bảo mật
# Sử dụng lệnh: python3 -c "import secrets; print(secrets.token_urlsafe(64))"
PENPOT_SECRET_KEY: your-super-secure-secret-key

# Cấu hình database password
POSTGRES_PASSWORD: your_secure_password

Các flags phổ biến trong PENPOT_FLAGS:

Flag	Mô tả
enable-registration	Cho phép đăng ký tài khoản mới
disable-registration	Tắt đăng ký (chỉ admin tạo user)
enable-login-with-password	Bật đăng nhập bằng email/password
enable-smtp	Bật gửi email thông báo
disable-email-verification	Tắt xác minh email (cho môi trường test)
enable-prepl-server	Bật REPL server để quản trị CLI

Bước 4: Khởi động Penpot

# Khởi động tất cả containers
docker compose -p penpot -f docker-compose.yaml up -d

# Kiểm tra trạng thái
docker compose -p penpot ps

Sau khi hoàn tất, Penpot sẽ chạy tại http://localhost:9001.

Lưu ý quan trọng: Nếu bạn muốn sử dụng phiên bản cụ thể thay vì latest, hãy chỉ định version:

PENPOT_VERSION=2.10.1 docker compose -p penpot -f docker-compose.yaml up -d

Bước 5: Tạo tài khoản Admin

Nếu đã tắt registration, bạn cần tạo user thông qua CLI:

# Tạo profile mới
docker exec -ti penpot-penpot-backend-1 python3 manage.py create-profile

# Hoặc bỏ qua tutorial
docker exec -ti penpot-penpot-backend-1 python3 manage.py create-profile --skip-tutorial --skip-walkthrough

Cấu hình Reverse Proxy (NGINX)

Để sử dụng HTTPS và domain riêng, cấu hình NGINX như sau:

server {
    listen 80;
    server_name penpot.yourdomain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name penpot.yourdomain.com;
    
    client_max_body_size 31457280;
    
    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;
    
    # Websockets support
    location /ws/notifications {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_pass http://localhost:9001/ws/notifications;
    }
    
    location / {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:9001/;
    }
}

Xử lý lỗi hay gặp

Lỗi “expected boolean” khi khởi động:

Đây là lỗi phổ biến với các phiên bản mới. Giải pháp là xóa hoặc comment các dòng sau trong docker-compose.yaml:

# Comment hoặc xóa các dòng này
# PENPOT_SMTP_TLS: false
# PENPOT_SMTP_SSL: false  
# PENPOT_TELEMETRY_ENABLED: true

Container không khởi động được:

# Kiểm tra logs
docker compose -p penpot logs penpot-backend

# Restart containers
docker compose -p penpot restart

Không nhận được email xác minh:

Đảm bảo đã cấu hình SMTP đúng cách hoặc sử dụng flag disable-email-verification cho môi trường development.

Cập nhật Penpot

# Pull images mới nhất
docker compose -f docker-compose.yaml pull

# Restart với version mới
docker compose -p penpot -f docker-compose.yaml up -d

TIP: 
Nên cập nhật theo từng phiên bản nhỏ thay vì nhảy qua nhiều version để tránh lỗi migration.

Hướng dẫn sử dụng Penpot cơ bản

Giao diện chính

Penpot có ba khu vực chính mà bạn cần làm quen:

Dashboard: Nơi quản lý tất cả dự án, file và thư viện. Bạn có thể tạo project mới, upload fonts tùy chỉnh, và quản lý team từ đây.
Workspace: Không gian thiết kế chính với canvas vô hạn. Đây là nơi bạn tạo các thiết kế UI, prototype và làm việc với components.
View Mode: Chế độ xem để preview prototype, chia sẻ với stakeholders và lấy code CSS từ Inspect tab.

Tạo dự án mới

Từ Dashboard, click “New Project” (nút dấu cộng bên phải)
Đặt tên cho project
Click vào project để mở Workspace
Bắt đầu thiết kế trên canvas vô hạn

Các công cụ thiết kế cơ bản

Toolbar bên trái cung cấp các công cụ vẽ vector như:

Board: Tạo artboard cho từng màn hình
Rectangle/Ellipse: Vẽ hình cơ bản
Text: Thêm văn bản
Path/Pen: Vẽ đường vector tự do
Image: Import hình ảnh

Làm việc với Components

Penpot hỗ trợ Components và Variants để tái sử dụng các thành phần UI:

Chọn các elements muốn tạo component
Click chuột phải → Create Component
Sử dụng lại component bằng cách kéo từ Assets panel

Tạo Prototype tương tác

Để thêm interactions cho prototype:

Chuyển sang tab Prototype ở panel phải
Chọn element trigger (ví dụ: button)
Kéo connector đến frame đích
Cấu hình trigger (Click, Hover) và transition (Fade, Push, Pull)

Cộng tác với team

Penpot hỗ trợ cộng tác thời gian thực – nhiều người có thể làm việc trên cùng file đồng thời:

Mời team members qua email hoặc link
Comment trực tiếp trên thiết kế
Xem lịch sử chỉnh sửa và khôi phục version cũ

Xuất file và inspect code

Xuất assets:

Chọn element hoặc board
Mở panel Design → Section Export
Chọn format: PNG, JPG, WEBP, SVG hoặc PDF

Lấy code CSS:

Chuyển sang tab Inspect trong View Mode
Click vào element bất kỳ
Copy code CSS, HTML hoặc SVG được sinh tự động

Mẹo cho người mới bắt đầu

Học keyboard shortcuts: Nhấn biểu tượng keyboard ở toolbar trái để xem danh sách phím tắt
Sử dụng Grid và Rulers: Bật View → Show Grid để căn chỉnh chính xác
Import từ Figma: Xuất file SVG từ Figma và import vào Penpot để tiếp tục làm việc
Tận dụng Templates: Dashboard có sẵn nhiều template và UI kit miễn phí để bắt đầu nhanh

Penpot là một giải pháp thiết kế mạnh mẽ, miễn phí dành cho các team coi trọng quyền kiểm soát dữ liệu và sự độc lập công nghệ. Với khả năng self-hosting dễ dàng qua Docker, hỗ trợ chuẩn web mở (SVG, CSS, HTML), và tính năng cộng tác thời gian thực, Penpot đang dần thu hẹp khoảng cách với Figma – hiện đã đạt khoảng 85% tính năng của đối thủ.

Hãy thử self-host Penpot ngay hôm nay! Chỉ với vài dòng lệnh Docker, bạn đã có thể sở hữu một công cụ thiết kế hoàn chỉnh cho riêng mình hoặc team. Nếu chưa sẵn sàng self-host, bạn có thể dùng thử miễn phí tại design.penpot.app.

Duy Nghiện

Hãy làm khán giả, đừng làm nhân vật chính :)