Transcripciones
1. Introducción: Hola y bienvenidos a sus celdas. El mejor lugar para aprender diseño y prototipo de UI
UX. En este curso, vamos a
construir un sitio web del mundo real, que prototipo en Figma con las últimas características y estética de
diseño. Mi nombre es, ella tiene impar
y yo soy diseñadora UX. Mi co-instructor es show Hagar
y es diseñador de UI. Y contamos con
más de diez años de experiencia en la industria del
diseño. A través de este curso, te
guiaremos sobre cómo crear un sitio web desde
cero en Figma, el curso se
divide en cuatro secciones. Intersección, Figma, sección de
visión general, UI, sección UX y sección de
prototipo. En la sección de introducción, veremos un poco breve sobre este curso y cómo se pueden perder los archivos de ejercicio en la sección de descripción general de
Figma veremos qué es Figma y cómo
usar sus características. Y en la sección UI y UX, comenzaremos a crear y estructurar nuestro sitio web de entrega de
alimentos. Y al final, uniremos
todos los marcos juntos. Entonces parece un sitio web del mundo
real. Y en el último,
veremos cómo compartir nuestro sitio web con otros
miembros del equipo o partes interesadas. Tenemos mucho que
mostrarte
sin más preámbulos.
Empecemos.
2. Cómo usar los archivos de ejercicios: En este video, te
vamos a mostrar
cómo puedes comenzar
con los archivos de ejercicio. Los archivos de ejercicios de este curso se incluyen
con esta conferencia. Define que hemos subido
contiene archivo de activos Sigma. Contiene todos los activos
utilizados en el curso. Por favor, descargue este
archivo para que podamos continuar nuestro viaje creando un sitio web
del mundo real en Figma. Este archivo de ejercicio no
contiene el archivo Figma para papá. Sólo tienes que seguir con
nosotros a través de este curso. Para que ustedes puedan
entender cómo pueden crear su
propio proyecto Figma. Eso es todo por este video. Nos vemos en el siguiente módulo.
3. ¿Qué es Figma?: Sigma es una aplicación de diseño UI
UX basada en navegador y principalmente una herramienta de creación de
prototipos basada en web con funciones
adicionales fuera de línea habilitadas por aplicaciones de
escritorio
para macOS y Windows Actualmente es la herramienta de diseño de
interfaces líder en la industria. Aquí la pregunta es, hay muchas otras herramientas como Adobe XD,
sketch, marble, y muchas
otras que ¿por qué usamos Figma? La respuesta es que
otros softwares requerían licencia y
tenemos que comprarlos. Mientras que sigma está disponible
gratuitamente. Y simplemente puedes
ir al sitio web,
Sigma.com, Sigma.com, registrarte y comenzar a usar
Figma en cualquier lugar y en cualquier momento. Porque es una aplicación
basada en la web. A pesar de que es
versión dextro también está disponible. Pero depende. Tú, o quieres
usarlo en línea o fuera de línea. Figma es muy fácil de aprender. Y si lo intentas, puedes aprender
Figma en tan solo dos días. Y dentro de siete a diez días, podrás dominar Figma. Lo mejor de sigma es
suponer que estás viajando a algún otro país y no
tienes tu
laptop contigo. Puedes acceder fácilmente a tus archivos
Figma iniciando sesión en el portal web de Figma a través alguna otra computadora portátil y acceder a
todas tus peleas fácilmente. Ahora creo que ustedes tienen
algunos conocimientos sobre sigma. Nos vemos chicos en el siguiente
video donde vamos a ver cómo crear una cuenta
Figma en línea.
4. Inscribirse Para Figma: Para inscribirse en Figma, solo tiene que ir a figma.com y dar
clic en Inscribirse aquí. Simplemente ingrese su correo electrónico y contraseña y presione Crear cuenta. También puedes registrarte con
tu cuenta de Google. Después de hacer clic en Inscribirse, está preguntando mi nombre y
mi trabajo, ingrese algunos datos. Y si quieres unirte a
la lista de reuniones de Figma, puedes marcar esta casilla de verificación. Ahora mismo lo estoy viviendo. Edita esto y después de eso,
haz clic en Crear cuenta. Ahora se crea nuestra
cuenta Figma. Es momento de agregar un
equipo a mi Figma. Te voy a
escribir exalta equipo. Recuerda, un equipo tiene muchos miembros para que puedas colaborar
fácilmente con ellos. Lo discutiremos más adelante. Ahora solo haz clic en siguiente. También puedes hacerlo más tarde. Ahora mismo, hay
dos planes para Figma. Elige el plan que más te convenga. Pero si eres principiante, sugiero que elijas
el plan inicial. Y ahora nuestra cuenta Figma
se configura con éxito. Eso es todo por este video. Los veo en el siguiente video.
5. Cómo configurar fuentes en figma: En este video, vamos a habilitar fuentes locales en nuestro Figma. De lo contrario, si vas
a trabajar con fuentes existentes, no
tendrás una
gran selección. Y también si importas
cosas como archivos de boceto, posible
que el texto no funcione
y puede que no se vea bien. En Figma, cuando
estás en el sitio web, ya
estás conectado. Dirígete a la esquina superior izquierda
donde están los muchos caminos, y ve a ajustes. Aquí abajo, puedes
ver que tenemos algunas fuentes locales que
actualmente no están habilitadas por defecto. Haga clic en Descargar instalador
para habilitar las fuentes locales. Eso va a descargar esto dependiendo de tu sistema
operativo. Se va a descargar
un pequeño archivo. En lo que vas a
hacer es que
esencialmente lo vas a abrir e instalar. Puedo ver que tengo
el paquete aquí mismo. Así que vamos a instalar eso. Y verás ahora que las fuentes
locales están habilitadas. Ahora tengo muchas fuentes
disponibles en mi Figma. De lo contrario, estarás
trabajando con menos fuentes. Ahora puedes volver a lo reciente
y ver toda la violencia. El siguiente paso es que vamos a entender el espacio de trabajo Figma. Así que nos vemos en
el siguiente video.
6. Cómo entender el espacio de trabajo: Bienvenido de nuevo. En este video, vamos a entender el
espacio de trabajo o Figma. Esta es nuestra página de inicio. Por defecto. Figma
nos regala tres proyectos. Puedes conservarlo o eliminarlo. Está totalmente
basado en tu elección. A continuación, aquí en la parte superior derecha, tenemos dos opciones. Esta opción de importación
se utiliza para importar diferentes proyectos de Figma
directamente a Figma, también
puede importar
sus archivos de boceto haciendo clic en este icono de importación. Tenemos un ícono más. Simplemente haga clic en este icono
para crear un nuevo archivo. Aquí en la parte superior izquierda
tenemos una barra de herramientas. Contiene diferentes herramientas como rectángulo, elipsis, herramienta de pluma. Puedes dibujar diferentes
formas usando estas herramientas. Debajo está la pestaña de capas. Aquí puedes ver
todas tus capas. La siguiente pestaña es el sello de activos. Aquí podrás almacenar todos
tus activos que estés usando a lo largo
del proyecto y luego compartirlos con los miembros de tu equipo. En el centro,
tenemos nuestro lienzo donde podemos crear y
trabajar con nuestros tableros de arte. Recuerda, las tablas de arte
ahora se llaman marcos en Figma. En las próximas lecciones
donde digo marco, significa que estoy
hablando de tableros de arte. Después de eso, en el lado derecho, tenemos nuestro panel Propiedades. Aquí. Se pueden cambiar las propiedades
de diferentes elementos. Actualmente, no está
haciendo nada. Pero cuando dibuje un rectángulo
aquí en el lienzo, verás que ahora son visibles todas las propiedades de ese rectángulo. A continuación, en la parte superior derecha, tenemos un botón Compartir para compartir este proyecto con otros
miembros del equipo o con clientes. También tenemos un botón de reproducción
para previsualizar nuestro diseño y un botón de zoom para
acercar o alejar el tablero de arte. Y esto nos lleva
al final de este video. Los veo en el siguiente video. Vamos a ver cómo
configurar nuestro primer archivo en Figma.
7. Cómo configurar el primer archivo en figma: Bienvenida de nuevo. En este video,
vamos a configurar nuestro primer archivo en
Figma para configurar un archivo. En primer lugar, cree un nuevo archivo. Y aquí en la parte superior central, renombró el primer proyecto
a su proyecto de equipo. Después de eso, renombra
este archivo sin título al sitio web de BFF Town.
Alhacer clic en él. Los proyectos Sigma se
crean en marcos. Entonces, para crear un marco, simplemente presione la tecla F
de su teclado, o haga clic aquí en la parte superior
izquierda y elija marco. Después de eso. Aquí del lado derecho, tenemos muchas
opciones para marcos. También podemos crear diferentes
aplicaciones para teléfonos, tabletas, web y publicaciones en
redes sociales. Pero para este curso,
vamos a trabajar con pantalla web. Así que tenemos que elegir
Web 1920 por 1080 frame. Así que simplemente haz clic en él.
Yahora se crea nuestro marco y así es como
puedes configurar un archivo en Figma. Los veo en el siguiente
video donde vamos a ver cómo empezar a
crear nuestro sitio web.
8. UI de la página principal: Bienvenida de nuevo. En este video,
vamos a empezar a crear la primera
página de nuestro sitio web, que es la página principal. Entonces, antes que nada,
crea un marco de 1920 por 1080 presionando la tecla
F desde tu teclado. Ahora vamos a
configurar nuestra red de sitios web. La cuadrícula del sitio web es una estructura
visual que
se utiliza para organizar los componentes
del diseño de una página web, como topografía, imágenes ,
videos y otros elementos. Tradicionalmente, una
estructura de rejilla se utiliza para
dividir uniformemente el espacio de diseño en una serie de columnas
verticales. Entonces, para crear una cuadrícula, simplemente seleccione el marco y
haga clic en la opción de cuadrícula. A partir de aquí, cambie su
orientación a columnas. Y la cuenta, derecha, 12 columnas con un margen
de 375 de izquierda y derecha. Y la canaleta de 30 pixeles. Canalón es básicamente el espacio
interno entre columnas. Después de eso,
vamos a agregar gobernantes. Entonces solo presiona Shift R desde el teclado y agrega dos reglas, una en el lado izquierdo
y otra en la derecha. Estos gobernantes nos ayudarán en la estructuración de nuestro sitio web. Después de eso, agregue un rectángulo
de alrededor de 120 píxeles. Ahora voy a agregar
el logo y la barra de navegación. Así que simplemente copia el logo de Exercise Files y
pegarlo aquí. Cámbielo a alrededor de 150, y colóquelo aquí correctamente. Ahora presiona la
tecla T y escribe a casa sobre Menú y contacto
en la barra de navegación. La fuente que estamos usando
en este proyecto está abierta para colocar la capa de texto en el centro con un
espaciado interno de 40 píxeles. Ahora, agregue un subyacente
de dos píxeles debajo esta pestaña Inicio y cambie el color de la línea de texto
a este color rojo. Después de eso, agregar a
los textos capas y renombrar los dos primeros actos ordinales y el segundo 20800 triple uno, triplicar para ahora agregar un rectángulo
de alrededor de 40 por 40. Cambiar el radio del agua 28, y su color a nuestro
equipo, color amarillo. Y colóquelo aquí. Haz una copia de ella, y muévala hacia la derecha con un espaciado interno
de diez píxeles. Ahora vamos a
agregar íconos aquí. Así que simplemente copia el icono de cesta y icono de
usuario de Exercise
Files y colócalos aquí Y aquí, cambia
el espaciado entre este primer rectángulo
y este texto a 30 píxeles y alinea toda esta barra
de navegación correctamente. Ahora vamos a bajar aquí. Vamos a agregar
nuestro banner de sitio web. Entonces para eso, dibuja un rectángulo
de alrededor de 1920 por 830. Cambia el color a negro y agrega desenfoque radial de este
color sobre este rectángulo. Este desenfoque radial creará
un bonito efecto de foco. Ahora voy a agregar imágenes
sobre este rectángulo. Así que copia las imágenes de Exercise Files y
colóquelas aquí probablemente. Después de eso, presiona la tecla T y escribe las mejores
hamburguesas de la ciudad, que es el texto del título. Colóquelo correctamente. Ahora vamos a agregar un botón de
llamada a la acción aquí. Para eso, dibuja un rectángulo
alrededor de 20 por 58. Cambia su radio de esquina a diez. Colóquelo debajo del texto. Ahora, toma la
herramienta de texto y escribe, lee más y
alinéala con este botón correctamente. Ahora vamos a bajar aquí. Dibuja un rectángulo de
alrededor de 1920 por 540. Cambia su color
a este color rojo. Después de eso, agrega una imagen
sobre este rectángulo. Así que toma la imagen
del archivo de ejercicio y
colócala sobre este rectángulo. Y luego cambiar su
opacidad a alrededor del 10%. Ahora toma este texto del título anterior, muévelo hacia abajo y cambia
la fuente a 50 píxeles, y vuelve a cambiarle el nombre. Toma una copia de este texto, muévelo hacia abajo y cambia este texto a texto ficticio de
párrafo. Con el margen superior
de diez píxeles. Después de eso, del lado derecho, dibuja un rectángulo de alrededor de
365 por 375 y colóquelo aquí. Cambia su color a
nuestro color de tema. Ahora, solo imagen importante del archivo de ejercicio y
colóquelo aquí correctamente. Vamos a bajar aquí. Simplemente dibuja un rectángulo
de alrededor de 1920 por 1287. Cambia de color a
este color claro. Después de eso, toma
este texto de arriba, muévelo hacia abajo con un
margen superior de 100 píxeles. Renombrarlo a artículos populares y cambiar su color
a este color rojo. Después de eso, dibuja un rectángulo
de alrededor de 270 a 70. Cambiar su radio fronterizo a diez. Y luego presione la tecla T
y el nombre correcto del producto. Haz una copia de ella y
muévala hacia abajo con un margen superior de cinco píxeles y
cámbiala a precio. Ahora solo copia el
elemento actual de la barra superior. Muévelo hacia abajo al
frente de este texto y bájelo
a aproximadamente 40 por 40. Alinear correctamente. Ahora bien, haga siete copias del mismo y organícelos en consecuencia. Después de eso, importe imágenes de los archivos de ejercicio y
colóquelas sobre estos
rectángulos en consecuencia. Ahora, solo toma el texto del encabezado
anterior. Muévelo hacia abajo con un margen
superior de 150 y cámbielo a mejores ofertas. Después de eso, importa
la mejor imagen de los archivos de ejercicio y colócala aquí con el margen
superior de 100 píxeles. Ahora otra vez, toma el texto de este artículo, muévelo hacia abajo y
cámbralo a opiniones de clientes. Después de eso, copie la imagen de
textura de los archivos de ejercicio y colóquelo detrás del texto de reseñas de
clientes. Aquí, apenas dibuja un círculo
de alrededor de 155 por 155. Después de eso, agrega una imagen de usuario. Puede utilizar esta extensión
para importar imágenes de un usuario. Ahora por favor esta imagen de usuario con un margen superior de 50 píxeles. Ahora solo coloca este texto de
revisión ficticio e hizo esta imagen de usuario y estas calificaciones de
estrellas también. Copia las estrellas de
los archivos de ejercicios. Ahora bajemos a
nuestra sección de pie de página. Así que dibuja un rectángulo de
alrededor de 1920 por 360. Cambia su color a
nuestro color de tema. Y luego copie los enlaces de
navegación de la barra de navegación y colóquelos aquí. Ahora solo importa iconos de
redes sociales de los archivos de ejercicio
y colóquelos aquí. Alinear correctamente. Y por último, escribe
este texto de copyright. Sus teléfonos deberían
ser 13, regulares. Y con eso, se completa nuestra primera
pantalla.
9. Página sobre nosotros: Bienvenido de nuevo. En este video, vamos
a crear la página Acerca de Nosotros. Entonces, antes que nada, copia
el fotograma anterior y muévelo hacia la derecha con un espacio interno de 200 píxeles. Y cámbielo a Acerca de Nosotros. Después de eso, elimine esta imagen de
hamburguesa y este botón
, baje este control deslizante
a aproximadamente 1920 por 250. Después de eso, cambie el nombre de
este texto a sobre nosotros. Su fuente debe ser de 50. Alinear el centro. Haz una copia de este
texto y muévelo hacia abajo. Cambia su fuente a 18, y escribe migas de pan
para este sitio web. Después de eso, mueve esta
segunda sección hacia arriba. Cambiar el
texto del título a nuestra historia. Y los textos de párrafo
a algún texto ficticio. Cambia la
altura de este rectángulo a 730. Después de eso, reemplace
esta imagen esta imagen de los archivos de
ejercicio. Vamos a bajar aquí. Dibuja un rectángulo
alrededor de 1920 por 668. Después de eso, agregue un texto de título y cámbielo a nuestros servicios. Colócala con un margen
superior de 100. Ahora solo dibuja tres rectángulos
de redondo 360 por 280. Cambiar sus áreas corporales a diez. Y copie el icono de los archivos de ejercicio y
colóquelos sobre estos rectángulos. Después de eso, toma una capa de texto y colócala sobre
este primer rectángulo. Cambia su fuente a 24 y cámbiale el nombre a comida de calidad. Haz dos copias de este texto y muévalas al
segundo tercer rectángulo. Cambiar el segundo texto
a recetas originales. Y el tercero, entrega
demasiado rápida. Ahora
bajemos aquí y dibujemos un rectángulo de
alrededor de 1920 por 729. Agrega un título de conoce a nuestro equipo. Ahora solo agarra la herramienta
rectángulo. Dibuja un rectángulo de alrededor de 270 por 270 con
las áreas de borde. Con un radio
de borde de diez píxeles. Presione la tecla T y usuario y
designación
correctos, por favor. Estas capas de textos con el margen
superior de 30 píxeles. Ahora haz tres copias
de estos textos, capas y rectángulos, y muévalos hacia la derecha
con un espaciado igual. Ahora, importa imágenes de chef y renombra sus designaciones
y sus nombres. Entonces a partir de aquí, estoy
acelerando el proceso. Por último, mueve este pie o hacia arriba, y nuestra pantalla
ya lo está completando. Los veo chicos en el siguiente video.
10. Página de menú: Bienvenido de nuevo. En este video, vamos
a crear la pantalla de menú. En primer lugar, copia la pantalla
anterior y
muévala hacia la derecha con un
espaciado interno de 200 píxeles. Y renombrarlo a la pantalla de menú. Y cambiar h
pan rallado también. Ahora solo borra todo
esto y dibuja un rectángulo de alrededor de 1920 por 360 y cambia su color
a este color gris. Y después de eso, agregue un círculo de alrededor de cincuenta, un cincuenta. Presiona la tecla T y escribe tratos. Ahora, haga siete copias de éstas y organícelas adecuadamente. Después de eso, agrega imágenes de
elementos del menú sobre estos círculos. Así que copia las imágenes de los archivos de ejercicios y
complétalos aquí correctamente. Después de eso, bajemos
aquí y agreguemos una mejor imagen. Copia la imagen
del banner de la pantalla de inicio y colócala aquí correctamente. Después de eso, bajemos
y agreguemos un menú de elementos populares. Entonces copia eso de
la pantalla de inicio y colócala aquí con un
margen superior de 100 píxeles. Después de eso, vamos a reutilizar este popular menú de ítems y
renombrar su nombre e imágenes. Es un proceso largo. Entonces estoy acelerando el video. Ahora. He añadido todo
el menú. Ahora nuestra pantalla está terminada. Aquí hemos añadido
todo el menú. Eso es todo por este video. Los veo chicos en el siguiente video.
11. Página de menú 1: Bienvenido de nuevo. En este video, vamos
a crear una pantalla de menú uno. Entonces, antes que nada, copia
el fotograma anterior y muévelo hacia la derecha con un espaciado
interno de 200. Y cámbielo a la pantalla de
menú uno. Ahora solo dibuja un rectángulo
alrededor de 1920 por 873 y copia la imagen de pizza de la pantalla anterior
y redimensionarla a 530 por 530 con un
margen superior de 100 píxeles. Después de eso, agregue un título, calificación de
usuarios, estrellas, precio y descripción
sobre el producto. Ahora copia las estrellas de los archivos de ejercicios
y colóquelas aquí. Ahora vamos a agregar
tamaño y cantidad. Entonces presiona la tecla T
y los lados derechos, S, M, L. Así que presiona la tecla T
y el tamaño correcto. Pequeño, mediano y grande. Dibuja un círculo de alrededor de 60 por 60 y colóquelo
detrás del pequeño. Copia el círculo, y también
colócalos detrás de texto mediano
y grande. Cambia este color
de círculo de grande a amarillo. Ahora vamos a agregar
cantidad para eso. Dibuja dos rectángulos. Dos deben ser 47 por 511
deben ser 84 por 51. El extremo izquierdo, el
color del rectángulo derecho debe ser gris, y el rectángulo central
debe ser blanco. Ahora solo agrega los
iconos del contador y la cantidad aquí. Después de eso, toma el botón de la página principal y colócalo aquí. Cambia su tamaño de texto a 23
y su color a blanco. Ahora vamos a bajar aquí. Dibuja un rectángulo de
alrededor de 290 por 70. Cambia su radio de esquina superior derecha y superior
izquierda a ocho, y cambia su color a rojo. Ahora presiona la tecla T y los detalles correctos
del producto aquí. Alinear correctamente. Toma una copia de este
botón y muévelo a la derecha y reemplaza
el texto con reseñas. Su color debe ser negro. Y borra este rectángulo para que estas pestañas
estén igualmente equilibradas. Después de eso, dibuja una
línea con una altura de cuatro píxeles bajo
este botón rojo, y cambia su color
a rojo también. Después de eso, dibuja un rectángulo
de alrededor de 1920 por 1466. Cambia su color
a un gris claro. Ahora agrega un texto ficticio con un margen superior de 50
píxeles sobre él. Por último, copia la sección de
artículos populares de la página principal y
colócala aquí con un
margen superior de 50 píxeles. Y también renombró el encabezado. También te puede gustar. Y ahora nuestra pantalla está terminada. Los veo en el siguiente video.
12. Menú Página 2: Bienvenido de nuevo. En este video, también vamos
a crear la pantalla de menú. Entonces, antes que nada, copia el fotograma anterior y
muévelo hacia la derecha. Ahora solo barrió
este rectángulo rojo aquí y cambie el color del
texto de las reseñas a blanco. Y este producto
detalló color a negro. Después de eso, bajemos
y eliminemos este texto de detalles. Y ahora aquí vamos
a agregar valoraciones de usuarios. Así que copia las estrellas
de calificación de los archivos de ejercicio y pegarla aquí con un
margen superior de 50 píxeles. Después de eso, presione la tecla T y nombre y la fecha
correctos del cliente. Cambia el texto del
nombre del cliente a negrita. Y nuevamente, presione la tecla T y escriba el texto ficticio revisado por el usuario. Ahora dibuja una línea gris bajo esta revisión con el
margen superior de 20 píxeles. Y por último, hacer una copia de
esta revisión y moverla hacia abajo. Y ahora la pantalla está terminada. Nos vemos en el siguiente video.
13. Añadir a la pantalla de la cesta: Bienvenida de nuevo. En este video,
vamos a crear, Agregar al carrito de la pantalla. En primer lugar, copia el fotograma anterior y muévelo hacia la derecha. Y luego dibuja un rectángulo
negro sobre la pantalla y cambia su opacidad al
setenta y cinco por ciento. Observe dibujar un rectángulo
alrededor de 682 por 553. Después de eso, dibuja
otro rectángulo sobre él y cambia el radio
de esquina del primer rectángulo a 20. En el segundo rectángulo, arriba a la derecha y arriba a la izquierda a 20. Después de eso, agrega un ícono de cerrar
sobre este segundo rectángulo. Y ahora agrega un ícono de marca de verificación. Copia el ícono
de marca de verificación del archivo de ejercicio y presiona la tecla T y
escribe este texto aquí. El tamaño de la fuente debe ser 23 negrita, y su color debe ser blanco. Ahora solo agrega los detalles del producto. Copia los detalles de la pantalla anterior
y pegarla aquí. Y por último, añadir dos botones. Copia los botones de
la pantalla anterior, y cambia este primer
texto de botón para continuar comprando. El botón Siguiente para
proceder al pago, y su color a rojo. Y ahora nuestra pantalla está terminada. Los veo chicos en el siguiente video.
14. Pantalla de detalles de producto: Bienvenida de nuevo. En este video, vamos a
crear la pantalla Detalles del producto. Entonces, en primer lugar, copia la pantalla del menú y muévala hacia la derecha. Suprimir esta sección del cuerpo. Después de eso, cambie el nombre de estos
textos de menú a carrito de compras. Y es pan rallado a casa. Iniciar sesión. Aquí en la barra de navegación. Agrega un círculo de cantidad
sobre este ícono de carrito. Ahora vamos a movernos hacia abajo y
dibujemos un rectángulo de alrededor de 565 por 60 con el
radio fronterizo de 50. Cambia su color a gris claro. Y ahora presiona la tecla
T y derecha, Tienes tres artículos
en tu tarjeta de compras. Y después de eso, solo
bajemos y agreguemos el detalle del producto. Es cantidad con el deslizador. Es premio y un icono de borrar. Agrega un subyacente de color
gris con el
margen superior de 20 píxeles. Alinear todos ellos correctamente. Ahora solo tienes que seleccionarlos todos y duplicarlos dos veces con un espaciado interno
de 20 píxeles. Cambiar los detalles del segundo tercer
producto. Ahora presiona la tecla T y
escribe subtotal y envío. Después de eso a sus valores. Y ahora solo dibuja una línea debajo de ella con el
margen superior de 20 píxeles. Ahora aquí, agregue un costo total. Y por último, añadir continuar comprando y proceder
a los botones de pago. Copia estos botones de
la pantalla anterior, y pegarlos aquí con el margen
superior de 50 píxeles. Ahora solo mueve esta foto hacia arriba. Eso es todo por este video. Los veo chicos en el siguiente video.
15. Pantalla de inicio de sesión: Bienvenido de nuevo. En este video, vamos a
crear una página de pantalla de inicio de sesión. Entonces, antes que nada, copia el fotograma
anterior y muévelo a la derecha y cambia su título
y migas de pan para iniciar sesión. Y después de eso, borre
la sección del cuerpo. Ahora, mueve este inicio de sesión hacia abajo con el
margen superior de 90 píxeles. Cambia su color a rojo y cámbiale el nombre para
iniciar sesión en tu cuenta. Después de eso, presiona la tecla T
y escribe la dirección de correo electrónico. Ahora solo dibuja un rectángulo
de alrededor de cinco a 69 por 55 con el
radio de borde de ocho píxeles. Copia esta dirección de correo electrónico y
muévala a este rectángulo. Cambie el nombre a texto de marcador y cambie su color también. Ahora selecciona este campo de correo electrónico
y haz una copia del mismo. Muévelo hacia abajo con el margen
superior de 25 píxeles. Cambie el nombre de esta
dirección de correo electrónico a contraseña, y este marcador de posición a estrellas. Y nuevamente, haz una copia de
este texto de contraseña y muévelo hacia abajo y cámbiale el nombre
para olvidar tu contraseña. Después de eso, dibuja
tres rectángulos. Primero debe ser 569 por 55. Segundo, tercero debe
ser 269 por 55. Cambia el radio del borde de estos tres rectángulos a ocho. Cambió el primer color del
rectángulo a rojo, a azul a este color. Ahora presiona la tecla T y escribe
login en el primer botón. Entra con Facebook
en el segundo botón. E inicia sesión dentro de Google
en el tercer botón. Ahora agrega iconos de Facebook
y Google. Así que copia los iconos de los archivos de ejercicio y
colócalos aquí correctamente. Por último, presione la tecla T
y escriba el registro. Ahora texto, su color
debe ser rojo. Y ahora nuestra pantalla está terminada. Los veo en el siguiente video.
16. Pantalla de registro: Bienvenido de nuevo. En este video, vamos a crear una página de pantalla de registro. Entonces, antes que nada, copia
el menú anterior y muévelo a la derecha
y cambia su título en breadcrumbs para registrarte aquí este iniciar sesión en tu cuenta
a registro de cuenta. Después de eso, toma estos
botones de inicio de sesión
con Facebook y Google y
muévalos hacia arriba y cambia su
color a gris claro. Agregue
títulos FirstName y LastName sobre estos campos. Y también son
marcadores de posición. Después de eso, tenemos
un campo de correo electrónico. Y luego cambiar este
campo de contraseña en dos campos. Primero debe ser la contraseña, y los segundos deben ser
volver a ingresar la contraseña. Y ahora dibuja dos
rectángulos de alrededor de 21 por 21 con el
radio de borde de dos píxeles. Ahora presiona la tecla T y escribe, recibe ofertas y términos
y condiciones de texto frente a estas casillas. Por último, renombró el
botón de inicio de sesión para registrarse ahora. Y con eso, se completa nuestra
pantalla. Los veo en el siguiente video.
17. Pantalla de salida: Bienvenido de nuevo. En este video, vamos a
crear la página de la pantalla de pago. Entonces, antes que nada, copia el fotograma
anterior y muévelo a la derecha y cambia su título y migas de pan
para checar. Después de eso, haga dos copias de este
texto de restricción de cuenta y cambie el primer texto a dirección de
facturación y el
segundo al resumen del pedido. El tercero al método de pago. Ahora bajo dirección de facturación, voy a agregar algunos campos. Puedes copiar los campos de las pantallas anteriores
y colocarlos aquí. Ahora voy a cambiar
los nombres de campo. Entonces a partir de aquí estoy
acelerando el proceso. Después de eso. En resumen de audio, agregue la imagen del producto, el
nombre del producto, la cantidad y el precio. También agregue subtotal,
envío y costo total. Ahora vamos a bajar. Bajo este método de pago, agregue botones de opción, barra diagonal de crédito, detalles de la tarjeta de
débito,
términos y condiciones ,
marca de verificación y
botón Realizar pedido con color rojo. Ahora alinearlos correctamente y nuestra
pantalla está terminada. Los veo chicos en el siguiente video.
18. Orden de pantalla de confirmación: Bienvenida de nuevo. En este video, vamos a crear página de
pantalla autoconfirmada. Entonces, antes que nada, copia el fotograma
anterior y muévelo hacia la derecha y cámbiele el nombre
para confirmar el pedido. Cambia cada pan rallado también. Después de eso, elimine todos estos
excepto este texto de dirección de facturación, y cámbiele el nombre a su
pedido se coloca. Después de eso, agrega un ícono de marca de
verificación. Alinear ambos centrales y
cambiar el color a verde. Después de eso, presione
la tecla T y agregue un nombre de usuario y un mensaje de
confirmación de pedido. Ahora solo dibuja dos
rectángulos de 440 por 170 con el
radio fronterizo de diez. Alinearlos en el centro horizontalmente. Cambia los
colores del rectángulo a amarillo. Y ahora en el primer rectángulo, agregue ID de pedido, fecha de pedido. La segunda dirección de envío, agregue los detalles de la dirección de envío. Y ahora la pantalla está terminada. Los veo chicos en el siguiente video.
19. Contáctenos Pantalla: Bienvenido de nuevo. En este video, vamos
a crear una página Contáctenos. Entonces, antes que nada, copia el
fotograma anterior y muévelo a la derecha y
cámbiale el nombre para contactarnos. Cambia el color de la
barra de navegación de contacto a rojo. Ahora voy a agregar
un formulario de contacto aquí. Entonces para eso, copia los campos de las
pantallas de checkout y pegarlos aquí y renombrarlos también. Y en el lado derecho, agregue número de teléfono,
correo electrónico, dirección. Copia el teléfono,
correo electrónico y dirección. Puedo mirar desde
los archivos de ejercicios y colocarlos aquí correctamente. Por último, agrega un botón Enviar aquí. Copia la carga de la
pantalla del verificador y colócala debajo este cuadro de texto de mensaje y renombra este lugar
ordenar textos para enviar. Ahora esta pantalla está terminada. Nos vemos chicos en
la siguiente sección. Vamos a vincular
todas las pantallas.
20. Prototipo: Bienvenido de nuevo. Este es el último
video de este curso. En este video,
vamos a echar un
vistazo a cómo podemos vincular
los fotogramas juntos. Entonces parece un sitio web
del mundo real y luego compartirlo con otros
miembros del equipo y partes interesadas. Aquí en la parte superior derecha, ves que se
divide en tres ruedas. Vista de diseño,
vista de prototipo e inspección. Esta vista prototipo se utiliza
para crear conexiones entre marcos y para definir las conexiones entre
ellos a través de la interacción. Así que simplemente haz clic en esta vista de
prototipo. Acerque y haga clic
en el primer fotograma. Después de eso, conecta esta barra de navegación
con páginas relativas. Y la animación
debe ser inteligente. Animar. Después de eso, conecta este
botón Leer más con aproximadamente una pantalla, y deja la animación
para animar de forma inteligente. Ahora aquí bajo
artículos populares conectados solo a un producto con
la pantalla de detalles, con animación inteligente. Y luego conectamos la navegación de
pie de página a todas las pantallas ya que nos hemos conectado con la navegación de la barra
superior. Después de eso, pasemos
a la siguiente pantalla, que es el sobre nuestra pantalla. Ya hemos conectado
Es navegación. Entonces no necesitamos
hacer otra cosa. Simplemente salga de la pantalla y
pase a la siguiente pantalla, que es la pantalla de menú. Aquí, conecta estas categorías con cada categoría de la página. Este artículo de pizza a la página de detalle. Y la animación debe
ser smart animate. Ahora pasemos a la siguiente pantalla, que es la pantalla de menú uno. Aquí conecta este
botón Agregar al carrito a la pantalla Agregar al carrito. Y después de eso conecta
esta pestaña Reseñas con la siguiente pantalla con la
animación de smart animate. De igual manera haz la misma
dirección en la siguiente pantalla, que es la pantalla de menú hasta aquí, conecta este
botón Agregar al carrito con la pantalla de agregar
al carrito. Y este producto detalló la pantalla del menú de ancho de
texto uno. Después de eso, pasemos
a la siguiente reina, que es la pantalla Agregar al carrito. Aquí, conecta el ícono de ropa
con la pantalla anterior. Y luego conecta este
ancho del botón de continuar comprando, pantalla de menú. Este botón Checkout con la pantalla de detalles de la
tarjeta de compras de productos. Ahora pasemos a
la siguiente pantalla,
que es la pantalla de detalle del
carrito de compras del producto. Aquí conectamos estos botones como hicimos en la pantalla
anterior. Pero esta vez conecta esto, procede al checkout
a nuestra pantalla de inicio de sesión. Ahora en nuestra pantalla de inicio de sesión, conecta este botón de inicio de sesión
con la pantalla de pago. Y este registrado textos
para registrar pantalla. De manera similar en nuestra pantalla de
registro, conecte este botón de registro con la
pantalla de pago también. Después de eso, en nuestra pantalla de
pago, conecta este botón Hacer pedido con la pantalla Realizar pedido. Y por último, conecta este contacto como botón Enviar de pantalla
con la página principal. Por último, todos nuestros
marcos están vinculados. Para comprobar este enlace, basta con pulsar Control a. y aquí se ve la
red de interacciones. Es hora de ejecutar nuestro sitio web. Entonces solo haz clic en este botón de
vista previa. Y ahora ves que todas nuestras pantallas están
enlazadas entre sí. Y parece
un sitio web del mundo real. Ahora para compartirlo con
los demás integrantes del equipo, basta con hacer clic en este botón
Compartir. Aquí. Se puede mostrar
para revisión de diseño o a un desarrollador y muchas
otras opciones también. Yo solo voy a elegir
cualquiera que tenga el enlace pueda editar. Y por último, haz
clic en Copiar enlace y simplemente comparte este enlace con los miembros de
tu equipo
o partes interesadas. También puedes compartir este archivo
ingresando sus correos electrónicos. Y esto nos lleva
al final de este curso. Esperamos que les guste este curso. Y si tienes alguna duda
respecto a este curso, no
dudes en ponerte en contacto con nosotros. Los veo en otro
curso de Figma.
Shehar Yar, UI/Ux Designer
