Definición y aplicación del sistema de diseño
Pasos anteriores
Para definir el sistema de diseño, el diseñador UX debe haber preparado previamente el kit de interfaz de usuario y obtenido la aprobación del cliente.
¿Quién participa en la fase de definición del sistema de diseño y su aplicación?
El diseñador UX y el implementador participan en los tres pasos de esta etapa. Los pasos 3 y 5 son ejecutados obligatoriamente por el diseñador UX. El cuarto paso lo comparten el diseñador UX y el implementador: el diseñador establece los recursos y el tema, y el implementador trabaja en los layouts.
¿Dónde trabajas?
Para trabajar en estos pasos, debes utilizar el documento Design System (UI Kit aparece en la primera sección) y el documento Layouts en el repositorio disponible en Figma. Sigue los enlaces para acceder a ellos y lee Ejecución de tareas más abajo para saber qué tareas debes realizar.
La tercera fase incluye:
la definición y configuración del sistema de diseño,
la configuración de los distintos elementos en Studio, y
la configuración de la plantilla de flujos de pantallas.
El sistema de diseño consiste en un conjunto de directrices y normas de construcción que ayudan a mantener la coherencia del aspecto de la aplicación y la experiencia del usuario. El sistema de diseño de la aplicación incluye el estilo de la aplicación, los componentes de la interfaz de usuario, las fuentes y los recursos, entre otros elementos. El documento Design System de cada proyecto consta de:
Sección del kit de interfaz de usuario aprobada por el cliente. Se define en la subsección UI KIT dentro de la sección UX/UI definitions del documento Design System.
Variables de temas: valores o ajustes específicos utilizados para definir el aspecto general de los componentes de las pantallas de la aplicación. Se definen en la sección Theme variables del documento Design System:
Componentes atómicos: componentes individuales que se utilizarán en las pantallas de la aplicación, junto con sus estados y la configuración de estilos y comportamiento correspondientes. Los componentes atómicos se encuentran en el panel izquierdo del editor de pantallas. Para definir su aspecto, se les aplican estilos según la configuración del tema de la aplicación. Se definen en la subsección Atomic Components (uno por componente) de la sección Components Library del documento Design System:
Anatomía de los organismos: conjunto de componentes atómicos que crean diferentes componentes con una funcionalidad específica. Se definen en la sección Organisms del documento Design System:
El documento Design System contiene información sobre todas las secciones mencionadas anteriormente, así como casos de uso que el equipo puede utilizar como ejemplo y definirlos en función de los requisitos y la finalidad del proyecto.
Configurar Studio implica acceder al entorno creado para el proyecto y empezar a configurar las entidades fundamentales que definen la apariencia de las pantallas de la app. Incluye configurar:
Recursos
Tema de la aplicación, incluidas sus variables y estilos.
Nota
Los estilos son conjuntos de variables que pueden aplicarse a los componentes de cada una de las pantallas de la aplicación. Cuando se crea un componente en una pantalla, se pueden configurar los atributos de ese componente para aplicar el estilo.
Layouts
En este paso, el Diseñador UX debe ejecutar las siguientes tareas:
Importante
Dependiendo del equipo, estas tareas pueden ser ejecutadas por el Diseñador UX o por el Implementador. Si el implementador trabaja en ellas, el diseñador UX debe supervisar su trabajo y comprobar que todos los ajustes están correctamente configurados.
Acceder al ambiente del proyecto en Studio.
Subir los recursos. Dependiendo del tipo de recurso, pueden exportarse desde la sección UI Kit del documento Design System, o pueden estar almacenados ya en el dispositivo. Para cargar recursos:
Ve a Menu > Design > Assets.
Haz doble clic en la primera carpeta que aparece en la lista. La carpeta contiene sólo los recursos de esa rama de la aplicación.
Haz clic en Upload asset.
Haz clic en File Upload.
En el explorador de archivos, busca el recurso y haz clic en Open.
En el modal que se abre:
El nombre no se puede modificar; haz clic en Save.
En la sección Include in Application, selecciona Always;
En la sección Tags, introduce una etiqueta con el formato del recurso y pulsa Enter (por ejemplo, svg).
Haz clic en Save.
El recurso se cargará y aparecerá en la lista de recursos.
Importante
La carga de recursos debe ajustarse a los patrones especificados para los recursos. Lee Sobre los recursos para obtener más información.
Configurar las variables. Esto incluye lo siguiente:
Ir a la página Themes (Menu > Design > Themes).
Encuentrar el tema de aplicación prediseñado para tu proyecto. El tema prediseñado tiene valores por defecto que deben ser modificados de acuerdo con las definiciones del sistema de diseño.
Abrir el tema.
El tema se abre en la pestaña Variables. Completar los atributos de las subsecciones Color, Grey, Font, Border, Radius, Shadow, Margin y Padding según las definiciones del sistema de diseño.
Aviso
Si una variable no está definida en el Sistema de Diseño, no debe configurarse en Studio - esto significa que su configuración debe permanecer vacía.
Configurar los estilos que se aplicarán a los componentes en las pantallas de la aplicación.
Dependiendo de la complejidad de los estilos definidos en la subsección Atomic Components, los estilos se configurarán en las pestañas Styles, Custom and CSS del tema de la aplicación.
Nota
Las variables que no pueden configurarse en la pestaña Styles se especifican en los frames DEV Info y DEV CSS de cada una de las páginas de configuración de los componentes atómicos en Figma. Esta información será útil para configurar las pestañas Custom y CSS según sea necesario.
Este documento explica la configuración de los estilos básicos disponibles en la pestaña Styles. Esto incluye lo siguiente:
En el tema de la aplicación, hacer clic en Styles para abrir la pestaña.
Completar las subsecciones Button, Checkbox, Flex, Input, Panel, Radio, Switch y Text según las definiciones del documento Design System.
Aviso
Si un estilo de componente no está definido en el kit de interfaz de usuario, no debes configurarlo en Studio, lo que significa que su configuración debe permanecer vacía.
A continuación, el implementador debe configurar los layouts seleccionados para el proyecto. Esto incluye lo siguiente:
Revisar la sección de layouts en el documento del kit de interfaz de usuario preparado por el diseñador UX. El responsable de la aplicación debe comprobar la información que figura a continuación y configurar los cambios necesarios:
los layouts seleccionados;
los tamaños y las unidades de medida de cada área del layout;
los puntos de ruptura definidos para las diferentes resoluciones;
los niveles de cada layout. Si el layout tiene configuraciones de disposición de nivel B y nivel C, el implementador las configurará como Flex Containers durante el proceso de construcción de pantallas.
Acceder a Studio e ir a la página Layout templates (Menu > Design > Layout templates).
Duplicar las plantillas de diseño prediseñadas.
Empezar a trabajar en los layouts, uno por uno, y seguir estas instrucciones:
Abrir el primer layout definido por el Diseñador UX. Por ejemplo, abrir el layout Initial1.
Buscar el área que necesita modificar y hacer doble clic en ella, por ejemplo, en la sección header. En el modal Attribute que se abre, modificar el campo Size según los datos definidos por el Diseñador UX: introducir el número y añadir .0 para indicar que la unidad de medida es %. A continuación, hacer clic en Accept.
El campo CSS File estará preconfigurado con los puntos de ruptura aplicables a cada layout. Por lo tanto, el implementador no tendrá que hacer ningún cambio.
Para obtener más información sobre los layouts y los conceptos básicos de configuración de archivos CSS, lee Configurando layouts en Studio.
Guardar los cambios en el layout.
Si los layouts tienen configuraciones de disposición de Nivel B y Nivel C, el implementador las configurará en el último paso, cuando cree las pantallas de la aplicación.
Aviso
Los implementadores no deben modificar las plantillas preconstruidas y deben trabajar siempre sobre versiones duplicadas.