logo de la página

Introducción

La idea de crear mi propio Sistema de Diseño ha estado conmigo durante muchos años. Como Diseñador UI, he trabajado en equipos que ni siquiera tenían una Guía de Estilo. Esta experiencia me llevó a tomar la iniciativa de guiarlos en este aspecto fundamental.

Recuerdo que cuando me proponia diseñar una landing page para un cliente, me di cuenta de que la mayoría de los buenos Sistemas de Diseño eran de pago. Fue entonces cuando decidí crear mi primer Sistema de Diseño gratuito, con el objetivo de ofrecer una alternativa de código abierto que facilitara la adopción de Sistemas de Diseño en los equipos de diseño y desarrollo. Lo llamé "Yuru", que en Quechua significa "pequeña taza". Este viaje me permitió explorar temas como la accesibilidad, las convenciones de nombres, la consistencia, la escalabilidad y mucho más.

Desafíos y Objetivos

Al comenzar el proyecto, intenté reclutar amigos y conocidos que eran expertos en el sector, pero debido a problemas de tiempo y personales, no pudieron unirse. Decidí hacerlo por mi cuenta, pensando que, aunque fracasara, ganaría más experiencia y me adentraría más en el mundo de los Sistemas de Diseño.

Durante varios meses trabajé en este proyecto, primero analizando otros Sistemas de Diseño y frameworks frontend, entendiendo cómo funcionan y diseñando el DS en Figma. Paralelamente, comencé a documentar estos componentes y estilos en CSS, tratando de mantener una convención de nombres uniforme en diseño y desarrollo.

Lecciones aprendidas

Después de varios meses de trabajo, el proyecto no tuvo el éxito esperado. Solo obtuvo 28 descargas en Figma y nadie utilizó la guía de estilo implementada en CSS. Esta situación fue muy desmotivadora y frustrante para mí, pero aprendí lecciones valiosas:

  • 1. - El nombre del proyecto dificultó su posicionamiento orgánico en los motores de búsqueda.
  • 2. - Trabajar en la versión del framework sin tener usuarios en Figma no fue la mejor decisión.
  • 3. - No pude llegar al público que necesitaba mi Sistema de Diseño.

Redención e Investigación

Después de varios meses de pausa, comencé a preguntarme qué habría pasado con mi Sistema de Diseño sin todos los errores que cometí. Así comenzó mi historia de “redención” con Space Design System.

Para mi segundo Sistema de Diseño, decidí resolver los problemas de Yuru. Primero, elegí un nombre relacionado con el espacio y el universo, que también me permitiría posicionarme mejor: "Space Design System". Aquí están los primeros conceptos del nombre y el logo.

Continué mapeando Sistemas de Diseño de referencia, enfocándome primero en la versión en Figma y, si alcanzaba las 10,000 descargas, lanzaría la versión del framework. Me inspiré en Sistemas de Diseño como Atlassian DS, Carbon de IBM y GitHub, y frameworks frontend como TailwindCSS y Bootstrap. También tomé cursos especializados y leí artículos sobre fundamentos de DS, siendo autodidacta en este campo.

Diseño y Documentación

Desde noviembre de 2022 hasta la fecha, he estado trabajando en esta nueva versión, documentando sus fundamentos, implementando componentes con un enfoque en accesibilidad y usabilidad, y realizando mejoras continuas. Durante este proceso, compartí mi Sistema de Diseño en foros de diseño y desarrollo. A pesar de enfrentar algunas críticas y comentarios desagradables por parte de algunos desarrolladores, estas experiencias me impulsaron a seguir trabajando con más determinación.

El punto de inflexión llegó cuando un gurú del diseño recomendó mi Sistema. A partir de ese momento, las descargas comenzaron a aumentar de manera significativa, validando el esfuerzo y dedicación invertidos en el proyecto.

Al momento de escribir este caso de estudio, Space Design System ha alcanzado las 9,200 descargas en la comunidad de Figma. Fue un esfuerzo que me tomó un año y medio, pero valió cada segundo. Noches sin dormir, mucho café y un par de podcasts de fondo.

Estado Actual

Actualmente, estoy construyendo una capa de personalización para frameworks como Bootstrap y TailwindCSS para llevar mi Sistema de Diseño a código. Ha sido un viaje increíble, con muchas personas apoyando el proyecto. Sin duda, comenzar cualquier cosa es difícil, pero lo más importante es no rendirse.

Imagen 3d de burbuja de chat

¿Estás listo para comenzar un nuevo proyecto? 🚀