Penpot for UX Design

Course details

Ideal for designers, developers, and project stakeholders, this hands-on course guides you through the features of Penpot. Learn about Penpot's dashboard, interface, and tool menus to navigate the application with ease. Dive into creating boards, wireframes, grid layouts, and interactive prototypes. Discover how to add and format text, create components, and use external libraries to enhance your projects. Explore flex layouts, CSS grid layouts, and managing complex interactions for fully interactive designs. Learn best practices for team collaboration and effective handoff to developers using Penpot's inspect and export features. By the end of the course, you will be equipped to create and manage professional-level design projects in Penpot effectively.

Concepts

0. Introduction

01 - What is Penpot
02 - Using the exercise files

1. The Penpot Interface

03 - The Penpot dashboard
04 - Projects in Penpot
05 - Penpot drafts
06 - Teams in Penpot
07 - Penpot libraries
08 - Using fonts in Penpot
09 - The Penpot tools
10 - Templates in Penpot
11 - The Penpot menu
12 - Light mode dark mode in Penpot

2. Penpot Boards

13 - Creating and using boards
14 - Grids
15 - Create an iPhone grid
16 - Penpot's guides and grid

3. Wireframing in Penpot

17 - Create a wireframe using primitive shapes
18 - Create a wireframe using components
19 - Create a wireframe using a library

4. Creating a CSS Grid

20 - Create a web page
21 - Adding content
22 - Formatting text
23 - Using the Penpot tools
24 - An overview of the properties panel

5 Creating Flex Layout

25 - What is a flex layout in Penpot
26 - How to create a flex layout

6. Build an app screen

27 - Create an app screen
28 - Create an iPhone screen
29 - Create an Android screen

7. Creating Components in Penpot

30 - How to create a button component
31 - Create a component library
32 - Swapping components in Penpot

8. Adding Interactivity

33 - How to use prototype mode
34 - Complex interactivity
35 - Using overlays to create a 3-state interactive button
36 - Interactive components

9. Practical Penpot Projects

37 - How to create a slide-in menu
38 - How to create a repeat grid in Penpot
39 - Exploring blends and booleans
40 - How to manage local components
41 - Faking motion
42 - Build an app

10. Exporting Penpot projects

43 - Using the Penpot inspect panel
44 - Using the Penpot export feature

Conclusion

45 - Next steps