Transcripciones
1. Bienvenido al curso de Figma - creación de componentes: Hola, bienvenidos a la clase. Mi nombre es barras laterales y soy diseñador de marketing y
producto. Y hoy vamos a estar
hablando de componentes. Y te voy a mostrar cómo
hacer estos módulos realmente
dinámicos. Y luego Figma,
lo que ayudó a que su proceso de diseño fuera mucho
más eficiente y efectivo. Aquí tenemos un sitio web falso de
redes sociales y tenemos algunos botones en el lado derecho
que están pre animados. Para que puedas ver cuando
pasas el cursor sobre
ellos, cambian a un trazo, contorno,
relleno blanco comparado con un NoStroke y un infile azul. Ahora estos obviamente representan
botones y en esta clase, voy a
mostrarte cómo hacer los
componentes individuales sean necesarios para crear este efecto. Cuando diseñas
tus aplicaciones o sitios web o cualquier
tipo de programa, tienes el conocimiento para crear componentes
dinámicos
realmente valiosos que pueden hacer que tu proceso de
diseño se vea bien, más pulido, y lo
más importante, te
ahorra mucho tiempo. Entonces, si buscas
una
clase muy fácil de seguir y es posible que hayas sido suscriptor a
mis anteriores. Sabrás que
tiendo a tomar un
enfoque muy desenfadado de la enseñanza. Y espero
verte en mi clase de Skillshare. Si decides inscribirte, no sabes lo que estás
haciendo ahora mismo, pero si quieres unirte a mí, no dudes en seguirme y haremos algunos de
estos botones juntos.
2. Cómo crear el primer activo para Componentes: Bienvenido a la primera lección
de esta clase de Skillshare, vamos a estar haciendo botones
que tienen efectos de desplazamiento y se crean usando la función
componente de Figma. Entonces lo primero que hay que hacer es que
vamos a
diseñar nuestros botones. Así que vamos a ir a
la pestaña rectángulo, crear un rectángulo, y cambiar el nombre de esta forma uno. Ahora por defecto, verás el color natural, este un gris. Y vamos
a querer crear esto y que sea
el color del botón. Entonces, si vamos aquí al
cuadrado y elegimos Sólido, y luego
elegimos un color, vamos a ir por un azul. Y luego vamos
a redondear las esquinas porque podemos
hacer un botón con sólidos como esquinas angulares, pero los botones redondos tienen una sensación agradable y funcionó
bien en las aplicaciones modernas. Entonces damos click en el cuadro y
llegamos a esta herramienta aquí, que cambia el radio de la esquina. Voy a hacer este cuatro. Y verás
aquí cómo tenemos una ligera curva ahora
dependiendo del tamaño de tu botón. Entonces, si encojo esto hacia abajo, verán cómo cambiará el
radio consecuencia y lo hará más grande. Se parece más a
un rectángulo y lo
hace más corto y
tendrá una mayor relación
de radio de esquina. Entonces, dependiendo de qué tan
grande sea tu botón ,
es posible que quieras
cambiar eso. Y puedes volver a hacer
esto ya sea escribiendo un número o puedes
arrastrar el radio aquí. Para que puedas ver arrastrando, hace
que el radio sea más degradado. Entonces ahora que ya lo hemos hecho, vamos a diseñar
este botón en un marco. Ahora bien, la forma de hacerlo es si
escribo con el botón derecho en el cuadrado, tendrás la opción de
enmarcar la selección. Esto hará que el marco sea uno
y esquina superior izquierda. Se puede ver como esta forma
encaja debajo de este marco. Ahora, vamos a nombrar este botón que sabemos
que es un botón. Y luego vamos a agregar
algo de texto a este marco. Presiona el botón Texto y
luego presiona el interior. Y vamos a
llamar a esto a continuación. Entonces este ejemplo,
este va a ser un siguiente botón para ir a una nueva página o a una
parte diferente de la app. Ahora obviamente ese texto
es un poco demasiado pequeño, y a pesar de que dice 18, claramente nuestros botones
son muy grandes. Botón, esta será relación de acuerdo al
tamaño de tu botón. Si hago clic aquí y hago
clic en el jueves, eso todavía no es lo
suficientemente grande. Vamos 45. Estira la caja abierta. Y ahora verás
cómo
está este siguiente texto dentro del marco del botón. Ahora, lo que voy a hacer
es centrar este texto en el cuadro de texto
mismo. Así que haz clic aquí. Y entonces toda esta sección necesita estar centrada
en el botón. Verás estos
iconos aquí arriba, los iconos de alineación,
voy a dar click en línea alineada verticalmente
y central. Eso es ahora Central.
3. Cómo crear variaciones de componentes: Entonces lo que vamos a hacer
es hacer clic en el marco. Y vamos a convertir
esto en un componente. Entonces, si hago clic con el botón derecho, tendrás crear componente. Ahora esto convertirá automáticamente el marco en un componente. Y puedes ver esto
ya que es de color púrpura o mira en la
pestaña de capas de la izquierda. Ahora, con el fin de obtener el efecto
hover donde
cambia dependiendo de si
ingresas o sales de la
forma o activo. Vamos a crear una
variación, una variación. Y puedes tener
múltiples variaciones dependiendo de lo complejo que sea
tu componente. Por lo que si haces clic en
esto, en la parte superior, verás Agregar variante usa
máscara o selección de unión. Queremos agregar una
variante y verás cómo
crea automáticamente una copia, que luego podemos cambiar para que tenga el efecto deseado. El contorno discontinuo solo te
muestra la extensión
de los componentes. Y si haces clic en
este botón más, agregará otra variación. Así que tenemos el botón predeterminado en la parte superior y luego
variante a debajo de él. Entonces ahora cambiemos la
estética de ésta. Entonces, lo que queremos
hacer para que sea obvio que eso se ha cercado, vamos a
cambiar los colores. Entonces lo que vamos a
hacer es hacer doble clic. Y cuando haces doble clic,
automáticamente elegirá el elemento de árbol más bajo dentro de
ese activo seleccionado. Forma uno, que
es el rectángulo. Tiene un color azul y
vamos a agregar un trazo. Ahora bien, este trazo va a ser del mismo color que el relleno. Entonces, si hacemos clic aquí, clic en la herramienta cuentagotas, golpeamos el interior,
verás ahora
que está hecho un contorno azul. Y luego si haces el haz
el grosor un poco más ancho. Obviamente no podemos ver cómo
se ve eso por
los mismos colores. Podemos cambiar el color de
relleno a blanco. Vamos. Ahora tenemos un
relleno blanco y un trazo azul. Y se puede ver que el texto está desaparecido porque
el texto era blanco. Entonces lo que vamos a hacer
es que este texto sea azul. Entonces da click sobre esto, la herramienta
cuentagotas ahí. Entonces ahora tenemos esencialmente
un botón inverso, que luego podemos usar
como nuestro efecto hover. Y ahora eso, eso es todo. Esa es básicamente la parte de los componentes
principales o los componentes principales hechos. Y ahora solo necesitamos trabajar en el flujo real del botón.
4. Cómo agregar acciones de flujo al componente: Entonces, si vas a la esquina
superior derecha, verás prototipo. Ahora prototipo permite agregar movimientos y animaciones a
los objetos en un orden lineal. Entonces con esta área prototipo seleccionada y hago
clic en un botón, verás como
tenemos poco icono plus. Ahora con Figma,
puedes arrastrar y soltar. Si hago clic en esto y arrastro hacia abajo, verá el automático, automáticamente
hace clic y se
adhiere a la variante de
componente construida. Déjalo ir. Y luego aparece un cuadro
emergente. Ahora bien, si lo que podemos hacer
aquí es elegir cómo
queremos que esto interactúe con
nuestro mouse o nuestro toque, o como sea que esté usando y en
qué dispositivo lo esté usando. Por el momento, por
defecto, ha hecho clic. Pero queremos
tenerlo porque mujeres, cuando el ratón
entra en el botón, queremos que cambie
a la otra variante. Y cuando sale
del complejo compuesto, el contenedor del botón, queremos que
vuelva a lo que era. Así que haga clic mientras se cierne. Cambia de propiedad
uno a variante a. Ahora, puedes elegir
tener un instante, puedes elegir que
se disuelva, que se desvanezca un poco ahí,
lo que vamos a hacer. Entonces lo que eso hace ahora es
cada vez que ingreses este botón, se mostrará este botón. Y cuando dejes este botón,
te mostrará ese botón.
5. Cómo probar los componentes: Ahora para probar esto,
vamos a crear un frame muy rápido. Entonces podemos imaginarnos
esto siendo un monitor. Y este monitor es, vamos a poner esto,
poner esto en un marco. Entonces haga clic con el botón derecho Y sólo vamos a hacer esto. Podemos hacer lo
que quieras ahí dentro. Entonces te puedes imaginar que
esta es la app. Y vamos
a querer poner en el componente ahora
en esta área de aplicaciones. Entonces, lo que haces es ir
a Activos y verás, porque creamos un componente, lo hemos convertido en un activo
componente local. Ahora puedes arrastrar
esto al área y verás cómo
podemos luego apilar estos. Entonces si esto es un botón
en aislamiento, genial. Este podría ser un
botón siguiente y un botón de retroceso. Entonces si intentamos la salida, haga esto, copie y pegue. Y ahora tenemos dos botones. Y podemos llamar a
éste, a éste el siguiente. Y podemos hacer doble clic
y hacer algunos de vuelta. Ahora notarás cómo con los activos que has
seleccionado internamente, realmente
puedes cambiar
el texto de estos sin afectar el componente
original. Lo que hará es mantener
todas las animaciones, conservar todos los flujos
como hicimos antes, pero conservará el texto
que es realmente útil. Entonces no tienes que hacer diez versiones del
mismo componente. Puedes hacer una
versión y luego seguir cambiándola en tu área
principal de trabajo. Entonces este es nuestro botón de retroceso
y nuestro siguiente botón. Y obviamente puedes diseñar
tu área de aplicaciones como desees. Sólo voy a mantenerlo
agradable y sencillo para que podamos poner una pequeña barra en la parte superior para que parezca una especie
de encabezado de un sitio web. Cambia el color. Entonces tal vez, tal vez estamos
haciendo alguna forma. A lo mejor esto, a lo mejor
esta es una forma. Entonces hagamos esto blanco. Se puede agregar un efecto. Si haces clic en él, por defecto, muestra una sombra paralela. Podemos agregar algún radio. Nuevamente, todas las cosas que
aprendiste ya en la clase. Y si vuelvo a las capas, verás cómo se asienta
dentro del marco. Entonces, si hago clic en
la herramienta de alineación, automáticamente
irá al
centro de ese marco. Ahora bien, de nuevo, se puede imaginar que
esto es algún tipo de forma. Y sólo para
mostrarlo siendo una forma, voy a poner en algunas líneas. Entonces aquí es donde
tendrías tu nombre y correo electrónico, etcétera. Y ahora vamos a probarlo. Entonces esta es la
parte donde puedes ver cómo funcionan tus animaciones. Entonces, si haces clic en el marco uno y luego vas
a este ícono de reproducción, automáticamente
lo
cargará en un entorno
similar a una aplicación. Entonces, si hago clic en Reproducir, y
alejemos un poco, vamos a encajar a la pantalla, porque obviamente hemos hecho una aplicación muy
grande, grande aquí. Pero verás aquí
cómo tenemos los botones. Y si repaso estos botones, verás como ahora
tienen esos efectos de animación. Ahora de nuevo,
lo mejor hace que el proceso de diseño de componentes sea
muy, muy fácil. Porque como puedes
imaginar, si tuvieras que hacer manualmente todos estos
botones y hacer manualmente todos esos flujos por
cada fotograma de tu app,
tardaría una eternidad. Y en este ejemplo
se puede ver como si voy a copiar y pegar,
hacer un segundo fotograma. Y sólo para mostrar cómo funciona esto, puedes ir aquí y cambiar, cambiar este fondo para que sea una
página diferente a diferente, si quieres. Entonces eliminaremos
esto, eliminaremos estos, y cambiaremos el fondo para que podamos ver que
es una app diferente. De hecho, podemos animar estos botones para que funcionen de la misma manera. Entonces, si hago clic en esto
y voy en prototipo, realidad
puedo hacer que
este propio flujo de Hábitos. Así que no solo recordará
el componente original, las animaciones y los flujos,
sino que también podrá agregar adicionales de flujo y prototipos direcciones
adicionales de flujo y prototiposa la
interfaz real en la que esté trabajando. Entonces, si voy al prototipo, verás como ya
tiene la interacción hover, pero puedes hacerlo
donde haga clic, haría otra cosa. Entonces, si hago esto
y lo arrastro aquí, verás cómo se suma
en una segunda interacción. Tienes que variar la interacción y en tu tener la tuya
que estás haciendo. En este estamos
diciendo onclick, navega hasta el segundo fotograma. Y luego en este marco
queremos ser opuestos. Entonces, si hacemos click atrás, esto vuelve a esa página. Entonces veamos cómo se ve
eso. Voy aquí, haga clic en Siguiente. Abre el nuevo marco. Atrás. Abre el marco anterior.
7. Conclusión de clase: Realmente fácil, muy
sencillo de hacer. Y puedes
ver rápidamente cómo puedes crear algunos diseños realmente útiles y eficientes en el
tiempo muy rápidamente usando los
componentes y Figma. Y lo que me
gustaría ver es que creas un mapa propio o una app o adaptas
una aplicación, un dashboard, y solo
creas algunos botones. Y veamos cómo van
esas animaciones. Y voy a estar siguiendo a los de nuestra área de proyectos de la clase. Así que asegúrate una vez que
hayas hecho eso, tomas algunas
capturas de pantalla o subes algunos videos para que
podamos ver cómo te va. Y si tienes alguna duda, no dudes en dejarlas
en el área de preguntas. Y la reseña
siempre fue muy útil. Gracias por
ver esta clase. Y si te gusta que
profundice en los componentes, podemos hacer algunos
realmente complejos que
tienen muchas variantes y muchos prototipos de flujo. Gracias, y
te veré en la siguiente clase.
Saad Bhatty, GeoTiktoker and UX/UI Designer
