Creación de componentes reutilizables: clase práctica

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

Contenido del curso

Introducción

Básicos

Combo

Prototipado

Co-Creando

Superpoderes

Cierre

25
Proyecto final del curso de Figma
02:01 min

Tomar examen

Resumen

Para los recursos de esta clase, entra en Emoji del link compartido en la sección de recursos, justo como lo ves en esta imagen

Comentarios

Nayibe Henao

student•

Siento que en esta clase hizo falta mucha informacion.

MY LUIS EL ZEVA

student•

pipipi

Enrique Castillo

student•

Origami Mode 8)

Alejandra chiquinquira Picón Chavez

student•

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.

Camila Ossa

student•

Definitivamente es muy importante nombrar bien las capas a la hora de crear el componente, de lo contrario no funciona bien.

Concuerdo contigo, debió trabajarlo desde 0 para que la explicación quede mucho más clara.

Juan David

student•

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

ISAAC DANIEL ATAUCURI YNFANTE

student•

graacias por la info

Josue Cerron Tuesta

student•

Gracias bro!

Bryan Taborda

student•

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

Xiomara Alejandra Hernández Arzola

student•

Donde esta la libreriaaaa :o!

Jesús alfaro

student•

También hice scroll no vi nada je

Ariel Hernán Contini

student•

Nos mintió con la canción, me choca que la gente haga eso (?)

Paloma Aviles

student•

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

Daniela Salgado Perez

student•

De acuerdo contigo! jajajaja. Creo que debió mostrar como creó el componente desde cero

Gabriela Correa

student•

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!

JAIRO SALAZAR CASTAÑO

student•

Gracias por el aporte!

Rubén Ernesto Aragón Gil

student•

Link de los emojis;

https://bit.ly/3Dt5Dkg

Damián Ariel Torres

student•

realmente eres el rey de reyes

Miguel Moya Montero

student•

No entendí un carajo......jajajaj

Bryan Taborda

student•

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

Javier Basante

student•

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

German Pinilla

student•

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

Nico Levy

student•

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!

Jhoana España Urresty

student•

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

Hrach Kaderyan Midence

student•

De dónde salen los emoji??

Luis Rodríguez

student•

Envié reporte para que nos colaboren con el tema, De hecho haría falta una clase de cómo traer librerías, recordando que es un curso básico.

Juan David

student•

Holaa! Yo encontré una solución, primero entre al link que está en los recursos de esta clase 2 Le di a "get a copy"

3 Copie toda la página de emojis 4 Fui a mi proyecto y pegué los emojis en una página nueva

5 Por último los emojis se encuentran en "assets" y aquí se encuentran los "local components" ahí se encuentran los emojis

Para usarlos simplemente arrastro un emoji y para cambiarlo en la parte derecha

Si tienes dificultad me puedes decir y con gusto te ayudo :3

Xiomara Alejandra Hernández Arzola

student•

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

Ruth Abigail Diaz Lopez

student•

Asi es,me costó dar con ese dato, pero tal cual, el no lo menciona en el video pero se debe seleccionar la frame antes de pegar.

Henry Alexander Velásquez Rosas

student•

Pasé por lo mismo, una vez se da clic en 💠create component set podemos irnos a Properties y cambiar los nombres tanto del componente general como de cada variante, en el caso de la imagen de abajo le coloqué false y true.

Una vez hecho esto, si se quiere usar ese componente, se debe seleccionar una de las dos variantes a usar.

Luego debes usar Alt y arrastrar el elemento seleccionado. Con esto ya aparece el botón de activar o desactivar (true o false)

Facundo Peralta

student•

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.

Paloma Canales

student•

Muy de acuerdo, de hecho para mi el tutorial de la clase 10 fue todo un caos, desde el paso nº 4 quedé colgada, luego ya después de ver los aportes y preguntas decidí ir avanzando a ver si algo empezaba a tener sentido, ya que en la clase 11 agregó muchas cosas y no sabía como empezar. Ahora me doy cuenta que esas cosas recién empezaron a explicarse despúes. La lata es que pierdes mucho tiempo buscando y buscando...

Anggi Vanesa Pallares Solis

student•

Pude observar en los comentarios la incorformidad acerca de esta clase, lo cuál estoy de acuerdo con los compañeros. Para ser un Curso de Figma Básico, esta clase no exponen lo que es básico y por eso muchos quedamos un poco perdidos en el manejo de esta herramienta. De lo básico pasamos al avanzado, Pienso que esta parte se deberia mejorar. Este comentario espero que sea tomado como una critica construtiva o plan de mejora. Espero no ofender a nadie que no este acuerdo con lo escrito.

Xiomara Alejandra Hernández Arzola

student•

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

ISAAC DANIEL ATAUCURI YNFANTE

student•

hahaha xd

Lina Ortiz Espinosa

student•

¿Cómo funciona el componente que hiciste con el emoji? debo tener los emojis en otra página ? No entiendí cómo los enlazas para que pueda cambiar después en una instancia el emoji

Luis Rodríguez

student•

Siiii, yo también quedé perdido ahí en la parte de recursos no hay nada.

Leiver Choconta Gomez

student•

Hola Lina, es un placer saludarte.

Hay varias formas de traer componentes como instancias. Lo primero, puedes crear tu set de iconos (emojis o ilustraciones, como muestra Santiago) y usando la caja de busqueda en la sección de assets, puedes arrastrarlo a tu artboard y crear todos los componentes con otras instancias.

Adicional, puedes tener este mismo pack de emojis en otro archivo, lo que debes hacer es publicar ese pack y vincularlo en tu archivo de trabajo.

Saludos!

Creación de componentes reutilizables: clase práctica

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