En Figma, puede crear componentes muy fácilmente, y como parte de su flujo de trabajo estándar, para que puedan reutilizarse más tarde en diferentes proyectos. Por lo tanto, un mínimo esfuerzo inicial (y una sola vez) significa que tendrá una experiencia de diseño optimizada de aquí en adelante. ¡Vamos a sumergirnos!
Tabla de contenidos
- 1. Introducción
- 2. Crear uno o más componentes
- 3. Componentes principales frente a instancias
- 4. Realizar cambios en componentes e instancias
- 5. Intercambio de instancias de componentes
- 6. Nombrar y organizar componentes
- 7. Uso de variantes de componentes
- 8. Trabajar con propiedades de componentes
- 9. Creación de prototipos con componentes interactivos
- Obtenga más información sobre Figma y cómo usarlo
1. Introducción
Así que sí, hacer un botón y guardarlo como un componente significa que puede usar ese mismo botón una y otra vez en múltiples diseños. Pero, con mucho, el aspecto más popular de los componentes en Figma es el hecho de que si realiza un cambio en un componente guardado, este cambio se reflejará automáticamente en cada instancia de ese componente en su diseño actual.
Si desea cambiar el color de un botón, solo necesita hacerlo en el botón principal y se actualizarán todas las instancias de este botón.
Ahora, para seguir este curso, necesitará algunos archivos a su disposición. Descargar lo siguiente le ayudará a seguir este tutorial paso a paso. Una vez que haya descargado todo y esté listo para usar, continúe con la siguiente lección:
Iconos impresionantes de fuentes
2. Crear uno o más componentes
Con el archivo Figma de origen abierto, puede comenzar el proceso de creación de un componente. Para crear un componente, primero debe seleccionar las capas que le gustaría incluir en él. Continuando con nuestro ejemplo de botón, deberá seleccionar las capas de texto y forma, o un grupo de elementos, para asegurarse de que está creando un componente correctamente.
Un simple clic derecho es todo lo que se necesita para crear un nuevo componente de esta manera.
3. Componentes principales frente a instancias
Una cosa que es importante comprender acerca de los componentes está relacionada con la terminología, solo para que no se confunda a medida que avanza en varios tutoriales de Figma.
Por lo tanto, la primera vez que crea un componente, se denomina componente principal. Sin embargo, cada vez que crea una copia de ese componente principal, esto se conoce como una instancia.
En particular, no puede cambiar ningún atributo de una instancia, solo en el componente principal.
4. Realizar cambios en componentes e instancias
Puede cambiar el contenido contenido dentro de la instancia de un componente. Esto se denomina anulación de componente y describe cualquiera de los cambios que realice en una instancia individual. Estas anulaciones pueden incluir cosas como:
- El contenido dentro de la instancia.
- El relleno y el trazo
- Radio del borde
- Cuadrículas de diseño
- Configuración de exportación
- Nombres de capas
- Estilos de capa y texto
5. Intercambio de instancias de componentes
En Figma, el intercambio de instancias describe el proceso en el que puede cambiar la instancia de un componente con otra instancia. Esto puede ser útil en una amplia variedad de situaciones, pero es particularmente útil en los menús en los que es posible que necesite moverse por las opciones de menú o los botones sobre la marcha.
6. Nombrar y organizar componentes
Un archivo de diseño siempre debe estar organizado y Figma nos brinda un montón de herramientas para eso. Uno de ellos es la capacidad de organizar automáticamente los componentes si se nombran de cierta manera.
Usando la convención de nomenclatura separada «barra» o «» en Figma, lo que hace que todos los componentes seleccionados se nombren como «Nombre que elija / nombre del componente». Esto hace que sea mucho más fácil ubicar elementos similares en su lista de componentes. En este ejemplo, los elementos están organizados en la categoría «Icono de menú».
7. Uso de variantes de componentes
Las variantes le permiten agrupar componentes similares dentro del mismo contenedor. Por ejemplo, un botón puede tener diferentes estados, como presionar, pasar el mouse por encima o deshabilitado. Pero en lugar de crear un componente separado para cada uno de estos estados, puede crear un solo componente con múltiples variantes.
El uso de variantes de componentes da como resultado una mesa de trabajo y un flujo de trabajo mucho más limpios.
8. Trabajar con propiedades de componentes
Entonces, ahora sabe que las variantes de componentes pueden ser muy poderosas, sin embargo, llega un punto en el que su uso se vuelve ineficiente. Por ejemplo, puede tener un botón que tenga docenas de variantes para tener en cuenta diferentes opciones de color, estados, modo claro y oscuro, etc. Pero tener todas estas variantes puede dificultar encontrar la correcta que necesita en un momento dado.
La solución a este problema en Figma son las propiedades de los componentes. Si bien no sustituyen a las variantes, funcionan junto con ellas para simplificar en gran medida el proceso de diseño.
9. Creación de prototipos con componentes interactivos
La creación de prototipos tiene que ver con la interacción, su propósito es mostrarle cómo funcionaría un diseño en el mundo real. Para hacer que los prototipos que produce estén lo más cerca posible de la realidad, Figma le permite crear componentes interactivos.
Los componentes interactivos permiten cambiar entre diferentes variantes en un prototipo.
Obtenga más información sobre Figma y cómo usarlo
Ahora que domina los componentes de Figma, es posible que desee ampliar aún más su conjunto de habilidades. ¡Esta colección de tutoriales debería mantenerte ocupado durante algún tiempo!
