Propiedades de Componentes en Figma para Diseños Flexibles

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:51

Propiedades de Componentes en Figma para Diseños Flexibles

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 12 de 29

Clase 12 / 29

Recursos

¿Qué beneficios tiene un buen diseño semántico de capas?

En el diseño de interfaces, la práctica de nombrar las capas de manera semántica no solo mejora la organización del trabajo, sino que facilita la localización de elementos dentro de un conjunto complejo de capas. Cuando trabajamos con programas como Figma, encontrarnos con capas nombradas como "frame 1, 2, 3" puede ser arduo, especialmente con un gran número de frames. Usar nombres como "Content", "Image" o "Body" para describir la función de cada capa permite una navegación más eficiente y reduce los errores.

¿Qué son y cómo funcionan las Component Properties en Figma?

El uso de Component Properties en Figma representa un gran avance en la gestión de componentes. Estas propiedades permiten incluir todas las variables dentro de un único componente, creando variaciones de elementos sin tener que duplicarlos. Por ejemplo, en un componente Card, se pueden agregar propiedades para mostrar u ocultar elementos como imágenes o títulos, reduciendo así la cantidad de variantes necesarias.

Diferencia entre un componente y una instancia: Un componente tiene un rombo relleno, mientras que una instancia aparece como un rombo vacío, permitiendo visualmente identificar cuál es la original.
Crear propiedades: Dentro del panel de la derecha, las propiedades pueden añadirse al componente original, lo que después permite activar o desactivar estas variaciones cuando se genere una instancia.
Auto Layout: Es crucial asegurarse de que todos los elementos tengan auto layout para un comportamiento fluido y adaptaciones correctas según las propiedades activadas o desactivadas.

¿Cuáles son las ventajas de utilizar Component Properties sobre Variants?

Las Component Properties ofrecen una manera más eficiente de gestionar las variaciones de un componente. Mientras que con Variants es necesario crear múltiples variantes visibles, Component Properties permiten la activación/desactivación desde un panel único.

Simplicidad: No es necesario tener múltiples componentes visibles.
Eficiencia: Activar o desactivar variaciones sin modificar el diseño original.
Claridad: Para desarrolladores, ofrecer una interfaz donde las variaciones estén documentadas puede ser complicado, pero es posible usando plugins como Specs and Shapes Specs.

¿Cómo crear y manejar propiedades en Figma?

Agregar propiedades de tipo booleano (true/false) a un componente en Figma permite controlar su presentación. Utilizar estas propiedades es una práctica poderosa porque:

Flexibilidad: Permite mostrar u ocultar partes del diseño de manera dinámica a través de un interruptor (toggle).
Interactividad: Al crear una instancia del componente, se puede manipular visualmente para adaptarse a diferentes necesidades sin cambiar el componente original.

Pasos para añadir propiedades:

Selecciona el componente original.
Accede al panel de propiedades en la derecha y usa el botón "+".
Crea una nueva propiedad tipo booleano para elementos específicos, como "ShowTitle".
Asigna la propiedad al elemento adecuado del componente.

¿Cómo documentar y visualizar las propiedades para desarrolladores?

Para perfiles no diseñadores, como desarrolladores, que no pueden editar en Figma, la visibilidad de todas las variantes de un componente es crítica. Se recomienda usar plugins como 8 Shapes Specs, que generan documentaciones detalladas de las partes y variaciones de un componente, mostrando cómo interactúan cosas como espaciado o visibilidad de elementos.

Este enfoque no solo facilita a los desarrolladores el trabajo con los componentes, sino que asegura que las soluciones de diseño se mantienen coherentes y documentadas, previniendo errores y garantizando que todos en el equipo comprenden las capacidades y el comportamiento de cada componente.

Entonces, al aprender a utilizar Figma y sus Component Properties, se abre una puerta a un diseño más organizado, eficiente y adaptable. Continúa explorando estas herramientas, fortaleciendo tus habilidades y optimizando tus flujos de trabajo con precisión ¡y creatividad!

Comentarios (34)34 comentarios

Ariel Hernán Contini

Hace 3 años

Plugin EIGHTSHAPES SPECS - Sirve para crear las especificaciones de un componente.

Carmen Ansio

Profesor

En mi opinión, es el mejor plugin hasta la fecha para documentar Sistemas de Diseño de una manera super rápida y con un solo click.

Alejandra Gámez

Que plugin tan bueno, muchas gracias!

Jesús Daniel González Alemán

Para resolver el problema que hacía que al desaparecer el título y el contenido no se plegara adecuadamente el Card:

El truco es crear la propiedad booleana para el contenedor y no para el elemento dentro del contenedor.
Al parecer autolayout por algún motivo cuando no tiene el contenido éste mantiene el tamaño que tenía antes de hacerlo desaparecer. Aunque curiosamente si haces desaparecer el contenedor sí que sale la marca como que mantiene el tamaño del contendor pero se pliega igualmente pero no al revés Supongo que si quitas el contenido el otro contenedor desplaza al que ha perdido su contenido. En este caso al botón no le hicimos un contenedor con autolayout y por tanto no había un contenedor que desplace a otro.
Por lo que he visto lo mejor es hacer desaparecer el contenedor y no su contenido y ya da igual si el botón está dentro de un contenedor autolayout o no que cumplirá con lo esperado.

Santiago Navas Calero

Sip, hoy me tocó hacerlo en el trabajo y si se hace así jajaja, lo aprendí corriendo

Hugo Alejandro Ronaldhiño Gamarra Ponce

Mi Aporte :'3

federico.bermudez

Me parece genial ver como puedo aparecer y desaparecer elementos, pero siento que durante la explicación 2 veces falla al tratar de ocultar el CONTENIDO ya que no se comporta responsiva la CARD y le "se va por la tangente" sin mostrar como resolver ese problema. Me gustaria saber como

Juan David Verano Valencia

Hace 2 años

Si te entiendo bien, cuando desaparecen la imagen y el texto, la card se hace más pequeña.

En ese caso, deberíamos asignarle la propiedad "Fixed" al ancho de la card en el componente principal para que el tamaño no se modique, incluso cuando cambia el tamño de sus elementos.

Vanesa Vasquez

Como soluciono el error de la card en el minuto 9:53?? El componente no se comporta como esperamos, epro no meustra como soluciona el problema, hice los mismos pasos y me quedo el contenedor q tiene auto layout, pero al ocultar el titulo y la descripcion queda de esta forma.

seguí mirando al clase, pero solo meustra la otra forma de cargar la propiedad dentro del componente e intente volver asignarle la propiedad pero seleccionando el elemento del componente y el error persistió.

Gracias por su ayuda

Hola Vanesa! ¿Puedes compartir un link al ejemplo para poder identificar que propiedad no te está funcionando correctamente?

Jonathan Javier Veas Realpe

por que se repite el mismo contenido?

Christian Marquez

Hace un año

Quedó mal editada la clase.

Sayra Robledo

Cristina Belén Bascur

Mi aporte

boolean: acción de un si o un no. Un rombo en programación.

David Pérez

Hola

es mi ejercicio

Fernanda López

Mi aporte, cada vez entendiendo mejor las configuraciones para componentes :)

Yhoshua Bernal

Este es mi aporte usando como base mi proyecto de crear un sistema de diseño para spotify

Jessimar Pino

Así vamos

Aquí muestro las diferentes combinaciones

Zuleika Pachón

Comparto el aporte de mi card:

Miguel Alejandro Camacho Sánchez

Puntos importantes de la clase:

Nombrar capas de manera semántica:
- Usar nombres claros y descriptivos para las capas facilita la organización y el mantenimiento de los diseños.
Component vs Instancia:
- Un componente tiene un rombo formado por cuatro rombos rellenos; una instancia es un rombo vacío.
- Las propiedades de los componentes solo se pueden modificar en el main component, no en una instancia.
Component Properties:
- Permiten crear variaciones de un mismo componente (por ejemplo, con o sin título o imagen) sin necesidad de crear variantes separadas.
- Pueden ser propiedades booleanas (true/false), texto, iconos, etc.
- Las propiedades se gestionan desde el panel de Properties y permiten cambiar elementos directamente en las instancias.
Diferencia entre variantes y propiedades:
- Las variantes requieren crear versiones separadas de un componente, mientras que con component properties, las variaciones se activan/desactivan desde un mismo componente.
Auto Layout y Component Properties:
- Para que los componentes funcionen de manera fluida y responsiva, es fundamental usar Auto Layout en combinación con component properties.
Documentación de componentes:
- Es crucial documentar las propiedades de los componentes para que perfiles no diseñadores (como desarrolladores) puedan entender todas las variaciones y cómo funcionan.
- Plugins como Eightshapes Specs ayudan a visualizar las propiedades y variantes de un componente de forma clara.
Cómo añadir propiedades:
- Se pueden añadir propiedades booleanas, de texto u otros tipos desde el panel de Properties en el componente original.
- Las instancias permiten activar o desactivar estas propiedades a través de la interfaz de Figma.

Sailyn Mantilla

Hace 4 meses

la clase tiene un error de edición.

Clever David Cardenas Medina

Hace 5 meses

Antes del quiz, se vio cuando se desactiva ambos(title y content) queda un espacio vacio, y eso se debe a que hizo muchos autolayout a los elementos por lo cual es muy confuso. Lo que puede hacer es crear un componente con los elementos y a todos darle el autolayout(shit + a) para asi sea mejor manejable y se pueda ocultar los elementos sin quedar espacios demas.

Erick Jesús Orozco Rocha

Hace 6 meses•editado

Excelente clase

Pablo Coatts

Hace 10 meses

Hola a todos y todas:

En la creación de una propiedad del componente, cuando explican la creación de un Booleano, luego, cuando le asigna el "Show title" a la Layer, no me resulta, no veo ese panel.

¿Alguien me podrá ayudar o guíar porfas?

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Propiedades de Componentes en Figma para Diseños Flexibles