Dome: Framework para crear sistemas de diseño en Sketch
Dome es un framework con el que se pueden crear los átomos y componentes de un sistema de diseño.
Está creado en base a una arquitectura de símbolos y estilos que se pueden personalizar fácilmente para adaptarlos al estilo visual de cualquier proyecto y que va a permitir que nuestro sistema sea fácil de editar y actualizar por cualquier persona del equipo de diseño.
Descarga y uso
Dome está publicado bajo una licencia creative commons y puedes descargarlo de forma gratuita.
Qué NO es este framework de diseño
Como ya sabemos, el software es solamente una herramienta. Esto, por lo tanto no es un sistema de diseño. Es sólo una forma útil y rápida de generar la base sobre la que construir los componentes y personalizarlos con nuestros propios estilos.
Si quieres aprender un poco más sobre sistemas de diseño, te recomiendo que eches un vistazo al siguiente enlace, que es un punto de partida ideal para entender para qué sirven y como se implementan.
Estructura
Dome está estructurado a dos niveles diferentes:
El primero, formado por aquello que puede ser definidos mediante estilos:
Color, tipo de forma (relleno/trazo), tipografía, sombras, estados y el tratamiento gráfico de las imágenes.
Por otra parte tenemos una arquitectura de símbolos anidados basada en los estilos que nos permite gestionarlos de forma eficaz.
Si no conoces como trabajar con símbolos anidados puedes comenzar con este tutorial de Pablo Stanley que lo explica en detalle.
Estilos
La base del sistema de diseño la constituyen los estilos de forma y de texto.
Estos vertebran el sistema ya que toda la arquitectura de símbolos con la que se construyen los componentes está referenciada a ellos.
De esta manera, la edición de los estilos, únicamente, permite que los componentes que se construyan se actualicen de forma automática.
Los elementos que se definen por un estilo son los siguientes:
Formas
Los estilos de forma contienen el color y el tipo de forma que podrá ser relleno y 3 tipos de bordes.
Colores
2Colores de marca
10 Tonos de gris
7 Colores reservados para la interfaz
Tipografía
2 tipografías
6 encabezados
10 tipos de estilos de texto
9 Estilos específicos de botones
3 alineaciones
5 colores de texto (2 tonos de negro, dos tonos de blanco y dos colores de marca)
Estados
Se definen los estados de cualquier elemento con interacción en base a estilos.
Tratamiento gráfico de las imágenes
También están definidos como estilos, los tratamientos gráficos que puedan tener las imágenes siempre que estén basados en modos de fusión.
Arquitectura de símbolos
La arquitectura de símbolos está creada usando sistemas de símbolos anidados. Estos sistemas se componen de un símbolo master que permite la gestión de los bordes redondeados y de los overrides correspondientes. Además, alguno de los sistemas (como el sistema de formas o el de imágenes) tiene el sistema de formas incorporada para facilitar la gestión de estos elementos.
hay un total de 5 sistemas de símbolos:
Sistema de formas
Los símbolos de forma se usan para crear componente.
En lugar de crear un componente con una forma vectorial, se añade un símbolo del sistema de formas y de este modo el radio de los bordes pasa a ser un elemento editable dentro de los overrides.
Sistema de sombras
Permite añadir a un componente una sombra que podrá ser editable desde los estilos de sombras.
Sistema de imágenes
Las imágenes también se convierten en símbolos e incorporan, a nivel de anidamiento, los estilos gráficos que puedan llevar asociados, con lo que podemos activarlos en la paleta de overrides.
El sistema de imágenes tiene además unas relaciones de aspecto definidas que son las siguientes:
16:9 / 3:2 / 4:3 / 1:1 / 3:4 / 2:3
Sistema de iconos
Al estar creados como símbolos, los estados pasan a ser un elemento editable Los iconos funcionan como un símbolo, lo que permite hacer su color editable.
Se han usado los iconos open source Feather
Estructura de un sistema de símbolos: Sistema de formas
Símbolo Master
A la hora de crear componentes y trabajar con los elementos básicos del sistema de diseño usaremos los símbolos másters de los sistemas de símbolos. Esto nos permite controlar el radio de los bordes de las formas ya que hay creados hasta 6 símbolos masters, cada uno con un determinado radio de borde.
Overrides
Usando el anidamiento de símbolos, los overrides nos permiten generar los distintos estilos a nivel de símbolo.
Salvo que queramos añadir o eliminar opciones, los overrides no hace falta editarlos ya que la gestión es delegada en los estilos
Documentación
He creado algunos vídeos para explicar el funcionamiento general del framework. El primero lo tienes al principio de la página y el que puedes ver a continuación explica de forma más detallada el funcionamiento del archivo. De cualquier modo, si usas Dome y crees que hace falta algún tipo de explicación o tienes alguna sugerencia o comentario, puedes escribirme a info@pacolaraworks.com
