¿Cuál debería ser el sistema de diseño óptimo en Figma? ¿Qué es un componente reutilizable? ¿Cómo es más fácil y conveniente organizar la estructura dentro del panel Instancia? ¿Cuáles son las etapas del desarrollo de tal producto? Y así sucesivamente. Intentaré dar respuestas a estas y muchas otras preguntas en este artículo.
Más recientemente, desarrollé mi cuarta biblioteca para Figma y solo ahora estoy listo para estructurar el conocimiento y la experiencia adquiridos en el proceso de desarrollo de este y los sistemas anteriores.
Por cierto, si usa Figma , le recomiendo que preste atención a nuestros sistemas de diseño listos para usar . Ayudan a los trabajadores independientes a completar más pedidos por mes, a los programadores se les permite crear hermosas aplicaciones por su cuenta, y el equipo lidera los "sprints" más rápidos utilizando sistemas de diseño listos para el trabajo en equipo.
Y si tiene un proyecto serio, nuestro equipo está listo para implementar un sistema de diseño dentro de la organización basado en nuestras mejores prácticas y adaptarlo a tareas específicas utilizando Figma. Web / escritorio y cualquier dispositivo móvil. También estamos familiarizados con React / React Native. Escribe a T: @kamushken
La aprensión viene después del bombo
Como cualquier innovación en el mercado, los sistemas de diseño sobrevivieron a la exageración y pasaron a la etapa de replanteamiento práctico. De ahora en adelante, se pueden usar en casos completamente diferentes y para resolver un tipo más grande de tareas. Para una organización grande, este es un lenguaje visual, marca, orden, la unidad de diseño y código. Para organizaciones pequeñas, esta es la biblioteca del equipo en Figma, que cuenta con un pequeño equipo de desarrolladores y diseñadores. Un profesional independiente también puede usar un sistema de diseño para sus tareas: esto incluye la automatización de las ediciones de los clientes (a través de los componentes maestros, mueve rápidamente píxeles, cambia colores y formas) y una base de UI de widgets que crece gradualmente (todos están organizados y se reconstruyen lógicamente al cambiar el tamaño). La velocidad de las tareas con este producto aumenta varias veces. Hoy, todos podrán encontrar por sí mismos las ventajas de trabajar dentro de un sistema de diseño.
¿Cómo explicaría la esencia del sistema de diseño en Figma en un lenguaje simple? Solo cuatro palabras: "Cambiado aquí, cambiado en todas partes". Este es el principio principal de usar componentes e instancias en el desarrollo de cualquier interfaz, que, con la secuencia correcta de usar átomos y moléculas para crear plantillas, se convertirá en un sistema completo con el tiempo.
Ver el mundo y ver los componentes.
Anteriormente, un diseñador simplemente tenía que dibujar y mover píxeles. A veces incluso ordenó y renombró cuidadosamente capas y grupos. Luego aparecieron los símbolos y dieron semi-automatización de los procesos. Ahora han llegado los componentes y los cambios se pueden traducir automáticamente en diferentes fragmentos de mesas de trabajo dispersos por todo el sistema de diseño. El uso de componentes también ha cambiado el enfoque del desarrollo visual.
El desarrollo de la interfaz de componentes se trata principalmente de unificación y consistencia. Como dije anteriormente, fue suficiente solo para mover los píxeles, pero con el advenimiento de los componentes en el diseño de interfaces, el diseñador debe tener en cuenta la disposición de las restricciones, la lógica de la instancia, la categorización de todos los elementos en el sistema, y también permanecer consistente al crear componentes complejos a partir de elementos simples. Por un lado, el proceso de creación de una interfaz se ha simplificado enormemente con el software de nueva generación. Por otro lado, la aparición de innovaciones nos hace aprender y adquirir nuevas habilidades, pasar a la especialización. El diseñador visual de sistemas de diseño es quizás una profesión muy prometedora para el futuro cercano.
Unificación y reutilización de componentes.
Un sistema de diseño efectivo no contiene componentes innecesarios. Cualquier producto similar comienza con una investigación sobre la posibilidad de resumir bloques repetidos y reutilizarlos en diferentes casos. Un ejemplo simple, el componente Lista se puede usar como un elemento de un directorio de archivos y, por ejemplo, para visualizar las reseñas de los clientes. Esta es toda la esencia de la unificación y reutilización:
¿Ves? Ambos componentes son idénticos en estructura, solo difiere la dimensión y la densidad de la fuente, el contenido en el elemento redondo.
Para crear una interfaz, es imposible crear un nuevo módulo. Todas las listas, tablas, encabezados y acordeones ya existen, pero a veces se usan de manera diferente. Al planificar la composición de los componentes, debe comenzar con la investigación de la búsqueda de componentes visualmente similares para intentar reducirlo a un componente en el sistema, cuya copia se reutilizará con contenido diferente. Aunque Figma ahora es lo suficientemente potente como para almacenar 500 o más componentes en una sola biblioteca, es mejor tratar de mantenerlos al mínimo para que sea más fácil organizar la estructura. Entonces, es hora de pasar finalmente al producto en sí ...
Caso: sistema de diseño web para sitios de aterrizaje. ¡Conoce a Websy!
Este artículo se centrará en el diseño de sitios web. La palabra "construcción" se usó por una razón. Este sistema de diseño es un tipo de diseñador para crear rápidamente cualquier plantilla a partir de los bloques provistos, y aún más rápido para personalizarlas. Para dispositivos móviles y de escritorio. Es la arquitectura de componentes que lo hará posible; para que en el futuro simplemente pueda clonar el código fuente, cambiar rápidamente los colores, la tipografía y crear nuevos temas. "Cambiado aquí, cambiado en todas partes". ¿Te acuerdas?
Investigación y análisis de la composición futura.
Los sitios de aterrizaje son un área ideal para aplicar un enfoque de componentes. Dos dedos son suficientes para contar todos los bloques que conforman un sitio web clásico que anuncia un producto, servicio o servicio:
encabezado, pie de página, llamado a la acción, características, testimonios, descarga, video, etc. El principio de dicho sistema para construir en presencia de combinaciones suficientes de todos los bloques enumerados. Por lo tanto, es posible armar cualquier sitio + versión móvil como un rompecabezas. Solo quedó como estudio estudiar cien nuevos sitios de aterrizaje y recolectar los elementos utilizados con mayor frecuencia. Los volveré a dibujar en el futuro, crearé componentes, estableceré un cierto estilo y recogeré las plantillas al final. Mirando hacia el futuro, diré que al final logré reunir 18 plantillas completas: 9 versiones de pantalla completa y 9 versiones móviles. Traté de crear plantillas universales que serían igualmente adecuadas para la presentación de servicios, aplicaciones, carteras y cualquier otro producto.
La mayoría de los sitios son en su mayoría sin rostro
Llegué a estas conclusiones cuando intenté simplemente googlear. La web en su conjunto rápidamente se vuelve obsoleta y esto es normal. Después de todo, estar en un diseño contemporáneo siempre es un cambio. Y somos cautelosos y cautelosos con respecto a los cambios. Si el sitio anterior funciona y de alguna manera se vende solo, es mejor no interferir con el mecanismo. Pero hay empresas que se dedican a optimizar los procesos internos. Y el diseño del producto para ellos no está en el último lugar. La mayoría de los buenos sitios para realizar una auditoría se encontraron en
hyperpixel.io y
www.lapa.ninja . Supongo que miré más de 100 enlaces diferentes y esto es solo una pequeña parte de la lista. Debe haber una sensación de proporción para comprender la cantidad necesaria para la primera versión (lea MVP). Por lo tanto, paré cuando el volumen de componentes en la sección Bloques de texto (varios bloques de texto, posiblemente con formularios y botones) alcanzó el número 30:
Apariencia del producto
¿Cómo debe ser exactamente el producto? Uno de los temas importantes en la etapa de diseño. Se gastan enormes recursos de las empresas en la búsqueda de una respuesta e investigación. Por mi parte, decidí de esta manera: el producto debería ser visualmente relevante. El diseño y el estilo no deberían ser ayer, no mañana, sino en la forma que ahora está en tendencia. Un ejemplo simple: hoy es raro encontrar la fuente Open Sans en la web occidental, aunque hace tres años era muy relevante. Si Google como marca cambia a Product Sans, debe buscar fuentes similares. Si Intercom utiliza un estilo de corte de papel en el diseño de su producto, debe comprender cómo utilizar trucos similares en sus proyectos. Ahora la tipografía es diseño, mensaje y estado de ánimo. Comencemos con ella.
Una buena fuente es la mitad de la batalla.
La idea surgió de repente. La
objetividad neo-grotesca increíblemente proporcional (por desgracia, sin rusificación) me llamó la atención de inmediato por su relevancia.
Alex Slobzheninov hizo un trabajo tremendo y permitió el uso comercial gratuito. Inmediatamente quise "diseñar" algo basado en esta fuente. Durante un tiempo, le di la vuelta a las mesas de trabajo en Figme antes de darme cuenta de "¡Es la fuente perfecta para la web!". Aparentemente en ese momento nació el plan para crear un sistema para la web.
Un buen sistema de diseño en Figma es:- Usar estilos globales (tipografía, color, sombras)
- Considerada lógica de desplazamiento de objetos internos al cambiar el tamaño de un componente (restricciones)
- Uso de instancias para varios estados de objetos (flotante, activo, etc.)
- Nombrar usando el símbolo "/" para crear una estructura de instancia conveniente
- Crear componentes complejos a partir de elementos simples (moléculas → plantillas)
- La presencia de una biblioteca incorporada con iconos ordenados
Ahora me gustaría hablar sobre cada artículo por separado, así que ...Usando estilos globales
Con el advenimiento de la capacidad de declarar opciones globales de colores, texto y sombras, la velocidad de personalización en Figma ha aumentado significativamente. Aumento de la productividad en general. Los estilos globales le permiten cambiar rápidamente la fuente en cientos de objetos, cambiar el esquema de color y, de hecho, obtener un nuevo estilo.
Colores
¿Cuántos colores hay almacenados en el sistema? Conocí sistemas de diseño para Sketch en los que se anunciaron todos los colores del arco iris + una docena de sombras para cada uno. En realidad, esto es excesivamente grande y el 80% de dicha paleta nunca se utilizará. En mi sistema Websy, del que empiezo a hablar en detalle a partir de ahora, solo se almacenan 8 colores: blanco, negro, color primario (acción), color secundario (secundario) y 4 gradaciones de negro. Con blanco y negro, supongo que todo está claro. Utilizamos colores de acción y secundarios para colorear elementos con los que puede interactuar (botones, iconos, enlaces). El color secundario se puede usar para enfatizar. Por ejemplo, para resaltar una frase importante, un eslogan, etc. Se permite una declaración de colores de éxito / advertencia si su sistema tiene más que ver con las interfaces que con los sitios.
Sombras
Soy partidario del diseño de materiales, por lo que mantengo en el sistema varias opciones para levantar sobre el plano (elevación). En Websy encontrarás 4 combinaciones de sombras: 2dp, 4dp, 8dp, 16dp. Se diferencian en desplazamiento y desenfoque. Por ejemplo, para una tarjeta normal, se recomienda usar sombras de 2 / 4dp. Para listas desplegables, estados y cuadros de diálogo permanentes, puede usar 8 / 16dp. Un diseñador atento ya ha notado que algunos productos de Google ahora usan sombras reflejas y sombras dobles, que son más realistas. Por lo tanto, además, se declaran varias sombras multicapa en el sistema, que dan un efecto muy realista:
A través de estilos globales, las sombras cambian en solo un par de clics.Accidente cerebrovascular
El parámetro Websy Stroke se controla a través de varios componentes separados que difieren en diferentes parámetros de redondeo. El trazo se usa con mayor frecuencia para botones y campos de texto. Al igual que las sombras, se declaran 5 opciones de redondeo de esquinas: 0px, 4px, 8px, 16px y 99px. ¿Por qué tanto? Comenzaré con un ejemplo de cómo se usa generalmente el componente de trazo, por ejemplo, para un botón:
Al colocar el botón, que por defecto tiene un trazo de 4dp, puede seleccionar el componente Trazo y cambiar el redondeo de las esquinas al lado más pequeño o más grande a través del panel Instancia. Este es un método un poco más complicado, pero le permite almacenar diferentes tipos de filetes en un componente maestro separado. La forma más fácil es cambiar el grado de filete a través del campo de entrada en el panel derecho. Un esquema similar se aplica a los campos de texto, tarjetas o cualquier componente de fondo.
Restricciones para componentes.
Permítanme hablar sobre este artículo y el resto en el próximo capítulo. Se necesita decir mucho sobre el comportamiento de los módulos y elementos al cambiar el tamaño. Y también pasaremos a una parte muy interesante: una descripción de todos los componentes que componen el sistema de diseño web Websy. Y, tal vez, consideraremos algunas plantillas preparadas para las páginas de destino. Discutiremos su composición y la flexibilidad de cambiar bloques para personalizarlos a cualquier necesidad y objetivo ... Suscríbase si está interesado.
Para el postre, un video corto.
En este video, utilizando componentes listos para usar, recopilo diseños que se utilizarán como pantallas de presentación para el sistema. Me gustó menos la primera opción, y tomé la segunda (a partir de la
1:30 ) como la principal: