Transcripciones
1. 0 Avance: Oye, mi nombre es
Jeremy y bienvenido a mi
curso de sitios Figma donde
crearás un sitio web sin código
en Figma sin ningún Te voy a mostrar todo lo que tiene para ofrecer en
este momento y cómo
puedes construir tu propio sitio web de
portafolio o incluso un sitio web básico para clientes. Te mostraré todo
el proceso del espacio
de trabajo general, aprendiendo a usar la interfaz de usuario. Voy a desglosar
cómo agregar secciones y usar plantillas dentro del espacio de trabajo
de FIGMA. También voy a mostrar mi
proceso de diseño de un sitio web de una página donde
agregamos algunas imágenes. Juega con la topografía, creando componentes y también aprendiendo a hacer que el
sitio web sea receptivo y luego finalizar el sitio y publicarlo en vivo en un
dominio de tu elección Entonces esto suena divertido.
Inscribirse en la clase hoy y empezar a golpear sitios web
en Figma en poco tiempo
2. 1 Introducción a Figma para el espacio de trabajo y la interfaz de usuario: primero es lo primero,
una vez que entres a Figma, los que tengan Sigma four les
resultarán bastante familiares Ya puedes ver que tienes
sitio y dice Beta. Podemos hacer clic en eso y
generará un espacio de trabajo del sitio. Entonces Figma tiene algunas
plantillas por el momento, probablemente
habrá mucho
más después en la pista La gente probablemente
hará plantillas. Pero por ahora, si estás
en la pestaña Explorar, puedes ver plantillas simples hechas aquí, nada demasiado elegante. Así que puedes
comenzar con algo como esto si no quieres
construir desde cero. Quiero construir desde
cero, puedes aprender los fundamentos de
la
creación del sitio Figma. También puede hacer clic la izquierda si desea
una página de destino, personal o una cartera. Por ahora, solo voy a ir
a explorar y dar click
en Sitio en Blanco. Una vez que estés en el espacio de trabajo, tendrás tus herramientas en
la parte inferior. Tienes tu barra de herramientas
con todo lo que necesitas. En el lado derecho,
tienes los estilos, exportación, arables y cualquier otra cosa que ver con la topografía se siente
justo lo habitual, y luego a la izquierda,
tienes tus capas Te darás cuenta de inmediato, tienes la página de inicio, y puedes ver que es
un marco gris y interior que tendrás tu
escritorio y tu móvil. Ahora en el lado izquierdo,
tienes tus páginas web. Entonces nuestra página principal es la página
actual que estamos usando. Si queremos agregar una página, solo
tienes que ir a la parte superior izquierda y hacer clic en el más junto
a la sección de la página web. Actualmente tengo una página de inicio,
por lo que puedo dejar clic aquí y agregar una página secundaria. Puedo hacer doble clic en eso y hacer una página Acerca de o una
página de contacto o lo que sea. Si no quieres esa
página, simplemente puedes hacer clic en Eliminar una vez que la selecciones
, y me desharé de ella. También tienes la
configuración de tu página con un pequeño diente. Si pones el mouse sobre
la sección de la página principal, voy a hacer click
en eso y aquí tenemos algunos detalles básicos de SEO
como meta información, el título de la página, que es el título principal que
ves en Google. Aquí tienes lenguaje y
también la imagen social aquí. Cuando compartes Link,
digamos en LinkedIn, se mostrará con
esa imagen de vista previa puedas subir
una imagen allí. También tienes dominios aquí para que podamos conectarlo
más tarde, y luego tienes información general
del sitio aquí. Entonces favicon, y
tienes cody personalizado si
quieres incrustar widgets o cosas codificadas
específicas Y eso es básicamente todo
para los detalles del sitio. Voy a presionar una
pequeña flecha para volver, y ahora estamos de vuelta aquí. Entonces lo que voy
a hacer ahora por ahora, solo
voy a
deshacerme de la vista móvil, y me voy a quedar
con el escritorio. Lo que realmente podemos
hacer es empezar a arrastrar y soltar algunas secciones
y elementos dentro. Entonces quiero ir
al lado izquierdo, y tú quieres ir a insertar. Ya tienen algunas plantillas de página
pre hechas, lo cual es algo genial. Entonces tienes algunas
plantillas aquí. También tienes navegación. Entonces conseguimos un NavBA. También tenemos
secciones de héroes, características e incrustaciones para que puedas incrustar un video de YouTube o un
enlace URL, lo cual es genial. También puedes agregar
iris allí también. También puedes buscar
cosas si
tienes componentes, ciertas cosas. También tienes una cosa nueva que ellos han creado llamada M, y usa codificación de IA. Entonces no tienes que hacer
ningún código, pero
en realidad va a generar efectos
para ti, lo cual es genial. Si quieres cambiar
el
color de fondo de nuestro sitio web, en realidad
podemos simplemente ir
al campo y cambiarlo para que diga negro o el
color que quieras. Una vez que hagas clic en él, también
puedes hacer doble clic en él y llamarlo Página principal, derecha. Pero probablemente sea bueno
dejarlo en el escritorio y
mantener esto en la página principal. Barra de herramientas inferior,
tienes tus herramientas. Tienes página web, que
es marco W para F, sección es Shift S. También
tienes la M
y las herramientas embed, que te mostraré
más adelante, y luego tienes tus herramientas básicas de forma, herramienta de
imagen, texto. Entonces tienes algunas otras
herramientas que puedes buscar. Esa es la introducción al
espacio de trabajo fúngico. Te voy a mostrar cómo
crear algunas secciones y diseñar el primer
layout y estructura de
3. 2 Versión de escritorio diseño automático: A. Primero, quiero hacer clic en el
pequeño trasero más de la izquierda, y voy a
ir a navegación. Y voy a seguir
adelante y dejar caer aquí a
este pequeño y simpático Navbar, y voy a
dejarlo ahí dentro Se debe ajustar automáticamente. Ahora, si vamos
al panel de capas, podemos ver que la capa está dentro del escritorio, como podemos ver. Tenemos el encabezado,
tenemos el menú, y luego tienes todos
estos diseños de pedido. Así que tienes el logo ahí y tienes los
botones en orden de diseño que hacemos zoom así que sería
bueno pasar por estas capas tú mismo y
rebanar lo que hay ahí dentro. Entonces tenemos dos botones aquí, y luego tenemos un logo
aquí, que podemos cambiar. Voy a seguir adelante
y agregar una sección de héroe. Tal vez
hagamos esto de aquí. Arrastre y suelte eso en. Y boom, tenemos esa sección
genial de héroes. Podríamos tener,
podría ser un tablero o
algo divertido ahí. Tenemos botones y un titular. Ahora, agreguemos también
una sección de características. Vamos a ir a lo mejor, ¿
deberíamos ir con una grilla de Bento? No se puede equivocar con un Bento. Así que tira eso ahí dentro. También podemos agregar tal vez
otra sección. Vamos con testimonios. A lo mejor vamos a poner
algo de texto ahí. A qué otras
características podemos agregar. También podemos agregar algunas tarjetas. También podemos simplemente
eliminar una sección, podemos dejar clic y eliminar. Si no estamos vibrando o no lo necesitamos,
siempre podemos cambiarlo. Eso está totalmente bien.
Ahora bien, una cosa que sí noté no
hay pestaña Fuda, pero sí tienen el Foota
en la sección de navegación, así que baja aquí y
digamos que podemos hacer el foota
básico con,
digamos, las tres Déjame volver a arrastrar eso de nuevo, asegúrate de que
veas las líneas azules o se ha roto. Fresco.
Entonces lo conseguimos. Creo que necesito agregar un
llamado a la acción también. Entonces, déjame no sé si
tienen un CTA aquí. Pero siempre podemos
simplemente sumar el nuestro propio. Podría agregar eso ahí dentro. Esto podría ser un
botón. Así que tenemos el diseño básico de nuestra página de destino de
escritorio, y vamos a seguir adelante
y personalizar el diseño. Tengo algunas imágenes de marca
y un logo y una marca que he creado que seguiremos
adelante y agregaremos al diseño. Por lo que recomiendo crear
tu propio brief o usar el brief que te suministre y lo use para crear algunas maquetas,
generar algunas imágenes Se puede usar IA,
eso está totalmente bien. Usa lo que te
resulte cómodo, y genera algunas imágenes bonitas
y cosas que puedas rellenar en toda la información y el contenido del sitio web. No tienes que copiar
exactamente como yo estoy haciendo, sino jugar, agregar las
características y secciones que quieras, y vamos a
seguir adelante y personalizarlas.
4. 3 4 Diseño e imágenes Pt: Parte de la lección,
vamos a agregar nuestras imágenes y diseño para que podamos comenzar a finalizar el aspecto visual
general
de nuestro sitio web Adelante y agregó mi as
t. Tengo algunos textos que he creado y creado este
producto llamado Neuroshot Es un impulso energético
donde puedes beberlo. Tiene cafeína
y magnesio y un montón de cosas
que se acaban de crear, y aquí tengo algunas
ilustraciones. Tengo un fondo,
algunos íconos y algunos retratos testimoniales.
Quiero agregarlos aquí. Lo que vamos a hacer primero es agregar nuestros colores y nuestro texto. Cuando comenzamos a
crear el sitio web, podemos actualizar todo el diseño. He seguido adelante y he creado
algunos de nuestros colores. tienes el color melocotón Aquí tienes el color melocotón y el morado
que he creado. Y cuando haces clic en, es solo una forma con
el color en ella, puedes ir a sentir
del lado derecho y hacer clic en estos cuatro círculos, y puedes hacer clic en el
pequeño botón más y si tienes decir un nuevo color, y si tienes decir un nuevo color,
puedes entrar aquí
y llamarte ya sabes, melocotón o escribir lo que
quieras y crear una colección, así puedo crear esa variable. Y ahora ves que está creado ese color
en nuestras variables. Ahora bien, si voy a variables en la parte superior derecha,
puedes hacer click sobre ella ahí. Ya puedes ver nuestro color se agrega por dentro aquí y
puedes ver que es melocotón. Puedo entrar aquí y hacer clic
derecho y
duplicar variables, puedo borrar o borrar
lo que quiera. Yo solo quiero borrar eso porque ya los he
agregado aquí. Si quieres estar extra ordenado, puedes ir a los tres puntos
y crear una colección y llamar a esta marca colores. Y así ahora tienes
múltiples colecciones aquí. Entonces para agregar quiero agregar
color a esa colección, podemos hacerlo, o simplemente puedes dejarla en la
colección predeterminada ahí. Ahora, voy a ir
a la sección de héroes, y voy a presionar Control y
click izquierdo y eso me
ayudará a hacer clic a través de algo
que está dentro de un grupo. Se puede ver en el panel de capas que si simplemente hago clic en
el área general aquí, si hago clic en esta sección de aquí, se
puede ver que tenemos un
texto dentro de la maquetación automática. Y se puede ver que es un diseño vertical y
tenemos texto y luego botones. Y si quieres hacer
click rápidamente en algo sin
tenerlo seleccionado, simplemente presiona Control y pasa el cursor
sobre ese elemento y lo
encontrarás y haz click izquierdo en para ir dentro de ese
grupo y seleccionar Es sólo un poco más rápido. Ahora, lo que quiero hacer aquí es ir a la sección de tipografía
y quiero escribir BN
voy a cambiar
la fuente a B néctar Creo que esa es la fuente que
estaba usando para la marca, así que me gusta mucho esta. Y sólo voy a
ajustar el espaciado entre letras. Vamos a ir tal vez 2%.
Sí, eso es genial. Y lo que podemos hacer ahora es que
voy a agregar esto
como estilo de texto. Voy a ir arriba
a la derecha, volver a
ver los cuatro círculos. Dice aplicar estilo.
Voy a hacer clic en eso, y voy a hacer clic en
el pequeño botón más. Y voy a
llamar a esto H uno, y podemos simplemente
hacer H una partida. Puedes poner un poco de
guión si solo
quieres hacerlo más
legible, lo que quieras, y en realidad podemos mostrar más opciones y puedes personalizar el tamaño y
la pasta de lechuga
y todas esas cosas. Si quieres tener un punto de
ruptura diferente para móvil, si quieres un tamaño separado, crearías un
textyle para Entonces cuando lo reduzcas, el tamaño no se estropeará Por ahora, solo voy a
dejar este estilo aquí y crear y así ahora tenemos
ahora si voy a mis fuentes, digamos que quiero
seleccionar esta fuente aquí, puedo volver a ir a los cuatro puntos, y mi estilo está ahí mismo. Así que también voy a crear un estilo
para el texto de párrafo también. Entonces para el texto del párrafo, estoy usando la higuera. Uy. Higuera, y
estamos usando mediana. Probablemente también podamos
ir por 16 regulares, tal vez vayamos por la talla 20. espaciado entre letras podría ser del
0% y la altura de la línea, es a 1:50, tal vez
queremos aumentarlo o tardarlo Creo que podríamos
tardarlo un poco. Iremos 145. Y así voy a guardar esto, y vamos a llamarlo cuerpo y crear estilo, así que ahora
tengo este estilo. Pero también quiero ajustar
el color de esto. Entonces voy a usar el color púrpura
oscuro al 50%. Vamos 75%. Entonces tenemos ese color púrpura, que luce bien, y
ahora debería actualizarse. Ahora si voy, vamos a probarlo
rápidamente, y ahí lo tenemos
luciendo hermoso.
5. 4 Diseño e imágenes, parte: Obtuve los estilos principales, y ahora vamos a trabajar en la Navbar antes de subir cualquiera
de los otros Entonces voy por Navbar, y lo que quiero
hacer es que quiero que
el Navbar se quede en su
lugar cuando me desplace Entonces actualmente, cuando me desplace, se
puede ver que la Navbar
no viene con nosotros. Voy a
convertirlo en un Navbar fijo. Entonces lo que quieres hacer
es seleccionar la Navbar, ir a la parte superior derecha
y dar click en posición, y queremos
cambiarla a fija Ahora, fijo, todo lo que
significa que lo fija a una parte específica en el
lienzo o en el navegador. Entonces si hago esto arreglado ahora, se
puede ver que se ha deshecho
de ese contenedor trasero. Y ahora si presiono
play en nuestro pergamino, se
puede ver que se pega
al lienzo de arriba. Voy a actualizar algo
del color así que voy
a hacer doble clic, asegurarme de que estemos seleccionados en el menú y voy a cambiar el relleno al
color púrpura. Y luego voy a
seguir adelante y traer mi logo. Pero sólo voy a
hacer rápidamente una versión blanca. Y yo sólo voy a hacer
doble clic dentro de aquí en la empresa. Así que pagaré ese logotipo y solo
voy a
escalar esto hacia abajo, luego asegurarme de que esté centrado
con dentro de ese bloque. Y solo voy
a poner ese logo dentro del diseño de orden,
asegurarme de que todo esté funcionando. Barrido. Entonces lo que voy a hacer es que podamos
tener un enlace aquí. Tal vez podamos decir
decir tal vez reseñas, y podemos decir bien ahora. Y voy a hacer el
botón tal vez así. Y quiero que sea un degradado
igual que un color de picos. Entonces tienes dos
en las paradas ahí. Puedes ajustarlo si
quieres. Creo que por ahora, esto se ve bien. Y en realidad quiero cambiar
la fuente a ser un néctar. Voy a seleccionar
el fondo,
bajar a, dar clic en Imagen y dar clic en
Subir desde computadora, y solo voy a localizar mis archivos y
hacer doble clic y debería cargarlo
en, lo cual es super cool. Voy a ir a cambiar
mi texto, mi titular. Quiero deshacerme
del botón secundario. Ahora lo que quiero hacer
es que voy a arrastrar mi imagen aquí y
simplemente dejarla caer dentro. Presiono Control set y selecciono en el encabezado y
pego la imagen aquí. Podemos hacerlo realmente grande. Voy a cambiar el
posicionamiento a absoluto, para que podamos arrastrarlo a
cualquier parte dentro de esta caja. Entonces, en el diseño de orden de héroe, cuando haces
algo absoluto, significa que puede moverse a
cualquier parte dentro ese contenedor padre
o ese diseño padre. Entonces si presiono play,
puedes ver que debería estar dentro de esa
imagen, lo cual es genial. Y a lo mejor quiero
tenerlo tal vez superponiendo un poco
el texto. No lo sé,
algo así. Y hagamos que este
titular sea realmente grande. Puedes usar Control Shift y el botón de parada completa
para hacerlo realmente grande. Y yo sólo voy a seguir
adelante y presionar pegar. Uy. Y éste
va a ser el morado. Fresco. Y voy
a seleccionarlo, y ahora voy a expandir
el cuadro el ancho es apretado, entonces es como un cuadro de texto Así que sólo vamos a
hacer el ancho alrededor de 1056. Eso está bien.
Siempre podemos personalizarlo. Y tal vez podamos tener
múltiples botellas. A lo mejor tenemos, como, un sabor
diferente aquí allá. Voy a copiar y
pegar el texto, y voy a tener que
hacer algunos estilos nuevos, así que voy a hacer
este estilo H dos. También puede presionar Control para seleccionar y luego
soldar turno Puede seleccionar varios objetos. Seleccionaré los encabezados. Y voy a seleccionar la tarjeta, y solo voy a cambiar
el color de este relleno, y probablemente voy a
ir con este color claro aquí. Deja caer una herramienta. Puedes seleccionar varios objetos y presionar I para la herramienta
Cuentagotas, y solo voy a
probar este color, y hace que sea bastante
fácil hacerlo Quieres tener
múltiples colores. Uno podría ser durazno,
uno podría ser 25%. No lo sé, algo
así sería genial. Sólo voy a
entrar aquí y subir estas imágenes aquí. Yo sólo voy a
arrastrar eso ahí dentro. Voy a arrastrar
la otra imagen dentro de aquí y solo borrar la otra voy aquí y
voy a ir a la imagen en el panel de capas
y simplemente hacer clic en el salto, y voy a arrastrar la
otra aquí. Y podemos escalarlo, y se
puede ver que ya está
recortando el contenido, que queda muy bien ahí dentro Para los otros, voy a tener que asegurarme de que le
quede un poco mejor. Entonces podemos escalar esto
un poco así. Voy a ir a dar
click en la imagen, y la voy a recortar para
que nos deshagamos de esta sección superior pulsamos Enter. Y voy a
seleccionar la tarjeta uno, y voy a simplemente
tal vez escalar esto. Y yo sólo voy a escalar todo
este contenedor
también para que podamos ver
esta imagen aquí. Entonces seleccionamos el contenedor de rejilla. Entonces podemos ver que ahí está la sección de la tarjeta de
características, y luego la cuadrícula dentro de aquí. Solo queremos
escalar esto un poco. Voy a seleccionar la
parte de atrás, y vamos
a que pueda ajustar el espaciado. Pero aumentemos
el tamaño general de esta sección para que tengamos
más con lo que jugar. Éste, podemos
simplemente escalar eso.
6. 5 4 Diseño e imágenes Pt: Tener una victoria ahora.
Y para éste, voy a usar la victoria. Victoria. Tazón de la victoria 24. Morado. Voy a crear H tres encabezado y luego voy a hacer estos
H tres, hacer ese morado. Voy a ir a tirar esa imagen ahí dentro y
borrar las otras. Tenemos esta imagen.
Voy a presionar Mayús A para poner
eso en un marco, y voy a
centrar ese cuadro. Yo sólo voy a escalar
eso así. Ahora es algo genial
con los sitios Figma, en realidad
puedes usar
IA para editar imágenes Entonces voy a hacer click
en la imagen, me puse a sentir. Lo que voy a hacer es hacer
clic en Editar imagen, y va a aparecer. Ahora voy a decir
quitar fondo blanco. Se puede ver que
obviamente es AI Beta, pero voy a
presionar Control Enter y veamos si es capaz de
deshacerse del fondo. Lo eliminé, pero tiene
este fondo gris, así que voy a decir que quiero
decir eliminar fondo, y voy a seguir adelante y
borrar estas imágenes aquí. Voy a arrastrar mis
imágenes dentro de aquí, y luego sólo voy a
escalar esto, lo mismo. Simplemente puede hacer clic en
los pequeños iconos de AR en la parte inferior y hacer clic en
Mover fondo. Ahora, voy a copiar y
pegar la principal ella justo dentro de aquí y la
voy a traer
a la sección de tarjetas. Voy a ir a la
cima y hacerlo Absoluto. Y ahora puedes ver que
no está empujando ninguna de
las cartas fuera
del camino porque absoluto ignora cualquier elemento dentro de esa caja y te permite
moverla por ahí Entonces puedo
traerlo detrás de él y puedo decir, ingredientes. Simplemente lo arrastraremos
un poco así. Y entonces esa es una forma divertida
de crear ese elemento, y luego puedo hacer tal vez Ups Seleccionaré el texto y tal vez
cambiaré el campo a 75%. Ahora voy a pasar a
la siguiente sección a los menios. Voy a borrar
algunos de ellos. Voy a
hacer doble clic dentro de aquí y solo seleccionar las tarjetas
y puedo eliminar eso. Con los testimonios, puedo copiar y solo seleccionar
y puede ir a
ritmo para reemplazar
Control Shift R. Así que voy a reducir todas
las dimensiones de estas imágenes. Entonces puedes ir al clic derecho sobre la relación de aspecto de Lock, y luego voy a
escribir 50 para el ancho. Yo haré higuera. Para este
, voy a hacer regular. Voy a hacer 15, voy a ir 16170. 16 y color de relleno, 75%. Cambiaré la higuera y la
pondré en semi negrita, y el color podría ser
el morado oscuro ahí. Y ahí vamos.
Tenemos algunos bonitos. ¿Y si quisiera
cambiar el color del borde? Yo solo voy a controlar y mantener pulsada la tecla shift
y dar click y seleccionar la tarjeta, y se puede ver que el trazo
es solo un trazo negro, pero podemos
cambiarlo a púrpura o conseguir como este color
claro naranja ahí. Yo voy a hacer
el color peachy. Creo que se ve bien.
Pulsa y pega el botón. Voy a pegar eso. Por ahora botón
en tienda aumentar a tamaño. Dobla el pie hacia arriba, podemos
jugar con diferentes
cosas aquí. Simplemente puedes cambiar la selección de colores
por la parte inferior. Ahí vamos. Algo distinto
del fondo ahí. Quiero pegar en el logo, así que voy a seleccionar
la sección
aquí abajo en el pie hacia arriba. Pero lo quiero fuera
del contenedor, y voy a cambiar
esto a absoluto también. Y podemos hacer que se
vea así. Yo sólo voy a
arrastrar los íconos aquí, y después voy
a hacer click izquierdo y solo lo pongo de lado. Voy a controlar, y luego seleccionar dentro de aquí
y pegar eso en. Y me voy a asegurar Este texto es
voy a poner esto en otro
orden de disposición y cambiar el orden a horizontal
entonces se vuelve así. Turno A y luego Solo asegúrate de que la brecha sea
la misma que la otra. Cambiar el diseño.
Escala esto hacia abajo. Cuando el diseño esté completo. Todo lo que vamos a hacer
en la siguiente lección es agregar algunas interacciones
y divertidos efectos de desplazamiento
7. 6 Añade interacciones (deslizador de logotipos, efectos de desplazamiento): Entonces te voy a mostrar cómo agregar algunas interacciones suaves y efectos de desplazamiento para que
tu sitio web cobre vida. En primer lugar, voy a
empezar con el Navbar, y voy a
ir al botón Voy a ir a la cima y
voy a hacer clic en Más
junto al Enlace. Esto va a agregar un enlace, y podemos agregar Enlace. Podemos poner una URL. Entonces, si
hay otra página, podemos vincularla a otra página. Entonces, si voy a la parte superior izquierda,
haga clic en el botón Más, y digamos, quiero
hacer de esta una página de producto. Puedo volver a mi botón. Presiona el menú desplegable
y obtén un producto. Entonces ahora si tengo el
mouse sobre él, haz clic en él, iré a la página del producto y la parte superior izquierda, podrás
ver cómo se ve. Ahora, para hacerlo
más interesante, lo que quieres hacer es hacer clic
en este extremo en la parte inferior, correr en la parte superior y hacer clic
en la interacción junto a la pestaña de diseño y podemos
ver aquí las interacciones. Ya tiene un
efecto hover en él. Podemos agregar múltiples
efectos de libración si lo desea. Pero puedo agregar
otra interacción. Entonces voy a hacer clic en Más y voy a
hacer clic en Desplazar dos, y voy a
cambiar el disparador. En este momento está encendido
mientras se cierne. Puedes hacer mientras presionas, deja
el mouse, mouse hacia abajo. Excepto haga clic mientras presiona. Quiero desplazarme a
la sección de cotización o a la
sección testimonial, por ejemplo Y así ahora puedes ver estas
pequeñas líneas de interacción que te muestran hacia dónde
va. Entonces va a ir aquí
abajo. Ahora bien, si vuelvo y hago la interacción,
va a ir a eso. Haga clic en el texto aquí, y una de las características interesantes es que
realmente puede actualizar
las cosas con código. Y lo que podemos hacer es ir
a la esquina superior derecha y dar clic en Hacer
interactivo con código. Y entonces ahora lo que puedo hacer es decirle a
la IA que se le ocurra
algo interesante. Entonces puedo decir hacer que el texto tambalee en HVA. AI
va a estar pensando. Tiene un poco de
animación agradable ahí en su cosa. Ahora cuando nos movemos, se puede ver tambalea,
lo cual
es Ahora bien, si quiero probarlo
rápidamente, jala mi mouse y
podrás ver que está rondando. Ahora el texto está relleno
porque es Beta. No admiten
fuentes personalizadas. Edita también el código. Y digamos que
no queremos ese efecto, podemos ir e ir
a los tres puntos
y decir restaurar el diseño original, la parte superior derecha, y voy a
deshacerme de ese efecto. Entonces ahora ya no va a tener
ese efecto. Entonces, debido a que las fuentes no
se están registrando, lo que realmente
podemos hacer es que podamos
esbozar el texto. Voy a
hacer doble clic sobre esto, clic derecho y
haga clic en Contorno de trazo. Y así ahora cuando
previsualizas si tienes una fuente personalizada que estás usando, puedes ver que la
delineará y debería funcionar. Entonces tal vez tengas
que hacer eso para todo, pero sigamos adelante y agreguemos
algunas interacciones más. Voy a presionar
el botón más y tienes mucho
efecto diferente. Digamos que queremos
hacer un efecto revelador, podemos hacer un fade in, y
dejaremos la salida o ninguna. Podemos hacer escala adentro, deslizarse
adentro, lo que usted quiera. Vamos a deslizarnos
tal vez desde abajo. Una vez que las cargas pagadas, va a deslizarse
y te da una pequeña vista previa
que me gusta mucho. Para estos también, vamos a hacer lo mismo. También puedes
hacer clic derecho y eliminar interacciones si
no estás vibrando con él. Así que voy a entrar
aquí interacciones,
revelar, e iremos deslizándonos en la parte inferior. Carga de página, y vamos a previsualizar, y puedes ver que
surgen los diseños, lo cual es súper genial. Básicamente, lo mejor que puedes
hacer es simplemente jugar. Entonces, ya sabes, a lo mejor quiero seleccionar una de
estas tarjetas o esta grilla, podemos ir a la interacción y
podemos hacer un scroll parallax Eso es tal vez 50% de
velocidad y puedes desplazarte y puedes ver el efecto de
paralaje ahí, pero obviamente, no
quiero ese efecto También haz cosas divertidas como agregar una interacción
lúdica en la que se pueda hacer clic Por ejemplo, si quiero
tener esta imagen aquí, puedo ir a la interacción y
puedo ir a jugar y
hacerla arrastrable Y puedo agarrarlo, y solo queremos
asegurarnos de que podemos simplemente arrastrarlo dentro del contenedor
padre, que es esta tarjeta. Entonces voy a presionar
Play para probarlo. Y así, si pongo un
ratón sobre esto, puedo arrastrarlo por ahí ahora
así, lo cual es genial. Entonces está dentro de ese contenedor. Pero digamos que solo queríamos arrastrarlo
a cualquier parte. Puedo volver al efecto. Puedo actualizarlo, vista previa. Y así ahora debería
poder arrastrar a cualquier parte. Y porque está
dentro de este contenedor, no
se moverá, lo cual
es bastante genial. Puedes ver todos
estos iconos que puedes arrastrar ahora, lo cual es
solo un poco divertido. Puedes agregar tantas
interacciones como
quieras para que el
sitio sea mucho más agradable. Sugeriría agregar,
simple fade ins. Entonces para este, podemos ir
podemos hacer un efecto hover, y digamos que
queremos que se escale un poco más grande. Como uno oh cuatro. Podemos cambiar la transición a fácil de entrar y salir
o puedes hacerlo hinchable o rápido o
lo que quieras Así se puede ver eso. Si
presiono play ahora y vuelo el cursor, puedes ver que tiene un efecto cool
hover, lo cual es Así que juega con eso.
Clase. Voy a hacer que el sitio web sea
receptivo para móviles para que todo esté funcionando correctamente.
8. 7 Haz que sea responsivo a móviles: Haremos que el sitio web sea totalmente receptivo para que funcione
para tablet y móvil. Entonces una vez que tienes con
tu diseño,
tienes interacciones y
todo está listo para funcionar, qué podemos hacer eliminar esa página, voy a hacer clic en
el botón más y agregar un nuevo punto de interrupción Ahora, sea cual sea el cambio que
hagas en el escritorio, agregará esos cambios a
la tableta y luego espuma. Entonces podemos ir a tablet
y también queremos agregar un móvil siempre
recomiendo hacer el diseño de escritorio
primero para que caiga en cascada. Ya puedes ver, podemos ver que mencioné antes
que si puedes hacer un tamaño diferente para los puntos de interrupción más pequeños es por
eso que siempre es bueno volver a nuestros estilos de
topografía Voy a seleccionar sobre esto.
Y si vas a tipografía, podemos dar clic en Editar estilo y quieres agregar
algunos puntos de Entonces en Tablet View, se
puede ver que queremos tal vez
ir al 35 y para el móvil, queremos incluso
ir tal vez más allá. Iremos como 20. Y
debería ajustar eso. Entonces ahora, si hacemos clic aquí, ajústelo, pero creo que
porque es Beta, probablemente aún no hayan actualizado eso. Entonces solo voy a cambiar el tamaño yo mismo y
ajustar esta sección. Y yo sólo voy a
ajustar estas botellas. Voy a poner
un diseño de pedido, y quiero personalizarlo
así . En realidad, voy a seguir adelante. Yo sólo voy a personalizar eso Y para las otras botellas, en realidad
voy a
esconderla, así que voy a dejar caer la opacidad, así que no podemos ver eso por ningún lado Y obviamente, no se está mostrando, pero queremos ver esta
botella aquí. Sólo tienes que pasar. Revisaremos todos los tamaños, y si quieres agregar
un poco más de relleno, puedes hacerlo. Creo que está bien por ahora. Para estos ingredientes, simplemente lo
trasladaremos
al centro ahí. Quiero ajustar esto
y mover esto hacia abajo. Y todo lo demás se ve bien. Así que solo se trata de administrar el espaciado y el dimensionamiento y asegurarse de que todo
funcione en diferentes tamaños. Una vez que esté fuera de Beta, estoy seguro de que todas estas correcciones se
arreglarán. Trae esto, éste. Puedes
sacarlo a la luz. También puedes ajustar el tamaño en
el lateral también. Bien, para que puedas ver
los cambios ahí. A medida que baja, es
diferente escalado. Para éste, lo
que queremos hacer. Sólo vamos a
remodelar ese cuadro de texto. M. Voy a ajustar
el tamaño de esto. Y creo que todo se ve bien excepto estos testimonios. No sé lo que
tengo para arreglar esto. Así que acabo de volver a guardar las imágenes porque
tenía máscaras de recorte
porque las creé en
Illustrator esos temas Así que acabo de volver a exportarlo como un Así que ahora si
arrastramos la balanza, podemos ver lo que está haciendo. Entonces, si lo bajamos, se
puede ver lo que sucede
en diferentes tamaños. Y tendría que arreglar. Ya ves como el Nav y el texto de diferentes
tamaños debería escalar. Entonces lo que me gusta hacer
es si es como que quiero
mantenerlo de cierto tamaño, podemos ir al lado derecho y podemos agregar un ancho mínimo. Y este
ancho mínimo debería ser 612. Entonces ahora si presiono Play, se
puede ver que debe retener
y siempre debe estar alineado al centro
Así que ahí vamos. Pero una vez que golpea, debajo la vista móvil
siempre hay centrada y mínima podemos agregar un
ancho de hombres podrías 300, por lo que debería estar centrada
ahí para que puedas ver ahí. Entonces esa es una forma
de solucionar ese problema. Y una vez que estés listo para ir, siguiente lección, te mostraré
cómo publicar tu sitio web.
9. 8 Publicación del sitio muestra cómo conectar el dominio: Una vez que estés satisfecho con
él, y todo esté bien, puedes ir a la parte superior
izquierda, hacer clic en Publicar. Y Figmae
te dará un lugar de puesta en escena. Entonces, si no conectas
el dominio, está bien. Literalmente puedo hacer clic en Publicar y me
conectará a esa URL. Si tienes otros problemas, te
lo dirá,
tienes unas
máscaras o lo que sea. Y hay
accesibilidad y esas cosas, pero probablemente no voy a entrar en
demasiados detalles en eso. Una vez que esté listo para funcionar, literalmente simplemente
haces clic en el sitio web y yo
puedo desplazarme. Todo parece estar
funcionando en la vista de escritorio. Y es literalmente en
vivo en el navegador. Así es literalmente como
publicas tu sitio web. Ahora, si quieres
conectar un dominio, haces clic en Conectar y vas a Conectar y quieres
conectar un sitio web. Normalmente compro mis dominios en Go Daddy o tienes Namecheap, y solo tienes que seguir
las indicaciones aquí Go Daddy o tienes Namecheap,
y solo tienes que seguir
las indicaciones aquí.
Es bastante simple.
10. Conclusión: Por tomar esta clase de video
corto sobre cómo configurar rápidamente
un sitio web Infigma ahora. No tienes que aprender ninguna
otra herramienta de terceros. Puedes hacer
de todo, desde diseño, logotipos, hasta diseñar y
construir sitios web, Infigma que es bastante genial Seguro que entras en la sección de discusión y proyectos de
clase, voy a poner algunos
enlaces extra para explicar algunas cosas, dar más información,
dar algunos recursos útiles, así
como un breve. Si no tienes
un brief para crear, puedes crear una marca o
producto
similar y simplemente hacer una landing page de
una página. La clase, por favor deje
una reseña también si lo encuentra útil para que otros
estudiantes puedan tomar el curso.
Jeremy Mura, Brand and Web Designer
