Best practices & resources
A design system will keep changing as your team uses it. A few shared practices can help you make improvements without creating confusion or unexpected changes elsewhere.
Maintenance best practices
As you build and maintain your system:
- Agree on who reviews shared changes. Give teammates a clear way to request an addition or report a problem, including where the existing options fall short.
- Check what else will change. Before editing a component, class, or variable, identify where it’s used. Decide whether the change should reach all those places.
- Test with real content. Try longer headings, optional images, and different numbers of cards. Check relevant variants, smaller screens, and keyboard access before publishing.
- Update guidance alongside the system. If a component’s recommended use changes, update its description, examples, or Agent Instructions so teammates and agents get the same guidance.
Design system checklist
Use the checklist when reviewing your existing site, adding reusable resources, or preparing work for handoff.
Clone Ordinant Carbon’s marketing site and choose a few things to explore or adapt. You could:
- Trace how a variable connects to styles and components, then change its value.
- Add a property to a component or create a new variant.
- Build a page from an existing template.
- Add a component to a case study’s rich text.
- Ask an AI agent to build with the system, then check what it reused and changed.
Changes on your copy won’t affect the original, so try whatever you like and keep practicing what you’ve learned.
Additional resources
Keep these references nearby for the parts you’re working on:
- The Webflow Way: Design systems — Guidance on variables, styles, components, templates, and Libraries.
- Components overview — Reference for creating, editing, organizing, and reusing components.
- Libraries — Details on sharing resources and managing updates across sites.
- Create Agent Instructions in Webflow — A deeper look at writing, using, and reviewing skills and rules.
- Import a Figma design into Webflow — A blog and video showing an agent working with both connectors.
Tip. You don’t have to update your whole site at once. Choose one or two places where your team keeps repeating work or running into limitations. Improve those parts of the system first.
You’re done!
You’ve completed the Design systems for teams & AI agents course. Click the Complete course button in the progress box on the right, then head back to the Webflow University Courses page to start your next course.