Mi proyecto del curso: Introducción a Design Systems con Figma

Mi proyecto del curso: Introducción a Design Systems con Figma

Un poco de historia

Me embarqué en un proyecto de onboarding digital de contratación de productos financieros con alcance nacional y una estructura muy fija que se repetiría en muy pocos clientes con pocos cambios.

Tras el éxito de los primeros meses el alcance cambió, pasando a ser un proyecto internacional y necesitando adaptarse a las necesidades de cada país y cliente.
En este punto vi clara la necesidad de crear un Design System que me permitiera dar a el resto de equipos las herramientas necesarias para que el proyecto siguiera siendo consistente y fuera muy ágil de implementar a nivel de front.

Por este motivo decidí realizar este curso el cual me ha ayudado a crear un Design System sólido y ser consciente de lo necesario que es en proyectos de larga duración que necesiten ser escalables.

El nacimiento: One Yard

Al ser un proyecto interno de una empresa multinacional, los principios del Design System debían estar enmarcados en la filosofía de la empresa y ser accesibles para cualquier usuario de la compañía.

De ahí nace la idea de One Yard, un lugar de encuentro para toda la compañía.

De Sketch a Design System (Figma): Parte bonita

Históricamente en la empresa se trabajaba en Sketch, por motivos prácticos se apostó por este programa para el desarrollo del proyecto.

Como el alcance en inicio era muy limitado decidimos apostar por crear un archivo "padre" el cual se replicaría en las pocas adaptaciones que hubiera.

Esto ha hecho que la definición de tipografías y paletas de colores para el Design System simplemente haya sido un traslado de lo ya componetizado en Sketch

De Sketch a Design System (Figma): La triste historia de unos elementos

Al ir adaptando el proyecto a diferentes clientes a lo largo del tiempo, hizo que se fueran incluyendo mejoras en base a la información que nos daba el funnel en producción.
Esto hizo que muchas veces los CTA o los iconos no se usasen de manera igualitaria en todos los proyectos.

Para poder trasladarlo al Design System y componetizarlo de manera coherente hubo que hacer una gran labor de research para utilizar los que mejor impacto tenían sobre el funnel.

De Sketch a Design System (Figma): ¿Y los componentes, es que nadie piensa en los componentes?

De la misma manera que los elementos variaban ligeramente de versión en versión, esto era totalmente aplicable componentes más complejos.

Tras revisar y ver todas las opciones que podían darse se realizaron componentes que se adaptaran de manera coherente a todos los proyectos en curso y futuros.

Conclusión

Tras haber trabajado en este proyecto durante 2 años, la conclusión es clara, un Design System bien organizado es clave para proyectos que quieran ser mínimamente ambiciosos.

Aunque sin una base ya creada es muy complicado de crear, a partir de ahora trabajaré en todos mis proyectos de forma paralela el Design System y el desarrollo de pantallas aunque ello conlleve un retraso en los primeros entregables.

Ese pequeño retraso va a provocar un impacto muy positivo en la escalabilidad y eficientará muy claramente el proyecto a medio plazo.