En este artículo, diremos cómo desarrollamos no un esférico en el vacío, sino una biblioteca real de componentes, y cómo logramos ignorar el perfeccionismo excesivo (no en detrimento del proyecto) para
ahorrar un 25% del presupuesto .
Esta es la primera parte del artículo, en la que habrá mucha información práctica aburrida pero concreta sobre la creación de componentes en Figma, así como los matices, dificultades y realidades de la creación de proyectos con un presupuesto limitado en un entorno provincial =)
El comienzo del trabajo fue precedido por un largo período de negociaciones y trabajo analítico, en base al cual se escribió un ToR detallado con un desglose en bloques funcionales (dinámicos) y estáticos. Los detalles al respecto se pueden encontrar
en este artículo . Si aún no está trabajando en tales conocimientos tradicionales, lo recomendamos encarecidamente. Experiencia extremadamente positiva para todo el equipo de desarrollo y el proyecto en su conjunto.
Pero volvamos al diseño
Vale la pena mencionar que Figma lanzó una actualización muy agradable a la altura del trabajo, por lo que no habrá una palabra sobre el color y los estilos de texto. Esperamos que un lector atento aprenda algo útil para sí mismo, incluso sin estos matices. Además, si no tiene una comprensión básica de los principios de organización de componentes en figma, le recomendamos que realice una búsqueda en habr.com (hay muchos materiales excelentes sobre el tema).
Antes de comenzar el diseño con píxeles perfectos, en la mayoría de los casos hacemos un concepto de diseño. Por lo general, es una especie de diseño sin formato (desde el lado visual), que debe pensarse a fondo en términos de comportamiento en diferentes pantallas y tener en cuenta la funcionalidad principal. Esto es necesario para evitar sorpresas desagradables en el futuro cuando un bloque olvidado no está incrustado en los diseños aprobados. Por lo tanto, un concepto es más un diseño borrador de páginas reales que una tabla de estilo, que, sin embargo, proporciona un conjunto básico de estilos y
diseños básicos
para páginas futuras.
En este caso, el concepto era el siguiente:
En general, nada complicado. Lo único que requerirá atención especial (en esta página) es una vista previa de los lotes (estas tarjetas), que consisten en un conjunto ilimitado de posiciones (estas líneas están en las tarjetas) y un conjunto diferente de botones para varios roles.
Todavía hay algunos matices no contados, pero acordamos ser honestos y prescindir de posturas innecesarias, por lo que diremos cómo surgieron en el proceso.
Entonces, todo está preparado. Tenemos conocimientos tradicionales con funcionalidad prescrita para comprender el funcionamiento de los componentes; tabla de estilo como concepto para entender el estilo de los elementos; el estándar para nombrar componentes para una transferencia sencilla del diseño al diseño, y un número infinito de tranquilizantes de todo tipo y color ...
Puedes comenzar a hurgar en la figura
El algoritmo de desarrollo del sistema de diseño será un movimiento de componentes simples e indivisibles (átomos) a componentes más complejos, y para una visualización de la jerarquía, dibujaremos cada siguiente nivel de complejidad en una nueva columna.
Texto
Para comenzar, definiremos elementos indivisibles: un conjunto estándar de encabezados, un párrafo y estilos individuales para el texto del botón, un estilo para marcadores de posición y nombres de filtros y algo más. ¡No olvides convertir todo en componentes!
Medio de Montserrat como fuente principal y negrita de Montserrat para encabezados y resaltados.
Ve a los íconos. Los sacamos de la biblioteca gratuita "Pluma"
Íconos
Cada icono se coloca en un contenedor de 24x24 píxeles y se alinea en el centro a lo largo de dos ejes (por si acaso). Todos los íconos se llaman nombres a gusto, pero con la adición del prefijo "i" para que no haya duplicados en los nombres, y se agrupan para no saturar el panel con capas.
También tendremos íconos de redes sociales y correos electrónicos adicionales para notificaciones de entradas incompletas, reinicio de filtro, un asterisco para las posiciones requeridas en el lote, un cheurón para desplegables y una marca de verificación para casillas de verificación y radiobaterías. Todos estos íconos serán más pequeños y livianos que los principales, pero en aras de la estandarización también los colocamos en un contenedor 24x24.
A continuación, pasamos a componentes más complejos. Los colocaremos a la derecha y los ensamblaremos a partir de elementos de la primera columna y palos.
Casillas de verificación
Comencemos con algo más simple.
Casillas de verificación y botones de radio en contenedores de 16x16 píxeles. Para cada estado, cree un componente separado. Esto es necesario para que en el diseño de páginas (ensambladas a partir de estos componentes) podamos reemplazar un estado con otro a través del panel INSTANCE.
Hacemos lo mismo con todos los elementos dinámicos que tienen estados de guía, activos, pasivos, etc.
Contador y control deslizante
También necesitamos un contador para mostrar la cantidad de algo. Estos serán datos diferentes dependiendo de su ubicación. Hacemos un marco de 20x20 y una figura en el centro.
Los botones para los objetos del control deslizante también nos son útiles. Los hacemos 30x30 y colocamos los iconos de chevron condicionalmente en el centro. Creamos componentes para diferentes estados.
Árbol de catálogo
Recientemente, comenzamos a adherirnos al principio de reutilizar los mismos componentes en diferentes dispositivos para no producir entidades innecesarias y mantener la pureza del código (tanto como sea posible). Por lo tanto, hacemos el árbol de catálogo, comenzando desde la pantalla móvil. TK nos dice que el nivel máximo de anidación de un árbol es 3.
Comenzamos desde el primer nivel: un marco con una altura de 60 píxeles y un ancho adimensional (se adaptará al contenedor), el icono está alineado verticalmente y 20 píxeles desde el borde izquierdo, el nombre de la rama será del componente h4. Todo esto está pegado al lado izquierdo en el panel CONSTRAINS. Pegue el número de lotes (también h4) y el galón al lado derecho.
Vuelva a dibujar el componente para la rama abierta. Organizamos el segundo nivel del catálogo de la misma manera, pero porque no reutilizaremos estos estilos en ninguna parte, solo clone las líneas de párrafo en incrementos de 20 píxeles. Como en Photoshop, sin problemas. Del mismo modo para el tercer nivel + palo + cambio de color de línea.
Lo siguiente es una serie de compromisos continuos.
Menu
El panel de pestañas para todo tipo de menús y pestañas lo colocamos en un contenedor de 60px de altura, y los artículos mismos se colocaron en el centro. Mirando hacia el futuro, decimos que este enfoque no es cierto, porque si desea obtener un diseño totalmente elástico, cada pestaña debe colocarse en un marco separado. De lo contrario, no funcionará establecer el comportamiento de las pestañas entre sí. Pero nosotros, hablando con los desarrolladores, lo calificamos con un corazón tranquilo.
Listas
Con el tiempo, recordé tantas cosas como listas numeradas y sin numerar. Para agregar un número, volvemos a la primera columna y creamos un componente de número de dos dígitos.
Entradas y filtros
Llegó el momento en que violamos nuestras propias reglas de jerarquía y colocamos los componentes y componentes que consisten en estos componentes (* _______ *) en una columna (recuerde: la regla era colocarlos a la derecha, sacándolos en una separada). Era posible prescindir de esto, pero decidimos que el bloque (filtro o entrada) y su menú desplegable comprenderán un componente en diferentes estados. Como dijo Salvor Hardin: "Nunca dejes que la moral te impida hacer lo correcto".
Hicimos este compromiso por la siguiente razón: la composición de la entrada y, por ejemplo, las casillas de verificación deben pertenecer al mismo nivel de dificultad (una columna), pero la lista desplegable en la entrada puede contener casillas de verificación. Realmente queríamos que las listas desplegables formaran una sola unidad con entrada, en aras de una hermosa sombra.
Puede decir que luego tuvo que poner la entrada con los menús desplegables en una columna separada (siguiente columna) y tendrá razón. Pero para nosotros en el proceso se hizo evidente no de inmediato. Y desde que se lanzó el transportador, nosotros, impulsados por el presupuesto y los plazos, nos vimos obligados a violar esta ley no escrita de construir sistemas de diseño atómico. Déjame decirte por experiencia: ni un solo diseñador o desarrollador sufrió esto.
Regresaremos al plano práctico.
Entradas
Dentro del marco de 60px, colocamos el componente de párrafo como marcador de posición. Cuando la entrada está enfocada, el marcador de posición se moverá hacia arriba. Le damos una sangría de 20 píxeles y la pegamos al borde izquierdo. En el borde inferior del bloque, agregue una línea de 2 píxeles (¡use rectángulos!), Pegue verticalmente a la parte inferior. Horizontal, puede seleccionar Escala. Más a la derecha, en diferentes situaciones, podemos tener una unidad de medida o un cheurón desplegable. Agrega tanto eso como otro y pégalo en el borde derecho. Ahora todo está perfectamente estirado, y todas las copias de este componente heredan el comportamiento del padre.
Agregamos componentes para diferentes estados: cursor sobre entrada de cursor, foco, menú desplegable abierto, válido e inválido. Una de las formas de crear estados rápidamente es: clonar un componente, presionar opción + comando + b, o "instancia secundaria" - a través del menú contextual. Editamos lo que necesitamos y lo convertimos en un nuevo componente. No te olvides de renombrar.
Con los filtros, la situación es similar y, con la excepción del estado predeterminado y la adición de una cruz para restablecer los valores, no difieren de las entradas. Olvidó: las entradas irán una tras otra horizontalmente, por lo que en el borde derecho agregamos una línea gris de 2px. No olvides pegarlo en el borde derecho.
Botones
Los botones en nuestro proyecto serán de dos tipos.
Primero: los botones habituales que se usarán en todas partes, excepto las tarjetas de vista previa del lote. Su anatomía es la siguiente: un marco de 30 píxeles de alto con un fondo transparente, un rectángulo de un tamaño similar con un redondeo de 15 píxeles (en el panel CONSTRAINTS establecemos el valor de Escala en ambos ejes) y el componente btn-txt que alineamos en todos los ejes en el centro (para cada bombero, decidimos de repente aumentar la altura del botón?) En un componente separado, seleccione el estilo del botón al pasar el mouse y otro para presionar.
El segundo tipo de botones debe encajar en el estilo de las tarjetas de vista previa y tener iconos. Además de la función de pulsar, los botones también informarán a través de un contador tomado de la misma columna (perdón), por ejemplo, cuántas veces se ha presionado el botón.
Los hacemos a partir de rectángulos de 60px de alto, el ancho dependerá del contenido. Incorporamos y centramos los componentes del ícono y btn-txt en todos los ejes. Imponemos el componente contador en el icono para que su esquina inferior izquierda coincida con el centro del icono. Los botones se organizarán uno tras otro, por lo que agregamos a cada lado una franja gris de 2 píxeles para la separación visual. Innecesario, luego apáguelo en su lugar. En este caso, en el componente de vista previa del lote.
Volveremos a este nivel de componentes, pero por ahora seguimos adelante.
Sombrero
Vaya a la nueva columna y comience a recopilar el encabezado.
Tomamos como base el marco de los mismos sesenta píxeles de altura. En la parte inferior, agregue una línea gris de 2 píxeles. Tome el ancho de 1440 px, porque recopilaremos todas las plantillas de escritorio con este permiso. Ya estamos siguiendo el esquema estándar: alineación con el centro de la sangría vertical vertical de 20 píxeles, logotipo, pestañas de menú, búsqueda (se ensambló por analogía con la entrada en la segunda columna).
El lado derecho del encabezado debe contener un panel de información con la información de la cuenta actual, e incluso con una lista desplegable. Volvemos a la columna anterior y recogemos este bien de los iconos y el texto (ya sabes cómo).
Para ver una lista desplegable en cualquier plantilla, adjuntamos dos componentes a la vez (menú desplegable abierto y cerrado). Uno se apaga metiendo el ojo en el panel de capas. No olvide desmarcar Contenido de clip en el panel FONDO.
A continuación, simplificamos el encabezado para pantallas más pequeñas recortando lo innecesario. Actuamos de manera comprobada. Clonamos, separamos, eliminamos lo innecesario, agregamos el icono de la hamburguesa, cambiamos el nombre y lo convertimos en un componente.
Para 320 píxeles, podemos mover ligeramente la sangría entre los iconos.
Ahora es el momento de configurar el caucho. Para hacer esto, seleccione nuestro componente "Encabezado-escritorio" y vaya a REJILLA DE DISEÑO. Cambia a los altavoces. El número de columnas en este caso no importa, lo principal es que la cuadrícula debe ser (para diferentes tareas, pruebe diferentes cuadrículas) Márgenes de 20 píxeles. A continuación, configuramos el comportamiento de los componentes anidados del encabezado.
En más detalles sobre la configuración de la elasticidad de las plantillas, le diremos en la segunda parte de este artículo.
Hamburguesa
Cada vez que diseñamos la navegación para una hamburguesa, comenzamos a inventar muletas, pero no en este caso. Resultó que tenemos todo lo que necesitamos para una hamburguesa, con la excepción del botón de cierre. Reunimos los componentes necesarios en un grupo y los convertimos en un nuevo componente.
Vista previa del lote
Vaya a las tarjetas de vista previa para el catálogo. En primer lugar, se hizo evidente que necesita crear componentes separados para los botones en la pantalla del dispositivo móvil (los medios de la figura no le permiten centrar los iconos si simplemente oculta el texto del botón). Vamos a la columna con botones cuadrados y terminamos los estados para pantallas estrechas. Agregue una cuadrícula de tres columnas.
Para las tarjetas en sí, primero creamos el componente de línea de pedido y los bloques con información básica. Los agrupamos para que una simple reconstrucción pueda lograr una pantalla móvil.
En este punto, para no inflar un artículo ya inmenso, hacemos una breve pausa. En la segunda parte, hablaremos sobre cómo se agrupan los componentes anteriores y cómo forman plantillas de página receptivas.
Confiamos en que este enfoque aún no es ideal, por lo que nos complacerá recibir cualquier comentario sobre el tema (especialmente si sabe cómo utilizar la figura de manera más productiva); su experiencia nos ayudará a mejorar nuestros procesos comerciales. Ronda.