Pictograms

Convey information through visually representative simple images.

In Q1 we will add Motion tokens to our Design system, we will update this section accordingly

Guidelines

The use of animated pictograms enhances the user experience by making it more approachable and facilitating a better and quicker understanding of the context and also emphasize the details to which users should pay attention. They should be supportive rather than dominating or diverting, that fulfill specific functions within a user interface.

The pictograms always represent a concept, and the animation should transmit that concept through the movement. This is the reason why we don’t have specific specs fro every movement, but we have defined some guidelines.

Good to know

Maintaining consistency across all the motion in the pictograms is pretty important, and to achieve this, it's cruzial to follow to these guidelines:

Language

The movements should accurately convey the intended meaning, a concept that we’ve called Semantic motion. Each movement contributes to a choreography that assists the user in understanding the context of the situation. These movements not only help to understand the meaning of the pictogram within the context, but add fluent and rhythm to the whole choreography.

The halo serves as a graphic element that allows us to express movement effectively.

Details matter. The details are essential for enhancing realism, improving visual appeal, supporting storytelling and enabling expressiveness. They contribute to creating a rich and immersive experience that caught the attention of the users.

For pictograms with a semantic detail, the spot animation should emphasize the semantic element. Furthermore, the main part's animation should be keeping the same.

Specs

The halo needs to have a transition between 40% opacityto 0% opacity.

The animation can't loop, it will always happen only once.

The pictogram must always be positioned within the playground area, ensuring that it is never cut off at the edges.In order to keep a seamless visual transition, it's important to apply an opacity effect when moving elements from outside the designated area. This technique ensures that the movement appears smooth and natural, without abrupt changes.

The duration for this action should ideally be no more than 1.5 seconds. Although, in the some cases like the No results or the QR one takes longer. The cases are justified based on the context of the pictogram, which needs a slow movement to align with its semantic meaning and ensure a well-defined motion.

Smooth and fluid movements should be concluded with care. The motion shouldn't be linear, but rather edited with bezier curves. There are no specific specifications for the bezier curves, but they should always be aligned with the rhythm and the purpose of the motion, without being overly exaggerated.

The background square always keep the same animation, which is with a opacity from 0-100% in 10fps.

Dark mode. We still have to figure it out how the dark mode works for this motions. If the json colors can be changed by tokens it won’t be necessary to do a dark mode version in After Effects.

Workflow

We have used the combination of After effects + Lottie plugin to create the motion of the pictograms. Let’s see some aspects that are essential in order to create a new ones.

Since After Effects and Lottie are not the only options for creating animations, it's also possible to use the Lottie Creator tool. However, this tool has fewer features that may limit its effectiveness in capturing intricate motion details.

After effects

It’s important to know several things just before to start using After Effects for the Pictograms' motion:

Before start, it must need to have the lottie plugin for After Effects installed.
LottieFiles for Adobe After Effects: Streamline your animation workflow

Unfortunately, the After Effects effects are not allowed. So, check this Lottie Docs that let you know which effects can be done and which not.

After you have the motion rendered, you can get a json file and test it in the Lottie preview platform in order to see how will be the final result. Also, it’s possible to download a gif in order to use in Figma.

When the json is rendered, set up the exactly time range the animation is happening. For the gif format might be different, allowing for some time after the animation ends can be crucial when creating a prototype that requires to don’t have a continuous movement without interruption.

How to render a pictogram

When the designer wants to render a pictogram, just follow this steps:

First step is to save the file. This looks unrelevant, but Lottie has a bug that make the animation going wrong if it’s not saving before render.

Select it in the composition list in the Lottie plugin, click on the Render button.

After that, the preview comes up and the motion have to be saved it in the workspace by click on the button Save to workspace.

Note: You will se the pictogram without a background, but don’t worry, you can add it if you want, just scroll down and select it. But it’s not necessary for rendering.