Desarrollo de sistema de diseño. Cómo evitar una rutina inesperada.

Cuatro cosas simples para recordar y seguir antes del desarrollo del sistema de diseño

Si está desarrollando sistemas de diseño, probablemente haya aprendido que la secuencia es importante. Cuando se creó un componente o símbolo y lo multiplicó antes de asignarle las propiedades necesarias, se hizo posible el riesgo de una rutina.

Ejemplo: ha creado el componente a partir de símbolos anidados dentro de él. Si olvidó especificar el tamaño de los parámetros / restricciones justo a tiempo, entonces todos los clonados se escalan incorrectamente.

Acelere el tiempo de diseño y desarrollo hasta en un 50%

El Sistema de diseño de materiales para Figma consta exactamente de 512 componentes de interfaz de usuario de materiales y 1171 iconos de materiales.

  • Arquitectura única para una rápida personalización.
  • Equipado con documentación simple y clara
  • Dedicado a aplicaciones de escritorio y móviles
  • Hecho con pautas de diseño de materiales siguiendo
  • Utiliza las características de Figma "Instancia" al máximo
  • Admite API web de Figma para la integración en tiempo real
  • ¡Atención al cliente los 7 días de la semana!

Más información → http://setproduct.com/material

Si aún tiene dudas, le recomiendo que vea la descripción general

① Forme una lista de elementos repetidos

Identifique y agrupe todos los objetos que se repiten en diseño exacto, prototipo o concepto. No solo los botones de la lista. Etiquetas, iconos, entradas, encabezados, etc. Vale la pena agregar fondos e incluso parámetros de sombras, si desea construir un sistema lo suficientemente flexible. A continuación, aprenderá el propósito de estas acciones.

Algunos de los componentes repetidos

② Determinar todos los estados posibles

Ahora comience a formar una lista para un tipo de elementos en los que es posible la respuesta del sistema o con los que el usuario probablemente interactuará. Si su misión requiere describir incluso estados superiores, recomendaría mantener este proceso más adelante hasta las últimas etapas de desarrollo, cuando todos los componentes se conocen visualmente y luego puede preguntarse "¿Cuál de ellos requiere ser clonado para estados adicionales? ?

Pocos estados posibles para entradas de texto

③ Ajustar restricciones o cambiar el tamaño de los parámetros

Obtenga una regla: "cuando trabajo en un componente, siempre tengo en cuenta cómo se escala". ¿Recuerdas el ejemplo del que comencé esta publicación? La conclusión es que debe establecer las restricciones / cambiar el tamaño de los parámetros inmediatamente después de convertir el marco en un componente. De lo contrario, se quedará con la rutina en caso de que tenga que ajustarla manualmente para cada elemento en el futuro.

Los iconos que cambian el tamaño de los parámetros se ajustan a la derecha

④ Los nombres accesibles llegaron primero, los estados - después

¿Ya tiene su componente listo y lo va a clonar para obtener estados adicionales? Excelente, pero por primera vez aplíquele un nombre accesible. Cuida de ti mismo y del equipo de desarrollo y usa nombres claros. Tenga en cuenta que el componente clonado retiene el nombre del padre. Si prefiere el orden, espero que su campo de texto suene así:

Campos de texto / subrayado / predeterminado

Ahora el componente se puede clonar de forma segura. Luego separe la instancia, aplique los cambios visuales necesarios, y solo queda editar al final:

Campos de texto / subrayado / activo

⑤ Algo para el postre

Sin rutina Mi proceso de diseño ahora se involucra con el sistema de diseño y se muestra en vivo en YouTube:

El resultado final ⤑ mantener la secuencia ♛

De eso se trata lo básico para hoy. Sin dudas, hay muchos más matices en el desarrollo de sistemas de diseño, tal vez lo describa más adelante. Por favor, comparta en los comentarios sus propios métodos / pasos cuando comience a diseñar el sistema desde cero. Salud.

¿Que sigue? Inicie rápidamente su proyecto de diseño de material con esta biblioteca de Figma

Creado con el sistema de prototipos Material Material para Figma
❶ Explore el sistema → http://setproduct.com/material
❷ Descripción general de los componentes → http://setproduct.com/material/components
❸ Más videos → http://setproduct.com/material/videos
❹ Compra y descarga → http://setproduct.com/material/download
❺ Más de 1000 iconos de material → http://setproduct.com/material/icons_pro