This document provides guidance on building a design system in Webflow to speed up the design workflow. It recommends creating a style guide that includes typographic elements, buttons, colors, grids, and repeatable components. The style guide elements should be built from basic HTML tags to more complex components. To practice, participants will recreate elements from the style guide in a new Webflow project to experience the benefits of a faster, more efficient design process.

1. HOW TO WORK FASTER BY
BUILDING YOUR DESIGN
SYSTEMS WITH WEBFLOW
@ransegall

2. 1
Give You a Process
That will speed up your workflow & make your work more efficient
TODAY’S GOALS
@ransegall
2
Get You To Experience It
So that you’ll feel comfortable applying it on your next project

3. 1
Learn the Process15 Minutes
TODAY’S AGENDA
@ransegall
2
Practice 30 Minutes
3
Review Work & Questions15 Minutes

4. Demo
So What’s a Webflow
Design System / Style Guide
@ransegall

5. Why Use a Style Guide?
•Once it’s setup - building is much faster
•Reuse components easily
•Make global changes easily
•Central location to visually see all main styles /
components
•PS - this also makes sense to create in your design
software
@ransegall

6. What Should Be Included?
•Typographic elements (Titles, headers, body, links..)
•Button types
•Colors
•Grid (containers, columns, layouts)
•Repeatable components (FAQs, Team bios, post/article) - including their
interactions
•Popups / Modals interactions
@ransegall

7. How To Style the Elements?
•Whenever possible - style native HTML Tag
•Use only Global Colors
•Never leave default names - always be clear
•Start from the “global” use-case, than narrow to the specific use-cases
@ransegall

8. @ransegall
THE PROCESS

9. The Steps
1. Create the style guide in your design software - make sure elements have style
names to keep consistency / future updates easy
2. From Atoms to Organisms: start with basic HTML tags (type & links), and then
build the more complex components
3. Create a task list of all elements you need to rebuild - don’t forget layout &
interactions.
4. Create a new project & load fonts
5. Create the style guide page
@ransegall

10. @ransegall
LET’S PRACTICE

11. @ransegall
QUESTIONS?