Kinetics System Guidelines

What is Kinetics?

Kinetics is the design language of a motion system for Salesforce, called the Kinetics System, that provides guidelines, patterns, best practices, and tools for designers and developers. With Kinetics we create a strong and consistent visual identity that is modern, sophisticated, FUNctional, and delightful. This guideline is meant to provide you with first hand information on what kinetics is for Salesforce, and help you learn how you might utilize motion as a beneficial part of your interface design

Note: We are currently in the process of integrating Kinetics into the component blueprints. This guideline shows you how to design transitions that use these components, and add Kinetics to your own custom components. We have documented our pattern prototypes for Lightning Design System components that you can refer to when you create custom Kinetics for your UI flows

What is in this guideline

• This guideline informs the motion language and rules for Salesforce Lightning Design Systems and beyond
• This is meant to help you design transitions for custom components that may not have baked-in kinetics
• This will help you design Kinetics interactions for net new experiences within the ecosystem that might consist of a combination of base components as well as custom components
• This guideline is a start! To learn more about the process of motion designing using Kinetics Systems, take our learning modules on Trailhead and follow the Kinetics in Motion series on the Salesforce Design Medium page to quickly find new posts on Kinetics!
  • Kinetics Modules
    • Our Salesforce Kinetics System Module is now available on Trailhead. Learn basics about choreographing motion UI.
    • Our Motion Pattern Creation Module provides a detailed look into how teams might create custom motion UI for their products.
  • Learn more about Kinetics on our blogposts
    • What You Need to Know About the New Salesforce Kinetics System
    • Scaling of Kinetic Systems from design system to the Global Navigation of our digital products
  • The Know More section provides links to articles and other resources.

The following gives an overview of all the topics covered in this guideline. This is an abstract, so to gain a deeper understanding of the information and to view visual examples please click on each of the topic or the sections on the left hand navigation to go to the individual pages

Kinetics Principles

• The fundamental role of motion in Salesforce products is defined by the Three guiding principles of Motion
  • Motion is functional - integral in providing clarity, preventing change blindness, perceived speed and promoting discoverability. Learn More
  • Motion is Structural - Motion helps users know where they are, orienting them with a consistent spatial model, and creating Kinetics continuity across pages and components. Learn More
  • Motion is Expressive - Motion delights users with unexpected details that turn mundane moments into something special and memorable. These details remind users that experiences are crafted by people, not machines. Learn More

Kinetics Personality

Motion can be expressed in a lot of ways. But to design motion that fits Salesforce, it should have these four qualities of Kinetics - Nimble, Sensible, Considerate and Charismatic. Learn More

Choreography

The following set of topics are meant to provide you with deeper knowledge on how you might choreograph nuanced interactions that are well connected to promote discoverability, clarity of feedback, perceived speed and guidance across user flows

• Making things move - Kinetics controls 4 things to make UI move: light, direction, speed, and acceleration.
• Designing transitions - A transition occurs anytime there’s a change to the state of the view. Transitions can be as simple as a single component entering the view, or as complex as a complete view change. Wherever there are two consecutive artboards in your design, there’s a transition. This is explained in depth in the following sections.
  • Space
  • Hierarchy
  • Emphasis
  • Latency
  • Fatigue
• Designing component motion - Adding motion to a component is like designing a small-scale transition. But there are some specific states to consider when you design your motion. A component can have one or more targets that respond or move to hover, click, focus and selected states. Learn more in the following sections.
  • Hover
  • Focus
  • Active
  • Selected
• Kinetics and Interaction : Different types of interactions influence how motion can be used. So it is important to create the motion based on the context in which the interaction takes place for the it to have beneficial outcomes. Learn more in the following sections.
  • Reactive vs proactive motion
  • Instant vs Continuous Motion
  • Rapid succession
  • Speeding Up with Implied Direction

Micro Patterns

We have identified motion patterns that are unique to the Salesforce motion personality. These patterns can be scaled and applied across custom component experiences to signify different interaction feedback with a distinct Salesforce charm. Learn about these scalable patterns here

• Border Swirl
• Spotlight
• Ripple
• Mouse-Aware Underline

Accessible Kinetics

Lightning Kinetics #1 principle is functional animation. When this is your primary driver for adding animation to your UI, we can create accessible experiences that drive clarity, productivity, and delight. Kinetics can improve the experience for users with cognitive disabilities. It can help orient users within a UI, guide them to call to actions, and create relationships/hierarchy between elements on a page. However, animation is a double edged sword and if designed improperly it can cause headaches, nausea, dizziness, or vertigo for users with vestibular disorders. Included in this section’s Do's and Don'ts are two requirements from WCAG (global accessibility guidelines from W3C) on how to prevent these reactions. Learn More

Kinetics & Mobile Devices

Mobile devices have unique properties that affect the way we think about motion. Note that these properties aren’t unique to mobile phones, and are worth considering in similarly equipped laptop and desktop computers. Learn more in the following sections.

• Small Viewports
• Touchscreens
• Sensors
• Integrating with Native Systems

Implementing Kinetics

• CSS
  • A lot of motion can be done using CSS alone. Most motion involves the changing of CSS property values, and there’s an API in CSS to facilitate motion, so it’s advisable to think with a “CSS-first” approach to web animations. Learn More
• JavaScript
  • While CSS classes are primarily recommended to define animations, JavaScript can be used to add and remove classes. Learn More here about GreenSock, Lottie and Web Animations API
• JSON(Lottie)
  • Paired with Bodymovin plugin, allows certain kinds of After Effects animation to be converted to playable motion assets in web, iOS, and Android apps. Learn More
• Kinetics Styling Hooks
  • Kinetics duration, acceleration and pattern values you can use to build custom animations. Note: these values are reference only. They will be available as styling hooks soon. Learn More

Know More Content

A glossary of additional resources on designing and implementing motion UI in products.

What is not in this guideline

• This guideline will not tell you how to create character animations
• This guideline does not provide component level Kinetics documentation. Each component level kinetics will be documented within the Component Blueprint once Kinetics is released in the components
• The examples listed in this guideline are specific to Lightning platform and product clouds. For more information regarding Kinetics in other systems, see the specific subsystem’s documentation.

Frequently Asked Questions

1. What is motion for Salesforce?
1. This guideline provides a foundation set of rules to help ground expectation and consistency of motion language to Salesforce branding while answering questions like
1. Why is motion the answer?
2. When is motion the answer?
2. Do I create all my animation from scratch?
1. No our intention is not for you to create motion from scratch or even create motion at all. We have Kinetics Styling Hooks that will help you build animations when necessary. Most of the motion that is needed will come baked into the primitive components in the near future.
2. Note: See Implementing Kinetics to learn about how to use our patterns and styling hooks.
3. How do I create motion for the flows in my product?
1. If there is a strong need for custom motion in your UX flow, then the Choreography section of the guidelines will provide knowledge on how to conceptualize the custom motion congruous with the Kinetics language and the use of Kinetics Styling Hooks.
2. In near future, the primitive components and some complex components will come with baked in animation. Kinetics Styling Hooks will also be available in a ready to use format to support the implementation process.
4. I have a set of delightful animation that I want to use in the product. How do I add those?
1. See the Kinetics Principles, Kinetics Personality, the Choreography and Accessibility sections to understand how motion is defined within Salesforce.It can be tricky to identify what might be construed as delightful animation in UI. Be mindful of the Kinetics guidelines while creating motion within product UI.
5. Do we have rules around animations for our mobile experiences?
1. See Mobile section on how scaling animations across mobile devices and experiences work
6. Are there harmful animations? How do I know what the accessibility standards for animations are?
1. See the accessibility section for a deep dive. We have dos and don’ts that will provide information on how you might create a thoughtful motion interaction for users across all abilities
7. How do I implement some of the custom animations that my team has come up with in collaboration with the Kinetics Systems team?
1. See implementation section for rules and general guidelines
8. I want to learn about motion more extensively
1. Our resources section provides links to articles and other resources.
2. Kinetics Modules
1. Our Salesforce Kinetics System Module is now available on Trailhead. Learn basics about choreographing motion UI.
2. Our Motion Pattern Creation module provides a detailed look into how teams might create custom motion UI for their products.
3. Learn more about Kinetics on our blogposts
1. What You Need to Know About the New Salesforce Kinetics System
2. Scaling of Kinetic Systems from design system to the Global Navigation of our digital products
3. Follow the Kinetics in Motion series on the Salesforce Design Medium page to quickly find more on Kinetics