4 Design System Templates to Improve Your Design Process
Event details
Billy walks through four helpful templates the Headway design team has crafted over the past five years and recently published on Figma Community.
Each template makes specific parts of the design system process easier for any team.
Having these tools available sets expectations and reduces the chances of making mistakes as you build and grow design systems.
All of these templates were built to complement our new premium Figma design system course.
Segments:
00:00 - Intro
00:26 - Design System Course
00:55 - Figma Community Files
01:46 - Overview of Design System Templates
02:22 - Design System Interview Template
07:45 - Component Capture Template
12:22 - Design System Governance Model Template
20:46 - Type Scale Worksheet
26:21 - Recap
Templates that will be explained
Design System Interview Template
Need help interviewing your design team?
Getting your team's input is one of the most critical parts of building a design system. The most complex systems with no team buy-in will fail 100% of the time.
With this template, you'll
- Understand your team's needs
- What is making your team frustrated
- Find areas in the workflow that are not working
Type Scale Worksheet
This type scale worksheet allows our team to find the perfect type scale for each project. The file contains working examples for all of the scales we prefer and a working space where you can remix and add your own flair.
Each scale type size is set for that scale; however, the line height is set to a perfect 8px grid scale.
Design System Component Capture Template
Gotta catch them all! Components that is.
Use this template to capture components when auditing your product for a design system build.
Design System Governance Template
Get started mapping out your design system governance flow with this starter kit.
Why do you need a governance model?
- Help your team understand when it's time to build a new component
- Find the right level of detail for each component
- Make sure development and design are in sync the entire time
Presenters
Reserve your spot
4 Design System Templates to Improve Your Design Process
Watch the recording
Billy walks through four helpful templates the Headway design team has crafted over the past five years and recently published on Figma Community.
Each template makes specific parts of the design system process easier for any team.
Having these tools available sets expectations and reduces the chances of making mistakes as you build and grow design systems.
All of these templates were built to complement our new premium Figma design system course.
Segments:
00:00 - Intro
00:26 - Design System Course
00:55 - Figma Community Files
01:46 - Overview of Design System Templates
02:22 - Design System Interview Template
07:45 - Component Capture Template
12:22 - Design System Governance Model Template
20:46 - Type Scale Worksheet
26:21 - Recap
Templates that will be explained
Design System Interview Template
Need help interviewing your design team?
Getting your team's input is one of the most critical parts of building a design system. The most complex systems with no team buy-in will fail 100% of the time.
With this template, you'll
- Understand your team's needs
- What is making your team frustrated
- Find areas in the workflow that are not working
Type Scale Worksheet
This type scale worksheet allows our team to find the perfect type scale for each project. The file contains working examples for all of the scales we prefer and a working space where you can remix and add your own flair.
Each scale type size is set for that scale; however, the line height is set to a perfect 8px grid scale.
Design System Component Capture Template
Gotta catch them all! Components that is.
Use this template to capture components when auditing your product for a design system build.
Design System Governance Template
Get started mapping out your design system governance flow with this starter kit.
Why do you need a governance model?
- Help your team understand when it's time to build a new component
- Find the right level of detail for each component
- Make sure development and design are in sync the entire time