Transcripciones
1. Introducción: Bienvenido a Figma para
el curso de principiantes. Este curso está pensado
para principiantes absolutos, diseñadores
junior y
aquellos que querían
cambiar de carrera y
convertirse en diseñador. Aprenderemos todo sobre la interfaz
3D, componentes, estilos, variantes de diseño automático,
prototipos y complementos. Si no conoces
ninguna de estas palabras, acabo de decir que estamos en eso te
explicaré todo lo que
necesitas saber
para tener una
base sólida para diseñar en Figma solo para
gestionar las expectativas. Este curso no es un
reemplazo para la escuela. Y además necesitarás
practicar mucho por tu cuenta para convertirte en diseñador. Dependiendo de cuándo estés
viendo este curso, ya
podría crear más
cursos en torno al diseño. Si aún no existen, no te
preocupes,
están en proceso. Planeo cubrir temas
como sistemas de diseño, cómo prestar el primer trabajo, cómo mejorar
las habilidades visuales, etc. Ahora vamos al video número
uno, interfaz vigorosa.
2. Interfaz de Figma: Aprenderemos los
botones y características más importantes de Figma y continuaremos ampliando nuestros conocimientos
con cada nuevo video. Para comenzar, solo necesitamos
enfocarnos en dos vistas, vista nivel superior en una vista de archivo, también conocido como donde diseñamos. Cuando abras Figma por primera vez, verás esta interfaz. Entonces este de nivel superior
a la izquierda, tienes menú que contiene archivos. Borradores es una carpeta con
tus cosas privadas. Es excelente si estás
trabajando solo o practicando. Por otro lado, los temas son útiles cuando hay
más gente trabajando
en un proyecto porque jerarquía es un
poco más profunda y ofrece características avanzadas
relacionadas con los sistemas de diseño, que no está cubierto
en este curso. Pero voy a mencionar una cosa
o dos en el camino. En el nivel superior hay un nombre de equipo, y luego dentro hay un proyecto también conocido como carpeta donde
guardas tus archivos de diseño. Yo diría que esto
es todo cuando se trata de las cosas que necesitas saber
ahora mismo sobre esta visión. Así que hagamos un nuevo archivo y exploremos lo
que puedes hacer allí. A mi izquierda puedes ver
que estoy en borradores y comenzaré dando
click en un nuevo archivo. Apuesto a que pasarás
la mayor parte de tu tiempo en esta vista. Entonces pasaré por todos
los botones
y secciones importantes y
te diré cómo lo uso. En la parte superior izquierda, tenemos un
menú con toneladas de acciones. Pero lo único con lo que
interactúo es en las preferencias. El empuje de la cantidad de empuje
se realiza mediante las teclas de flecha. Básicamente, puedes mover
tus capas con flechas. Cuando estoy diseñando, uso mayormente las teclas de
flecha para mover
objetos porque
sé que los estoy moviendo en incrementos de uno
u ocho píxeles. Eso está relacionado con las rejillas. Y si nunca has
oído hablar de ello, puedes consultar mi canal de
YouTube. Tengo algunos videos que
explican lo que es una grilla. Es un conocimiento vital del diseño. Compruébalo. Ahora continuemos con
los otros botones. Si no menciono un botón, significa que realmente no lo uso. Procediendo por la derecha
tenemos una herramienta Mover. Es una herramienta esencial para
mover las cosas. El siguiente es un marco. Recuerda el atajo F, porque el marco es una columna vertebral
para cada diseño. Diseñas todo en marcos. Y también en el panel derecho, tienes algunas plantillas. Y por lo general
solo necesitas elegir lo que sea lo último en iPhone y
diseñar dentro de eso. A menos que estés
trabajando en un sitio web, entonces usas alguna
plantilla diferente o
simplemente puedes poner tu ancho y
alto como quieras. Entonces tenemos algunas formas
geométricas. Recuerda, son porque lo
vas a usar mucho,
suena loco, pero la mayor parte de la interfaz en realidad son
solo rectángulos. Entonces tenemos una
herramienta de texto con un atajo T. También vale la pena recordar
porque es uno de los
elementos centrales en el diseño. Así que por lo general solo presiono T
y hago mi capa de texto. Entonces tenemos una herramienta de mano, pero nunca la uso así. Yo solo presiono espacio. Arrastre el lienzo alrededor. Y por último, tenemos comentarios, el
pan y la mantequilla de Figma. Puedes dejar comentarios a tus compañeros de equipo y
ellos pueden responder. Es súper útil y
lo uso todo el tiempo. Incluso puedes etiquetar sin piernas. Si no quieres
ver comentarios todo el tiempo mientras estás
diseñando el Turno C y sus turnos de gobernador ve ahí atrás cuando
seleccionas un elemento, ves varias propiedades. Elemento de desplazamiento,
lado derecho es donde
manipulas las imágenes
en términos simples. Diseño, esto es por ahora, aprenderemos características
adicionales medida que avanzamos por el curso. A continuación, nuestros componentes.
3. Componentes: Componentes o elementos que puedes
reutilizar en tus diseños. Digamos que tienes un botón que necesitamos usar en cada vista de tu diseño con el copy paste
habitual, no
compartirían una
sola fuente de verdad. Si cambias el
fondo de un botón, otros no
serían conscientes de eso. Introduzca los componentes. Si tienes un componente
que es un botón y usas instancias de ese
botón en tu diseño, entonces cualquier cambio que realices en el componente principal se
reflejará en las instancias. Para que no tengas que buscar cada botón y
modificarlo manualmente. Ahorro de tiempo imaginado,
puede crear componentes a partir de cualquier capa
u objeto que haya diseñado. Esto podría ser toda una gama
de cosas como botones, iconos, diseños y más. Haremos un
componente de botón y aprenderemos de él. Entonces hagamos un
fondo, algún texto. Centrarlo. Seleccionaremos todo a
la izquierda que ves botón y este rectángulo,
y da click aquí. Ahora tenemos un
componente y también
queremos llamarlo botón
ese componente uno. Bien, ahora que
tenemos un componente, ¿cómo podemos acceder a este componente de
botón? Bueno, hay pocas maneras
diferentes. Primero, puedes ir a Activos y luego puedes
ver nuestros componentes locales. Podemos simplemente arrastrarlo a tus
diseños así. Muy fácil. Entonces puedes hacer clic en este ícono y nuevamente tienes tus componentes
locales por aquí. Realmente no importa
donde accedas a ellos. Además, si presionas Mayús I, este panel de recursos se abrirá
y es lo mismo. Ahora bien, este grupo de aquí, estos botones son solo
instancias de éste. Naturalmente, no pondrías este tipo de componente
en tus diseños. Deberían vivir en
otro lugar por separado. Puede estar en alguna otra página
o incluso en algún otro archivo. Y puedo mostrarte la magia
de los componentes muy rápido. Vamos a pretender que esto está
disperso por todo el diseño. Entonces quiero darle un poco más de sabor a
este botón. Quiero cambiar el color. Nos deja algo azul
y también el texto. Entonces es legible. Y a lo mejor queremos poner
algún radio fronterizo ahí. Ahora se ve mucho más bonito. Lo siguiente que tenemos que hacer es
hacer que este botón sea receptivo. ¿ Qué significa eso? Si arrastro esto no se
ve muy bien. Se ve roto y
queremos que sea inteligente
y receptivo. Así que vamos al
siguiente video, el auto-layout.
4. Diseño automático: En este video, vamos a
hablar de auto-layout. Es una
característica muy avanzada
y muy compleja que a mucha gente le
costó entender
cómo funciona. Se puede hacer mucho
con el auto-layout, pero voy a tratar de explicar
en un lenguaje
sencillo con ejemplos sencillos cómo
funciona y cómo lo uso. Ya prehice un
poco de diseño por aquí para que podamos movernos
más rápido en voz alta, hace que tus diseños sean
inteligentes y receptivos. Empecemos con
un ejemplo sencillo. Un botón, voy a
hacer botón otra vez. Para que veas que puedes posicionar contenido de un botón
arrastrando manualmente. Es sólo ponerlo negro. También puede seleccionar dos
elementos y luego posicionar. Entonces está alineado, viendo
que cambia. Pero no es así como queremos
diseñar porque esto
no es responsive ni smart. Entonces queremos seleccionar esto. Hagamos un componente. Llamémoslo mejor botón. También podemos agregar un
poco de picante por aquí. Una cosa, puse
radio de esquina por aquí, pero no
reflejaba y diseña. Esto se debe a que necesitas
revisar el contenido del clip porque entonces recortará lo que sea que
esté debajo de este marco, lo que significa que entonces
voy a ver mi radio de esquina. Lo siguiente que quiero hacer es agregar auto-layout a este botón. ¿Por qué? Porque cuando
lo estiro, se ve roto. Entonces vamos a agregarlo. Tenemos una nueva sección por
aquí con toneladas de cosas nuevas. Entonces intentemos explicar esto. primera opción es donde su diseño automático va
vertical u horizontalmente. Bueno, quiero que las cosas en botón
se apile horizontalmente, así que voy a
dejarla en esta siguiente, alineación de contenido de un frame. Bueno, quiero que
esté centrado porque quiero que el botón
de texto esté centrado, no apoyado en uno
u otro lado. Entonces en el centro, esto es el espaciamiento entre los elementos. Esto es útil cuando
tienes más de un artículo. Por supuesto,
te puedo mostrar rápidamente aquí, así que voy a duplicar. Como puedes ver, está
configurado en ocho píxeles. Si lo aumentara, entonces aumentaría el espaciado. Por supuesto, la
fila inferior es para relleno, es
decir, espacio desde los bordes. No quiero que sea tanto. Es mucho. Pongamos 16. Bien, Esto es más razonable. También eliminemos esta etiqueta
extra por aquí, y este es el relleno
para arriba y abajo. Pueden ser 16. Claro.
Osi quieres, puedes decidir independientemente cuáles son los acolchados
de cada borde. Entonces ahora si tratamos de
expandir este botón,
está en el centro. Se ve y se comporta como
quiero que se comporte. Se puede ver que debajo
tenemos algo llamado abrazo. Entonces, ¿qué significa esto? Bueno, cuando
habilitas el diseño automático, obtienes algunas opciones en la también
obtienes algunas opciones en la
parte superior en esta
sección de marco. Tienes cómo se comporta el ancho, es fijo o
acaparará lo que sea que esté dentro. Si pones abrazo, entonces se contraerá envolverá alrededor del
contenido de este marco. Si intentas
extenderlo, inmediatamente se
convertirá en fijo. Volvamos a abrazar porque
queremos que todo sea receptivo y no
sabemos cuál va a ser el contenido o un
nombre de ese botón. Entonces queremos que se
expanda en consecuencia. Digamos que si el botón tiene un orden de etiqueta que si
pusiéramos fijo, entonces puedes ver que
esto no funciona. Esto no es inteligente ni receptivo. Entonces queremos que vuelva a abrazarlo. Por supuesto que puedes hacer diferentes ajustes
en las instancias en sí. También una manera de hacerlo. Pero
te recomendaría que pongas un abrazo porque queremos que sea
receptivo fuera de la caja. El siguiente es la altura. ¿ Es de altura fija o
va a acaparar contenido? Si vamos a mover esto aquí. Si amplío la altura
de este botón, porque lo alineamos en
el medio, en el centro. Ahora está centrada,
funciona aunque la
expandiera así. Pero con alineación,
¿puedo dictar dónde están sucediendo mis textos? En qué borde se pega? Quiero que esté en el centro porque en todos los casos quiero
que esté en el medio. Entonces esto es perfecto para mí, pero no quiero que se fije tanto horizontal
como verticalmente. Entonces voy a poner
todo en abrazo. De esa manera, lo que sea que
escriba para un título de botón, se expandirá o
encogerá en consecuencia. Si crees que eso es
mucha información, mira esto. Así que tenemos un
diseño simple por aquí. Queremos hacer un feed. O una lista de menú con elementos
que se repiten en una columna, te
mostraré cómo lo hago. Entonces primero, voy a
seleccionar todo por aquí. Voy a usar el
atajo Shift a para crear diseño automático a partir de la
selección. Ahí vas. Mi diseño cambió ahora,
pero eso está bien. Quiero que
el espaciado entre los elementos de esta capa
exterior sea, digamos ocho. Pero ahora quiero que la pizza y el
precio estén en fila, no en una columna. Entonces, lo que voy a hacer es
enumerar el diseño automático. Voy a crear uno nuevo. Bueno,
esos dos son seleccionados. Desplazar a, ahora
cambiaremos de dirección. Queremos que se sienta contenedor. Y entonces se puede
ver que todo el límite gasto al
tamaño de un contenedor. Pero no quiero que
esté del lado izquierdo. Quiero que la pizza esté a la izquierda y el precio esté a la derecha. Entonces lo que voy a hacer es
entrar en el diseño avanzado. En nuestra configuración de diseño, modo de
espaciado, quiero cambiar
eso es muy importante. Y voy a elegir espacio
entre esto
empujará a todos los elementos a decidir. Así. Ahora tenemos pizza a la izquierda y un
precio a la derecha. ¿ Qué pasaría si
duplico precio? Digamos que quiero
aplicar un descuento. Estará en el medio
porque está calculando el espacio igual entre los
artículos en un contenedor dado. Pero si quiero
volver a tener estos dos precios a la derecha, bueno, necesito
envolverlos en otro marco. Voy a utilizar el acceso directo de diseño automático. Voy a poner, digamos 16 píxeles de espaciado
entre estos dos elementos, voy a acercar un poco. Seleccionemos un precio. Opciones adicionales para texto, luego decoración, tachar. A lo mejor esto puede ser aún más pequeño. Y tal vez podamos cambiar. Toma un poco grisáceo, y esto puede ser tal vez
rojo. Ahí vas. Entonces, si seleccionamos este
marco por aquí, eso se llama frame
para llevar descriptivo, podemos ver que
tenemos dos elementos, una capa de texto y otro frame que pasa
a ser auto-layout. Y porque sólo tenemos
al espacio entre ellos, en realidad
los
empujará a decidir. Esto es muy útil
en el diseño, especialmente en diseño web, cuando tienes como encabezados
y necesitas empujar,
Digamos logo o un
título a la izquierda y cosa del menú Inicio a
la derecha. Pero no hemos terminado con el diseño automático de
anidamiento. Tenemos auto-layout
como contenedor para esta imagen y también esta pizza y precio y
también alguna descripción. Voy a hacer auto-layout a partir
de esto, todo este marco. Shift a. Ahora es diseño automático. Es abrazar. Incluso puedo poner altura fija y poner algunos pixeles
por aquí si quiero. Y ahora si
duplico esta tarjeta, este no es el efecto
que realmente quería. Entonces voy a cambiar
la dirección
del nivel superior o
diseño por aquí. Y solo puedo duplicar, y es inteligente, responde, simplemente se
pega exactamente como quería. Una cosa que quiero cambiar
es el espaciado entre los elementos. 32 parece un buen número. Si no queremos ver, como el diseño que se derrama
sobre el marco, podemos cortar contenido.
Ahívas. Otra cosa que
quiero mencionar es que puedes poner cosas
dentro del auto-layout, pero solo arrastrando diría, quiero poner este botón de orden y quiero que sea de tamaño completo. Así que voy a ir a esta opción por aquí
y seleccionar Contenedor de campo. Y así es como puedes
expandir tu botón o cualquier otro elemento dentro del
marco que sea auto-layout. Todas las cosas que están
dentro de un marco que tiene diseño automático se pueden expandir
para sentirse contenedor. Esa es una
opción extra para los objetos, elementos que ocurren
dentro del auto-layout. Además, si quieres cambiar
el orden de los elementos, solo
puedes seleccionar un elemento. Y luego con las teclas de flecha, puedes simplemente subir y bajar o izquierda o derecha y posicionar tus elementos como
quieras. Todos los espaciamientos serán consistentes porque
Auto Layout es inteligente. Eso es todo
lo que quiero compartir a la hora de auto-layout
contigo en este video, esto fue mucha información. Hay más en el auto-layout, pero todas las demás cosas
son aún más avanzadas. Así que vamos a parar aquí. Vamos a
pensarlo un poco. Te recomiendo
ir a practicar, tratar de hacer la misma
interfaz que hice por aquí. O simplemente puedes tomar una captura de pantalla o mirar
tu aplicación favorita e intentar replicar
un poco la interfaz usando el diseño automático. A continuación, nuestra varianza. Eso está relacionado con los componentes. Entonces nos vemos ahí.
5. Variantes: Bienvenido a varianza. Este tema es una curva de aprendizaje un poco
más pronunciada, pero haré todo lo posible para que sea lo más simple
posible para ti. Así varianza y propiedades se
pueden aplicar sólo
dos componentes. Tengo un componente de botón por aquí y veo esta fila
llamada propiedades. Cuando presionas Plus, tienes cuatro opciones. Probemos cada uno y
veamos qué pasa. Creo que aprender haciendo es la mejor manera de aprender
varianza y propiedades. Entonces, antes que nada,
usemos booleano. Booleano significa que alguna capa
puede ocultarse o mostrarse. Entonces podemos, por ejemplo, mostrar y ocultar un icono. Entonces vamos a hacer precisamente eso. Llamémoslo tiene icono valor
predeterminado, true. Bien. Y luego tenemos que
seleccionar este icono y nos encontramos con la fila Capa o
aquí, pulsamos tiene icono. Ahora enganchó todo junto. Y si hago una
instancia de este botón, tengo esta propiedad
llamada has icon, y puedo mostrar u ocultar icono. Sencillo, ¿verdad? También puedes simplemente seleccionar cualquier cosa
que quieras
mostrar u ocultar y
hacer clic en este icono. Crear nueva propiedad desde aquí, no
tiene que crear la
primera propiedad de un padre. Puede crear propiedades
a partir de subcomponentes. Entonces probémoslo de esta manera. Llamémoslo tiene
texto. Ahí vas. Y ahora, cuando hacemos clic
en la instancia, mostramos u
ocultamos texto, con solo unos clics, creaste un botón que
puede verse de manera muy diferente, pero solo tienes un
componente que es bastante resbaladizo. Así que recuerda cómo teníamos como
cuatro opciones por aquí. Solo exploramos estos booleanos. Así que también podemos crear
un intercambio de instancias. Voy a encontrar algún icono, no
importa qué
gran propiedad. Y como puedes ver, no está enganchado a nada.
Acabamosde crearlo. Por eso me gusta
crear estas cosas a partir de componentes reales
que cambiarán el comportamiento. Y entonces no tienes
este signo de exclamación y es un poco más rápido. Entonces encontraré mi calendario. Voy a hacer clic en este icono, y elegiré esta y
única opción. Entonces lo que pasa es que tenemos
icono por aquí y
tenemos este pequeño
desplegable donde
podemos cambiar el icono
a otra cosa. Y claro, otras
opciones aún funcionan. Y la última opción fue el texto. Entonces lo voy a crear a partir de la capa que va a
cambiar el comportamiento. Entonces contenido, voy a
hacer clic en este icono de aquí, o simplemente podemos crear propiedad. Detecta todo lo que ya
diseñaste. Así que es un
poco más rápido hacerlo desde el interior de
nuestros componentes. Entonces en capas que
cambiarán el comportamiento. Y cuando hago clic
en la instancia, veo mi texto y puedo
escribir otra cosa. Tengo una forma más sencilla de administrar íconos y cambiar
texto en componentes. Entonces cuando se trata de
diferentes íconos, solo
encuentro mi ícono, solo
lo arrastro, presiono Comando
Opción. Y cuando veas estos
trazos morados en tu icono, simplemente
lo sueltas. Y ahí tienes. Se intercambió. Así que no hay necesidad de esta instancia
swap cosa por aquí. Cuando se trata de texto, no uso esta
propiedad de texto ni aquí. Porque si presionas T, solo puede cambiar
los textos así como así. No es tan difícil. Así que no
tengo la necesidad de usar realmente esta propiedad de texto
porque acabo cambiarla en ellos, el
diseño en sí mismo. Lo último que tenemos
es la variante misma. Así que vamos a hacer clic en éste. Cuando vea esta
línea discontinua que indica que este componente tiene realmente variantes dentro de
múltiples componentes. Entonces voy a
crear una nueva variante. Cambiemos
un poco el diseño. Ahora se ve
completamente diferente. Y debido a que editamos la variante, inmediatamente obtuvimos
esta propiedad una. Quiero renombrarlo. Así que solo haz doble clic. Vamos a llamarlo estilo, y luego necesitas seleccionar cada componente y
ajustar el nombre. Por defecto está bien para este. Voy a
dejarla para esta. No quiero que
sea muy intuitivo, así que voy a
llamarlo negativo. Entonces, cuando selecciono mi instancia, solo
puedo elegir un
estilo diferente, como el negativo. Y puedo volver a manipular otras propiedades
como hide icon por ejemplo. Y también funciona
cuando vuelves. Solo tengo dos variantes
en componente de botón, pero mira cuántas
opciones diferentes hay. Entonces este es el poder de
variantes y propiedades. Sólo porque la varianza
es un poco confusa, te
recomiendo que practiques. Intenta hacer botones aún más
complejos. Intenté hacer elementos de tarjeta , campos de
entrada, etc. Cuanto más practiques, más fácil se pone esto. A continuación, estilos, algo muy parecido a los componentes juntos.
6. Estilos: Bienvenido a estilos. Los estilos son muy
similares a los componentes. Es solo un conjunto de propiedades que
guardaste con un solo nombre. Y entonces puedes usar ese estilo. Donde quieras InDesign. Puede tener estilos de color, texto y efecto. Entonces comencemos con el color. Lo voy a ajustar para
que sea, digamos morado. Y voy a
crear un nuevo estilo. Impresionante. Voy a
crear otra. Vamos a tener, digamos azul. Excelente. Ahora bien, si
creo otro óvalo, y si hago clic en
el icono de estilo, puedo ver que tengo estos
dos estilos por aquí así que
solo puedo aplicarlo y va a quedar igual que este. Entonces esta es la mesita de los estilos. Ahora intentemos hacer lo mismo con
el texto. Nuevamente, icono de estilo plus. Y lo que sea. Grande. Mi fuerza para
ser inteligente por aquí, vamos a cambiarlo. Finge que se
ve así. Y entonces quieres que
se vea exactamente como
este texto de aquí. Así que simplemente puedes hacer clic en
este nuevo elemento de texto, ir al estilo, y
elegir tu estilo. Ahora vamos a tratar de
hacer estilo Efecto. Entonces voy a efecto de
primera semana un
poco para que sea visible. Y ahora vamos a nombrarlo. Si hacemos clic en Lienzo, podemos ver
estilos de efecto, esta sombra. Entonces puedo aplicar esto a
otros óvalos, incluso a un texto. Estos son estilos, no
son tan duros. Es solo un conjunto de
propiedades que quieres
reutilizar a lo largo de tu diseño. En el siguiente video, vamos a
hablar de prototipado. Entonces nos vemos ahí.
7. Prototipo: Para poder
mostrarte la creación de prototipos, necesitamos tener algunos diseños. Entonces encontré este
archivo de la comunidad y va a ser excelente para
demostrar la creación de prototipos. primer paso es,
pasemos al modo prototipo. Ahora, la interfaz se ve
un poco diferente. No estamos diseñando.
Voya acercarme. Y digamos desde login, quiero terminar en homepage. Así que solo voy a
seleccionar el botón Iniciar sesión y soltar cuando esta flecha
toque el marco de la página principal. Ahora tenemos algunos
detalles de interacción por aquí. Hay muchas, muchas formas
diferentes que pueden desencadenar algo en Figma, como mostrar un modelo o
pasar a otra vista. Pero sobre todo uso onclick, pero solo para
que sepas, también tienes muchas
otras opciones. Entonces la siguiente opción es, ¿navegamos a una
vista separada o abrimos superposición, intercambiamos superposición, cerramos superposición, retrocedemos, desplazamos
o abrimos incluso un enlace. Por ahora en realidad solo
queremos navegar a alguna vista porque
se le cayó esta flecha en la
Página principal, higo molar la nariz. Entonces está por aquí. Ahora también podemos
poner algo de animación en nuestros prototipos
para que pueda ser instantánea, se pueda disolver, puede animar de forma
inteligente y así sucesivamente. Revisaremos Smart
Animate un poco más tarde porque esa es
interesante. Pero por ahora
solo usemos instantáneo. Bien, vamos a cerrar esto. Y luego si presionas
este ícono de Play por aquí, previsualizarás tu prototipo. Entonces se está cargando ahora. Bien. Si haces clic afuera, verás el punto de acceso en el que se puede hacer clic. Ahora hagamos clic en Iniciar sesión, y esto es exactamente lo que
configuramos en nuestro archivo de diseño. Ahora, si queremos enviar dinero, seleccionemos este icono o aquí, y esa es nuestra siguiente pantalla. Esto es muy divertido. Vamos a cerrarlo. Entonces voy a tocar aquí y estoy exactamente donde quiero que esté
en enviar vista de dinero. Ahora si quiero volver, presionaré plus
e interacciones. Haga clic atrás. Si hago click atrás,
voy a estar ahí. Entonces ahora tenemos un
círculo completo por aquí. Entonces. Si presiono Enviar, quiero terminar en esta
vista. Y funciona. Entonces esta es la mesita
de la creación de prototipos. Solo estás creando hotspots
y entonces ¿qué pasa después? ¿ Qué vista carga? Se puede renombrar. Se puede poner como flujo principal, y luego vamos a tratar de hacer
algo diferente. Entonces voy a sacar
esto duplicado. Y también voy a llevar
este teclado por aquí. Ir al modo de diseño muy rápido. Primero, necesitamos
hacer de esto un marco porque los grupos no
trabajan con la creación de prototipos. Y luego pasemos
al modo prototipo, conectemos estos dos fotogramas. Entonces al hacer clic, no
quiero navegar, quiero abrir una superposición. Esto es correcto. ¿ Quieres que esté centrado? No. Quiero que esté centrado en el fondo y quiero cerrar
cuando hagamos clic afuera. Y si, quiero agregar
fondo detrás de overlay. Incluso podemos ajustar la animación. Muévete y tienes poco video aquí para que
puedas previsualizar lo que
va a pasar. Sí, esto es exactamente lo
que quiero de abajo hacia arriba. Y voy a cerrar. Ahora en
modo prototipado, la barra lateral, puedo ir a un flujo diferente
y ahora puedo tocar en enviar. Y efectivamente tenemos un modelo. Puedo cerrarlo dando
clic afuera. Esto es exactamente lo que quería. Incluso puedo retocar la animación, vivirla para que sea más rápido. Puedo poner unos 150 milisegundos. Ahora es más rápido.
Parecechasquido aquí. Lo siguiente que quiero mostrarles que en realidad es bastante útil en prototipos es smart animate. Entonces para el propósito de esto, voy a crear dos marcos. Va a hacer un círculo. Vamos a llamarlo círculo. Y luego voy a
expandirlo en los próximos. Entonces básicamente, estoy keyframing mi animación porque quiero
usar la opción de animación inteligente. Es importante que los elementos
se llamen lo mismo. Todos los elementos que
quieras animar,
disparar, compartir el mismo nombre de forma inteligente . Ahora vayamos al prototipo. Conéctese al otro marco. No queremos hacerlo al click. Vamos a usar después del retraso. 800 milisegundos está bien. Animación, animación inteligente. E incluso puedes elegir qué
tipo de animación puede ser. Bouncy, por ejemplo. Lo que pasa aquí es que
funciona automágicamente. Incluso puedes hacer un bucle. Entonces este círculo simplemente
rebotaría. No queremos usar al hacer clic. Queremos decir después del retraso, inteligente animado, hinchable, genial. Ahora cuando tenemos una vista previa
, salta así por sí solo. Para que puedas crear animaciones bastante
interesantes. Antes de envolver este video, quiero mostrarte uno
de mis propios proyectos. No es grande, pero tengo algunas
conexiones por aquí. Entonces, si abro mi modo prototipo, se
puede ver que
conecté muchos elementos juntos. Y por lo general los archivos se ven
así después aplicar sus puntos de conexión. Creo que esta es información
suficiente para comenzar
con la creación de prototipos. Se pueden hacer
cosas realmente locas con prototipos. He visto cosas realmente increíbles en Twitter que la gente hace. Y el cielo es el límite. En el siguiente video,
vamos a revisar los plug-ins. Nos vemos ahí.
8. Complementos: Bienvenido a plug-ins video. Este va a
ser muy corto porque los plugins son realmente
sencillos. Si quieres instalar un plugin, solo en tu panel de
Figma,
haces clic en la
pestaña Comunidad por aquí, y luego tienes
acceso a todo tipo de activos y
plugins
gratuitos y demás. Está realmente lleno cosas
súper útiles
y menos útiles. Pero es increíble cómo la
gente pone tanto esfuerzo en compartir sus
activos y complementos. Entonces, por ejemplo, podemos dar click en alguna categoría y
queremos buscar plugins. Los iconos son bastante populares
plugin, tengo que decir. Entonces tal vez podamos
probar esta. Paquete de iconos gratis por Yo conduzco. Sólo lo ejecutas. El plugin se está cargando y digamos
que haces clic en este N. Aquí vamos. Cada plugin funciona un
poco diferente. Por supuesto que tendría
sentido para mí revisar
cada plugin y mostrar cómo
funciona porque
solo necesitas leer descripción de
la
documentación del plugin y luego usarlo. No uso tantos plugins. Se puede ver que
estos dos los instalé solo para el propósito
de este tutorial. Pero, y también este, los que uso, a veces Unsplash
ProtoPie es útil porque me gusta hacer mis tipos de
producto en esta herramienta. Fijo. San Francisco es
muy bueno porque cuando tu fuente
San Francisco, cuando cambias de tamaño, espaciado entre
letras también
necesita cambiar. Entonces este excelente
plug-in para tenerlo pixel perfecto y
como pretendía Apple. Y este último es
en realidad mi plug-in. Yo lo escribí,
hace biblioteca de iconos. Esto es algo que
les voy a mostrar en mi próximo curso de
diseño de sistemas. Si encuentras
necesidad de plugins en tu trabajo, solo
puedes instalar un montón de ellos y
usarlos todo el tiempo. A mí personalmente me gusta mantener mis archivos sin
depender de plug-ins
porque pueden desaparecer mañana y entonces estás en un problema. Pero claro,
no experimenté que faltaran plugins ni
nada por el estilo. Te puedo mostrar un enchufe más
en cómo funciona en splash. Y podemos poner algo de textura. Ahora este rectángulo tiene
esta sensación de esta textura, es bastante ordenado y ahorra
toneladas de tiempo de diseño. Te animo a ir
a la pestaña de la comunidad y explorar diferentes activos
que la gente está compartiendo. Cada día hay un montón de nuevos
plug-ins. Y también puedes
encontrar sistemas de diseño, algunos boilerplate
para diferentes cosas visualmente ácidos y así sucesivamente. Todas estas cosas pueden ayudarte a
convertirte en un mejor diseñador y ver realmente cómo otras
personas hacen ciertas cosas. Y es un representante, aprendimos todo lo
que necesitamos saber
para tener éxito en el uso de Figma. Hay, por supuesto,
toneladas de cosas avanzadas que podría cubrir en
algunos de mis próximos cursos. Pero hasta ahora, tienes una base realmente sólida para
empezar a diseñar de
manera eficiente en Figma. En mi siguiente video, voy a compartir algunas de mis palabras de
lista contigo. Entonces tú ahí.
9. Conclusión: Espero que hayas disfrutado de este
curso y que
tengas confianza para empezar a
diseñar en Figma. Acabamos de rayar la superficie
en este curso y puedes desbloquear mucho más
conocimiento si practicas, puedes encontrarme en
Twitter y también YouTube donde tengo
toneladas de tutoriales de Figma. Si te gusta, podcasts, Revisa mi podcast diseñado fiesta. Que tengas uno bueno y
feliz diseñando.
Antonija P.
