Do you want to standardise the workflow between designers and developers? Do you need clear structures on what to design and how to translate designs into frontend implementations in Drupal/Twig and other technologies? If yes, this session is for you.

In this session we are sharing with you a workflow that starts with a standardised design project using Figma. The design is connected with a design system built with Storybook. The components in storybook are built using web components that are used in Drupal/Twig templates to render the content.

This workflow allows teams to build consistent, performant and beautiful solutions easier than ever. Communication and management of changes are simplified and designers and developers can easily collaborate throughout the whole project.

First, we show the structure of the design template. We will focus on decisions we made to organise the design in the same way as in the design system.

Then, we show how the design template is integrated in the design system and how the setup of the design system corresponds to the setup of the design template. Components (atoms, molecules, organisms) and sections are created as web components using Lit.

Last, we show how we setup Drupal templating to optimally support the component structure of the design system. For the presentation of components we use Drupal Paragraphs and fields as well as React applications.

Across all technologies we use consistent naming and we have limited the degrees of freedom to build streamlined applications. Per project the default setup can be extended to support customisations.

As a result this approach enables us to develop consistent and resilient solutions in a shorter amount of time than previously possible, making everyone's work more enjoyable and to increase customer satisfaction.

Ponente: Lara Garrido Moreno / Mónica Rodríguez / Jose Nieves
Nivel de experiencia: Básico
Temática: Front-end
Idioma: Inglés