¿No sabes cómo usar Figma para el diseño de UI?
3.1 Componentes
Componentes e instancias: los componentes son componentes principales y las instancias son copias. Los componentes se pueden eliminar y modificar, pero no se pueden revertir en grupos. Las instancias no se pueden editar directamente, pero se pueden revertir en un grupo y luego modificar. Los componentes de almacenamiento no tienen una ubicación fija. El grupo inicialmente modular es la única matriz de componentes y los componentes no se colocan en la página de componentes sino que existen en su ubicación original.
Los componentes y las instancias están separados. El entendimiento simple es que un elemento que diseñó originalmente se empaqueta en el componente A a través de la función del componente, que es el componente A original. En este momento, habrá un componente fijo (similar al módulo de biblioteca de componentes) en el módulo Assert en la izquierda. Cuando arrastra un nuevo componente A desde el módulo de afirmación o copia un nuevo componente A del componente A original, este nuevo componente A es una instancia y la instancia se puede restaurar en un grupo.
3.11 ¿Cómo encontrar el componente original?
En primer lugar, cabe señalar que el método de gestión de componentes de Figma es flexible, pero en comparación con Sketch, no está lo suficientemente estandarizado. Aquí, todavía se recomienda a los diseñadores crear una nueva capa, con el nombre de los componentes, y colocar todos los componentes originales en esta página para facilitar la administración.
El objetivo principal de esta capa es administrar los componentes originales. Por ejemplo, cuando es necesario modificar una gran cantidad de componentes, cambie a la capa de componentes para realizar modificaciones rápidas y luego asignar rápidamente a todo el diseño. borradores después de la modificación.
Cuando necesite llamar a un componente, se recomienda utilizar el módulo Assert proporcionado oficialmente y llamar a la instancia del componente arrastrándolo y soltándolo.
En escenarios de trabajo reales, necesitamos saltar de la instancia al componente original para que, al realizar una gran cantidad de modificaciones de efectos, podamos saltar rápidamente al componente original a través del icono del componente en el inspector de propiedades. .
3.12 Operación de muestra
En el trabajo real, nos encontraremos con el escenario de crear un nuevo componente utilizando un componente similar. En este punto, necesitamos invertir los componentes en grupos y luego editarlos. En Figma, solo se pueden invertir instancias haciendo clic derecho o realizando "Separar" en el área del Inspector de propiedades.
Ejemplo de comando.
Al realizar algunos cambios directamente en la instancia que se está ejecutando actualmente, las propiedades actuales se pueden sincronizar con el componente y con todas las instancias a través de la función de anulación.
El método consiste en realizar una anulación de inserción en el componente principal en el inspector de propiedades de la derecha.
3.13 Uso de la biblioteca de componentes
¿Cómo cargar y mantener la biblioteca de componentes?
El sistema de biblioteca de componentes de Figma es muy amigable y fácil de mantener. Los diseñadores solo necesitan colocar el sistema de componentes y el sistema de estilos diseñados en un archivo y luego crear directamente una biblioteca de componentes basada en los estilos y componentes existentes en el archivo actual. Solo necesitan ingresar a la ventana del componente en la entrada de la biblioteca Assert y cargarlo a través de la función de publicación de la ventana de la biblioteca de componentes, y los miembros del equipo pueden obtener el contenido de la biblioteca de componentes.
Para el mantenimiento posterior de la biblioteca de componentes, solo necesita modificar y completar el archivo, y luego regresar a la ventana de la biblioteca para actualizar. Por supuesto, después de modificar la biblioteca de componentes, Figma abrirá automáticamente una ventana de acceso directo para permitirle actualizar rápidamente la biblioteca de componentes, lo cual también es un buen método.
Cuando actualice la biblioteca de componentes, otros diseñadores que utilicen el contenido de la biblioteca de componentes recibirán mensajes de actualización sincrónicamente y podrán sincronizarse rápidamente con la última versión para garantizar la coherencia del diseño.
¿Cómo utilizar la biblioteca de componentes cargada por los miembros del equipo?
En la ventana de la biblioteca, las bibliotecas de componentes que han sido publicadas por el equipo se mostrarán en forma de lista. Los diseñadores solo necesitan hacer clic en el interruptor en el lado izquierdo de su biblioteca de componentes de destino para activar la biblioteca de componentes y regresar a su tablero de dibujo de documentos. En este momento, el contenido de la biblioteca de componentes, como componentes, estilos de color, sistemas de fuentes, etc. , se puede llamar.
Si desea ver rápidamente el contenido de la biblioteca de componentes, puede usar la Opción 2 para llamar rápidamente a la ventana Afirmar recursos y verlo en la lista de capas de la izquierda.
3.2 Restricciones de reacción
A través de la definición oficial de la función de restricción, podemos entender esta función más fácilmente. Primero, necesitamos explicar sus limitaciones. La función de restricción solo funciona dentro de un marco y la herramienta de restricción solo aparecerá para los elementos del marco. Entonces, la definición oficial es "Permite fijar elementos de diseño en diferentes posiciones del marco principal". Por lo tanto, recuerde que la función de restricción se basa en el marco. Su escenario de uso principal es crear un diseño fluido para adaptarse a diferentes tamaños de dispositivos. Es decir, cuando el diseñador cambia el tamaño del marco, los elementos del marco seguirán automáticamente el. preset Las reglas son fijas.
Pero en escenarios de la vida real, el papel de las restricciones de respuesta no se limita a esto, sino que es una condición necesaria para que los componentes sean reutilizables y rápidamente editables. El marco de Figma es diferente de la herramienta de mesa de trabajo de Sketch y se pueden anidar entre sí sin afectar el problema de la creciente complejidad. Por lo tanto, se puede combinar en un sistema de componentes con diseño estandarizado mediante restricciones y marcos, además de Auto, del que hablaremos más adelante.
La función de diseño puede construir un súper componente con un alto grado de libertad, que se puede llamar a voluntad y se puede diseñar automáticamente en función de los datos de llenado reales. Por un lado, los componentes construidos de esta manera restauran el efecto del diseño en la escena real y, por otro lado, también reducen en gran medida el trabajo repetitivo de los diseñadores.
Las siguientes son las diferentes condiciones para las restricciones reactivas y sus efectos correspondientes.
Caso general de restricciones reactivas.
3.3 Diseño automático (Diseño automático)
La herramienta de diseño automático es la habilidad principal para crear componentes complejos. Puede diseñar componentes editables con mucha libertad e incluso páginas semiacabadas con restricciones de respuesta. .
En términos generales, cuando hablamos de sistemas de componentes, nos centramos principalmente en la coherencia de sus especificaciones y la gestión de recursos de diseño, pero de hecho, las bibliotecas de componentes desempeñan un papel importante en la mejora de la eficiencia de los diseñadores y la reducción del trabajo repetitivo. desempeñar un papel más poderoso. Modificar los componentes regulares después de su llamada requiere una cierta cantidad de esfuerzo, pero después de establecer reglas a través de la herramienta de diseño automático, los diseñadores pueden precipitar un conjunto de súper componentes que se pueden usar directa y automáticamente en función del contenido de relleno incluso de las páginas típicas maduras. Puede mejorar enormemente la eficiencia del diseño y reducir la pérdida de tiempo en operaciones básicas como mover, copiar y llenar contenido.
A continuación, implementé el caso más simple y luego el componente de búsqueda necesitaba completarse con datos reales para simular el estilo en la escena real. El diseñador solo necesita ingresar nuevo contenido de relleno y otros elementos del componente coincidirán automáticamente con la posición correcta.
El diseño automático se divide en tres atributos según las reglas generales de diseño, a saber, espaciado izquierdo y derecho, espaciado superior e inferior y espaciado entre elementos.
Después de seleccionar varios elementos y ejecutar Shift A (se recomienda estar familiarizado con las teclas de método abreviado para mejorar la eficiencia), se establecerá un diseño automático para estos elementos. Puede establecer reglas en el área de inspección de atributos. A la derecha.
Por ejemplo, necesito crear un conjunto de tarjetas dispuestas horizontalmente. En este momento, puedo diseñar tres tarjetas primero, luego seleccionarlas, ejecutar Shift A y crear un conjunto de diseños automáticos horizontales (los diseños horizontales y verticales también se pueden cambiar al diseño vertical correcto según la disposición de los elementos en tu escena real). Otro truco consiste en ejecutar directamente el comando Shift A en una tarjeta, luego seleccionar la tarjeta en el grupo para copiar y nombrarla CMD D. Después de eso, cada tarjeta copiada se organizará de acuerdo con reglas predeterminadas.
Como se muestra en el siguiente ejemplo, los elementos y las combinaciones de elementos forman componentes de diseño automático, y las combinaciones de componentes de diseño automático pueden formar componentes Daxing más complejos, o incluso módulos y páginas típicos. Se recomienda que los diseñadores dominen rápidamente esta habilidad comenzando desde el punto de partida: mejorar la eficiencia del diseño y reducir la duplicación del trabajo, invertirlo en las necesidades reales y diseñar sus propios módulos de componentes típicos.
3.4***Disfruta de la moda
Los estudiantes que han pasado del dibujo a Figma deben estar familiarizados con * * *Disfrute. * * * Disfrutar del estilo es uno de los componentes principales de la biblioteca de componentes, que incluye principalmente colores, fuentes y varios efectos de estilo. Aquí enfatizamos la diferencia entre la forma más divertida de Figma y la forma más divertida de dibujar.
En Figma, la clasificación de estilos es más detallada e incluye tres categorías: color, fuente y efecto.
Tomemos el color como ejemplo. Los estilos de color en Figma se pueden aplicar libremente a varios elementos de subdivisión, como gráficos, trazos y fuentes. , sin restricciones, puedes mezclar y combinar libremente varios elementos. Tomando las fuentes como ejemplo, el estilo de fuente solo incluye los atributos de la fuente en sí, como el tamaño de fuente, el peso de la fuente y la altura de la línea, pero no incluye el color. En otras palabras, el estilo de color del estilo de fuente se puede utilizar libremente.
En términos generales, Sketch presta más atención a los escenarios de aplicación reales de los sistemas de componentes según la comprensión convencional. Por ejemplo, el estilo de fuente se compone de todos los atributos de familia de fuente, tamaño de fuente, peso de fuente, altura de línea y color. Figma enfatiza un mayor grado de libertad y editabilidad, no se puede decir claramente en una oración. . Sketch es mejor en términos de rigor de componentes e integridad autocerrada, y FIG es mejor en términos de libertad de componentes, anidamiento de componentes y eficiencia de combinación.
Prototipo interactivo 3.5
Entre el software de diseño, me gustaría llamar a Figma la función interactiva más sólida, su lógica de operación minimalista y sus excelentes efectos de implementación, lo que lo hace popular entre las pequeñas y medianas empresas. empresas de gran tamaño. En escenarios de interacción complejos, no es inferior al software de diseño dinámico de UI profesional. En el modo de interacción de FIGMA, se puede ver la sombra del principio. La lógica de diseño detrás de él es muy similar, lo que está en línea con el escenario de rápida interacción del producto en el campo del diseño de UI.
Como se muestra en la figura siguiente, la lógica de interacción entre interfaces se puede completar seleccionando la mesa de trabajo inicial o sus elementos y luego simplemente conectándolos. Por supuesto, si el diseñador no está satisfecho con esto, puede realizar un efecto de transición más refinado en el inspector de atributos de la derecha. El propietario de Figma ofrece gestos de interacción perfectos para que los diseñadores elijan, como hacer clic, pasar el cursor y arrastrar.
Luego está el efecto de transición. Aquí solo recomiendo un método de interacción, que es Smart Animate. En una palabra, inteligente.
Animate reproduce la lógica de la evolución de los elementos principales, por lo que si eres un fiel fanático de los principios, puedes sumergirte sin problemas en la experiencia de los principios en el modo interactivo de FIgma.
Además, una función interactiva que necesita una explicación especial es la apertura interactiva emergente.
Excesivo. El uso de esta interacción mostrará una superposición que se aplica a la escena emergente. El método se muestra en la siguiente figura. El módulo interactivo Figma tiene muchas funciones y aquellos que estén interesados pueden explorarlo por su cuenta. Para la mayoría de los diseñadores, dominar las funciones básicas de creación de prototipos interactivos de Figma ya puede hacer que sus presentaciones sean más efectivas con la mitad del esfuerzo.
Desafortunadamente, sólo se puede demostrar un proceso a la vez. Como se muestra en la figura siguiente, los diseñadores con permisos de edición deben arreglar la función de reproducción en el tablero de dibujo inicial, y el módulo de demostración utilizará esto como punto de partida del hilo de interacción actual. Si tiene varios hilos interactivos, debe ajustar manualmente el punto de inicio de la presentación.
3.5 Resultado
Compartir el enlace directamente con las partes interesadas correspondientes. Los PM pueden comentar directamente sobre los borradores visuales y comunicarse y resolver problemas rápidamente. Los desarrolladores pueden cambiar al modo de desarrollador para ver las anotaciones de los bocetos.