¿Qué es una variable de color en Sketch y cómo aplicarla?

Al diseñar una aplicación o web debes realizar varias acciones de forma repetida, como aplicar el mismo color en diferentes elementos de la interfaz. A veces esto puede resultar abrumador, puesto que es posible que necesites regresar constantemente para revisar el código de color que ya has usado. Por ello, hoy te hablaremos acerca de qué es una variable de color en Sketch y cómo aplicarla.

¿Qué es una variable de color en Sketch?

Una variable de color en Sketch es una posibilidad que nos ofrece este editor para crear un color maestro que es el que más utilizaremos o tendremos en cuenta al momento de diseñar una web o aplicación; es decir, podemos guardar la paleta de color que manejaremos en el proceso de diseño. Por esto, al utilizar esta opción el color que seleccionemos se guarda y nos sirve para crear otros elementos con este color como base.

Una variable de color en Sketch se puede crear para usarla en un solo documento o para usarla en diferentes diseños. Esto optimiza y acelera el tiempo de trabajo, porque no vas a tener que buscar el mismo código de color constantemente, sino que ya lo vas a tener guardado y podrás aplicarlo sin mucho problema.

Es posible crear una variable de color para los diferentes elementos, como el relleno, los bordes, los estilos de capa o los estilos de texto.

En caso de que te interese aprender más sobre este programa de diseño, te invitamos a leer nuestro post ¿Qué es Sketch y cómo funciona?, en donde te hablamos sobre algunos aspectos generales del funcionamiento del mismo.

¿Cómo aplicar una variable de color en Sketch?

Para crear una variable de color en Sketch debes realizar los siguientes pasos:

1. Accede al panel que está ubicado en el lado derecho de la pantalla desde el inspector o el components view.
   
2. Cuando selecciones la opción “create color variables”, debes guardar el color que selecciones y podrás ponerle un nombre para lograr diferenciarlo de otros.
   

Lo más novedoso de esta función es que si incluimos una variable de color en varios elementos de la interfaz, pero no estamos seguros de que ese sea el color final o queremos modificar la tonalidad en el último momento, tenemos la posibilidad de modificar todos los elementos sin necesidad de seleccionar cada uno de ellos.

Una variable de color en Sketch se puede editar, renombrar, eliminar, separar o reemplazar. En caso de querer editar una variable debes dirigirte al inspector o al components view para desplegar el color swatch, después le das clic en el color y actualizas la información de la variable.

Por otro lado, si quieres renombrar, eliminar o reemplazar una variable, debes dirigirte al mismo menú que has utilizado para crearla o editarla.

En este menú encontrarás las opciones de rename color variable, delete o find and replace para que realices la acción que creas más apropiada.

Por último, si lo que necesitas es realizar cambios en el color de una capa en la que estás usando una variable, pero no deseas que se actualice todo, existe la opción de separar la variable de color. Esto se puede conseguir seleccionando la capa que necesitas separar, después le das clic al color swatch y te saldrá la opción de detach variable.

Ahora que conoces una forma más rápida para modificar los colores en el proceso de diseño, ¿te gustaría aprender cómo puedes desarrollar y diseñar una aplicación? Para ello, te invitamos a explorar nuestro Desarrollo de Apps Móviles Full Stack Bootcamp, con el que conocerás más pautas para diseñar y en poco tiempo te convertirás en un experto.