Penpot Tutorials

Currently Playing: Get started with Penpot in under 5 minutes

Penpot is the first Open-Source design platform for seamless collaboration between designers and developers. Built on open standards, it gives teams flexibility, control, and aligns with values like transparency, inclusion, ownership, freedom, and security. Designers create design systems, components, and interactive prototypes, and leverage plugins and templates to speed up workflows. They deliver pixel-perfect designs that are automatically translated into code for faster, high-fidelity implementation, and host their designs on Penpot’s cloud, their own cloud, or self-host on-premises. Developers use a common code-first language shared with designers, integrate APIs seamlessly into their development toolchain, and benefit from Penpot’s open-source reliability, hackable nature, and full transparency. 00:00 Creating, importing, and opening Penpot files 00:31 Moving and zooming around the canvas area 00:52 Adding pages and changing the canvas color 00:59 Creating and resizing boards 01:12 Creating and renaming layers 01:20 Using the Design panel 01:34 Adding and resizing images 01:43 Adding and editing text 02:26 Using components 02:43 Grouping elements 02:59 Using CSS Flex layout 03:41 Resizing and scaling elements 03:48 Prototyping 03:54 Adding comments 04:09 Inspecting an element and getting code 04:24 View mode 04:31 Creating a share link 04:48 Inviting team members to a Penpot team Penpot Community: https://community.penpot.app App: https://design.penpot.app​​ Help: https://help.penpot.app​ Contribute: https://github.com/penpot Penpot Fest: https://penpotfest.org Follow us: *Mastodon: https://fosstodon.org/@penpot/​ *Bluesky: https://bsky.app/profile/penpot.app *X: https://x.com/penpotapp *LinkedIn: https://www.linkedin.com/company/penpotdesign *Instagram: https://www.instagram.com/penpot.app/ *Github: https://github.com/penpot *Peertube: https://peertube.kaleidos.net/ Penpot: Design as code.