Getting Started with Penpot: Complete Beginner Guide

STEP 1

Create Your Free Account (1 minute)

Go to penpot.app and click "Create Account". You can sign up with email or Google/GitHub. No credit card required — ever.

After sign-up, you'll land on the Dashboard — this is where all your projects live.

STEP 2

Create Your First Project (1 minute)

Click the "+ New Project" button. Give it a name (e.g., "My First Design"). Then click "+ New File" inside the project — this opens the design editor.

You'll see a blank canvas. This is your workspace.

STEP 3

Learn the Interface (3 minutes)

Penpot's interface has 4 main areas:

• Left Panel — Layers & Assets: Shows all elements on your page and saved components
• Top Toolbar: Drawing tools (shapes, text, pen, images)
• Canvas (Center): Your design workspace — zoom with scroll, pan with Space + drag
• Right Panel — Properties: Size, position, colors, typography, alignment

Key shortcuts to remember:

R Rectangle · E Ellipse · T Text · V Pointer · Ctrl+D Duplicate · Ctrl+G Group

STEP 4

Design a Button Component (3 minutes)

Let's create a reusable button — the foundation of any design system:

1. Press R to create a rectangle. Make it 160×48 pixels
2. In the right panel, set corner radius to 8 and fill color to #00F5FF
3. Press T to add text. Type "Get Started" and center it on the rectangle
4. Set text color to #010409, font weight to Bold
5. Select both elements → Ctrl+G to group them
6. Right-click the group → "Create Component"

You now have a reusable component. Drag it from the Assets panel to place copies anywhere in your design. Edit the original, and all copies update automatically.

STEP 5

Use Auto-Layout (3 minutes)

Auto-layout makes your designs responsive — elements rearrange automatically when content changes. Here's how:

1. Select your button component
2. In the right panel, click "Add Auto Layout" (or press Ctrl+Shift+A)
3. Set padding (space inside the button): 12px top/bottom, 24px left/right
4. Now change the text — the button resizes automatically!

Auto-layout use cases: nav bars, card grids, form layouts, button groups. Once you learn auto-layout, you'll never manually position elements again.

STEP 6

Add Prototyping Interactions (2 minutes)

Turn your static design into an interactive prototype:

1. Create a second page (click "+" in the pages panel)
2. Design a simple secondary screen
3. Switch to Prototype mode (tab at the top of the screen)
4. Click your button → drag the blue arrow to the second page
5. Choose animation: Slide Left, Dissolve, or Push
6. Click the ▶ Play button to preview your prototype

You can now share the prototype link with anyone — no Penpot account needed to view.

STEP 7

Collaborate with Your Team (1 minute)

Click "Share" in the top-right corner. You get two options:

• Edit access: Invite team members to co-edit in real-time (like Google Docs for design)
• View access: Share a view-only link with stakeholders or developers

Developers get Inspect mode — they can see CSS properties, measurements, and download assets directly.