|
Carbon keeps it short and sweet
A recent chat about design systems this week reminded me of how much I like the motion section of IBM’s new Carbon Design System. It’s a great example of creating a solid foundation for animation in a succinct and friendly way.
Their motion guidelines aren’t long, there are just two sections:
- Principles (the traits all animation in the design system should have.)
- Guidelines (specifics on duration, easing, and performant properties.)
And in just those two sections, Carbon manages to address both current and future animation needs.
By including a simple custom easing palette—their own custom Ease-in-out, Ease-out and Ease-in—and setting duration guidelines, all animations in the design system will have a shared feel and style. These guidelines will encourage quality animation choices, and save time when authoring animations for immediate results.
Carbon’s Principles section helps make these motion guidelines more adaptable and future-oriented. (This is the part you don’t always see in other of style guides or design systems.)
At some point there will likely be a need for new interactions or more animation options than the current guidelines cover explicitly. But thanks to the high-level motion principles, this document can still offer guidance.
Their motion principles can be used to evaluate potential additions or exceptions to the design system by asking “Does it fit with our motion principles?”. This ensures the design system can adapt to future needs without having to completely start over.
If you’re looking for a concise yet effective pattern to follow while creating your own motion guidelines, Carbon’s Motion section is a good one to consider.
Until next week,
- Val Head
p.s: My motion in design systems session is now on UIE’s all you can learn site. Worth a watch if you’re thinking about getting motion in your style guide or design process too.
|
