For Designers
¡Hola!
¿Eres nuevo en nuestro equipo de diseño?
¡Bienvenido!
Aquí podrás localizar y acceder a todos los recursos e información que son necesarios para diseñar productos y experiencias digitales de IE.
Diseña con IE Design System
Introducción
IE Design System es el sistema de diseño de IE. Aquí encontraras las pautas que te interesan acerca de las diferentes categorías que conforman los productos digitales de IE.
Language: Elementos mínimos y esenciales con los que se definen características visuales de los componentes que forman el sistema. Tokens: Son la parte mínima codificada del diseño visual de un sistema de diseño, estos almacenan atributos. Componentes: Unidades básicas estandarizadas a nivel funcional a partir de las cuáles se construye el sistema de diseño. Módulos: Formaciones más complejas a nivel visual y funcional, con interacciones muy definidas y específicas que pueden ser transversales a cualquier producto que se diseñe en IE. Patrones: Indicaciones para respetar los estándares que se han fijado para todas las pantallas, y estructuras estáticas que pueden aparecer en cualquier producto. Flujos de interacción: Instrucciones y recomendaciones para seguir los estándares de interacción en los diferentes procesos transversales como el login de acceso al campus online.
Comienza con Figma
Una vez que ya estas dado de alta en el equipo IE en Figma, sigue las siguientes instrucciones para comenzar. Para darte de alta en el equipo solicitalo a través de......
1. Habilitar la librería
En el panel de Assets , haz clic en el icono de la librería y habilita las que sean necesarías mediante el switch.
[gif de habilitación librería]
2. Ver la librería
Desde le panel de Assets puedes ver todo lo que te has instalado en la librería. Desde ahí puedes elegir dos tipos de vista, modo lista o modo cuadricula.
En ambos casos
En ambos casos, al hacer hover sobre los elementos de la librería aparece la descripción y/o etiquetas asociadas al componente.
Figma también proporciona un buscador para que busques a través de las etiquetas asociadas en la nomenclatura del componente.
[gif]
3. ¿Cómo usar los componentes?
Para usar cualquier componente o elemento basta con arrastrarlo al artboard.
Para cambiar el estilo de texto o color a un componente utiliza, en el panel de la derecha, los estilos de texto y color.
[gif]
Si vas a usar los estilos de otro tema, instala las librerías del tema y procede a cambiar los estilos de la misma forma.
Otros recursos
Fuentes
Para descargar las fuentes puedes hacerlo a través Google fonts:
¡Ya puedes comenzar a diseñar!
Contribuye
En IE estamos trabajando para que este proyecto se adapte a todos los usuarios, por lo que tanto los reportes de errores, como la solicitud de nuevos elementos o funciones y sus mejoras son bienvenidos.
Si quieres saber más consulta nuestra guía de contribución.