++Creación de componentes reutilizables: clase práctica++
Crear los componentes base de un checklist
++Que son y para que sirven los componentes en Figma?
Son elementos reutilizsbles que ayudan a:++
- Estandarizar patrones de diseño
- Reducir errores y tiempo de ajustes
++Creando componentes++
Pueden crearse apartir de:
++Creando instancias
Como crear una instancia?++
- option + arrastrar componente
- (cmd c) + (cmd v)
- Drag desde vista de "Assets"
++Relacion padre hijo++
- Propiedades del master component se traducen en todas las instancias
- Cambios sobre las instancias se llaman "overrides" y existen para:
- Texto
- Fill
- Stroke
- Effectos
++No se pueden cambiar:++
- Tamaño
- Posicion
- Rotacion
- Constrains
- Jerarquia de capas
++Pero las instancias pueden rebelarse++
- (cmd + option + B) para separar una instancia de su maestro
- Click derecho y "Reset Instance" para cancelar todos los
overrides que tiene una instancia y revertir al maestro.
++Nombreando y organizando componentes++
Al momento de organizar tus componentes es muy importante tener en cuenta
donde se estan posicionando dentro de el espacio de trabajo y como se estan
nombrando para encontrarlos mas facilmente.
++Organizando los componentes++
- Para menos de 7 comoponentes, nombres independientes funcionan
- Para mas, es importante crear frames y/o paginas para ordenarlos
++Nombrar los componentes++
- Podemos usar "" para crear jerarquias internas
- Esto nos permite usar el swap entre instancias desde las
propiedades:
Componentes compuestos (Componentes que existen dentro de otros componentes)
Las interfaces mas complejas utilizan componentes dentro de otros componentes
para replicar la consistencia a lo largo de todo un mismo sistema.
Las instancias permiten darle flexibilidad a los componentes mas complejos,
por lo que es clave diferenciar sus diferentes estados.
++Variantes++
Figma ha agregado una funcionalidad muy importante, las variantes, que basicamente
son difentes versiones del mismo componente que aplica bajo parametros similares
pero que visualmente tienen un cambion significativo
++Propiedades de componentes++
Son caracteristicas de los componentes que nos permiten su manipulacion y personalizacion
sea mucho mas facil desde el panel de propiedades
