Creando Componentes para Tarjetas de Productos
Cuando estamos diseñando, es importante optimizar no solo la velocidad sino el esfuerzo. Es muy fácil que comencemos un diseño simple y se termine convirtiendo en algo complejo en cuestion de minutos, es por eso que te dejo este tutorial para optimizar el flujo de trabajo usando Componentes.
Y si quieres leer en vez de ver el video, continua bajando para el tutorial!!
Primero crea las tarjetas de cada una de tus Tarjetas de Productos y agrupalas cada una Individuales.
![](https://tatica.org/wp-content/uploads/2022/09/10001-1024x519.png)
Selecciona todos los grupos.
![](https://tatica.org/wp-content/uploads/2022/09/10002-1024x519.png)
Ve al menu superior central y selecciona el menu que se expande del primer icono, selecciona la 3ra opción que dice «Crear Set de Componentes» o en ingles «Create Component Set»
![](https://tatica.org/wp-content/uploads/2022/09/10003-1024x519.png)
Esto creará un Set de Componente que te ayudará a optimizar tu flujo de trabajo al crear grandes paginas de inventario.
![](https://tatica.org/wp-content/uploads/2022/09/10004-1024x519.png)
Vamos a incorporarlo a nuestro diseño.
Comienza copiando solo el primer componente de el set que acabas de crear.
![](https://tatica.org/wp-content/uploads/2022/09/10005-1024x519.png)
Y pegalo en la pagina con tu diseño.
![](https://tatica.org/wp-content/uploads/2022/09/10006-1024x519.png)
Ahora duplica este componente (Solo este componente que copiaste. Lo sé… todos se ven iguales, pero confia en mi…)
![](https://tatica.org/wp-content/uploads/2022/09/10007-1024x519.png)
Y duplicalo por tantas Tarjetas de Producto quieras tener en el diseño de tu inventario.
![](https://tatica.org/wp-content/uploads/2022/09/10008-1024x519.png)
Ahora selecciona aleatoriamente algunas de las Tarjetas de Producto que creaste, y verás que en el panel a tu derecha, bajo el módulo de «Componentes», podrás cambiar entre las 4 propiedades que creaste anteriormente.
![](https://tatica.org/wp-content/uploads/2022/09/10009-1024x519.png)
Al hacer esto, automaticamente podrás seleccionar distintas versiones de las Tarjetas de Producto que creaste anteriormente, y le aportarás variedad a los demos de tus páginas de inventario.
![](https://tatica.org/wp-content/uploads/2022/09/03845505-ae8b-440f-a24b-cb8d37ba049-1024x519.jpg)
Una vez hayas terminado con tus tarjetas, ya estarás listo.
![](https://tatica.org/wp-content/uploads/2022/09/10010-1024x519.png)
Una de las mayores ventajas de este tipo de proceso de diseño es que si mas adelante tienes que aplicar cambios a alguna (o todas) tus Tarjetas de Producto, solo tendrás que editar el componente principal del cual todas vienen, y esto se replicará en todos los diseños donde los hayas incorporado, haciendo que el proceso de diseño sea mas rápido y optimizado.
Como bono, te dejo la URL de los componentes en figma para que juegues con ellos. Espero te ayuden!!!
https://www.figma.com/community/file/1147669038330747740
Help tatica and donate with paypal!