{"id":111,"date":"2024-03-04T23:26:29","date_gmt":"2024-03-04T23:26:29","guid":{"rendered":"https:\/\/remenezes.com.br\/novo2024\/?page_id=111"},"modified":"2024-03-20T14:37:44","modified_gmt":"2024-03-20T14:37:44","slug":"flame-design-system","status":"publish","type":"page","link":"https:\/\/remenezes.com.br\/en\/flame-design-system\/","title":{"rendered":"Flame Design System"},"content":{"rendered":"

\n\t\tFlame Design System\n\t<\/h1>\n\t

The challenge of applying movement and interaction to the components of a design system.<\/p>\n\t\t\t\t\"MatrioscaBrasil\"\n\t

In 2019, Flame Brasil was born. In 2021 it became part of the \"Santander Design Ecosystem\"<\/strong>, which, while aiming to propose global standards, respects and maintains our country's own characteristics to ensure proximity to Brazilian users, thus maintaining the specificities and tone of voice that speaks to this audience.<\/p>\n

As part of the team that built the design system, my main role<\/strong> during the creation and development process was to define the interactions and motions of the components<\/strong> with the aim of providing a more fluid and pleasant experience for users.<\/p>\n

\n\t\tMotion and interaction in components\n\t<\/h2>\n\t

The motions defined for Flame's components always seek to achieve a purpose, since they are a tool for improving the quality of the user experience.<\/strong> For this reason, it has been defined that they should have purposes such as informing, guiding and\/or celebrating so that they can be part of users' journeys.<\/p>\n\t

When thinking about motion for digital interfaces, loaders<\/strong> are one of the first components to appear. A component that has been solidifying itself as indispensable, and which has as the basis of its existence the movement to indicate to the user that the system is working<\/strong>, and also brings with it the responsibility of reducing the sensation of waiting<\/strong>.<\/p>\n

In the example shown, you can see the primary and secondary loader<\/strong> in operation.<\/p>\n

The first, which appears more often to the user when navigating the interfaces, as it is present in almost every screen transition, also takes the opportunity to reinforce the brand through the use of its main icon: the flame. The second, on the other hand, has been designed to remain coherent with the first, as if it were part of it, and to clearly indicate to the user that the content is loading<\/strong>.<\/p>\n\t\t\t\t\"ProjetoFlame-Loaders\"\n\t

Example of two application screens with animated loaders, the primary loader on the left and the secondary loader on the right.<\/p>\n\t

The main buttons<\/strong>, for example, are already present on the interface and react to the user's click<\/strong> with a movement to let them know that the interaction has actually taken place. This so-called feedback<\/strong> is a very important resource for letting the user know that their action is having an effect on the system<\/strong>.<\/p>\n\t\t\t\t\"BotoesPrincipais-hor\"\n\t

Example of feedback when the main buttons are clicked.<\/p>\n\t

Unlike buttons, Tooltip<\/strong> and Dialog<\/strong> are components that depend on a user action to be displayed. This action triggers a motion which, in addition to displaying the component on the screen, also directs the user's gaze<\/strong>. Thus demonstrating that, at that moment, this is the most important information.<\/p>\n

In the image, you can see that both components use the same tokens<\/strong> (scale, opacity and time), what changes between them is only the position of the so-called \"anchor point\", which is the point where the animation starts.<\/p>\n\t\t\t\t\"TooltipDialog\"\n\t

Example of the Tooltip and Dialog components being triggered by the user.<\/p>\n

\n\t\tMotion tokens\n\t<\/h2>\n\t

Design tokens<\/strong> play an extremely important role in maintaining standards and consistency in the application of a design system<\/strong>. For this reason, what we call \"motion tokens\"<\/strong> have also been defined. So, when you want to add movement to a new component, there are already some predefined patterns<\/strong> that can be applied according to its function, size and purpose.<\/p>\n\t\t\t\t\"ProjetoFlameDS-Tokens\"\n\t

Among the tokens defined, the time tokens - illustrated in the image - are a good example of how the movement patterns were designed to work at scale.<\/p>\n

Each token has its own characteristics and has defined when it should be applied<\/strong>, so together with the complete motion documentation<\/strong>, it is clear at what times that token should or should not be used.<\/p>\n

\n\t\tMotion applied to user journeys\n\t<\/h2>\n\t

In addition to the motions applied directly to the components, work was also done on applying specific movements to each journey<\/strong>.<\/p>\n

The main objective of individualized motion work in a journey is to better explain more complex content, and also to bring celebration moments to the user<\/strong>. This consequently improves the understanding and receptiveness of the user.<\/p>\n\t