Transcripciones
1. Introduccion: Hola ahí. Esta clase va a
ser sobre el diseño y simple landing page y Sigma junto con animaciones de
Lawdy. A lo mejor escuchaste sobre
cargar animaciones, pero son solo archivos
animados y hacen que tus diseños sean
mucho más atractivos. Así que asegúrate de inscribirte a
esta clase es muy corta. Es más o menos
alrededor de diez a 15 min. Y solo vas a
aprender mucho a usar cuadrículas,
cómo estas dipole graphy, algún tipo de gradientes, también auto-layout de la
cama y además aplicar animaciones de carga
en tu proyecto Figma. Espero verte
en la clase y aun así verte en el siguiente video.
2. ¿Qué son las animaciones de Lottie?: Rápidamente te muestran qué es exactamente la animación de
Lawdy. Quizá nunca se enteró de ello, pero lo más probable es que lo haya visto
definitivamente mientras interactuaba con ellos desde
sitios web o aplicaciones móviles. Así que me encanta ir a travel.com
es solo un montón de
diferentes estudios de casos y casos de
cartera que suben
los diseñadores. Entonces necesito escribir
aquí muchas animaciones para
darte algunos ejemplos. Así que, por ejemplo, haga
clic en este primero. Y en esta imagen se puede ver que está
animada, se mueve. Entonces esto es básicamente lo que es
cargar animación, solo alguna
ilustración interactiva que tenga algún tipo de animación. Este es otro ejemplo
de esta ilustración. Entonces, por ejemplo, en lugar de tener
dos imágenes estáticas simples, puedes tenerla animada. Los beneficios de tener animaciones de
carga es que
son más atractivas, son más curiosas, mantienen la atención de tu
usuario por más tiempo. Entonces es por eso que específicamente
en esta clase la vamos a aplicar a una
simple landing page. No es necesario usar animaciones
laudadas. Si no quieres.
Es solo un bonito complemento. Realmente no
da tanta
visibilidad desde el punto de vista de la
experiencia del usuario, sino que es más por
la estética visual y el engagement para tus usuarios. Entonces, en el siguiente
video, te mostraré exactamente dónde descargar animaciones de luz
gratuitas para
tus proyectos de diseño de Figma.
3. Biblioteca con animaciones de Lottie: En primer lugar, ¿verdad, en realidad
puedes obtener muchas animaciones
para tu diseño Figma? Entonces tengo una muy buena
sugerencia para ti. Eres libre de usarlo, o también eres libre Google otra animación de carga
que puedes encontrar una línea. Entonces la creatina es un sitio web
muy sencillo, es con un creative.com. Puedes ir
aquí mismo y
básicamente puedes descargar diferentes animaciones de
carga, así
como ilustraciones, iconos
animados e iconos. Así que vamos a hacer
clic rápidamente en muchas animaciones. Y aquí mismo
tenemos un montón de opciones
diferentes que podemos
aplicar a nuestros proyectos. Entonces aquí mismo puedes filtrar o quieres ver muchas
animaciones gratis o tal vez si
tienes paquete premium, también
puedes filtrar por ese. Así que volvamos a
las viejas animaciones y rápidamente
te mostraré cómo funciona. También puedes buscarlo
aquí y ver diferentes. Esa es una animación agradable. Entonces por ejemplo tenemos esta animación de
descubrimiento. Si haces clic en él, también puedes básicamente modificar los colores
de esta animación de carga. Entonces por ejemplo quieres hacerlo más azul y en vez de banco, quieres tenerlo verde. Como ejemplo, me encanta crear es mi
sugerencia personal porque puedes obtener muchas
animaciones muy personalizadas para tus proyectos. Me encanta el enlace en la descripción de la
clase donde
puedes ir y crear tu
cuenta gratis. Entonces específicamente para esta, solo usaremos una
animación de lotería, pero si por ejemplo
tienes algo de inspiración,
eres libre de descargar más cosas y experimentar
con tu diseño de interfaz de usuario.
4. Diseño de páginas de aterrizaje: Ahora vamos a nuestro archivo Figma. Y antes que nada,
crearemos un marco de escritorio, como siempre lo hacemos
en nuestros tutoriales. También
configurará rápidamente la cuadrícula de diseño. Y van a ser columnas
con un conteo de 12. Y sólo voy a
establecer los márgenes en ambos lados para el
valor de 56 píxeles, Gadara entre las columnas, que va a ser de 24 píxeles. Eso vamos a seleccionar
la herramienta Texto y
vamos a escribir nuestro título
o la configuración de fuente. Vamos a cambiar la fuente. Y va a ser
también fuente negrita con la configuración con un
tamaño de 60 píxeles. Entonces aquí mismo es
un poco demasiado grande, así que vamos a disminuir
el ancho de este contenedor. Y también lo
colocaré justo aquí donde realmente comienza la primera
columna. Ahora vamos a duplicar
esta capa de texto con el atajo de teclas control
más D. E inmediatamente cambiaremos
las propiedades a regulares. Y además nuestro tamaño de fuente
va a ser de 24 pixeles. Eso también cambiará el color de
relleno de las pilas. Y solo voy
a escribir también algunas cosas que acabo de
encontrar al azar en línea. Y asegurémonos de que
también esté correctamente alineado con
la primera columna de
nuestra cuadrícula de diseño. Entonces vamos a crear
realmente nuestros botones de llamada a la acción
van a ser dos botones, los primarios y los
secundarios. Entonces el primero
va a tener un texto que es empezar a
construir de forma gratuita. También seleccionaré
todo aquí mismo en esta capa de texto y haré
clic en todo el camino hacia arriba. Entonces lo tendremos así. Entonces voy a
trabajarnos con auto-layout, hacerlo más receptivo, porque voy a reutilizar
este botón algunas veces más. Vamos a hacer clic en Shift
más un atajo. Y como puedes ver
en una sección posterior, inmediatamente
creamos
un diseño automático. Entonces vamos a
asegurarnos de que todo esté alineado en el centro. Y entonces también, tendremos nuestros márgenes
horizontales, relleno
horizontal con
un valor de 32 píxeles, y el relleno vertical
con un valor de 16. También quiero crear el radio de esquina con
un valor de ocho. Y entonces no
olvidemos sumar nuestro fracaso porque ahora mismo todo
es transparente. Entonces, lo que el botón más, que ha creado un
relleno sólido y automáticamente es en realidad blanco por lo que realmente
no se puede ver
ninguna diferencia. Pero vamos a
trabajar con gradientes. Así que vamos a seleccionar gradiente lineal. Nuestro primer marcador va a tener este tipo de color azul, y el segundo marcador
tendrá algo más con los tonos morados del color. Asegurémonos también de
que aumentemos la opacidad de nuestro
segundo marcador al 100%. Y simplemente también
modificaré rápidamente la posición de los marcadores y
tal vez solo para
verlo mejor visualmente cómo
se verá. Voy a ocultar nuestra cuadrícula para que podamos verla
con más detalles. Por supuesto, un
gris oscuro con color azul, morado tiene un contraste
muy malo. Entonces, vamos a
cambiarlo a blanco. Y volveré a modificar ligeramente sus marcadores aquí mismo. Vamos a activar de
nuevo nuestra cuadrícula de diseño. También asegúrate de que todo
esté correctamente alineado. Entonces también tendremos
nuestra botella secundaria, que en realidad es solo pilas. Así que consigue una demo. Y en realidad para hacer nuestros
botones un poco más pequeños, volveré a cambiar el tamaño de la fuente
al valle de 18. Se puede ver como va
el auto-layout todo de manera similar
responsivo y
además va a crear un ancho de banda
con medio y lo
mismo voy a repetir
para este botón secundario. Además, iré
rápidamente a los plugins. Tengo instalado este plugin
y la comunidad de pigmentos, y aquí mismo,
solo buscaré el icono. Rápidamente y arrastrémoslo
aquí mismo a nuestra área. Y simplemente
cerraré rápidamente este plug-in
por el momento. Entonces también obtendré la altura de línea al
valle de 24 píxeles y alinearé juntos
ambos de estos elementos y me aseguraré de que
la distancia sea de
ocho píxeles entre
ambos. Parezcamos grupo. Vamos a posicionarlo
un poco más cerca de nuestro botón. Y luego
volveré al icono slugging porque quiero
obtener algunos íconos más que
voy a usar para
nuestro logo y también otra información cuando un
show en nuestra landing page. Así que
busquemos rápidamente uno de los íconos que usaron anteriormente en algunos de
mis proyectos anteriores. Y luego también
colocaré rápidamente algunos
iconos más a este lienzo. Bien,
mantengamos este ícono aquí
mismo por el momento. Y éste,
también voy a cambiar su color, el morado
que uso en nuestro botón. Y vamos a
escribir rápidamente algún tipo de logotipo, nombre, nombre de empresa. También cambiaré el tamaño, el valor de 24, y también las capas vectoriales
dentro de mi fotograma, aumentaré
el ancho del trazo, pero el valor de dos. Vamos a alinear
todo así. Y también lo mantendremos un
poco más cerca el uno del otro. Y eventualmente
también lo agruparé. Entonces solo vamos a escribir
algunos elementos del menú. Lo duplicaré algunas
veces porque voy a
tener otros elementos a los que simplemente
renombraré rápidamente, seleccionaré todas estas capas, luego haga clic en ordenar y
asegurarme de que estén a distancia entre
sí es de 64 píxeles. Y con control más g, me voy a
dar con rapidez también. Alineemos todo
a una sola línea. Y también me aseguraré de
que nuestro logo esté alineado con otros elementos aquí mismo
en el lado izquierdo también. Vamos a poner realmente nuestros casos de uso para que también
esté alineado con nuestra
columna. Bien, ahora puedo
duplicar rápidamente este botón
va a controlar más D y colocarlo aquí mismo porque me gustaría tener
otra llamada a la acción, que es la tercera libre. Y luego me aseguraré de que el contenedor de las
pilas tenga
ancho fijo porque volveremos a duplicar el fondo y
tendremos otro botón secundario. Y el texto aquí podría
ser un poco más corto y
no quiero que se
encoja responsablemente a su manera. Así que vamos a parar aquí, sine n, y vamos a alinear
el centro con el medio. Y se puede ver
que el ancho
del contenedor simplemente sigue siendo
el mismo porque lo
hicimos fijo. Con nuestro cinturón. Vamos a tener simplemente relleno sólido simple
con un color blanco y agregaremos algún trazo con
un valor de un píxel. Y también nuestro texto
va a tener color oscuro. Entonces ECS que acabamos de crear otro botón que
simplemente lo colocaremos aquí mismo, 24 pixeles del otro. Agrupemos también
estas capas y
asegurémonos de que estén alineadas
con la última columna. Y también vamos a alinear
todo al centro. Bien, perfecto. Ahora tenemos también esta cosa que sólo vamos a ir aquí mismo. Y sólo voy a disminuir su valor a 16 por 16 píxeles. Y cada uno de los vectores, quiero reducir su
peso de trazo al valor de uno. Y vamos a escribir algunas
características para este proyecto, cambiarlo a lo normal. Y también nuestra altura de línea
va a ser 16 píxeles porque los
dos, es un poco demasiado. Entonces solo
tengamos una distancia de
cuatro píxeles entre cada uno de ellos
y seleccionemos cuatro píxeles entre cada uno de ellos ambas de esta
capa y presionemos Mayús más a para crear
otro diseño automático. Bien, perfecto. Vamos a
duplicarlo dos veces con control más C. Y ahora mismo ¿qué es genial
con el auto-layout? Porque voy a
arrastrar otro icono aquí
mismo y lo puedes
ver de inmediato. Simplemente adaptaré la
deposición y mismo voy a hacer
con un tercer pozo, haría una tercera etiqueta y eliminaría
nuestro icono de pincel también. Ahora solo tenemos que cambiar
el texto en ambas capas. Bien, ahora vamos a
todo el uno al otro. Da click en ordenar, y solo voy a tener
la distancia entre todas estas tres etiquetas con
el valle hasta 32 pixeles. También podemos agarrar ambas
capas, agruparlas también. Y luego vamos a
seleccionar nuestro titular, nuestro texto corporal y botones
y morirlos también. Y básicamente tienen el valor de 60 píxeles entre todos ellos. Entonces volverá a
agruparlo. Y básicamente podemos cambiar
ligeramente su posición. Este grupo, este capas también. Entonces en estos momentos básicamente tenemos los conceptos básicos de esta landing page. Entonces, lo que tengo que hacer
es volver a mi plataforma creativa y
buscar algunas ilustraciones animadas que vamos a descargar. De hecho vamos a ir a la barra de búsqueda y
voy a escribir proyecto. Puedes ver aquí un
montón de resultados. Pero lo que ya
usé y mostré en la demo va a
ser este proyecto de Ai. Vamos a hacer clic por clic en eso. Y lo genial de
ello es que
básicamente puedes modificar los colores de las animaciones de esta lotería en caso de que quieras
descargarla como imagen estática, también
puedes hacer click
sobre esta opción que solo
lo descargará como una ilustración, pero quiero mantenerlo como
una animación por supuesto. Así que vamos a hacer clic en
uno de estos colores. Y de hecho
volveré
aquí mismo y jalaré mi botón. Simplemente iré y rápidamente conseguiré este código de color púrpura y
lo pegaré aquí mismo en
la loca animación. Se puede ver que el cambio es el ligero cambio de este color. Entonces también iremos
al marcador de color azul, copiaremos este código hexadecimal y básicamente lo
pegaremos en lugar
del color rosa. inmediato también se puede ver este gran cambio y
lo mismo con nuestra oscuridad. Voy a hacerlo un poco más oscuro, básicamente algo así como
más de un color negro. Por lo que también puedes modificar un color de
fondo si lo deseas. En este momento es blanco, pero
no voy a cambiarlo para nada. Así que vamos a hacer clic en Descargar. Y aquí mismo tengo la
opción de descargar ya sea GIF
MP4 o MP4 adyacentes de forma gratuita. Lo que Glenn necesita
para Figma, mientras que compatible es el archivo GIF. También puede aumentar el conjunto, el tamaño a su máximo. Va a ser 512 pixeles. No sé cuáles son
los valores muertos, pero este es tu Pmax.
Vamos a usarlo. Vamos a subir Descarga. Perfecto, porque
trabajo en el navegador, inmediato
puedo agarrar esta descarga y colocarla aquí
mismo en mi proyecto. También podemos alinearlo
al lado derecho de nuestro botón de
llamada a la acción. Y también voy a seleccionar eso y básicamente alinear
todo al centro. Entonces en este momento es
posible que realmente no veas este tipo de
animación porque
solo tenemos esta animación de
lotería y no
parece que se esté moviendo en absoluto. Pero el set de prueba, solo
vamos al modo de presentación. Y aquí
realmente se puede ver que tenemos esta
hermosa animación. Entonces así es como simplemente
descargamos el archivo GIF de crazy y lo pegamos aquí mismo
y hacemos tu landing page. Lo que quiero hacer también en este proyecto es
agregar algún tipo de fondo
borroso para
hacer un poco más de contraste entre esta
animación de carga y mi fondo. Así que solo voy a ir a otro plugin que
se llama blobs, y luego vamos a generar
un blob aleatorio. Sólo vamos a insertarlo. Y básicamente podemos ir
justo aquí y cambiar su posición todo el camino
hacia abajo en nuestra landing page, también
voy a cambiar su color
a algo así. Iremos a los
Efectos y aplicaremos un desenfoque de capa y en realidad obtendremos
el valor con 200 píxeles, tal vez un poco más. Para que veas que tenemos inmediato este fondo
borroso. Así que permítanme simplemente
rápidamente tal vez modificar la posición
de ambas capas. Y simplemente lo volveré a
duplicar rápidamente con
un control más D me. Eliminaré este efecto y también modificaré el
relleno a color blanco. Y qué atajo de teclas shift
plus x. Podemos ver que justo ahora tenemos un contorno de trazo el cual
va a disminuir su ancho. Entonces aquí vamos a tener algún efecto
agradable que
vamos a aplicar en nuestro proyecto. También lo
aumentaré rápidamente y también vuelve a aumentar. Así que vamos a seleccionar ambos
bloques con el contorno y
alinearlos al centro. También controlaré G con los atajos para que realmente
podamos agruparlo. Y también podemos jugar
con su posesión, tal vez girado un poco y
crear algún tipo de contraste. Duplicemos rápidamente también
nuestro bloque borroso. También lo disminuiré
en una exposición y lo
modificaré ángulo de rotación. Y también vamos a
agarrar este color morado, que voy a hacer que sea un poco más claro para que
no se note tanto. Y simplemente
lo colocaremos todo el camino atrás en nuestro panel Capas
en este lienzo. Esto es algo
aproximadamente que puedes hacer fácilmente como landing page. Y en realidad
volvamos aquí mismo y veamos los cambios que aplicamos
a esta landing page. Entonces así es en realidad como puedes aplicar animaciones de auditoría simples a tu landing page o a
cualquier otro diseño y hacerla mucho más interesante
para tus usuarios finales. Entonces chicos, asegúrate usar el enlace debajo de este video un código de descuento para obtener un
10% de descuento al crear. Y espero que hayas disfrutado este tutorial y espero
verte la próxima vez.
Tetiana G, UX Designer
