Introducción para diseñadores
Bienvenido al sistema de diseño y marco de interfaz de usuario Jutro. Jutro es el primer sistema de diseño enfocado exclusivamente en la industria de seguros de propiedad y accidentes (P&C). Se diseñó para proporcionarle todos los recursos que necesita para crear interfaces de usuario de acuerdo con las prácticas recomendadas de la industria y según los principios de diseño de Jutro.
Los estándares de este sitio lo ayudarán a mantener una apariencia coherente al diseñar aplicaciones dentro del ecosistema de Guidewire. Incluyen orientación detallada sobre lo siguiente:
- Documentación sobre accesibilidad
- Los componentes que se deben utilizar y cuándo
- Trabajo con elementos de interfaz de usuario
- Patrones visuales y de interacción
- Redacción de textos para interfaces de productos de Guidewire
Acceso a las bibliotecas Figma de Jutro
Clientes y socios de Guidewire
Por ser cliente o socio, puede acceder a la biblioteca de componentes de Jutro directamente desde la comunidad de Figma mediante el siguiente enlace.
Cómo obtener la biblioteca de componentes
- Vaya al archivo de la biblioteca de componentes de Jutro en la comunidad de Figma.
- Seleccione Abrir en Figma. Esto agregará un nuevo archivo a sus borradores.
- Cuando esté listo, mueva el archivo al proyecto deseado para publicarlo o compartirlo con otros usuarios.
Trabajo con tokens de diseño (Tokens Studio)
Cada versión de la biblioteca de componentes de Jutro que obtiene de la comunidad de Figma viene con sus tokens de diseño incorporados en el archivo. Estos tokens se utilizan para modificar el estilo visual de los componentes para la creación de temas.
Para trabajar con estos tokens, necesitará el plugin Tokens Studio for Figma.
Para obtener instrucciones detalladas sobre cómo configurar y usar Tokens Studio con su repositorio, consulte la sección Tematización de nuestra documentación.
Cómo familiarizarse con la biblioteca de Jutro
Una vez que tenga acceso a Figma, siga estos pasos para familiarizarse con la biblioteca de Jutro Design System:
- Cree un archivo nuevo en Figma.
- Habilite las bibliotecas de Jutro. Primero, seleccione el panel Recursos en la barra lateral izquierda de Figma. A continuación, seleccione el ícono de la biblioteca de equipo para abrir el cuadro de diálogo Bibliotecas y alternar entre estas bibliotecas: Jutro Design System, Jutro Styles y Jutro Icons.
- En el panel Recursos de la barra lateral izquierda, encontrará la lista completa de los componentes de Jutro disponibles actualmente. La información de cada componente se muestra al pasar el cursor por encima.
- Al arrastrar y soltar componentes en el lienzo de Figma, podrá empezar a diseñar con Jutro.
Puede examinar las propiedades y los estados del componente después de soltarlo en su lienzo de Figma y seleccionarlo.
En el panel Diseño de la barra lateral derecha, puede alternar entre las variantes del componente.
En el panel Inspeccionar de la barra lateral derecha, encontrará un enlace a la documentación correspondiente y a las propiedades relacionadas con el componente.
- Seleccione un componente principal o un conjunto de componentes.
- En el panel Inspeccionar de la barra lateral derecha, haga clic en Ver documentación.
Las variables de estilo relacionadas con los componentes también aparecen en el panel Inspeccionar.
Capacitación sobre diseño con Figma
Hay mucho que aprender si se trata de sacar el máximo partido a las herramientas de diseño. Esta es una lista de recursos para comenzar a aprender a usar Figma:
Videos/webinars
- Regístrese para tener acceso a una demostración semanal de diseño técnico en vivo O mire la serie de videos Figma Basics
Lecturas recomendadas
- Marcos en Figma y por qué son diferentes de las mesas de trabajo
- Una guía para la entrega de desarrolladores en Figma
Archivos prácticos
- Explore cómo se crea el kit de diseño inicial de materiales en Figma
- Descubra cómo Smart Animate facilita la creación de prototipos rápidos y de alta fidelidad
- Aprenda a utilizar disposición y composición automática para crear marcos dinámicos que respondan a su contenido
- Aprenda a utilizar variantes de componentes
- Busque, instale y use su plugin favorito de Figma con la plataforma de la comunidad
Guía de uso adicional
Explicación de Jutro Design System
Jutro se diseñó teniendo en cuenta los principios de diseño modernos y de acuerdo con las prácticas recomendadas específicas del sector. Consulte nuestros principios básicos de diseño de Jutro para obtener más información sobre la investigación que utilizamos para tomar nuestras decisiones de diseño, cómo usamos el color y la tipografía, y nuestra filosofía sobre cómo usar los íconos.
Uso de los componentes fundamentales
O si prefiere sumergirse directamente, comience con nuestros componentes y patrones de negocio.
Los componentes son los elementos básicos del sistema. Encontrará botones, menús desplegables y enlaces, así como algunos componentes compuestos más grandes, como el encabezado global, que combinan múltiples elementos de interfaz.
Los patrones son nuestra perspectiva específica del sector sobre cómo los casos de uso más comunes en el ámbito de los seguros, como agregar un vehículo a su póliza, se pueden representar como interfaz de usuario. Los patrones se crean a partir de los componentes más pequeños, pero teniendo en cuenta otras prácticas recomendadas, como la heurística de diseño y la accesibilidad.
Comuníquese con nosotros
Si desea enviarnos sus comentarios o tiene alguna pregunta sobre Jutro Design System y cómo funciona con sus productos digitales, comuníquese a través de feedback-jutro@guidewire.com.