loading...
Cover image for Como crear una guía de estilo con Figma
Capua

Como crear una guía de estilo con Figma

ayozebarrera profile image Ayoze Barrera 🇮🇨 ・2 min read

La imagen de un proyecto es súper importante, y va a influenciar al usuario directamente para que siga utilizando la aplicación y la identifique rápidamente o para que salga huyendo confuso y asustado.

Cuando trabajan varios diseñadores o programadores en un proyecto muy grande, lo mejor es crear una guía de estilo para que nadie se salga del guión y acabe diseñando algún componente fuera de tono en comparación al resto.

Para evitar esto, existen las guías de estilos.

Así que cuando llega alguien nuevo al proyecto, le podemos dar la bienvenida con una bonita guía de estilos.

Alt Text

Que es una guía de estilo

Una guía de estilos, como bien dice su nombre, es una guía para saber que materiales se deben de usar para seguir construyendo, como por ejemplo, que tipografía usar en los títulos, cuáles son los colores principales de la aplicación, que sombras utilizar, y cualquier aspecto que queramos definir.

En nuestra empresa, hemos creado una guía de estilos muy simple para una aplicación que llevamos desarrollando cuatro años: Fleetview.

Nuestra guía de estilo ha servido a otros compañeros para poder crear manuales y vídeos sobre la aplicación.

Hemos decidido hacerla en Figma ya que es una aplicación increible y nos permite exportar cualquier elemento en vectorial.

Que elementos añadir

Podemos añadir los elementos que consideremos más importantes, y en nuestro caso fueros los siguientes:

Branding

Alt Text

Los logos de la aplicación y sus variantes. Cualquier otra variante que no esté aquí definida no estará permitida.

Paleta de colores

Alt Text

Colores principales y secundarios.

Tipografía

Alt Text

La tipografía que usamos en el logo, en los títulos y en los párrafos. De cada uno de ellos definimos la familia, peso, tamaño, altura de línea, espaciado entre letras, color y un ejemplo.

Iconos

Alt Text

El sistema de iconos que usa la aplicación. Si hay que diseñar un icono nuevo, debe tener el mismo tamaño y mismo el grosor en las líneas.

Componentes

Alt Text

Los componentes más importantes que utilicen algunos de los aspectos anteriores.

Y todo junto pues se vería así:

Alt Text

Hasta la próxima batalla!

🖖

Posted on Mar 1 by:

ayozebarrera profile

Ayoze Barrera 🇮🇨

@ayozebarrera

Javascript freak 🤓 · Loving React ⚛· Fixie user 🚲 · Patriots fan 🏈!

Capua

Capua es un blog de desarrollo, diseño, tecnología y experiencia de usuario.

Discussion

markdown guide