Back to program info
Layout Strategist
Spacing 14
The quick guide to penpot layoutsArticle- The ultimate guide to penpot layoutsArticle
- Background grids vs grid layoutsArticle
UI design with Penpot | Penpot Hands-On DemoVideo- Tutorial how to create responsive css grid layouts in penpotArticle
- Tutorial css flex layouts in penpotArticle
- Flex Layout Tutorial | Design & Code with Penpot's unique layout featureVideo
- Flex Layout Tutorial | Flex layout spacing managementVideo
- Penpot Flex Layout tutorialVideo
- Create a menu icon assignment walkthroughVideo
- Block 1 - Creating an iconVideo
- Design TokensDocumentation
- Flexible LayoutsDocumentation
- Grid layout playgroundPractice file
Hierarchy 4
Alignment 18
- The quick guide to penpot layoutsArticle
- The ultimate guide to penpot layoutsArticle
- Background grids vs grid layoutsArticle
- UI design with Penpot | Penpot Hands-On DemoVideo
- Tutorial how to create responsive css grid layouts in penpotArticle
- Tutorial css flex layouts in penpotArticle
- CSS Grid Layout tutorial | BasicsVideo
- Penpot Flex Layout tutorialVideo
- Bottle design challenge - A sneak peek to Penpot's new onboardingVideo
- Create a menu icon assignment walkthroughVideo
- Block 1 - Creating an iconVideo
- Flexible LayoutsDocumentation
- Grid layout playgroundPractice file
- LayersDocumentation
- Text & TypographyDocumentation
- Tutorial for beginnersPractice file
- Use fontsVideo
- Workspace BasicsDocumentation
Guides 4
Consistency 10
- Practical uses for math functions in design tokensArticle
- Design tokens for designersArticle
- Why use design tokensArticle
- Design systems best practices with penpotArticle
- UI design with Penpot | Penpot Hands-On DemoVideo
- Penpot for design systems 101Article
- Assignment walkthrough add colors to the newsmagazine articleVideo
- Assignment walkthrough design typography for a newsmagazine articleVideo
- Assignment walkthrough designing typography for a dashboard app uiVideo
- Create a color paletteVideo
Square guides (background grids) 5
Hierarchy in layout 1
Web and app conventions 2
Whitespace and overlapping 8
- The ultimate guide to penpot layoutsArticle
- Understanding the z indexArticle
- UI design with Penpot | Penpot Hands-On DemoVideo
- Flex Layout Tutorial | Design & Code with Penpot's unique layout featureVideo
- Flex Layout Tutorial | How to use Z-indexVideo
- Flex Layout tutorial | How to use the new Absolute PositionVideo
- Flexible LayoutsDocumentation
- LayersDocumentation
Flex vs grid 19
- Flex and Grid layouts in Penpot in under 5 minutesVideo
- The quick guide to penpot layoutsArticle
- The ultimate guide to penpot layoutsArticle
- Background grids vs grid layoutsArticle
- A developer's guide to Penpot | Design tokens, Grid, Flex & codeVideo
- Get started with Penpot in under 5 minutesVideo
- Css grid vs flexbox choosing the right layout for youArticle
- UI design with Penpot | Penpot Hands-On DemoVideo
- Introduction to Flex and CSS Grid Layouts | Penpot Hands-On DemoVideo
- Penpot flexible layout for responsive designArticle
- Tutorial how to create responsive css grid layouts in penpotArticle
- Tutorial css flex layouts in penpotArticle
- CSS Grid vs Flex Layout: When To Use WhichVideo
- The Ultimate CSS Grid Layout for Dashboards - CSS Grid 2024Video
- Basic layouts templatePractice file
- Flex layout playgroundPractice file
- Flexible LayoutsDocumentation
- Grid layout playgroundPractice file
- Sales dashboard examplePractice file
Fill, fit, and fixed widths and heights 19
- Flex and Grid layouts in Penpot in under 5 minutesVideo
- The quick guide to penpot layoutsArticle
- The ultimate guide to penpot layoutsArticle
- Background grids vs grid layoutsArticle
- Get started with Penpot in under 5 minutesVideo
- Css grid vs flexbox choosing the right layout for youArticle
- UI design with Penpot | Penpot Hands-On DemoVideo
- Introduction to Flex and CSS Grid Layouts | Penpot Hands-On DemoVideo
- Penpot flexible layout for responsive designArticle
- Tutorial how to create responsive css grid layouts in penpotArticle
- Tutorial css flex layouts in penpotArticle
- Tutorial CSS Grid Layout | Dashboards | Tutorial en españolVideo
- CSS Grid Layout Tutorial | Tables and Forms | Tutorial in EnglishVideo
- Tutorial CSS Grid Layout | Nociones básicasVideo
- CSS Grid Layout tutorial | BasicsVideo
- The Ultimate CSS Grid Layout for Dashboards - CSS Grid 2024Video
- Flex Layout Tutorial | Design & Code with Penpot's unique layout featureVideo
- Penpot Flex Layout tutorialVideo
- Flexible LayoutsDocumentation
Adding a fill color to a flex layout 1
Flex direction 6
Wrapping, Padding and Gaps 17
- Flex and Grid layouts in Penpot in under 5 minutesVideo
- The quick guide to penpot layoutsArticle
- The ultimate guide to penpot layoutsArticle
- Background grids vs grid layoutsArticle
- Get started with Penpot in under 5 minutesVideo
- Css grid vs flexbox choosing the right layout for youArticle
- The top 5 questions people have about css answered by penpotArticle
- UI design with Penpot | Penpot Hands-On DemoVideo
- Introduction to Flex and CSS Grid Layouts | Penpot Hands-On DemoVideo
- Penpot flexible layout for responsive designArticle
- Tutorial how to create responsive css grid layouts in penpotArticle
- Tutorial css flex layouts in penpotArticle
- Flex Layout Tutorial | Design & Code with Penpot's unique layout featureVideo
- Flex Layout Tutorial | Flex layout spacing managementVideo
- Penpot Flex Layout tutorialVideo
- Flexible LayoutsDocumentation
- Grid layout playgroundPractice file
Working in columns and rows 16
- Penpot grid layout vs guidesVideo
- Flex and Grid layouts in Penpot in under 5 minutesVideo
- The quick guide to penpot layoutsArticle
- The ultimate guide to penpot layoutsArticle
- Background grids vs grid layoutsArticle
- Css grid vs flexbox choosing the right layout for youArticle
- UI design with Penpot | Penpot Hands-On DemoVideo
- Introduction to Flex and CSS Grid Layouts | Penpot Hands-On DemoVideo
- Penpot flexible layout for responsive designArticle
- Tutorial how to create responsive css grid layouts in penpotArticle
- CSS Grid Layout Tutorial | Tables and Forms | Tutorial in EnglishVideo
- CSS Grid vs Flex Layout: When To Use WhichVideo
- CSS Grid has revolutionized tables and forms forever 🤯Video
- CSS Grid Layout tutorial | BasicsVideo
- Flexible LayoutsDocumentation
- Grid layout playgroundPractice file
Percentage, auto and fr units 11
- Flex and Grid layouts in Penpot in under 5 minutesVideo
- The ultimate guide to penpot layoutsArticle
- Background grids vs grid layoutsArticle
- Css grid vs flexbox choosing the right layout for youArticle
- Introduction to Flex and CSS Grid Layouts | Penpot Hands-On DemoVideo
- Penpot flexible layout for responsive designArticle
- Tutorial how to create responsive css grid layouts in penpotArticle
- CSS Grid vs Flex Layout: When To Use WhichVideo
- CSS Grid Layout tutorial | BasicsVideo
- Flexible LayoutsDocumentation
- Grid layout playgroundPractice file