Creación de componentes reutilizables: clase práctica

Siento que en esta clase hizo falta mucha informacion.

No entendí muy bien esta clase, tuve que ver un video en YT para lograr aclarar el tema https://www.youtube.com/watch?v=6Iz4htwwYUk

¿Cómo sobrevivir a esta clase?

1. Lee la sección de recursos. Ahí encontrarás el enlace del proyecto del profesor.

   • Abres el enlace
   • Haces clic en Get a copy
   • Buscas la página de Emojis
   • Copias los emojis
   • En tu proyecto haces una nueva página
   • Pega los emojis en la nueva página de tu proyecto

2. Para “traer” los emojis de la página que creaste hace unos momentos:

   • En el panel izquierdo, haz clic en Assets
   • Utiliza el buscador para encontrar el emoji
   • También puedes navegar manualmente los assets
   • Haz clic en el emoji y arrástralo al frame

3. Recuerda que debes aplicar Auto-layout antes de crear el componente con shift + A

4. Crea el componente con Ctrl + Alt + K

5. Para la línea de la cita recuerda la clase 11 de Autolayout. ¿Cómo la haces?

   • Crea la línea y el texto
   • Aplica autolayout shift + A
   • Haz clic en la línea y en layout deja Fixed y Fill

6. Para el checkbox si les recomiendo mirar este video (que ya recomendaron otros compañeros): https://youtu.be/6Iz4htwwYUk Esto de los nombres si es demasiado confuso para explicar en un aporte de estos.

— Gracias por leer —
Ya tenía dolor de cabeza de no entender esta clase jjajaja no imaginan cuántas veces la he repetido.

le hizo falta info a esta clase, sobre todo a la parte de variantes de compuestos creo que es mejor que muestre el proceso desde cero a que simplemente ya lo tenga listo, sobre todo en la parte de nombrar los componentes porque todo me dio error.

Donde esta la libreriaaaa 😮!

En el curso de FIGMA AVANZADO hay clases donde se detalla más sobre como crear componentes, estados, etc :3

En la Figma Community hay varias librerías de emojis para que puedan duplicar y usar a su gusto.
Pueden buscar esta Free Emoji Pack by Paca que está bastante completa, solo recuerden renombrar sus emojis pues están con nombre por default como imagen. (imagen 1, imagen 2, etc.).
¡Excelente clase!

Es mágico cuando nombramos correctamente los componentes, mejora brutal el flujo de trabajo general.

Por si alguien quedo con dudas estos dos videos me sirvieron.

https://www.youtube.com/watch?v=6Iz4htwwYUk
https://www.youtube.com/watch?v=mnGBUYp2zC8

Link de los emojis;

https://bit.ly/3Dt5Dkg

minuti 6, no puedo Martha! (como el titoc jajaja) No me sale el estado del componenteeeee

¡Hola! Estuve igual que ustedes, sin poder entender bien. Sin embargo, entré a la Figma Community y elegí Icons. Ahí mismo logré encontrar muchos plugins disponibles.

Sin embargo, para agregarlo a la biblioteca, tuve que, desde la aplicación, ir a Pluggins > buscar Streamline Icons (fue el que me gustó) > OPCIONAL: suscribirse / entrar como invitado > Seleccionar cualquier set gratis que ofrece Streamline Icons.

Espero que sea una ayuda.
Saludos.

Esta clase no está muy bien explicada, seria geniaaal que se explique este tema tan importante desde cero

Esta clase esta insufrible. Demasiadas cosas dadas por sentadas y el curso se llama Curso BASICO de Figma.

No puedo creerlo en serioooo, yo copiaba y pegaba tal cual como siempre todo todito, pero para pegarlo tienes que dar click en el nombre del frame y ya sale como en el video… ayñsss

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:

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

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:

        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

Profeeeeeeeeee los humildes mortales que apenas sabemos mover el mouse, expliquenos bien como hace cada componente y sus propiedades 😦

Adhiero a los comentarios anteriores. El curso venia fluido pero esta clase da muchas cosas por sentado. Tarde mas de 1hs en poder recuperar los emojis de otra pàgina incluso habiendo leido todos los aportes. A mejorar!

Considero que esta clase debe ser regrabada. Estos temas deben explicarse desde cero y no con información ya creada por el profesor y solo explica sobre lo que ya creó.

Un dato importante es que momento de copiar el componente del check a la otra frame, el selecciona la frame y despues selecciona Ctrl + V, para pegar el check en la frame seleccionada, eso hace que aparezca el apartado para poder cambiar a activo o no activo:

Si solo copian y pegan esta opción nunca se va mostrar, porque se copia como una variante más.
Saludos y suerte!!

True y false son términos que se usan mucho en diseño web. También se puede nombrar de otra manera a las variantes. Por ejemplo: carita triste y carita feliz. Entonces, al momento de elegir la variante no tendremos el toggle de prendido o apagado, sino un menú desplegable con los nombres que le hayamos colocado a las caritas. De todas formas, faltó más explicación en esta clase. Es superimportante para el manejo del programa

Así pueden buscar la librería de emojis, solo descargan una copia y para que funcionen en su proyecto copien y peguen la plantilla entera de emojis que elijan.

Hasta el minuto 7: 49 todo joya pero despues me perdi,
Alguien muy amable compartio mas abajo en esta clase este video de YT que me sirvio mucho !
https://www.youtube.com/watch?v=6Iz4htwwYUk

Hola team! Aquí les dejo mi resultado, al fin pude lograr el check-box y el check-radio.

Genial esta parte del curso!!!, figma tiene múltiples funcionalidades que facilitan la creación de prototipos

Información resumida de esta clase
#EstudiantesDePlatzi

• Para crear un componente necesito como base un frame que este organizado como yo deseo

• Todas las instancias que creemos de un componente padre tendrán la misma apariencia que dicho padre

• Para crear variantes de un mismo componente lo que hago es tener listo los frames con sus diferencias y en la parte superior central de la pantalla le puedo dar crear set de componentes

• Es importante nombrar bien nuestros componentes

• Puedo crear un Auto-Layout dentro de un Auto-Layout, esto para controlar el espaciado y su padding

• Al tener mi componente puedo definir que propiedades voy a permitir que en las instancias sean editables

• Las partes del componente las puedo volver propiedad para ser editables fácilmente

• Una propiedad importante que puede existir en los componentes es el prendido o apagado de algún elemento

• Todos los elementos de un componente pueden ser propiedades

Ufff no le faltó muchísimo contenido y modo de explicación, este tema en particular es super especial y bien importante y lo paso como el aire…

la verdad que esta clase dejó demasiado que desear, si se supone que es un curso básico e introductorio muy mala.
Demasiadas cosas dadas por sabidas y no es así.
Lo bueno es que buscando en los comentarios muchos compañeros dejaron su aporte sino sería insufrible esta clase.

Faltó el know-how para crear componentes desde cero, me resultó un poco confuso aproximadamente a la mitad de esta clase. Lo demás muy bien.

Genial aprendi muchas cosas interesantes en esta clase 😃

En este link esta todo la documentación y los proyectos que se han realizado para que lo tomen como ejemplo
https://www.figma.com/community/file/1156912716415678519

Les comparto mi avance, fue un poco complejo éste tema pero creo que logré aplicar las propiedades que propone el profesor

Es el primer curso de platzi que no me gusta, es muy complicado seguir al instructor, da por hecho que sabes muchas cosas y no explica paso a paso como construirlas, a mitad de esta clase ya no puede continuar porque no tengo idea como cambiar las propiedades de los objetos.

Para aquellos que preguntan cómo agregó la librería al archivo de Figma les comparto este video que me encontré de uxcristopher que explica de forma sencilla cómo crear librerías de componentes para usarlas en todos sus proyectos:

Video en youtube

En resumen:

1. Se genera una copia del recurso compartido de la clase (get a copy)
2. Nos dirigimos a la pestaña de Assets y seleccionamos el ícono de libro
3. Seleccionamos la librería de componentes presentes en el archivo actual y le damos clic a Publish
4. Seleccionamos los íconos que deseamos tener en la librería
5. Activamos la librería en el archivo que deseemos utilizar
   Espero les haya servido.

Esta es una de esas clases donde descubres muchas cosas por ti mismo, si bien es cierto que hay cosas que el profe ya tiene creadas, basta con despertar un poco nuestra curiosidad para llegar al resultado esperado. En si, es una larga pero muy buena clase.

No entendi, es mejor hacerlo desde cero

Coincido con muchos compañeros del curso, esta clase no fue paso a paso de como crear los componentes, se saltarón pasos que son indispensable para poderlos aprender. Me sentí muy perdida en esta clase. Seria bueno mejorarla.

No entendí un carajo…jajajaj

En la clase de componentes del anterior curso de Figma lo explican mucho mejor 😄

¡Fue difícil! Pero gracias a los aportes de los otros estudiantes lo conseguí 😃

Dure 1 hora para poder entender la clase
Estuve haciendo el ejercico mientras explicaba

Avance de mi proyecto:

Sofiiaaaa ya vámonos… soooofffiaaaaaaaaa

XD resuelve el Auto-layout y el armado de componentes de una forma mucho mas robusta y simple.
No entiendo como puede ser que Figma sea el estándar en la industria

Si esáan trabajando con un documento nuevo (no con el template compartido por el profesor) y no pueden accesar a la librería de emojis, les comparto el dato de cómo hacerlo:

Abren este link https://www.figma.com/community/file/1156912716415678519

Dan click en “Get a copy”

Para abrirlo en la App van al menú principal marcado con el logo de figma y dan click en la opción “Open in desktop app” (esto solo aplica si estan trabajando desde la aplicación, si no lo hacen omitan esta parte).

Ahora lo bueno… Seleccionan la pagina llamada “Emoji”, luego con el teclado le dan a Comando + A o Control + A (para Windows), copian el contenido (comando/control + C)

y ahora en su documento original crean una pagina nueva, yo le puse también “Emoji” y pegan el contenido (comando/control + V) y les va a tomar todos los componentes creados.

Estuvo muy regular la explicación, y mas para este tema que en mi opinión es un poco complicado, tuve que buscar en otros tutoriales este tema.

Aqui está mi avance hasta el momento:

Asi mis avances, solo no logré que al quitar el ícono se alineen a la izquierda.

Con razón la anterior lección fue netamente teórica pero considero debió alternarse conforme se avanzaba con las definiciones. Queda repasar. Muchas gracias por los aportes comunidad.

Excelente clase

Si encontre los emojis… Gracias!!!

falto que el profe compartiera el link de la librería de iconos en la zona de recursos de este capitulo.

Brutal esta clase! la necesitaba!!

No fue fácil pero lo hice 😃