Creación de componentes reutilizables: clase teórica

Clase 13 de 25 • Curso Básico de Figma - 2022

Martha Liliana Dominguez Gonzalez

student•

Estas clases están geniales. Me estoy esforzando en aprender muy bien a usar Figma para tener archivos organizados y agilizar mi proceso. Lo único malo es que he tenido compañeros que no se preocupan como yo 🫣 entonces muero lentamente cuando debo trabajar sobre los archivos de ellos.

ISAAC DANIEL ATAUCURI YNFANTE

student•

Cada gran esfuerzo tiene una gran recompensa, eres genial!!!

Kevin Rodrigo Flores Acosta

student•

Te comprendo Martha, cuesta mucho adaptar a los equipos de trabajo cuando se habla de una nueva tecnología; pero no es imposible :) Ya cuando ven el trabajo y el conocimiento que manejas, se van interesando más y más. ¡Ánimos!

German Pinilla

student•

++Creación de componentes reutilizables: clase teórica++

Que son y para que sirven los componentes en Figma? Son elementos reutilizables que ayudan a:

Estandarizar patrones de diseño
Reducir errores y tiempo de ajustes

++Creando componentes++ Pueden crearse apartir de:

Frames
Grupos
Capas

(cmd + shift + k)

++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.

++Nombrando 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:

        Boton/alerta
        Boton/carga

++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

JAIRO SALAZAR CASTAÑO

student•

Gracias por el aporte!

Edhu Nuñez Alvarado

student•

Para nombrarlos generalmente se utiliza el Atomic Design https://platzi.com/blog/por-que-atomic-design/

ISAAC DANIEL ATAUCURI YNFANTE

student•

Muchas gracias!!!

Josue Cerron Tuesta

student•

Excelente!

Leonel Tamayo

student•

Las instancias son los elementos replicables obtenidos del componente o elemento maestro.

ISAAC DANIEL ATAUCURI YNFANTE

student•

Muchas gracias!!!

Josue Cerron Tuesta

student•

Gracias!

Jeisson Espinosa

student•

Información resumida de esta clase #EstudiantesDePlatzi

Los componentes combinan todos los elementos y debemos entender muy bien como funcionan ellos
Los componentes son elementos reutilizables que me ayudan a estandarizar patrones de diseño, reducir errores y tiempo de ajuste
Puedes crear un componente a partir de una capa, grupo o frame
Una instancia parece ser la copia de un componente maestro
Un componente maestro es un padre, una instancia es un hijo. Ellos mantienen una relación padre e hijo, es decir si yo hago un cambio al componente padre este se va a ver reflejado en todas las instancias del componente padre
Un cambio sobre la instancia se llama overrides
No se puede cambiar dentro de la instancia el tamaño, posición, rotación, constraints y jerarquía de capas
Puede una instancia independizarse de su padre, así que tu también puedes :)
Las instancias también pueden ser reseteadas y esto significa que volverá a ser exactamente igual que el componente padre
Es importante nombrar tus componentes de una manera que te sea fácil recordarlos
Para menos de 7 componentes los nombres independientes funcionan, para más ya es importante crear Frames o páginas para organizarlos
En el nombre del componente puedo usar "/" para crear jerarquías internas
Pueden existir componentes dentro de los componentes
Las variantes son versiones diferentes del mismo componente con parámetros similares pare que visualmente tienen un cambio
Los componentes tienen propiedades y manejar esto es fácil

JAIRO SALAZAR CASTAÑO

student•

Genial!

Iván Darío Pérez Cely

student•

Una pequeña aclaración: El atajo para crear componentes en Windows es CTRL + ALT + K. De resto excelente clase como siempre.

Walkiria Arteaga

student•

¡Holaa! un pequeño resumen:

¿Qué es un componente?

Es un elemento reutilizable para estandarizar los patrones de diseño a lo largo de la interfaz, ejemplo los botones, y reducir errores y tiempos de ajustes.

Además, en ellos se combinan de todos los elementos anteriormente vistos.

Atajos:

Para Windows

Ctrl + Shift + K = crear componente Option + Arrastrar = moverlo Ctrl + C + Ctrl + V = Copiar pegar Drag (arrastrar) desde vista de Assets (Barra en la izq.)

Relación padre-hijo

Lo que cambias del padre cambia en el hijo Se pueden hacer overrides o sobre escribir Se puede en textos, en fills, en strokes y en efectos

Peeero no se puede Cambiar dentro de él el tamaño, la posición, la rotación, los contraints, la jerarquía de capas.

*Para rebelarse Cambiar en comparación con las demás (Windows) Click derecho y "Reset Instance" = Detash

Organización de los componentes Menos de 7 elementos puedes tener nombres independientes pero más de 7 componentes debes crear frames o páginas para ordenarlos

Nombrar los componentes

/ crea jerarquía, los conecta y Figma reconoce que son intercambiables entre sí boton/alerta boton/carga

Componentes dentro de otros componentes

Componentes dentro de componentes para recplicar consistencia

Variante Diferentes versiones del mismo componente Como cambian los botones de primarios a secundarios con default, hover o dislabed.

Personalización o propiedades de los componentes Propiedades booleanas con With Emoji (Encendido o apagado) Si lo enciendes puedes editar a travez de esta herramienta.

Andersson Rios Infante

student•

¿Qué es un componente? Son elementos reutilizables que ayudan a: • Estandarizan patrones de diseño • Reducir errores y tiempo de ajustes Creando Componentes Pueden crearse a partir de: • Frames • Grupos • Capas (CRTL + Shift + k) Como crear una instancia • Option + Arrastrar componente • Ctrl + c – ctrl + v • Drag desde vista “ASSETS” Relación 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 y efectos.

No se pueden cambiar • Tamaño • Posición • Rotación • Contraints • Jerarquía de capas Pero las instancias pueden rebelarse • Ctrl + alt + b (Para separar una instancia de su maestro) • Click derecho y “Reset Instance” Para cancelar todos los overrides que tienen una instancia y revertir el maestro. Nombrando y organizando componentes • Para menos de 7 componentes, nombres independientes funcionan. • Para más, es importante crear Frames y/o paginas para ordenarlos. Nombrar los componentes • También podemos usar “/” para crear jerarquías internas (Esto nos permite usar el swap entre instancias desde las propiedades) botón/alerta botón/carga

Componentes compuestos Componentes dentro de otros componentes Las interfaces más complejas utilizan componentes dentro de componentes para replicar la consistencia a lo largo de todo un mismo sistema.

Alejandro Parra

student•

Creación de componentes reutilizables: clase teórica
1. Selecciona el elemento que deseas convertir en un componente.
2. Haz clic derecho en el elemento y selecciona "Crear componente" o presiona "Cmd/Ctrl + Alt + K".
3. Asigna un nombre al componente y presiona "Crear".
4. Ahora, puedes arrastrar y soltar el componente en cualquier parte de tu diseño.
5. Si deseas hacer cambios en el componente, simplemente haz clic derecho en él y selecciona "Editar componente". Los cambios se reflejarán automáticamente en todas las instancias del componente.

JAIRO SALAZAR CASTAÑO

student•

Me estoy esforzando para sacar el mejor provecho de las clases Genial todo lo que he visto en las clases. :)

Pedro Isaac Aguilar

student•

Componente: Elemento re-utilizable que ayuda a estandarizar patrones de diseño y a reducir errores y tiempo de ajustes. Pueden ser creados a partir de frames, grupos y capas. .
Componente compuesto: Son componentes dentro de otros componentes. Las interfaces complejas los utilizan para replicar la consistencia a lo largo de todo un mismo sistema. .
Variante: Son diferentes versiones del mismo componente que aplican bajo parámetros similares pero que visualmente tienen un cambio interesante, van variando

Josue Cerron Tuesta

student•

Genial!

JAIRO SALAZAR CASTAÑO

student•

Gracias por el aporte!

Jimena Haran

student•

Command+ Option + B para separar una instancia de su maestro, y en Windows cuál es?

Cristian Acevedo

student•

Ctrl + shift + B

Nicolas Hernandez Chaustre

student•

Cómo comprenden el atomic design?

Brenda Sutara

student•

te dejo una clase donde lo explican

Jesús Manuel Reyes Meza

student•

Por que todos creen que tenemos una mac??

Sebastian Nuñez

student•

Ojo que es un curso de UX jaja

María Luisa Barboza Restrepo

student•

Me ha costado un poco este tema de componentes, espero que durante el camino se me haga un poco más fácil. Me ha gustado mucho el curso

Cindy Milena Fontalvo Jiménez

student•

Genial profe, Excelente clase. Manos a la obra!

José Luis Quiróz Casas

student•

que actualizado està el curso

Sailyn Mantilla

student•

hola, necesito ayuda, el autolayout me da muchos problemas a la hora de aplicarlo, en este caso meti estos elementos en un autolayout pero para organizarlo es tremendo problema, he intentado ajustando margenes y configurando de adentro de cada elemento y no logro organizar todo como estaba de un inicio, el boton nisiquiera se ajusta, qué hago???!! ayudaaa

Sebastian Carballo

student•

Sailyn, Hola! cómo va?

Algo que entendí del autolayout es que:

- Sólo permite organizar elementos en una dirección. es decir, vertical u horizontal.

No estoy seguro qué es lo que estás queriendo hacer en tu diseño. ¿Buscas tener todo en una sola fila? Podría ser útil que des mas detalles.

Si ese es tu problema, se me ocurre que podrías probar:

- generar un auto-layout para cada "fila" (botón y contáctame) y quizás podrías probar

meter ese auto-layout horizontal, dentro de otro vertical (footer) para alinearlos****

Sailyn Mantilla

student•

hola, estoy haciendo un portafolio de mis diseños e ilustraciones, ahi quiero colocar imagenes de mis trabajos y al final el contacto mio

Mauricio González

student•

He visto esta clase varias veces y definitivamente el profe no explicó cómo creo esos CheckBox.. Qué desgaste tener que ver la clase varias veces y que aun así no se entienda.

Luis M

student•

He diseñado una Web App en Figma sin estas bases y como me hubiera ahorrado tiempo.

Creación de componentes reutilizables: clase teórica

Introducción

¿Para qué sirve Figma y por qué elegirlo?

Interfaz en Figma

Básicos

Configuración de guías y retículas

Creación de textos y estilos

Figuras e imágenes en Figma

Efectos en Figma

Redes de Vectores

Colores en Figma

Combo

Importar y exportar

Cómo crear guías de estilo

Auto-Layout

Los 15 mejores atajos para trabajar en Figma

Creación de componentes reutilizables: clase teórica

Creación de componentes reutilizables: clase práctica

Playground: Practica la creación de componentes reutilizables

Prototipado

Prototipado simple: interacción de scroll

Prototipado simple: conexión de diferentes frames

Prototipado avanzado: smart animate y componentes Interactivos

Co-Creando

Cómo agregar comentarios a los diseños

Historial de versiones en Figma

Librerías de estilos y componentes

Superpoderes

FigJam

Uso de plugins en Figma

Community: proyectos open-source y perfiles

Cierre

Proyecto final del curso de Figma