Transcripciones
1. Te damos la bienvenida a mi curso para principiantes de diseño de UX: Hola, bienvenidos a mi
clase Figma en Skillshare, donde vamos a estar mirando el maravilloso mundo del diseño
de UX. Ahora muchas veces cuando las personas
ingresan al espacio de diseño de UX, realmente querían empezar
a hacer aplicaciones y
absolutas tus teléfonos y volverse realmente creativos
con sus conceptos de diseño. Y a menudo una de las cosas más pasadas
por alto cuando se
trata del diseño de UX o
las micro animaciones o los pequeños
cambios estéticos que los diseñadores de UX agregan
a sus aplicaciones para realmente agregar algo de estilo. Y una de las cosas
que podemos estar haciendo en
esta clase en general es
pasar por diferentes
técnicas que los usuarios pueden implementar para mejorar realmente
la experiencia de diseño UX. Esta es una clase abierta, lo que significa que voy a estar
agregando constantemente en nuevos videos cada semana en función comentarios y cualquier pregunta
que se produzca. Y hasta ahora he
reunido tres clases dentro de
esta lección de figma. Y van a
mirar tres componentes principales. Entonces por el momento tal como está, tenemos como crear botones de
hamburguesa, que son esencialmente opciones de
menú que transforman en botones circulares de
cierre. Por lo que al hacer clic en esto lo
cambiará en este ícono. Estamos mirando deslizadores. Así que al hacer clic
en un interruptor de apagado, es diapositivas al encendido y etcétera Entonces, por último, tenemos esta bonita interfaz móvil que he creado llamada pictórica para los fines de esta clase. Y cómo hacer un mensajero
horizontal estilo lazos de redes
sociales. Entonces un ejemplo como este
sería aquí donde se puede desplazarse y ver qué
amigos que tal vez en línea. Entonces esto es lo que
tenemos en la estrella. Y durante esta
clase, después, pretendo que seas capaz de
recrear lo que ves
aquí son vista amistosa. Y obviamente a medida
que hago más clases, se sumarán
más cosas en. Así que asegúrate de que si decides inscribirte en
esta clase que te quedas y
ten cuidado con cualquier correo electrónico. Yo publico eso en las discusiones. Nuevamente, si te gusta lo
que ves y te interesa unirte a
mí en este curso. Definitivamente inscribirte ahora y te
veré del otro lado.
2. Hacer el botón de hamburguesa de menú: Hola. En esta clase corta, vamos a estar usando el
software de diseño UX conocido como Figma. Se trata de una herramienta muy versátil
y completa para permitirle
crear prototipos, wireframing, y diferentes interfaces de diseño de
usuario para sus aplicaciones,
escritorio, móvil, etc. Y en particular en esta
clase es va a ser una corta. Y vamos a
apuntar específicamente a micro animaciones. Ahora las cuatro imágenes que
ves frente a ti son esencialmente dos flujos
como el código y Figma. Y son tipos de botones. Entonces la de arriba es con
lo que todos estarán familiarizados, que es un típico estilo de menú de
hamburguesas. Y luego
se abre el hábito al hacer clic en eso, queremos que se cambie y se mueva al botón de cierre
circular. Y lo mismo va aquí en la
parte inferior donde tenemos uno de esos clásicos botones deslizantes donde se hace clic en el
apagado al encender,
él, hacer clic en el encendido y se apaga. Por lo que estos deslizadores revierten azulejo. A menudo se pueden utilizar en diferentes
aplicaciones móviles o interfaces de
tablero para los
softwares y servicios modernos. Solo para ponernos en marcha,
empecemos con una demostración para
mostrarte cómo se ven estos. Ir a la página uno,
que esencialmente es hacer clic en el botón más
en la esquina superior derecha. Verás los dos flujos aquí. Entonces si hago clic en esto, verás cómo anima ida y vuelta de
un off a un on. Y lo mismo va a
éste también, apagado y encendido. Ahora, una vez
que obviamente los creas, podrás ponerlos en tus propias interfaces de dashboard o aplicaciones móviles
dentro de Figma. O si estás utilizando
cualquier otro software como Adobe XD o Sketch, también
serán
procesos similares en eso. Pero un video más tarde en eso. Vamos a desglosar
lo que tenemos aquí. Entonces lo que vamos a
hacer es empezar con los sistemas de menú de hamburguesas. Así que vamos a deshacernos de esos dos botones y centrémonos
únicamente en estos dos aquí. En la esquina superior izquierda
verás diferentes iconos. Si tienes el encuadre de la Herramienta
Mover, tienes el
panel de activos donde
obviamente puedes elegir los
diferentes tipos de formas. Texto del lápiz, movimiento de la mano para que pueda desplazarse alrededor del lienzo
y agregar comentarios. En este particular, vamos a empezar
recreando estos botones
y los flujos de animación. Entonces empecemos
haciendo eso. ¿Deberíamos? Primero las cosas primero
vamos a empezar con un bonito rectángulo y
queremos un bonito cuadrado. Al sostener turno,
puedes conseguir un lindo cubo. Y vamos a hacer
esto aquí automáticamente. Ya verás, pero Tango tres pop-up aquí
en la parte superior izquierda. Y este esencialmente
va a ser nuestro nuevo botón. Así que ahora vamos a trabajar en el CSS o la estética
de la plaza. En el lado derecho aquí, lo que queremos hacer es tratar mantener estos como números enteros. Así que voy a poner esto a 130. Y eso va a ir
automáticamente a 130 porque hemos
cambiado vinculado en eso. Vamos a dar una frontera. Sobre este particular. Tenemos un tablero un valor de 27. Hagamos lo mismo
en este de aquí. Por lo que vamos a hacer click sobre
este cuadrado, este rectángulo, pincha aquí y ponerlo
como 2772, lo siento, 27. Ahora tenemos una bonita curva, un borde cuadrado, redondeado, una
especie de cubo. Ahora vamos a cambiar el color así que queremos que sea
bonito y blanco. Y para darle
ese efecto estándar, vamos a
darle una sombra paralela. Entonces si voy a Efectos, click en esto y por defecto siempre
te dará una sombra paralela, que luego podrás
editar haciendo clic en este ícono de sunburst que
tiene los ajustes de efecto. Doy clic en esto. Queremos asegurarnos de que
este botón tenga igual sombra
caída alrededor de
todos los lados. Entonces vamos a
hacer este eje Y 0, que se puede ver aquí, beneficio. Ahora, lo que vamos a
hacer es convertir este botón
en su propio marco. Ahora un fotograma te permite hacer animaciones de flujo
prototipo
a otro fotograma, ya sea haciendo clic, arrastrando, flotando, introduciendo un ratón, moviendo el ratón
alrededor del puerto. Eso esencialmente te
permite crear la animación donde haces clic en esto y va a
ese fotograma aquí. Para que puedas hacer clic aquí, haz clic
con el botón derecho en la selección Vamos a llamar a
esta hamburguesa. Entonces vamos a
sumar en algunas líneas. Así que vamos a ir aquí a la herramienta de
formas elegir línea. Entonces arrastremos
esto por aquí. Podemos
hacer esencialmente es asegurarnos de que éstos surjan al centro. Después copia pega tres veces. Y vamos a traer
esto por aquí como tal. Ahora tenemos tres
líneas y sólo para hacerlas un poco más audaces, vamos a aumentar el nivel de
peso a alrededor cinco y luego dejarlas caer
al centro. Perfecto. Ahora para igualar esto, vamos a hacer
esto un poco más pequeño. Mantenga Turno para mantenerlo en línea. Y lo vamos a poner
a mitad de camino. Ahora lo que tenemos es un icono de hamburguesa de
menú. Ahora, lo que vamos a
hacer ahora es hacer, para asegurarnos de que cuando lo
hagas en la animación, en la configuración del prototipo, que haga ese efecto de morphing de
transformación es que vamos a copiar y pegar todo este marco de hamburguesa. Así que copia pega y luego
arrástrelo hacia un costado por lo que tenemos algún
área clara entre ellos. Ahora vamos a editar
éste para que, Figma automáticamente
reconoce que estás usando las mismas formas y
líneas y
vas a querer animar y
mover esas por la línea. Si voy aquí y cambio el nombre de
este para cerrar icono, ahora tengo este marco
llamado icono de cierre. Ahora, la parte divertida. Ahora llegamos a meternos con
este marco y cambiarlo. Entonces si cierro la hamburguesa, esa manera, no vamos a tocar
accidentalmente este botón y empezamos a trabajar aquí. Entonces hagamos esto
en un círculo. Podemos hacer esto simplemente arrastrando este
radio de esquina
hasta el infinito raramente, porque siempre
va a ser un bonito círculo. Ahora vamos a trabajar en asegurarnos de que estos se
conviertan en cruces. Una de las formas más fáciles de
hacerlo es seleccionar los tres y hacer clic en centro centralizado
y en línea. Pero obviamente sabemos que éste estaba en el
lado izquierdo. Entonces si agregamos ángulos,
estas líneas, no
se alinearán correctamente. Tenemos que asegurarnos de
que los enviamos también. Ahora lo que hacemos es que solo
uno-por-uno agregamos ángulos. Entonces hagamos esto 45 grados, hagamos otros 145 grados. Y luego hacer éste menos
45 que tenemos a través. En realidad podemos dar algo
de color a estos iconos. Entonces si vamos a la herramienta
hamburguesa, sostenemos, turno y pulsamos, podemos hacer de
éstos un bonito color verde. Y podemos hacer de esta
cruz un color rojo. Entonces ahora tenemos verde y rojo, y no podemos llegar
al proceso de animación. Demos clic en este marco de
hamburguesa. Vaya a Prototipo, haga clic en onclick. Queremos navegar
para cerrar icono. Haga clic en Smart Animate
porque automáticamente dará una especie realmente agradable de efecto
de morphing y luego elegirá facilidad
dentro y fuera atrás. Esto permitirá que el ícono tenga
esa animación primaveral antes de que se transforme en el círculo que
verá en un momento. Hagamos esto
650 milisegundos. De esa manera le estamos
dando tiempo suficiente para tener una bonita animación fluida y no te la pierdas
al hacer clic en ella. Y podemos repetir el
mismo proceso para ícono. Ahora tienes la opción de ir a un prototipo y pincha
aquí en Agregar más. Pero otra forma de
hacerlo es arrastrar la flecha al marco anterior y
automáticamente hará clic en
la hamburguesa. Elige mi animate. Está en una app de vuelta 650
MS. Entonces ahí la tienes. Entonces si vas a ver esto,
buen fluido, se morfa, se ve bien y se ve
moderno y duerme para tus aplicaciones y tus interfaces de
tablero. Esa fue la primera. Lo vamos a hacer es enfocarnos en el segundo que
tiene un botón deslizador.
3. Hacer el botón deslizante y los comentarios de cierre: Ahora si pongo todos estos ocultos y los
miramos aquí, estos son esencialmente
una serie de rectángulos con bordes curvos y círculos y pequeñas animaciones. Ahora obviamente
mirando el primero, se
puede ver lo fácil que va a ser
éste también. Puedes conseguir
micro animaciones más complejas, que haremos
en una clase posterior. Pero para éste,
vamos a apegarnos a las animaciones
básicas de la sonrisa
solo para que empiece y para
tener una buena sensación. Ahora, vamos a
replicar el candado esto para que no los toquemos y esencialmente recrear esto. Lo primero que vamos a hacer
es poner en una nueva plaza. Voy a tratar de tratar de
hacer estos iguales En lente, pero está bien si no. Y vamos a ir a Diseño y similar
al botón anterior, vamos a dar un radio. Y en este caso
vamos a llegar
al 100% porque queremos
un bonito cilindro. Entonces mira. Cambiemos el color. Hagámoslo blanco
y un desplegable. Ahora, para éste,
voy a mantener el menú desplegable
abajo porque normalmente
botones y deslizadores,
botones, tienen un efecto de sombra
desplegable en la mitad inferior. Para elevarlo realmente desde la interfaz de tablero en la
que están. Ahora vamos a
sumar en un círculo, que va a ser el,
el botón o el interruptor. Si sostienes Shift, excepto
que puedes ver aquí lo hace, hace un bonito círculo entero. Y vamos a
colocar esto aquí. Control de zoom. Perfecto. Lo que vamos a
hacer es hacer esto rojo porque ese es el interruptor de apagado. Eso es
realmente, realmente brillante. Hagamos esto un poco menos. Ahí vamos. Si lo desea, puede usar la herramienta cuentagotas, pero vamos a suponer que no ha hecho
uno de estos antes. También vamos a
poner en un cuadro de texto. Así que vamos a cancelar esto y
ponernos aquí en el centro. Este es nuestro interruptor de apagado. Para hacer rápidamente
este proceso fácil. Eso es copiar y pegar, arrastrar hacia fuera. Tenemos el cambio de círculo
a un bonito color verde. Entonces eso obviamente va a
representar el interruptor de encendido. Y si cierro estos dos, entonces entonces sólo podemos trabajar
con estas dos opciones aquí. Vamos a animar
estos ahora en consecuencia. Entonces primero las cosas primero, tenemos que hacer estos
en marcos para que podamos animarlos amablemente. Así que voy a seleccionar todos
estos marco del botón derecho. Esto está apagado slider. Lo mismo ocurre con esta selección de fotogramas
con clic derecho. Voy a llamar a
esto en slider. Como lo hicimos antes. Van a hacer click
aquí, consiguieron un prototipo. Arrastra esta flecha a este marco. Y ya verás porque estamos trabajando dentro del mismo lienzo, se guardará la animación
anterior. Y vamos a
hacer lo mismo aquí, conseguir esta flecha, y volver a ponerla. Ahora obviamente, puede que no
queramos tener unas pequeñas animaciones. Podemos querer tener animación
lineal es animaciones muy simples. Puede que no deseemos tener
la facilidad de entrada y facilidad de salida. Entonces para un botón no tiene mucho
sentido tener un botón springy antes de que se
deslice hacia la izquierda o deslice hacia la derecha. Así que vamos a hacer más facilidad en y hacer que éste también tenga
el mismo efecto está en. Ahora, si haces una carrera de práctica, esto es flujo para flow for. Haga clic en él. Verás cómo ha funcionado. Pero el botón no se ha movido. Entonces todo lo que tenemos que
hacer es volver
al turno de área de diseño y mover este texto al turno izquierdo
y mover esto hacia la derecha. De esa manera, el botón
ahora tendrá un efecto de morphing. Esta es una facilidad hacia fuera
funciona muy bien cuando obviamente
buscas un interruptor de algún tipo e ícono. Pero probablemente te darás
cuenta porque solo
tiene una facilidad en ella no
tiene ese efecto de deslizamiento de la
misma manera que éste lo hace. Entonces si acabo de cerrar esto, número dos, verás
cómo se mueve esto. Eso sólo porque hemos elegido un tipo diferente de animación. En éste, verás
aquí cómo elegimos tener animación
pequeña está
dentro y hacia atrás. Por eso tenemos
este efecto de botón. tanto que la afluencia para ello
era simplemente una diapositiva. Fue, no tuve ese
efecto, así que podemos añadir eso en. Entonces si venimos aquí a fluir cuatro, ven aquí, escoge
estos adentro, apaciguar. Y luego diciendo por éste, ve aquí, el flujo, fluyen cuatro. Verás cómo
funciona bastante bien. Entonces. Nuevamente, estas son sólo dos opciones
que hay que hacer para hacer botones y los diferentes estilos de
animación también. Sí, espero, espero que te haya parecido interesante
esta lección. En futuras lecciones, en
realidad vamos a trabajar en hacer una interfaz de
usuario real que realmente emocionantes. Y espero verte ahí. Y si tienes alguna pregunta, definitivamente déjalos en la sección de
comentarios de esta clase. Y espero ver tus proyectos como uno de
los entregables que me gustaría ver en esta clase es que tengas tu propia interfaz, o al menos a nivel básico, solo teniendo un lienzo
con todos estos botones en y dándome el archivo Figma y puedo
abrirlos o puedes publicar un video y podemos pasar por él y te voy a dar
alguna retroalimentación. Si tiene alguna
pregunta, no dude en
dejarlas en la sección de
comentarios a continuación. Muchas gracias
y cuídate.
4. Crear una barra de retratos sociales de desplazamiento horizontal: Hola. En esta clase vamos
a estar buscando crear una barra de desplazamiento
horizontal interactiva en una aplicación o servicio
o panel de control. Y esto va a tener iconos de los
votantes de retrato de la gente ahí dentro. Y como se puede ver aquí
en la animación fluida, se
puede ver lo
bien que se desplaza a través diferentes personas en esa
parte de la parte superior que hay. Una de las cosas realmente útiles esto es que te
permite
administrar realmente tu inmobiliaria
de tu app de manera suficiente. Para empezar,
vamos a hacer
un marco y
vamos a elegir el iPhone 13 Pro Max ya que este es un teléfono bastante
común en estos días. Y vamos a sumar algunos bordes
redondeados a alrededor de eso. Ahora lo siguiente que
vamos a hacer es que
vamos a poner en algún tipo
de líneas en la parte superior. Por lo que esto va a replicar el botón de menú de hamburguesas que hicimos en los videos
anteriores. Por lo que eres bienvenido a importar
eso y si quieres. Pero para el propósito
de este ejercicio, sólo
vamos a hacer una estáticos duplicados
tipo de opción de menú, que obviamente no tiene animaciones de
flujo con ellos. Digamos que vamos
a aumentar un poco el volumen de
trazo ahí para que se vea bien y
visible desde más lejos. Lo siguiente que vamos a hacer es que vamos a
crear una barra de búsqueda. Así que las barras de búsqueda, obviamente
muy comunes en las aplicaciones móviles, agregarán algunas
esquinas redondeadas allí. Por lo que hace como una forma de salchicha de
cilindro largo. Vamos a cambiar los colores para que sea más
parecido a una barra de búsqueda. Entonces en este caso, tener
algunas agradables sombras, que son muy comunes, por lo que
destaca por encima de la página. A continuación, vamos a sumar
en algunas líneas divisorias. Por lo que estas son obviamente
muy buenas para
ayudar a separar diferentes
paletas de un tablero. Y la razón por la
que estamos haciendo todas estas cosas es porque para
que esa
experiencia de desplazamiento horizontal sea agradable, queremos darle al menos
algún contexto ahí. Por lo que ahora vamos a empezar a hacer el pergamino
horizontal real. Entonces vamos a hacer
una serie de círculos todos rentas iguales y
distancias unos de otros. Y vamos a
crear algunos de estos que salgan de la página que en realidad
podemos tener
ese efecto de desplazamiento. Ahora una de las cosas que me gusta
hacer es agruparlas por completo solo para que sepamos
dónde están y dónde se van
a sentar fuera de la página. Pero lo que es más importante, los
vamos a poner
en unos fotogramas que podemos agregar una animación de
desplazamiento prototipo a solo ese fotograma en particular. Por el momento se puede
ver que hemos recortado y entramos a conseguir el marco. Lo estoy arrastrando al
área del teléfono para que cualquier otro círculo que
esté en ese marco más allá de
él se recorte. Y a medida que nos movemos horizontalmente, se
mostrarán. Lo primero es que vamos a hacer, es ir al área de plugins. Si no tienes esto, ve al mercado
plugins administrados y encuentra cualquier
plugins que estoy usando Unsplash ya que es sólo muy buen lugar para
obtener fotos gratis, que ya es gratis. Podemos elegir dos imágenes aquí. Solo voy a
elegir algunas imágenes de
retratos aleatorios que
serán útiles y agradables para este desplazamiento
horizontal particular en estado o
interfaz de perfil en línea que estamos haciendo. Una de las cosas para
darse cuenta de esto es
que estamos haciendo una
versión horizontal aquí. Pero si fueras a hacer una opción de desplazamiento
vertical, el proceso es mucho el
mismo donde tienes un marco. Dentro de un marco puedes
contar todos los activos, las formas, las imágenes, las líneas, el texto, donde quieras
incluir en ese marco. Y luego puedes
optar por
hacerlo de
desplazamiento horizontal o puedes optar por hacerlo de desplazamiento
vertical. Que obviamente es cuál es el objetivo
principal de la clase de hoy. Si no has hecho las herramientas de la hamburguesa o no
has hecho
los botones antes. Mira los otros dos videos
de esta clase para aprender más sobre eso como
realmente útil. Entonces ahora lo que vamos a
hacer es que vamos a hacer las imágenes más pequeñas
que realmente podamos trabajar con estas y
enmascarar las imágenes. Por lo que pones una imagen
encima de la forma, selecciónelas ambas juntas
e ir a usar como máscara. Entonces puedes arrastrar la imagen
y colocarla en el centro. Y entonces lo que vamos a
hacer es repetir este proceso para las imágenes
restantes. Como obviamente,
da una vibra realmente agradable, casi como Messenger,
facebook. Historias de Instagram,
dondequiera que estés haciendo este otoño. Se trata de
asegurarse de que las imágenes encajen muy bien dentro del
círculo, las formas. Entonces a medida que pasamos por esto, ya
verás cómo
poco a poco comienza a parecerse a una de esas apps
más sociales, que seamos honestos, es muy común en estos días
tener este tipo de desplazamiento barras
horizontales circulares, que o bien representan historias, feeds, en línea, usuarios
y cosas por el estilo. Verás en el
lado izquierdo aquí cómo tenemos diferentes grupos de
máscaras. Ahora, los grupos de máscaras son obviamente puedes hacer
aquellos en cualquier tipo de forma. Aquí hemos elegido una forma
circular. Pero ya verás cómo las máscaras actualmente se esconden
detrás de ese marco. Vamos a sacarlos
del marco. Y. Masa una ellas sin enmarcar. Perdón, ¿qué
acabas de ir a aplanar? Si los desagrupa a
todos, van a salir. Y lo que vamos a
hacer es conseguir una máscara, estos dos círculos
que fuera de la pantalla, luego los colocamos de nuevo en
el marco original. Entonces usa máscara, arrastra eso. Hagamos que encaje muy bien. Y ahora vamos a
arrastrar esos dos círculos, esas dos máscaras y ponerlos de
nuevo en el iPhone 13. Y solo para asegurarse
de que todos esos objetos masivos estén enmarcados, haga clic con el botón derecho en la selección de
marcos, y luego asegúrese de que
recorté que solo le dé un buen nombre de
fondo su contenido. Acortar el marco a la
extensión de la ventana visible, y luego alinearlo en la parte inferior
para mostrar eso como un divisor. Y luego wallah,
tienes una región en la pantalla que representa
una división horizontal de la barra. Ahora, obviamente por
el momento
no hay animación y luego
fluye en esto. Así que sólo para obviamente hacer que
todo lo demás se vea fiar, añadir
rápidamente en un cuadro a continuación. Así que imagina que esto es como
una publicación de Instagram o algo donde solo
queremos tener una imagen ahí. Ahora vamos a
volver a ese marco. Vamos a ir al prototipo. Y podemos elegir un método de
desplazamiento, y vamos a elegir el desplazamiento
horizontal. Esto permitirá
que ese marco se mueva a izquierda y derecha de la pantalla, siempre y cuando esté recortado y el marco estuviera
dentro de la ventana, esto funcionará perfectamente. Por lo
que te mostraremos que en un segundo cuando hacemos clic en el botón Reproducir y déjame venir
aquí y
verás cómo darte un momento. Ahí vamos. Tenemos
un bar que tiene una bonita animación de desplazamiento. Ahora obviamente esta es la
más básica de las barras de desplazamiento. Puedes tener diferentes efectos de
animación que puedas hacer. Puedes agregar tantos flujos
como quisieras a esto. Pero en pocas palabras, eso es realmente cómo hacer
una barra vertical u horizontal, en este caso barra de desplazamiento. Estos son obviamente muy
útiles en todo tipo de partes. Ahora bien, si tratáramos de hacer esto una función de chat
o función de estado, podrías ir a hacer pequeños círculos y
ponerlos en la parte superior. Entonces esto es algo así como
lo que hace el mensajero. Desgaste. El verde obviamente
significa que están activos. Y el naranja o
un rojo significa que ocupado o de otra manera o gris normalmente significa
si están fuera de línea. Se puede ver aquí
agrupándolos con los círculos, se
puede hacer un poco de iconos de color de
rejilla para reflejar el hecho de que estos usos que ya sea en línea o
en este caso en este momento. Va a ser una forma simplemente
cambiando el color
a algo un poco más parecido al sistema
de semáforos. Aquí se puede ver cómo funcionan. Ahora otro objeto que puedes hacer es agregar algunas funciones de información sobre herramientas. Así que las sugerencias de herramientas son básicamente efectos de
desplazamiento en los
que si pasas el cursor sobre algo, cuando haces clic en
algo, se
creará tendrá una punta de herramienta
emergente. Entonces en este caso particular, podemos poner algo así
como en línea. Entonces, si alguien
pasa el puntero o hace clic en el usuario,
básicamente esclavo. Básicamente dirá si
están en línea o no. Lo cual de nuevo, es realmente útil
si estás tratando de hacer una app social que tenga interactividad y
chat social y mensajería. Puede que no tengas eso. Entonces esta parte de la clase
tal vez completamente relevante, pero siempre es bueno
saber hacer estas cosas y
cómo incorporar animaciones
prototipo
y conectarlas a animaciones en movimiento
son mover barras de desplazamiento, como se puede ver en la
aplicación en la pantalla. Aquí, solo haciendo el texto
y la forma a la izquierda, del tamaño correcto, dándole una bonita sombra paralela y centro
y alineando todo. Y esto puede ser un poco pequeño. Potencialmente. Podríamos
haberlo hecho más grande, pero podemos, podemos comprobar
y ver cómo se ve. En el área de visualización del prototipo. Vamos a
enmarcar esto para que en realidad
podamos hacer esos. En este
caso particular, vamos a hacerlos componentes porque es
posible que deseemos duplicar este componente a todas
las demás imágenes
más tarde por la línea. Y lo que vamos a hacer es hacer una introducción
en la barra verde, donde el círculo verde
mientras, mientras estamos flotando o mientras estamos tocando
en este caso particular, abra la superposición
y vamos a elegir ese consejo de herramienta en línea. Y luego vamos a
hacerlo manual para que
podamos elegir dónde
viene
esa punta de herramienta cuando pasas el cursor sobre ella
o haces clic en ella y disuelves, eso hace un agradable desvanecerse lento
en la animación de fade out. Puedes dar click en eso y
verás cómo se abre ahora, como dijimos, demasiado pequeño. Así que hagamos eso
un poco más grande para que el usuario pueda realmente
ver lo que está pasando. Eso es bonito, grande ahí. Y luego vamos a
la pestaña de diseño y
cambiemos esto a, digamos 11 porque ese trabajo,
sí, eso se ve que se
ve bastante bien. Es posible que tengas que alinear
eso en el centro. Porque el online se ve un
poco demasiado alto en la parte superior. Al fondo. De nuevo, a veces es
puede ser un poco incómodo, pero eso ahora va a ser mucho
más grande. Para que puedas ver aquí. Pero actualmente tenemos un siempre
en lo que tenemos que hacer es habilitar al usuario una vez que haga clic lejos de
ese botón verde. Ese cierre cuando se hace clic
en el exterior. Eso significa que cuando
alguien hace clic en el exterior, desaparecerá. Ahí lo tienes. Tienes una bonita barra de
desplazamiento que tiene animaciones offline en línea. No se puede retrasar efectos y
cosas así a esto. Pero en este caso particular, solo queríamos
hacer una barra de desplazamiento. Y hemos añadido algunos pedacitos
extra en la parte superior para que
se vea más como una aplicación de experiencia social. Obviamente abajo después,
lo que vamos a hacer es pasar al
morfismo de vidrio es el término. Así que básicamente probablemente
notes a la izquierda como una aplicación con todas estas imágenes
que ahora he quitado. Pero en el fondo se
puede ver ese bonito efecto azul
puramente borroso donde todos los activos
y capas están por encima de él. Y se ve bastante cool. Así que definitivamente ten
cuidado con el siguiente video esta clase donde
vamos a hablar sobre morfismo de
vidrio y
cómo hacerlo muy fácil. Y sólo cuídate.
5. Cómo hacer fondos de glassmorphic a aplicaciones: Hola, bienvenidos a la próxima clase en esta clase figma Skillshare. Ahora, previamente miramos la creación de barras de desplazamiento horizontales, y hoy vamos a
mirar el morfismo de vidrio. Por último, el morfismo es este efecto que muchas aplicaciones y
software se utilizan estos días para ayudar a
agregar una capa de profundidad a un software
o una aplicación. En este caso particular,
podemos ver aquí tenemos nuestra
app tipo instagram llamada pictórica. Y tenemos este bonito fondo azul
y morado, que tiene un bonito desenfoque o efecto mórfico de
cristal. Y realmente ayuda a
que las imágenes y el perfil
destaquen en esta aplicación. Lo que vamos a hacer es enfocarnos
en crear esto hoy. Y es una técnica realmente
fácil y
realmente ayuda a sacar y hacer que tu app
se vea más creativa. Entonces si acabo de apagar esto aquí, verás que
tenemos este marco de este iPhone 13 Max Pro. Y se puede ver cómo agregar
este efecto mórfico de vidrio realmente
puede agregar esa
profundidad adicional a la imagen. Lo que vamos a hacer es que
vamos a
abrir lo que nuestro
teléfono anterior que hicimos, que tenía todos los botones de
hamburguesa
y los botones de la barra de desplazamiento
ahí. Y vamos a aplicar
un efecto mórfico de vidrio a este teléfono. Vamos a sumergirnos justo en
y te mostraré que este no es un tutorial muy complejo. De hecho, es muy fácil de hacer. Y te voy a mostrar
exactamente cómo hacerlo ahora. Una de las primeras cosas que
queremos hacer es traer una imagen que
creemos que va a parecer realmente genial para el
fondo de este teléfono. Entonces si vamos aquí y vamos a
plug-ins, estoy usando Unsplash. Hay muchos otros
plugins que puedes usar, así que siempre puedo hacer
un video más adelante sobre cómo hacer eso y cómo
agregar complementos a ahí. Pero vamos a usar Unsplash, que tiene
imágenes gratuitas que puedes usar y en realidad puedes reutilizarlas
comercialmente también. Considerando que estamos haciendo una
app cuyo sombrero se centra en torno al usuario y es
una experiencia social. Queremos asegurarnos de que la imagen no sea muy distraente
en la parte posterior. Normalmente cosas como arquitectura
abstracta, espacio, fondos de pantalla, nuestras
texturas son realmente buenas. Entonces echemos un vistazo y veamos
qué fondos de pantalla tenemos. Por lo que estos son geniales. Pero se puede ver cómo
la mayoría de ellos se encuentran más hacia una experiencia de escritorio. Entonces no estoy muy seguro
personalmente de eso. Entonces vamos a las texturas. Aquí vamos, Estos
se ven un poco mejor, pero queremos encontrar
algo que tenga mucha vibración ahí dentro. Si seguimos desplazándonos hacia abajo, podríamos encontrar algo
realmente útil. Pondré esta imagen en la carpeta de proyectos de la clase también en caso de que
quieras reutilizar estos. Pero si no es bienvenido a utilizar
cualquier imagen de su elección. Y obviamente eso te
ayuda a hacer las cosas un poco más personalizadas. ¿ Por qué probamos este? Éste, obviamente,
está pasando mucho. Entonces vamos a hacer click sobre
esto y traerlo. Una de las primeras
cosas que vamos a hacer es escalarla hacia abajo. Por lo que mantenga el turno y báselo
hacia abajo en consecuencia para que se ajuste al diámetro y a las
dimensiones de la pantalla móvil. Lo siguiente que
vamos a hacer es que vamos
a crear un triángulo. Triángulo, lo siento mi
mal, un rectángulo. Vamos a enmascarar eso en el área
inmobiliaria iPhone 13 Pro Max. Entonces hagamos un rectángulo y solo hagamos que caiga en línea con esto
y estirarlo. Entonces si volvemos
al prototipo, veremos que tenemos
un radio fronterizo de 34. Entonces si hago click en este
rectángulo y hago esto 34, verás cómo ahora es muy bien, encaja
muy bien dentro de
esta zona pivote. Entonces ahora lo que podemos hacer es arrastrarlo fuera del marco y lo
vamos a enmascarar. Lo vamos a
enmascarar con esto. Pero, pero antes de que
hagamos eso, vamos a querer
copiarlo y duplicarlo. Voy a poner esto
del otro lado y voy a hacer este blanco. Ya que esto va a ser una superposición
sobre la imagen enmascarada. Volvamos aquí y
seleccionemos esta imagen abstracta
y la imagen detrás de
ella con Shift y mantengamos el botón derecho, úsalo como máscara. Si vuelves a hacer clic, te
permitirá mover
la imagen a cualquier parte de
esta imagen enmascarada. Eso se ve bastante genial. Ahora, lo que vamos a hacer
es que vamos a conseguir esta imagen y arrastrarla
encima de esta imagen enmascarada. Por lo que tenemos el rectángulo 18 aquí. Llamemos a este panel mórfico de
vidrio. Y vamos a
arrastrar esto encima de esta imagen enmascarada
y tirar de ella. Ahora lo que vamos a
hacer es seguir adelante a los efectos y cambiar
sombra paralela para desenfocar fondo. Ahora lo hemos hecho sin embargo
no hay nada que pasa aquí todavía. Aquí es donde vamos
a esta imagen aquí. Y cambiamos el
relleno a alrededor del 25%. Ahora puedes ver aquí
que tenemos una superposición. Que es tan agradable
y translúcido, pero a gusto encaja
sobre la imagen. Pero probablemente te
preguntes, eso es algo borroso pero
no lo suficientemente borroso. Si hacemos clic en el panel mórfico de
cristal, pasa a este ícono aquí y cambia esto y
aumenta el desenfoque. Digamos que lo llamamos 50. Ahora se puede ver
cómo está borrosa, básicamente la imagen detrás de ella. Y da un efecto de vidrio opaco
o translúcido muy bonito , razón por la
que
lo llamamos morfismo de vidrio. Ahora, esto se ve genial,
genial, increíble. Pero, ¿y si quisiéramos
sumar una complejidad? Entonces, ¿y si quisiéramos
agregar más imágenes sobre esto? Entonces lo primero que
vamos a hacer es agruparlo o enmarcarlo. Podemos hacer esto juntos. Y vamos a llamar a
este cristal dolor mórfico. Uno. Vamos a
arrastrar esto dentro del iPhone derecho
a detrás y arrastrarlo y luego poner esto
justo en la parte posterior. De esa manera tenemos un bonito efecto
de fondo. Términos básicos. Esto es, Este es el vidrio, el efecto mórfico de cristal. Si me dirijo
al iPhone anterior, verás
lo similar que tiene el mismo, mismo tipo de aspecto y sensación. Naturalmente, esta imagen aquí tiene un panel blanco blanco en la parte superior, que, obviamente, da esa agradable ruptura distinta entre el
área de menú en la parte superior. Pero en realidad eso es
esencialmente lo mismo. Y una vez que aprendas a hacer
este efecto mórfico de vidrio, en realidad
puedes agregar más
y más capas a esto. Obviamente, si quisieras
tener una capa que separa
esa capa en la parte superior. A modo de ejemplo, podemos ir aquí e ir a Unsplash
y encontrar otro. Vamos a encontrarlo
otra imagen rápida. Lo cual podría ir bien con esto. Entonces vamos a traer esta imagen. Una de las cosas geniales
que puedes hacer es en realidad editar la imagen en la que
esto se mezcla. Si vamos aquí y hacemos un
cuadrado tan igual que antes. En realidad editamos el panel aquí. Entonces pongamos esto aquí abajo y pongamos esto aquí
y hagamos que se dobla. Entonces lo que podemos hacer es enmascarar
esto a esta manera equivocada, redondearla, llevando
esto al frente. Así que haga clic derecho, estoy haciendo clic derecho y centro
frente y la mascota. Igual que, mismo proceso que antes. Y ahora puedes ver aquí lo que
hemos hecho es que hemos añadido, dado a esto una
dimensión extra, una capa extra. Y lo que vamos a hacer es conseguir otro
rectángulo cuadrado, igual que antes. Dibuja sobre este iPhone. Asegúrate de que sea el ancho correcto, la escala correcta. Esto es 34. Asegúrate de que este
rectángulo sea también 34. Entonces vamos a poner esto
encima de esta imagen aquí. Increíble. Y vamos a añadir
un desenfoque de fondo, hacerlo 50, y
luego hacer esto 25, y luego hacerlo blanco. Ahora obviamente, puedes ver
aquí cómo no
pasa exactamente por los bordes porque bastante
naturalmente no lo hemos hecho. Yo también puedo hacer esto 34. Eso es básicamente hacer que el rectángulo de
máscara tenga
un borde también. Y repaso esto como tal. Ahora lo que podemos
hacer es agrupar esto. Sé que he pasado por
esto bastante rápido, pero solo es recapitular
lo que ya he hecho. Y vamos a añadir
esto a la forma. Tal vez queramos, tal vez queramos arrastrar esto un poco más abajo. Disculpas. Porque siempre podemos
arrastrar esto hacia abajo, pero para el propósito de esto, podemos arrastrar esta forma hasta
aquí y luego arrastrar esto hacia abajo. Por lo que ahora tenemos dos efectos mórficos de
vidrio. Lo que podemos hacer entonces es trabajo
y clase mórfica dos. Y ahora tenemos
ambas pinturas. En realidad podemos trabajar
en ellos de manera diferente. Entonces tenemos aquí este panel, que podemos cambiar
para que podamos hacer que éste sea más translúcido
o menos translúcido. Por lo que puede ser 15% y
luego hacer este desenfoque. Veinticinco de esa
manera donde tener más énfasis en la portada en comparación con la anterior. Pero de nuevo, necesariamente
no se ve el más grande. Pero todo el punto
de esta clase es solo mostrarte
lo que puedes y no
puedes hacer y puedes ser realmente
creativo con el morfismo de cristal. Entonces lo que me gustaría que
hicieras es que voy a poner en ambas imágenes
en el área de archivos del proyecto. Y te instaría a que
realmente encuentres tus propias imágenes, pero definitivamente prueba
este efecto y veas cómo se
ve en tus apps y tus dashboards
y haces en Figma. Espero que hayas disfrutado de esta clase. Muy fácil, muy simple. Sólo diez minutos de duración, pero ojalá hayas encontrado
algunas técnicas útiles. Y espero
verte a la próxima clase, que saldrá la próxima semana. Sólo gracias.
Saad Bhatty, GeoTiktoker and UX/UI Designer
