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.
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;
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.
[en] In the case of mobile apps, you will only have to configure the General Mobile content and then define the screen structures when building the app screens.
Aviso
Los implementadores no deben modificar las plantillas preconstruidas y deben trabajar siempre sobre versiones duplicadas.
Sobre los recursos
Dependiendo del formato de los recursos, el diseñador UX puede cargarlos en Figma o guardarlos en su propio dispositivo. A continuación, los exportará desde el documento UI Kit de Figma, si aplica, y los cargará en Studio como recursos, de modo que estén disponibles para que los implementadores comiencen con el proceso de creación de la aplicación.
Antes de cargar los recursos en Studio, el diseñador UX debe asegurarse de que los recursos se guardan en sus dispositivos siguiendo patrones de uso específicos relacionados con la nomenclatura y el formato de los recursos. Por lo general, primero guardan los recursos en sus propios dispositivos. Consulta las secciones siguientes para obtener más información.
Patrones de recursos
Los nombres de los recursos son similares a los nombres de los estilos. A continuación verás una lista de las mejores prácticas aplicadas a los nombres de los recursos exportados desde Figma y cargados posteriormente en Studio.
Importante
Los nombres de los recursos no deben incluir caracteres especiales, la letra ñ, espacios ni mayúsculas. Los nombres deben separarse con _ y la nomenclatura específica definida para cada tipo de recurso.
Escribe el nombre en inglés y se lo más descriptivo posible en cuanto a la finalidad del recurso.
Escribe el nombre en minúsculas y utiliza guiones bajos para dividir las palabras. Evita el uso de artículos o preposiciones. Un ejemplo de este error sería: icon_on_star.
Configurando layouts en Studio
Una vez definidos los layouts durante la segunda fase de la definición del sistema de diseño (generación del kit de interfaz de usuario), el implementador debe configurarlos en Studio.
Las plantillas de diseño están preconfiguradas en el ambiente de Studio del proyecto, lo que significa que el implementador no tendrá que crearlas desde cero. En su lugar, tienen que duplicar las plantillas preconstruidas y modificar los tamaños en las duplicadas. A continuación, tienen que hacer modificaciones de acuerdo con las especificaciones del documento Design System.