This is part of the workflow process for the Section Translation onboarding tutorial [T313673].

This tutorial was conceived, in terms of design, around two main elements:

• Popup component
• Opacity layer

Popup component

The popup component is intended to be used in cases where additional content is to be displayed on click or hover. This component can be composed by a header, a footer, and with an arrow that can be pointing to different directions (top, bottom, left).

In this case, we are going to use this popup component more on the side of a tooltip. We won’t be using headers for any of the popups, and will be using footer text in the form of Skip / OK buttons. Some popups will have arrows pointing to the top or bottom, and others won’t have any arrows on them.

The popups will appear “on top” of the Section Translation editor, while guiding the users on how to use the tool efficiently.

Opacity layer

We will be using opacity layers during the tutorial for two main occasions:

• To give prominence to a new screen, but without completely removing the screen that would go "behind" it. In this case, the layer will be white with 85% opacity.

• During the tutorial, to focus on/blur different parts of the interface while popups are displayed on the screen. In this case, the layer will be white again but with 65% opacity. For example: