Transcripciones
1. Introducción del curso: Quieren aprender los conceptos básicos de Figma y sus
características esenciales desde cero. Y haciendo señora quiere
aplicar rápidamente todas estas
herramientas en la práctica, entonces definitivamente eres
el lugar correcto. Porque ¿qué es un curso
práctico práctico? Vamos a diseñar
una aplicación de películas. Es una oportunidad perfecta
para cubrir todas
las herramientas básicas y
estigma, como Layout, Grids, texto, colores,
estilos, etc. Pero también cubriremos todas las características importantes
incluyendo componentes, varianza y también prototipos. Entonces, si estás listo para diseñar
la aplicación de películas, no esperes e inscribirte ahora mismo a
este curso.
2. Assets de Figma [Archivo gratis]: Entonces exactamente para este curso, creé un archivo Figma, entonces puedes usarlo para
tu propia referencia. Este archivo es súper
práctico porque
creo todo tipo
de colores, estilos, textiles, grandes estilos, y también componentes que necesitas usar
para este proyecto. Puedes encontrar los
estilos más antiguos aquí mismo en la barra de menú de la derecha y
reutilizarlos a lo largo de este curso. También puedes revisar todos
los diferentes componentes que
preparé para ti que
cubriremos algunos de ellos también. Además, hay otra página
que se llama pantallas de diseño. Y aquí mismo puedes ver todos los diferentes
diseños que son relevantes para esta aplicación
cinematográfica. Específicamente, nos
centraremos juntos en la Bienvenida y en toda
la pantalla, pero también puedes
navegar y revisar otras pantallas que
preparé para ti. Esta es una gran
oportunidad para usar las pantallas para tu práctica de
aprendizaje. Y también tal vez si quieres reutilizarlos para tu portafolio. Así que asegúrate de no
querer este archivo Figma. Dejé el enlace debajo de
esta descripción del curso. Y comencemos.
3. Pantalla de bienvenida de diseño - Parte 1: Así que comencemos con el diseño de
nuestra primera pantalla de bienvenida. Si vas a usar mi archivo
Figma que puedes navegar
inmediatamente a la pestaña
Páginas y agregar una nueva página. Entonces voy a hacer
exactamente lo mismo y solo nombrar esta
página tamaño experto. Siéntase libre de nombrar esta
página de la manera que desee. Entonces, la razón por la que estoy trabajando exactamente
en el mismo archivo es porque ya
tengo definidos todos estos textiles, colores, estilos y estilo de
cuadrícula. Por supuesto, voy a explicar
todo desde cero, cómo todo fue
diseñado inicialmente por mí. Entonces lo primero que hay que hacer en
Figma cuando
empezamos a diseñar nuestra aplicación
web, en este caso, para app de películas, vamos a ir a la barra de
menú superior y seleccionar frame. Frame nos permite crear
algún tipo de pantalla que vamos a utilizar
para nuestra aplicación web. En marco en el lado derecho, tienes muchos presets que puedes usar
para tus proyectos. Entonces, por ejemplo, si estás trabajando con aplicaciones
móviles para tener diferentes
tamaños de pantalla para iPhones, Androides, etc. Pero para nuestro caso, estoy genial
para trabajar con escritorio. Simplemente agarraré rápidamente esta plantilla y la haré
clic aquí mismo. Así que ahora mismo hemos
creado nuestro primer frame. También se puede ver
en un paso posterior. Entonces en la barra de menú derecha
se puede ver su ancho es de 14, 40, y también la
altura, 1024 píxeles. Cambiemos rápidamente el nombre de este marco. El nombre es pantalla de bienvenida. Entonces ahora lo primero que
vamos a hacer es cambiar el
color de relleno de este marco. Así que
asegúrate de navegar a la sección y
realmente puedes hacerlo, por ejemplo manualmente para seleccionar el color que quieres aplicar
para este proyecto. O también puedes ir al menú
de estilos y seleccionar uno de los estilos de colores que preparé
para este proyecto. Entonces exactamente para este, voy a usar degradado
angular oscuro que solo voy a aplicar
y con un solo clic, ya tengo este hermoso
degradado para mi pantalla. Si quieres saber
cómo se creó, siempre
puedes hacer clic
en desacoplar estilo. Y aquí mismo se puede ver exactamente cómo se
ha creado este gradiente. Entonces por ejemplo el color del oro para este
color púrpura y también poner un color oscuro y todos los demás ajustes que sean
aplicables para este degradado. Pero
en realidad voy a ir de nuevo a mis estilos de colores y volver a aplicar el estilo solo por
la consistencia. Entonces voy a
agarrar un rectángulo, básicamente creado
dentro de mi marco. Entonces me aseguraré de que
las dimensiones sean exactamente las mismas que mi marco para que
coincidan exactamente con el tamaño. También se puede ver
que el rectángulo pertenece dentro del marco. Así que asegúrate de que esté colocado
exactamente dentro porque por ejemplo puedes ver fácilmente cuándo
no pertenece al marco. También es visible en
el panel de capas. Entonces exactamente para este rectángulo, quiero aplicar una imagen. Y para eso voy
a usar algunos plugins que son aplicables en Figma. Así que aquí mismo en la botella de
recursos, podemos ir a los plugins y en realidad buscar los
plugins y queremos usar. Y en mi caso,
encontremos a Unsplash. Este vagón te ayuda
a encontrar una gran cantidad de imágenes de recursos
gratuitas que
puedes aplicar para tu proyecto. Y vamos a usar este plug-in para silencio tantas veces. Entonces aquí solo
voy a escribir película y encontrar exactamente la imagen que quiera aplicar
para mi fondo. Y vamos a
hacer clic rápidamente en esta imagen. Creo que se ve genial. Pero la cosa es, se puede
ver que el campo tiene que
estilizar para el color sólido
y también la imagen. Eliminemos rápidamente
este color sólido. Y voy a
disminuir la opacidad de esta imagen a
algo así como 10%. Y creo que se ve
genial porque ahora nuestros antecedentes se ven
mucho más interesantes. Muy bien, el siguiente paso
va a ser agregar realmente cuadrícula de diseño para nuestro marco aquí
mismo en el estilo. Para que puedas volver a ir a los estilos de cuadrícula y
seleccionarlos centro tranquilo. Desempaquemos rápidamente este estilo solo para ver cómo funciona todo. Así se puede ver un desplegable. Hay tres
tipos diferentes de cuadrícula de diseño, pero para la aplicación web siempre
usaremos columnas. Entonces el conteo es de diez columnas que el número de columnas se puede ver aquí mismo en la pantalla. Y también el ancho
se establece en 104, lo que significa que esta
columna Rep, tiene este tipo de donde la canaleta se
establece en 16 píxeles. Y esta es exactamente la distancia entre bulto de las
columnas que puedes ver. Por supuesto, los cinco
están alineados con el centro.
4. Pantalla de bienvenida de diseño - Parte 2: Ahora podemos agregar rápidamente todos nuestros elementos visuales
a esta pantalla. Entonces navegaré rápidamente hasta
los activos y encontraré mis logotipos. Así que lo arrastraré rápidamente y lo
soltaré aquí mismo
en mi marco. Si quieres ver
cómo está hecho, solo asegúrate de
abrir este componente y ver todo el tipo de formas
vectoriales que apliqué y también el texto. Pero por ahora sólo lo
vamos a dejar como está. Y yo solo me aseguraría de
que esté alineado horizontalmente. Y luego vamos
a seleccionar mazos y escribir aquí algunos
textos que lo hacen atractivo para que la gente
inicie sesión. Estilos. Voy a seleccionar
18 pixeles regulares. Entonces, si
desempacamos este estilo, podemos ver que estoy usando
títeres como mi estanque. Y el peso es regular
y también el
tamaño de fuente si infecta celdas
y la altura de línea es 20. Volvamos a
alinearlo al centro. Y voy a
disminuir rápidamente el ancho entre
ambas capas. Si quieres saber
exactamente cuántos píxeles hay entre ambas capas, puedes mantener Option en Mac
o Alt en el teclado de Windows. Entonces voy a seleccionar
un rectángulo y lanzar mi botón aquí mismo que coincida con dos
columnas en mi pantalla. También cambiaré rápidamente el radio de la esquina
con el valor de 14 y el más alto
va a ser de 54 pixeles. Tan rápido, de nuevo,
cambiaré el color a morado y agregaré otro
texto aquí mismo. Para asegurarme de que mi texto esté exactamente alineado en el
centro de este botón, seleccionaré esta capa
rectangular
y también esta capa inferior, y las alinearé horizontal
y verticalmente. Por último, rápido con
nuestro mouse derecho y hagamos clic en la Selección de Grupo para crear un grupo en nuestra sección de capas, también
podemos cambiarle el nombre al botón de inicio de
sesión solo para
nuestra propia referencia. Acabo de bajar exactamente el
fondo justo aquí y tal
vez también disminuya
la distancia aquí. También tomemos esta
capa de texto y la dupliquemos con un atajo de teclas que es Control plus o Comando
más B en tu Mac. Entonces voy a arrastrarlo exactamente aquí mismo
y vamos
a cambiar el texto que
dice que no hay cuentas. Regístrate. Rápidamente también
disminuiré el tamaño de este texto y
también me aseguraré de que el registro esté seleccionado y se
cambie al perno. Espera. También vayamos rápidamente a Configuración de
fuentes y agregemos la herramienta subyacente,
nuestro registro, perfecto. Así que vamos a seleccionar todas
estas capas, alinearlas entre sí,
y también, y también, y también
haga clic con el botón derecho del
ratón y seleccione
la selección de grupo. Por último, también podemos
alinear todo de nuevo según nuestro francés solo
para ver los resultados finales. Así que asegúrate de que también
seleccionas tu marco de pantalla de bienvenida. Y podemos ocultar
esta cuadrícula de diseño. Y de esta manera
se puede ver exactamente el diseño y cómo está
todo alineado. Chicos perfectos, que ha creado esta pantalla sumamente sencilla, pero espero que
logren repetir todos los pasos que
acabamos de hacer juntos.
5. Creación de navegación lateral del panel: Acabamos de terminar de diseñar
nuestra primera pantalla de bienvenida. Y ahora vamos a
crear un dashboard, que va a ser nuestra primera pantalla de inicio
inicial
para la app de películas. Así que volvamos a navegar a la barra de menú superior
y hacer clic en el marco. Y también en los presets de marco, voy a dar click en
el marco del escritorio. Cambiémosle rápidamente el nombre
a la pantalla de inicio. E inmediatamente aplicaré el estilo de color
al fondo del marco. Y va a ser estilo de color
oscuro. Entonces, antes que nada, diseñemos
una barra de navegación del sitio. Y podemos hacerlo
seleccionando una herramienta rectangular y lanzándola en el lado
izquierdo de nuestra pantalla, voy a cambiar el
ancho a 274 pixeles. Asegúrate de alinearlo a la
izquierda y también al centro. Aquí, voy a aplicar
este tipo de color. Entonces este es el código hexadecimal. Es un poco más claro que
nuestro color de fondo oscuro. También tienen alguna separación
visual. Voy a ir a los efectos y en realidad
aplicar una sombra paralela. Entonces usaré este
color que en realidad es morado y va
a ser 40% de opacidad. Y me aseguraré de que
la posición de eso sea cero píxel en el eje y y
también a píxeles aquí mismo, también el valor de desenfoque, lo
aumentaré a 90 grados. Ahora mismo puedes ver algún
tipo de resplandor púrpura que en realidad va desde nuestra barra de menú
lateral. Ninguno. Nuevamente, vamos a agarrar
nuestro logo y
vamos a alinearlo
exactamente al centro. Y eso también
cambiará su posición para asegurarse de que la
distancia desde arriba sea de 40 y la misma distancia
va a ser del lado izquierdo. Ahora vamos a seleccionar la herramienta
Texto donde
vamos a crear
algunas capas de textos, es decir, las páginas
de nuestros dashboards. Entonces el primero
va a estar en casa. E inmediatamente aplicaré la fuente regular de 16º píxeles. Y se puede ver el propósito. La altura de línea es de 24
píxeles y el tamaño es de 16. Sólo lo
duplicaré unas cuantas veces. Ahora lo que tengo que hacer es
simplemente cambiar su contenido. Ya que vamos a estar ubicados
en nuestra página inicial, voy a cambiar su
peso demasiado audaz. Entonces también en esta barra de menú es
bastante buena idea agregar algunos iconos visuales para simbolizar
también donde el usuario implicó
en mis activos. Preparé un montón
de iconos que
puedes simplemente
arrastrar y soltar
aquí mismo a esta área y
aplicarlos realmente a tu proyecto. Si quieres encontrar este
icono elemento viene de cero. Puedes ir rápidamente a
la sección de plugins y escribir iconos meteorológicos. Y este es exactamente
el plug-in con el que utilizo para trabajar en mis
aplicaciones. Entonces por ejemplo si escribes película, puedes ver exactamente el mismo icono
que acabo de aplicar aquí. La única diferencia es que por defecto tiene colores negros, así que tienes que cambiar el
estilo para que coincida con tu proyecto. Pero de todos modos, seleccionemos todos estos iconos
manteniendo pulsada la tecla Mayús. Y los voy a alinear
exactamente al centro. Entonces ahora podemos ver que la
distancia es de 12 píxeles. Esto es lo que quiero
lograr en este diseño. Y ahora solo vamos
a ir uno por
uno y aplicar exactamente la alineación vertical a nuestra capa de texto y a la capa IP. Y para cada uno, eso es un icono, voy a crear un grupo
con control más atajo G. También puede lograrlo con
un mouse con el botón derecho y
hacer clic en Selección de grupo. Ahora puedes ver la
nueva sección de capas tendrá un montón de
diferentes grupos. Entonces voy a seleccionar
todos estos grupos y también
asegurarme de ordenar todo. Y la distancia entre
todos estos iconos
va a ser de 35 píxeles. También me aseguraré de
que también estén alineados a la izquierda de mi logotipo. Justo aquí también, la distancia
va a ser de 58 pixeles. Y también quiero separar algunos
de estos elementos del menú. Entonces por ejemplo voy a
bajarlos todo el camino hacia abajo. Por último, también quiero
separar a este tipo de jugadores, así que también
los bajaré hasta aquí. Perfecto. Y en realidad lo último que vamos a hacer con todos los elementos
de nuestro menú excepto de nuestra página de inicio, es seleccionarlos. Y también en un
paso posterior vamos a disminuir la opacidad
al 80 por ciento. Y la razón de ello es
que quiero mostrar visualmente a nuestro usuario que están
ubicados en la página principal. Entonces finalmente, cuando
tengamos todo, vamos a seleccionarlo
y luego agruparlo por trama controlada,
hacer trampa atajo. Y simplemente
crearé rápidamente un componente. Y este componente
vamos a
reutilizar a través de nuestra aplicación. Cambiemos rápidamente el nombre de este
componente aquí mismo y lo llamemos barra de navegación del sitio.
6. Introducción a los componentes en Figma: Para explicarte brevemente los componentes si
eres nuevo en ellos, eso significa que tenemos, primer lugar, nuestro componente
maestro. Puedes sentarte en tu panel de capas si sin la k que tenemos realmente un
componente hijo que en
realidad se llama
instancia en Figma. También podemos duplicar
un número ilimitado de instancias en Figma,
y eso significa por ejemplo si voy a mi componente maestro, se
puede ver también
en la barra de menú, por ejemplo quiero cambiar el
color de relleno de mi rectángulo. También se puede ver cómo
se está cambiando todo. Así que realmente acelera tu flujo de trabajo y tu proceso de
diseño. Entonces por ejemplo no
tendrás que ir
a todas las copias de tu barra de navegación
y cambiarlas manualmente, pero puedes hacerlo
con un solo clic. Pero por ahora, eliminemos todas estas instancias y solo
enfoquemos en nuestra pantalla de inicio.
7. Diseño de banner de películas - Sección de héroes: Para nuestra pantalla de inicio. Entonces decide más. Voy a aplicar una cuadrícula de
diseño porque quiero asegurarme de que todo
esté correctamente alineado. Así que vamos a nuestros estilos de
cuadrícula de diseño. Y esta vez vamos a
seleccionar 12 columnas de grano lateral. Y se puede ver que la cuadrícula
en realidad se mueve más
hacia el lado derecho, que en realidad no
encuentra nuestra barra de navegación. Entonces, si estás desempaquetando
este estilo de cuadrícula de diseño, puedes ver que
el recuento de columnas es 12 y todo está
alineado a la izquierda. La diferencia antes de que lo
tuviéramos todo, estaba vivo más al
centro de la pantalla. Pero en este caso, realmente
necesitamos trabajar
con una alineación izquierda. Y también se puede ver el valor de ancho de
cada una de las columnas. El desplazamiento es 306 y el valor de
canalón es de 24 píxeles. Ahora quiero crear una barra de navegación de ópera que
va a ser bastante sencilla. Entonces vamos a comenzar con una capa de texto y escribir películas. Así que solo seleccionaré 16
6 veces el estilo de fuente regular. Y eso asegurará
que esté alineado al lado
de esta grilla. Duplicemos
dos veces la capa de conjuntos con Control D o Comando
más el atajo. Aquí vamos a bucear documentales de
series. Seleccionaré tres capas
y también haré clic en ordenar y aseguraré de que la distancia
sea de 32 píxeles entre ellas. Entonces vamos a agruparlos rápidamente
y solo subamos o envíemos un mensaje de texto. Aquí, quiero agregar un avatar, así que voy a dar click en Alice. Y en realidad manteniendo el turno, dibujaré una elipse con
un valor de 16 por seis píxeles. Esta elipse va
a ser mi avatar. Entonces volveré a usar la herramienta
Unsplash. Con Unsplash a los alérgenos encontrar el retrato quiero
aplicar para este avatar. Aquí con una capa de texto, volveré a escribir mi nombre y además me aseguro de que ambos estén
alineados al centro. Entonces, asegurémonos también de
que la distancia entre este texto y Avatar
sea de ocho píxeles. Y ahora mismo, creo que esta Alix se ve bastante pequeña
en comparación con el texto, así que solo voy a aumentar sus dimensiones al
valor de 32 píxeles. Y ahora mismo, creo que se
ve mucho, mucho mejor. Volvamos a hacer un grupo. Y por último, quiero agregar dos iconos más para
mi panel de activos, que en realidad son
icono de campana y también icono de búsqueda. Estos elementos son solo anuncios visuales
adicionales sobre los que podemos usar en nuestro estilo. Entonces, asegurémonos de que la
distancia entre todas
estas tres capas sea de 24 píxeles. Y
los agruparé a todos y me aseguraré de
que también estén apropiadamente alineados aquí mismo al lado izquierdo
de mi cuadrícula de columnas. Genial. Ahora podemos realmente
agarrar todo aquí mismo y también
alinearlo entre sí. Entonces crearé otro grupo
y lo llamaré barra superior. Ahora mismo, volveré a
crear un componente que vamos a reutilizar a
través de nuestro proyecto. Entonces, asegurémonos de que
la distancia a la parte superior de nuestra pantalla sea de 40 píxeles. Tan brevemente, así es como se ve
nuestro panel de control de casa en este momento, que creo que en realidad se
empieza a dar algunas formas. Voy a activar de nuevo mi columna para ello y vamos a añadir otro elemento visual aquí es la película principal que
vamos a mostrar a nuestros usuarios. Entonces ahora mismo voy
a dibujar un rectángulo, asegurarme de que esté correctamente alineado a la izquierda
que a la derecha, y que su altura
sea de 455 píxeles. Ahora voy a alinearlo exactamente así la parte superior
de la pantalla. Así que asegúrate de que
en tus capas, tu rectángulo esté colocado todo el camino en la
parte inferior para que puedas ver tus otros elementos que
acabamos de crear juntos. Ahora, voy a desactivar la grilla, y también buscaré otra imagen aquí mismo que vamos a usar
para esta película. Este se ve bastante
gris y voy a aplicar otro
degradado lineal para que
podamos tener más contraste
entre los próximos textos y otros elementos visuales y el fondo en el campo. Seleccionemos gradiente lineal y solo cambiemos sus
marcadores así. Y también asegúrate de que
la opacidad sea del 100%. Entonces aquí tenemos una transición mucho
mejor más suave usaremos para este elemento. Ahora vamos a crear un
título de la película por ejemplo dentro o esto es turno, este
nombre súper aleatorio se me ocurrió. Pero puedes usar otros
lados de película de los que amas. Ahora mismo, voy a aplicar 48 pixeles semi ambas fuentes
Poppins. Así que
asegurémonos también de que esté alineado a la izquierda de la barra de navegación de
mi ópera. Duplicaré esta capa
y en realidad la renombraré. Y voy a cambiar el estilo de texto para fijar
y pixeles regulares. A lo mejor también es mejor idea
disminuir un poco el tamaño de la fuente. Por último, lo que tengo que hacer
en realidad es diseñar algunos botones. Agarremos nuestro rectángulo
y dibujémoslo aquí mismo. Y voy a cambiar las
dimensiones a 139 a 54 pixeles. Y también el radio de esquina
va a tener cuatro píxeles. Entonces ahora mismo, vamos a rellenar y también modificarlo,
el color púrpura. Y por supuesto tenemos que
escribir call-to-action, que se llama reloj. Ahora va a ser de nuevo, los 16º píxeles, tamaño de fuente
mediana. Y simplemente agarraremos
ambas capas y las
alinearemos entre sí. Este botón se va a
convertir en otro componente que vamos a reutilizar
en todo este proyecto. Ahora también quiero finalmente
crear otro
botón secundario que
permita a nuestros usuarios dar me gusta
y a diferencia de nuestras películas, lo que significa que pueden
guardarlo en favoritos. Entonces voy a
seleccionar el rectángulo, y manteniendo pulsada la tecla Mayús, voy a dibujar un
rectángulo que en realidad tiene las dimensiones de
54 por 54 píxeles. Y también nuestro radio de esquina
va a tener cuatro pixeles. Aquí. Voy a agarrar de nuevo un icono, y voy a cambiar el color de
selección de este icono, que tiene un trazo
a este morado oscuro. Volvamos
a alinear todo entre sí y se puede ver como básicamente es un cuadrado
perfecto y la distancia de cada
lado es quinto y píxeles. Este icono es sólo un simple gris, tiene un simple fallo grave. Pero voy a ir a mis estilos de
relleno y seleccionar otro estilo que nos
permitirá hacer este icono mucho más borroso. También agreguemos un trazo, y solo seleccionaré
esta línea cerca del relleno. Da click en Control más C, selecciona la derecha aquí y da
clic en Control más b para que
podamos cambiar el
color de relleno de este elemento. Además, si no te gusta
cómo se ve este icono, siempre
puedes básicamente
modificar su valor. Entonces, por ejemplo, algo con
opacidad o de otra manera. Muy bien, entonces por eso
se ve mucho mejor. Y ahora mismo vamos a
cerrar nuestro gradiente lineal. Nuevamente, vamos a agrupar
estas capas y también crear otro componente
que vamos a renombrar, botón Me gusta.
8. Botones Like - Variantes en Figma: Entonces así es como
se ve nuestra pantalla de inicio en este momento
creo que se ve súper genial, pero siéntete libre de
usar otras imágenes u otras celdas si
quieres, antes de que continuemos. Entonces las otras secciones
de la pantalla, quiero introducir un
nuevo concepto para ti, que se llama varianza. Y este es otro tema que es relevante
para nuestros componentes. Y
te voy a mostrar rápidamente un ejemplo. Así que vamos a agarrar este botón como. Y la cosa es que a
lo largo de este proyecto, quiero tener diferentes
variaciones de este componente, que es como y
a diferencia de batería. Entonces lo que voy a
hacer en realidad es ir
al menú de componentes y
hacer clic en Agregar variante. Ahora mismo ves que dentro
de mi componente maestro tendremos dos
variantes distintas que acabamos de crear. Así que básicamente voy a cambiar el nombre de
esta herramienta de propiedad. A diferencia de la diferencia
aquí mismo va a ser que nuestro corazón
va a tener un relleno. Entonces eso significa que
el universo salvó exactamente esta película y él o
ella también es capaz de guardarla. Así que también podemos cambiar rápidamente
el nombre de la propiedad del componente
a esta es como, así que ahora tienes este tipo de rectángulo
púrpura
alrededor de nuestra varianza. Y no se ve
tan bien
porque en realidad ni siquiera
es parte del diseño. Entonces, lo que voy a hacer, lo voy a mover
rápidamente fuera de nuestro marco solo
por ahora por un momento. Y básicamente voy a
ir al panel de Activos. Y aquí mismo, cuando
trabajas con tus activos, te
aseguras de ir
a la página de ejercicios. Esta es la página donde
trabajamos en este momento. Y en realidad puedes arrastrar
este botón me gusta aquí mismo. Y ahora lo genial
es que cuando
ves aquí las propiedades de
varianza, puedes cambiar
de like o diferente. Y creo que es súper
increíble porque
va a acelerar nuestro proceso de
diseño también. Y
nos va a ayudar mucho a la vez que creamos algunas interacciones para
nuestro diseño en sigma.
9. Diseño de tarjetas de películas: Bien, así que estamos
listos para definir otras secciones para
esta pantalla de inicio. Y voy a empezar crear el título
para la fracción. Así que vamos a agarrar nuestra herramienta de texto y voy a escribir trending. Entonces aquí mismo
usaremos 20 píxeles, semi negrita, estilo OpenStack. Y también me aseguraré que la distancia aquí
mismo de la imagen principal a
los seis píxeles, y que también esté apropiadamente
alineada al lado izquierdo, coincida con todos los demás elementos
crearía un Antes. Volveré a activar mi
crit porque vamos
a crear tarjetas de películas con las que
el usuario pueda interactuar. Entonces volvamos a agarrar nuestro rectángulo y lo
vamos a dibujar aquí
mismo con un ancho de 254 píxeles y la
altura de 300. Cambiaré el valor del radio de
esquina de 20 píxeles y también cambiaré la distancia
entre tendencia y este rectángulo
al valor de 16. En realidad 24 se ve un poco mejor. Entonces agreguemos también
un color de trazo, que también es con relleno gris. Y vamos a encontrar una imagen de símbolo para
esta tarjeta de película. De nuevo, iré a
Plugins y haré clic en Unsplash y solo encontraré la
imagen que se ajuste aquí mismo. Entonces este es bastante
perfecto como ejemplo. Entonces podemos ver que las brujas
tienen nuestra imagen y el texto. Voy a agarrar de nuevo
este rectángulo, duplicarlo con control más C. Y en lugar del relleno, voy a usar
sólido por el momento. También voy a cambiar
el radio de esquina, lo que significa que
las esquinas superiores
van a tener un valor de cero. Y anote, esto
es exactamente
vamos a crear esta sección
de las tarjetas de cine donde vamos a escribir el texto del título de la
película y
también el subtítulo. Ahora, NFL, también voy a
aplicar este empleado de vidrio radianes para que podamos verlo mucho mejor como
se encuentra todo. Así que vamos a agarrar nuestra capa de texto y vamos a
subir algunos títulos. Entonces, por ejemplo, tren de Tokio
como ejemplo. Y luego duplicaré
esta capa de texto con el
atajo furtivo del plano de control y cambiaré
su contenido. También vamos a disminuir
este tamaño de fuente. Entonces aquí mismo el valor
es de 16 píxeles por 16. Y de la misma manera
vamos a alinear todo al lado
izquierdo y también mover su posición un poco más abajo con un valor de
ocho píxeles sobre la distancia. También voy a cambiar la fuente. Entonces en estos momentos ya tenemos nuestra tarjeta de
película casi lista. Lo único es que voy a
ir de nuevo a mis activos y de hecho
lo marqué botón Me gusta. En este caso, el botón
se ve un poco demasiado grande, así que vamos a seleccionar una herramienta de
escala manteniendo pulsada la tecla Mayús, voy a disminuir
este tamaño
al valor de 32 por 32 píxeles. Perfecto. Y modifiquemos también
su posesión para asegurarnos de que esté
alineada de 16 por 16 píxeles. Genial, así que tenemos todo
listo aquí mismo. Así que vamos a mover la
tarjeta en vertical. Y voy a crear
otro componente que vamos a reutilizar a
través de este proyecto. Así que vamos a duplicar rápidamente estas tarjetas de película con los atajos de
control más dq. Y voy a repetir esta
acción torr veces. Entonces en estos momentos tenemos cuatro tarjetas y
lo único que tenemos que hacer es en realidad cambiar su imagen
y también el contenido del texto. Bien, así es
como en realidad casi terminamos con nuestra pantalla de inicio para el tablero de
esta película.
10. Continuar observando la sección: Por último, terminemos esta pantalla de diseño
creando nuestra sección final. Entonces primero, voy a
agarrar esta capa de tendencias y duplicarla con control más D que se encuentra justo aquí. Y sólo voy a
cambiarle el nombre para seguir viendo. Entonces
volveré a duplicar esta tarjeta de película. Y por ahora la voy a
colocar fuera de mi marco. Entonces lo que voy a
hacer es antes que nada, voy a deslindar
esta instancia. Y eso significa que
esta instancia ya no pertenecerá a nuestro conjunto de
componentes. Eso significa que si vuelvo a mi componente maestro y
hago algunos cambios de estilo, no
se verá influenciado
por eso tan fácilmente dije, básicamente
puedo
agarrar esta capa y en realidad borré lo mismo que
haré con nuestra capa de textos. Entonces lo único que tengo que
hacer es en realidad
cambiar las dimensiones
de este carrito. Aquí en el ancho va a ser 348 y en la altura
va a ser 200. Entonces de la misma manera, voy a modificar la posición
del botón deslizante. Entonces este valor que en realidad
al borde de este 16 por 16. Ahora mismo ves que la imagen ya
no se ve tan bien. Está un poco pixelada. Pero lo que podemos hacer en realidad es
agregar las imágenes que
queremos para nuestro proyecto de la misma
manera con él, estas tarjetas. Entonces otra vez, vamos a agrupar esta tarjeta. Entonces ahora voy a
cambiar el nombre de esta tarjeta a tarjeta de
película horizontal y
crear otro componente. Y por eso puedo
duplicar este componente dos veces y ubicarlo justo
aquí al lado izquierdo, y asegurarme de que la distancia entre todos estos
autos sea de 24 pixeles. Y esto es exactamente
lo que podemos arrastrar. Nuevamente, descarta de nuevo a nuestro juego de pantalla de inicio
como aquí en la parte inferior. Así que de nuevo, solo
tendremos
que asegurarnos de que nuestro contenido
aquí mismo sea la diferencia, como por ejemplo, tendríamos que ir
al complemento Unsplash o simplemente
basándonos en nuestras propias imágenes. Se puede ver cuando baso mi primera imagen y debido a
que es el componente maestro, otras instancias obtuvieron
exactamente la misma imagen. Pero también podemos cambiar fácilmente la imagen de otras
instancias. Perfecto, ahora parece un tablero realmente genial que tenemos para nuestra aplicación de
películas. Si quieres, también puedes ir a este botón me gusta y cambiar la variante
al estado like. Y se puede ver porque
trabajo en mi componente maestro, nuevo, todo ha cambiado. Así que voy a Controlar Z
eso y voy a la instancia en su lugar y en realidad aplicar
el botón Me gusta aquí mismo. Bien hecho juntos, hemos terminado la
sección donde creamos una pantalla completa para
nuestro dashboard.
11. Prototipo básico y animaciones en Figma: Entonces ya que terminamos de
diseñar dos pantallas ahora podemos pasar rápidamente a
otra parte de este curso. Lo que vamos a crear una interacción muy sencilla
entre ambos marcos. Entonces, antes que nada,
voy a conectar mi pantalla de bienvenida a mi
pantalla de inicio y al revés. Entonces para eso, tendré que
navegar hasta la sección de
prototipos, y aquí es donde
voy a iniciar mi carroza. Vayamos rápidamente a
mi pantalla de bienvenida. Y en realidad voy a seleccionar este botón de inicio de sesión y realmente me conecté
con mi segundo marco. En los detalles de interacción, tenemos todo tipo de configuraciones
diferentes
para nuestra interacción. Aquí mismo tenemos nuestro disparador y vamos a
trabajar con onclick, lo que significa que cuando
haga clic en este botón de inicio de sesión, voy a ver otro
fotograma para animación también. Voy a usar smart animate. Y esta es una animación súper
genial porque simplemente puede mostrarte una muy buena traducción porque coincide con todas
las capas similares, lo que le permite hacerlo más
fluido y más suave de la misma manera, vamos
a ir a mi grupo de cierre de sesión y voy a navegar de
regreso a nuestro primer fotograma. Y para los detalles de interacción, haré exactamente los
mismos ajustes con el disparador onclick y la animación animada
inteligente. Así que el rápido comprobar
nuestra sencilla interacción. Iremos a nuestro flujo
aquí en el botón Reproducir. Entonces aquí tenemos nuestro modo de
presentación donde podemos interactuar junto
con nuestro lado del producto. Entonces, si no estás
seguro de dónde hacer clic, simplemente
puedes hacer clic
en un área vacía. Y aquí mismo se ve
el resaltado azul. Y esto es exactamente el
lodo espeso L2 donde
está el hotspot, lo que significa el punto
interactivo lo que significa el punto
interactivo, hagamos clic rápidamente
en el botón Iniciar sesión. Así es como tenemos esta transición suave
a nuestra pantalla de inicio. la misma manera haremos clic en nuestro cierre de sesión porque ya no
queremos usar esta aplicación. Y volveremos a navegar
sin problemas a la pantalla de inicio de sesión. Así que puedes jugar y hacer que esta animación
seta sea compleja, pero la idea es muy sencilla
porque solo tienes que volver a tu zona de trabajo Figma y hacer diferentes tipos
de conexiones. Y en Figma se puede hacer un número ilimitado de
conexiones prototipo entre fotogramas.
12. Componentes interactivos en Figma: Ahora hablemos de
animar nuestros botones me gusta. Entonces, lo que me falta aquí
mismo en mi prototipo cuando inicio sesión, realmente no
me puede gustar
ni a diferencia de estas películas, lo que significa que no puedo
guardarlas como usuario. Entonces para hacer eso, porque hemos
trabajado con varianza antes, si recuerdas en
la sección anterior, podemos simplemente
prototimarlas también. Eso significa que no tenemos duplicados múltiples
fotogramas muchas veces solo
podemos hacer una conexión y
funcionará perfectamente para nosotros. Entonces básicamente se asegura de
que vuelvas a estar en el prototipo que si
tienes suerte en la pestaña Diseño. Ahora vamos a seleccionar
nuestra primera variante y conectarla a
la segunda variante. Aquí volveremos a usar onclick Trigger con ajustes de animados
inteligentes. De la misma manera. Conectemos nuestra
segunda variante, que es diferente de
variante a nuestra primera, como fondo, con los
mismos detalles de interacción. Y esto es básicamente
si es súper simple, solo dos conexiones las cuales se crean en nuestro conjunto de componentes. Y esta es exactamente
la forma en que ha creado un
componente interactivo. Entonces básicamente eso es todo. Podemos volver a nuestro modo de
presentación, y voy
a iniciar sesión en toda mi pantalla. Ahora mismo. Se puede ver cómo me puede
gustar rápidamente y a diferencia de mis botones aquí, que ha interactuado
con
componentes musculares para la tarjeta de la película. Y en realidad aplicamos exactamente toda la transición
a otras cartas restantes. Aquí. Si trabajo con instancias, puedo dar me gusta rápidamente y a diferencia mis películas como quiero,
como pueden ver, los componentes interactivos lo
hacen mucho más fácil porque en nuestro archivo solo tuvimos el
sismo, una simple conexión. No tuvimos que hacer todas las diferentes
copias de los marcos. Y dos WK este tipo
de interacción. Entonces espero que hayas logrado repetir todas estas acciones para crear una súper increíble para esa conexión, para nuestro diseño.
13. ¡Bien hecho! Perspectivas finales: Felicidades amigo mío, finalmente
terminas este mini curso. Y espero que
disfrutes mucho diseñando estas aplicaciones de
películas súper simples. Así que básicamente cubrimos
los componentes, los conceptos básicos del diseño, la cuadrícula de diseño y
otros elementos visuales. Y al final, estoy súper feliz que también logramos crear una conexión
ab producto muy simple y también cubrir los conceptos básicos de los componentes
interactivos. Si te gusta este
curso, asegúrate difundirlo
a tus amigos, tus compañeros y a la red. Y además no olvides
dejarme una reseña bajo este curso. Agradezco todos sus comentarios honestos
porque siempre trato de
mejorar mi contenido y también me aseguro de que esté satisfecho
con los siguientes cursos. Muchas gracias
y te veo de nuevo.
Tetiana G, UX Designer
