Transcripciones
1. Introducción: Hola. En este curso, vamos a construir una app del mundo real con prototipo en ajuste con let us features y estética diseñada. Mi nombre es Maria y soy diseñadora de UX de UI. Tengo más de cinco años de experiencia en la industria del diseño. A través de este curso, te guiaré sobre cómo crear una aplicación de compras Nike en FISMA con el último principio de diseño y estética de diseño. Las puntuaciones se dividen en tres secciones, en dos sesión FISMA, UI, sección UX y sección Prototipo. En la intersección, veremos qué es sigma y cómo utilizar sus características. En la sección UX de la UI, comenzaremos a crear y estructurar, aunque aplicación Nike. Y al final, vincularemos todos los grabados juntos. Por lo que parece que la superposición. Y por último pero no menos importante, veremos cómo compartir con otros integrantes del equipo son partes interesadas. No tengo que mostrarte. Entonces, sin más preámbulos, empecemos.
2. Uso de los archivos de ejercicio: En este video, te voy a mostrar cómo puedes empezar con archivos de ejercicios. Con esta conferencia se incluyen los expedientes de ejercicios para este curso. El archivo de ejercicio que subí contiene un sigma s, Es archivo. Contiene todas las S que se utiliza en este curso. Por favor, descargue este archivo para que podamos continuar nuestro viaje creando una app del mundo real en sigma. Este archivo de ejercicio no contiene un archivo de figura. Entonces para eso, solo sígueme a través de esta cláusula. Para que ustedes sepan cómo pueden crear su propio proyecto Fichman. Eso es todo por este video. Nos vemos chicos en el siguiente video.
3. ¿Qué es la Figma?: Sigma es una aplicación de diseño UI y
UX basada en navegador y principalmente herramienta de prototipado basada en web con características fuera de línea
adicionales habilitadas por aplicaciones de escritorio para Mac OS y Windows es actualmente la herramienta de diseño de interfaces líder en el industria. Aquí está la pregunta. ¿Hay muchas otras herramientas como Adobe XD, sketch, Marvel, y muchas otras de por qué estamos usando sigma, la respuesta es que las otras licencias de software son caras en comparación con sigma. Debido a que sigma está disponible de forma gratuita, simplemente
puedes ir al sitio web de demostración, registrarte, y ahora puedes usar sigma fácilmente en cualquier lugar y en cualquier momento ya que se trata de una aplicación basada en web, aunque también está disponible su versión de escritorio, pero depende de la elección. Y también sigma es muy fácil de aprender. Y si lo intentas, solo
puedes aprender Friedman dentro de los días de hoy y dentro de siete a diez días, puedes dominar FISMA. Lo mejor de FDMA es suponer que estás viajando a algún otro país y no tienes tu laptop, puedes acceder fácilmente a tus archivos iniciando sesión en
el portal web a través de alguna otra laptop y acceder a todos tus archivos fácilmente. Entonces ahora creo que ustedes tienen algún conocimiento sobre la FDMA. Nos vemos chicos en el siguiente video, veremos cómo crear una cuenta en línea sigma.
4. Firma para Figma: Para inscribirte en fema, solo tienes que ir a www.sigma.com y dar click en Regístrate. Aquí. Simplemente ingresa tu correo electrónico y contraseña y pulsa crear cuenta. También puedes inscribirte con tus credenciales de Google. Después de hacer click en la suscripción, es preguntar por mi nombre y mi trabajo. Introduce algunos datos. Y si quieres unirte a la lista de correo de sigma, puedes marcar esta casilla de verificación por ahora mismo, lo estoy viviendo. Y después de eso hit Crear Cuenta. Ahora nuestra liberada mi cuenta se crea. Es hora de editar equipo a mi Fichman. Te voy a escribir miembro del equipo de ejes. Un equipo tiene muchos miembros. Podrás colaborar fácilmente con ellos. Eso lo discutiremos más adelante. Ahora acaba de golpear Next. También puedes hacerlo más tarde. Ahora mismo, hay dos planes para Pittman. Elige el plan, ese es SU dos. Pero si eres principiante, te
sugiero que elijas el plan de inicio. Y ahora una cuenta fema está configurada con éxito. Eso es todo por este video. Nos vemos chicos en el siguiente video donde vamos a entender el espacio de trabajo de FISMA.
5. Configuración de fuentes en figma: En este video, vamos a habilitar los teléfonos locales en nuestro freak MOM. De lo contrario, si quieres trabajar con fuentes, no
tendrás una gran selección. Y además, si importas cosas como archivos de boceto, es posible que ese texto no funcione. Puede que no se vea bien en sigma. Cuando estás en sigma.com, en el sitio web, ya estás conectado. Ven a la esquina superior izquierda aquí con un menú es, y ven a la configuración de la cuenta. Aquí vas a ver muchas cosas que podemos hacer, incluyendo cosas como trabajar con la API, que puedes expandir. Fisma, hacer todo tipo de cosas, aplicaciones
conectadas, etcétera. Aquí abajo, vas a ver que tenemos tribunales
locales actualmente no están habilitados por defecto. Haga clic en Descargar instalador para habilitar un formularios locales. Ahí va a descargar esto dependiendo de tu sistema operativo, que no puede descargar un pequeño archivo. Y lo que vas a hacer es que esencialmente vas a abrir eso e instalarlo. Ya veo que tengo el paquete ahí mismo. Yo sólo voy a dar click en eso. Tienes que hacer clic en continuar, ir e instalar eso. Asegúrate de que se está instalando. Ya no necesito el instalador. Y verás ahora que las fuentes locales están habilitadas. Tengo esta fuerza muchas disponible en Pima. De lo contrario, estarás trabajando con menos teléfonos. Hay algo que quiero asegurarme de que hicimos antes de saltar aquí. Ahora puedes volver a los recientes y ver todos los archivos. El siguiente paso es que vamos a entender el espacio de trabajo de FISMA. Entonces nos vemos chicos en el siguiente video.
6. Comprender el espacio de trabajo: Bienvenido de nuevo. En este video, vamos a entender el espacio de trabajo o Fichman. Esta es nuestra página de inicio. Por defecto, el pigmento nos da tres proyectos. Puedes mantenerlo se borran. Está totalmente basado en tu elección. Siguiente aquí en la parte superior derecha, tenemos dos opciones. Esta opción de importación se utiliza para importar diferentes proyectos de fema directamente para encajar ma. También puedes importar tus archivos de boceto haciendo clic en este elemento de importación. Y a la derecha tenemos un plus. Simplemente puedo hacer clic en este icono para crear un nuevo archivo. Aquí, en la parte superior izquierda, tenemos una barra de herramientas. Contiene herramientas como Rectángulo, Elipse, Pluma herramienta. Se pueden dibujar diferentes formas mediante el uso de estas herramientas. Debajo está la pestaña en capas. Aquí puedes ver todas tus capas. Ese siguiente paso es el paso activo. Oye, puedes almacenar todos tus activos que estás usando a lo largo del proyecto. Y más tarde, sombra con los miembros de tu equipo. En el centro, tenemos nuestro lienzo donde podemos crear y trabajar con nuestras salidas. Recuerda, nuestros aeropuertos ahora se llaman frames en Fichman. Entonces en las próximas lecciones, cada vez que digo marco, significa que estoy hablando de citas de arte después de eso. Pero el lado derecho, tenemos un panel Propiedades. Se pueden cambiar las propiedades de los diferentes elementos. Actualmente, no está mostrando nada. Pero cuando dibujo en el lienzo, ves que ahora todas las propiedades son visibles. Discutiremos todos estos en los próximos videos. A continuación, en la parte superior derecha, tenemos un botón Compartir para compartir este proyecto con otros integrantes del equipo, parte con clientes. Tenemos también un botón de reproducción para previsualizar o un diseño y un botón de zoom para acercar o alejar el fotograma. Y esto nos lleva al final de este video. Nos vemos chicos en el siguiente video. Vamos a ver cómo configurar nuestro primer archivo en FISMA.
7. Configuración de el primer archivo en figma: Bienvenido de nuevo. En este video, vamos a configurar nuestro primer archivo en pragma para configurar un archivo. En primer lugar, hizo un nuevo expediente. Y aquí en el centro top renombra el primer proyecto a su proyecto de equipo. Después de eso, renombrar este archivo de derecho a la aplicación Nike haciendo clic en él. Los proyectos Sigma se crean en marcos. Entonces, para crear un marco, solo presiona la tecla f desde tu teclado, o haz clic aquí en la parte superior izquierda. Después de eso, aquí del lado derecho, tenemos muchas opciones para marcos. Podemos crear diferentes aplicaciones para teléfonos, tabletas, web, y publicaciones en redes sociales también. Pero para este curso, vamos a trabajar con apps de iOS. Por lo que necesitamos elegir iPhone 11 pro max frame sugiere dar click en él. Y ahora se crea un marco y prueba cómo configuraste un archivo en Fichman. Te veo en el siguiente video. Vamos a ver cómo trabajar con páginas.
8. Trabajar con cuadros: Bienvenido de nuevo. En este video, vamos a ver cómo trabajar con marcos son páginas. Básicamente, los marcos son pantallas para tu app o sitio web. Puedes agregar tantos marcos como lo necesites en un proyecto. Por lo que acaba de pasar la tecla F. Y aquí te damos un montón de opciones para tus amigos. Sugerir que el iPhone 11 pro max frame en otro fotograma. Y ahora si vemos en nuestro panel Capas, las capas de los marcos están apiladas. Si pasamos por encima de esas capas, vemos que tenemos dos opciones. Podemos encerrarlo en él o alzar el marco. Al bloquear el marco significa que no puedes moverlo. Ahora para renombrar un fotograma, basta con hacer doble clic en las capas y renombrarlo a lo que quieras. Al nombrar el marco, es fácil para nosotros encontrar la salida específica. Ahora bien, si hago click en el marco, veremos todas las propiedades de ese marco. A partir de arriba, tenemos opciones de alineación. Entonces tenemos opción de coordenadas x e y. Aquí te mostramos las opciones de rotación y radio de esquina. Entonces tenemos opciones de cuadrícula de diseño, relleno, y efecto también. Descubriremos todas estas opciones a medida que avanzamos en este curso. Nos vemos chicos en el siguiente video. Vamos a trabajar con diferentes formas en sigma.
9. Trabajar con formas: Bienvenido de nuevo. En este video, vamos a ver cómo trabajar con diferentes formas proporcionadas en sigma. Se pueden utilizar formas para hacer diferentes elementos de un diseño. Entonces, en primer lugar, dibuja un rectángulo sobre este primer marco. Puede cambiar el radio de borde de este rectángulo agregando un valor en la pestaña de radio de esquina. También puedes cambiar la esquina de sitios
independientes haciendo clic aquí e ingresando algún valor aquí. Vamos a deshacer esto presionando el control C. Y ahora desde la ventana Propiedades, puedes cambiar su color aquí y muchas opciones de color. En este desplegable, puede agregar color lineal, color degradado, colores angulares. Pero por ahora, apegémonos a colores sólidos. Aquí puede agregar un color hexadecimal copiando Xcode. O si quieres trabajar con color RGB, puedes elegir eso también haciendo click aquí. Este un 100% es la opacidad del color. Si cambio esto, se
puede ver que la opacidad de nuestro rectángulo también cambia. Y aquí en la parte inferior, tenemos nuestros colores locales que hemos utilizado en este archivo. Ahora, si cerramos esto, podemos agregar más rellenos a este rectángulo haciendo clic en este icono más. Después de eso, pasemos a la carrera. Aquí puedes agregar trazo al rectángulo. Se puede aumentar el tamaño del trazo y también cambiar su orientación al interior, exterior o centro. Si hacemos clic en estos tres puntos, puedes cambiar gorras, encadenar el santuario en el borde, o agregar guiones a ese borde también. No sólo encendió el trazo haciendo clic en este icono. Después de eso, trabajemos con elipses. Entonces para eso, solo dibuja aquí unas elipses. Y si no presionas la tecla Mayús, no
puedes dibujar un círculo perfecto. Por lo tanto, presiona la tecla Shift o vesta art y shift keyed juntos para mantener esa proporción de esos labios. Ahora bien, si seleccionamos esta elipse, se ve este círculo blanco. Puedes moverlo hacia la izquierda para dibujar gráficos y agarrar este punto central y moverlo hacia abajo para dibujar una forma perfecta. Por gráficos. Después de eso, dibuja un polígono. Y, y aquí en este polígono, se
puede cambiar el radio de esquina de este polígono
agarrándolo desde la parte superior y moviéndolo hacia el centro. Y si quieres aumentar o disminuir sus esquinas, solo
puedes agarrarlo desde esta esquina derecha y moverlo hacia la parte superior para cambiar su esquina. También puedes hacer eso agregando un valor aquí en el panel de propiedades. Siguiente es la estrella. Por lo que solo elige y dibuja una estrella en este marco. Ahora hay tres círculos blancos en la estrella. Si te aferras a estos círculos, llegarás a conocer primero su propósito. El primero es el radio de esquina. El segundo es la relación. Y el tercero es para aumentar el conteo en la estrella. Llenemos esto con un poco de color. Y se ve bien. Y prueba cómo puedes jugar con formas y enseñó cosas diferentes para tu diseño. En el siguiente video, veremos cómo se utiliza la herramienta de pluma en Fichman. Entonces nos vemos en el siguiente video.
10. Trabajar con la herramienta de bolígrafo: Bienvenido de nuevo. En este video, vamos a ver cómo trabajar con la herramienta de bolígrafo. El lápiz herramienta es la herramienta más importante en gráficos. Al usar la herramienta de lápiz, podemos diseñar gráficos, hacer formas e iconos, y muchas otras cosas también. Entonces en primer lugar, al igual que esta herramienta de lápiz en la parte superior se pasan pico de tu teclado. Y aquí ven tenemos una pluma como seno. Se mueve libremente. Pero si pulsa la tecla Mayús, se moverá en proporción. Ahora cuando hacemos clic en
él, crea un camino. Después otro clic otra vez. Gran apoyo. Y cuando hacemos click en el punto de partida, presionamos enter, se cerrará a pedazos y la nave está creando. Ahora al hacer clic en esta película, puedes agregar un color de relleno a esta forma. O puede aumentar o disminuir la frontera haciendo clic aquí. Hagamos nuestro diseño enum haciendo clic con la herramienta de lápiz. Y aquí ves, puedes dibujar incluso formas complejas con una herramienta de bolígrafo. Ahora, estos son buques insignia menos tierra, cómo se pueden dibujar curvas con la herramienta pluma a partir de adelante. Por favor mira el video con cuidado porque esta es la herramienta más importante, no solo sigma, sino también en Photoshop. Ilustrador, XD también. Es una herramienta un poco difícil, práctica
unitaria para dominar esta herramienta. Entonces empecemos las curvas por el logo tranquilo o de Nike. Entonces, en primer lugar, seleccione la herramienta Pluma y aquí, simplemente haga clic de nuevo, haga clic debajo de ella, y no suelte el mouse. Haga clic izquierdo y mueva el ratón hacia la derecha para darle una curva. Y ahora está curviendo la parte. Pero desde aquí necesitamos un camino recto. Así que regresa y haz click en este círculo para escoger el camino de la curva. Y a partir de aquí, haga clic aquí y cierre aparte sin soltar el botón del ratón. Y mueve tu ratón hacia arriba para dibujar un swish perfecto de Nike. Recuerda, si accidentalmente crea un camino equivocado, no entre en pánico. Todavía puedes en solo el camino haciendo clic en estos círculos blancos y consiguiendo las asas y moverlas, quieres que estén. Es muy sencillo y fácil. Y después de obtener la forma, presiona enter para cambiarla a una forma adecuada de un camino. Y ahora puedes jugar con él en un removers de color. Porter le dio una sombra también. Entonces ahora ustedes tienen algunos conocimientos sobre la herramienta Pluma. Por favor practica esta herramienta tanto como puedas porque te ayudará en el diseño de tus diseños complejos. Eso es todo por este video. Nos vemos en el siguiente video. Vamos a ver qué es enmascarar y cómo lo usamos en nuestro diseño.
11. Trabajar con la máscara: Bienvenido de nuevo. En este video, vamos a ver cómo trabajar con el enmascaramiento. Fisma nos permite importar un montón de tipos de imágenes en tu proyecto de diseño. Podemos importar PNG, JPEG, SVG, da, y muchos otros. En este video, vamos a ver cómo importar imágenes de tu PC a FISMA y cómo enmascarar imágenes con chips. Entonces, en primer lugar, para colocar una imagen en este segundo marco, suban aquí. Y desde aquí, elige colocar imagen debajo de este rectángulo desplegable. También puedes presionar el control de teclas rápidas Shift y k. Y ahora vendrá un pop-up. Elige tu imagen deseada. Voy a elegir esta imagen. Y ahora ves que un cursor se cambia en un icono más. Por lo que solo tienes que dar click donde quieras que se coloque tu imagen. Ahora se coloca nuestra imagen. Vamos a cambiar el tamaño de esa imagen. Para cambiar el tamaño de esta imagen, solo tienes que pulsar la tecla ALT y Mayús para saber si desde tu teclado y moverla hacia el centro para reducirla. Ahora colóquelo correctamente. Aquí. Mira el lado derecho. Cuando importamos una imagen, podemos cambiar su modo de mezcla tan bien como lo hicimos en Photoshop. Y sigma. La imagen es sólo una aleta. Puedes eliminarlo eliminando su derrame. Puedes agregar diferentes efectos a esta imagen, como sombras de trazos. Y si quieres cambiar esas propiedades de imagen,
solo tienes que dar click en la imagen. Y desde aquí, puedes ajustar el contraste de exposición y también puedes cambiar su ajuste en propiedades. Y ahora vamos a añadir algunas imágenes. Pero antes de eso, vamos a hacer clic en esta cuadrícula de diseño y agregar dos columnas, podría, y cambiar su margen a 16. Ahora, vamos a colocar aquí algunos rectángulos y luego colocar imágenes a esos rectángulos. Entonces, en primer lugar, dibuja aquí de tres a cuatro rectángulos. Al agarrar la herramienta Rectángulo. Alinearlos correctamente. Ahora vamos a añadir cuatro imágenes a estos rectángulos. Por lo que colector, lugar, herramienta de imagen o presiona tecla de desplazamiento de control desde tu teclado. Y a partir de aquí, seleccione para imágenes. Y ahora solo puedes hacer clic, hacer clic, hacer clic y hacer clic en estos rectángulos para colocar las imágenes automáticamente. Y ahora que las imágenes se colocan, pero son de gran tamaño para reducirlas. Esa es la tecla ALT y haga doble clic en la imagen. Ahora, agárrala de las esquinas, contrólala para colocarla correctamente. Y ahora agreguemos aquí una elipse. Y después de eso, coloque aquí una imagen presionando la herramienta de imagen de lugar arriba. Y ahora esta imagen se coloca frente a esta elipse. Es hora de poner esta imagen en esta elipse. Así que basta con hacer click en este botón de masa en la parte superior central. Y ahora voy a mostrar se coloca dentro de esos labios. Entonces así es como enmascaras imágenes en el caparazón. Y si quieres quitar esta máscara, solo tienes que pulsar el botón del ratón una vez más para quitar esta máscara. Y esto nos lleva al final de este video. Nos vemos chicos en el siguiente video, vamos a trabajar con el texto y las fuentes.
12. Trabajar con texto y fuentes: Bienvenido de nuevo. En este video, vamos a ver cómo trabajar con texto y fuentes en sigma, puedes usar todas las fuentes de Google. Pero en primer lugar, deberías habilitar las fuentes locales en sigma. Para habilitar fuentes locales en FDMA vaya a ayudar a una cuenta. Y a partir de ahí, elige cuenta y ajuste. Y ahora desplácese hacia abajo. Y aquí, habilitar las formas locales. Después de habilitar los teléfonos locales, tendrá acceso a cuatro fuentes más, que por defecto están disponibles en Fichman. Entonces es hora de jugar con el texto. En primer lugar, agarra una herramienta de texto y escribe algo de texto aquí. Di hola palabra, ¿cómo estás? Y ahora a la derecha, tienes todas las propiedades de texto. A partir de aquí, se puede cambiar la fuente a diferentes teléfonos proporcionados ¿Yo escojo mi debajo de ella, se puede cambiar el peso de la fuente y el tamaño de la fuente. Si hace clic en este cuadro de fuente, presione la tecla Mayús y la flecha arriba del teclado. Se puede aumentar el tamaño de la fuente con una íntima de diez. Y si no presiona la tecla Mayús, la fuente aumentará con un incremento de uno. Después de eso tendrá altura de línea y Espaciado de caracteres. A continuación, tenemos espaciado de párrafos y diferentes opciones de alineación que veremos a medida que avanzamos en este curso. Y aquí se ven estos tres puntos. Si haces clic en él, tienes muchas otras opciones de edición de texto. Exploraremos esto cuando creemos nuestra app nike en los próximos videos, El consejo más importante que te voy a dar una prueba relativa es que supongamos que tenemos tres capas de textos aquí. Cuando hago clic en este texto de la izquierda, ves que está alineado a la derecha. Entonces cámbialo a la izquierda alineada. De igual manera, encadenar la alineación del texto central al centro y justo al lado de la línea derecha. Para que las pruebas se vean bien cuando alguna vez lo pones en un botón que se coloca en el centro, a la derecha o a la izquierda. Lo último que les voy a contar es sobre Layers panel vive en la parte más importante de cada diseño. Entonces aquí en el panel de capas, organice
siempre sus capas. Para que puedas encontrar fácilmente tus capas cuando las necesites. Supongamos que si seleccionas dos o más de dos capas y presionas control G, Puedes agrupar estas capas y renombrarlas como quieras. Digamos grupo de botones. Y recuerda, las capas son una parte importante de trabajar con diseños
web y de aplicaciones ya que mantiene tu contenido balcanizado. Y hace que sea más fácil a las capas finales y a quienes trabajan, y así es como se trabaja con texto y fuentes en FISMA. Nos vemos en el siguiente video. Vamos a trabajar con componentes.
13. Trabajar con componentes: Bienvenido de nuevo. En este video, vamos a ver cuáles son nuestros componentes y cómo trabajar con componentes. A los elementos que son utilizables en el sistema de diseño se les llama componentes. En la mayoría de los programas, también se le llama símbolos. Pero en FISMA, estos elementos reutilizables se llaman componentes. Por lo que en este video, exploraremos cómo crear un componente de edición. En primer lugar, hagamos una barra de estado en la parte superior y un botón en la parte inferior de nuestro segundo cuadro. Después de eso, seleccione estas barras de estado superiores, y desde aquí, haga clic en este Crear componente. También puedes presionar el control de teclas de acceso directo alt y K. Y ahora ves que es nuestro componente maestro o padre. Recuerda, hay dos tipos de componentes. Maestro, nuestro padre y un componente hijo. Actualmente tenemos componente maestro para crear su componente hijo, copiar y pegar en el tercer marco. Y aquí ves este componente vacío, lo que
significa que es un componente hijo hacia arriba primero Barra de estado. Ahora lo mejor aquí es que si cambio las propiedades del componente maestro, digamos color a rojo. Este cambio también reflexionará sobre su hijo. En tanto que si cambio el color del niño, no afectará a su padre. Y si tienes una gran cantidad de componentes
hijos y quieres saber sobre su componente padre. Para eso, basta con hacer clic derecho en ese niño y a partir de aquí, basta con seleccionar, ir al componente principal. Por lo que esto te trasladará directamente al padre de ese hijo. Es tan simple como eso. Y si quieres que los cambios en el padre no se reflejen en su hijo, puedes desprender la instancia, lo que significa que esto no se actualizará si actualizamos la instancia maestra. Entonces, para hacer eso, simplemente haga clic derecho en la instancia hijo y desconecte la instancia. Y ahora todos los cambios de componente mater no se reflejarán en el niño. Distancia. Los componentes en sigma pueden ser realmente poderosos sólo porque te permiten reutilizar contenido. Entonces sugeriré que si tienes cosas que vas a reutilizar una y otra vez, crea componentes a partir de ellas. Lo siguiente que vamos a echar un vistazo es que vamos a ver algo llamado restricciones. Entonces nos vemos chicos en el siguiente video.
14. Trabajar con las restricciones: Bienvenido de nuevo. En este video, vamos a ver cómo trabajar con
restricciones a 1000 de dispositivos en el mercado. Cada dispositivo tiene su propia resolución. Diseñar para todas estas pantallas sería una tarea agitado. En cambio, queremos que nuestro diseño sea flexible y receptivo para que se adapten a las nuevas pantallas. Vamos a probarlo. En primer lugar, agregue una elipse de 200 por 200 y colóquela en el centro. Ahora aquí en el panel de propiedades, tenemos opción de restricciones diferentes en el eje x. Podemos agregar restricciones de izquierda, derecha, izquierda, y derecha, centro y escala. Y en el eje y podemos agregar restricciones de escala superior, inferior, central. Actualmente, nuestras elipses se establecen por defecto. Si comprobamos esto, vamos a matar a este marco. Aquí ves a medida que escalamos el grito o la elipse se estirará con él. tanto que si estiramos este marco hacia la derecha o elipse no se estirará con él. Si cambiamos la restricción izquierda también, ¿verdad? Ya ves, se estira hacia la derecha cuando
iniciamos el cuadro y esta vez no se quedará a la izquierda. Y si comprobamos esta posición fija al desplazarnos, fijará su posición si estudiamos o no. Y así de fácil es aplicar restricciones. Esta característica es muy útil en el diseño de sitios web,
aplicaciones y otros diseños sensibles . Por lo que estamos trabajando con restricciones es genial. Si tienes que poner contenido en pantallas de
diferente tamaño o escala se proyectan, por ejemplo. Y esto nos lleva al final de este video. Nos vemos chicos en el siguiente video, vamos a ver qué es Virgin and sigma apps.
15. Versión: Bienvenido de nuevo. En este video vamos a ver qué es la historia persa y variante en Fichman. Sigma ofrece muy descontrolado dentro de cada uno de los archivos que creas. Y esta es una manera realmente buena de poder ver la versión guardada anterior, restaurar una versión anterior, comentar las cosas. Entonces en este video vamos a hablar de control de versiones para ver el historial de versiones, asegurarnos de que no se seleccione nada. Y puedes ver el nombre del archivo aquí arriba, click en la flecha de la derecha, y verás mostrar el historial de versiones. Ahora a la derecha, se ve el historial de versiones. Lo mejor de esto es que a medida que haces movimientos o cambios o cosas así, te
lo va a guardar de forma automática. Si miras atrás aquí abajo, vas a ver todas las diferentes épocas en las que has hecho las cosas. Y si haces click en uno de estos anteriores, verás
te va a mostrar cómo se va a ver aquí. Ahora, esto sólo nos está dando un adelanto. Si realmente queremos hacer de esta la versión esa conversión. Si llegas a la elipse aquí, puedes ver la restauración de esta versión. También puedes duplicarlo o copiarlo enlace o dispersión con nombre. Digamos que estás probando una nueva función en un diseño de aplicación y has nombrado a este brillante dicho, probando menú lateral. Añada una descripción si lo desea. Y vamos a darle a Save. Esto permitirá que otros miembros del equipo vean que la Sharia está probando el menú del sitio. Ahora puedes añadirle esta versión info. Digamos que el menú de hamburguesas está hecho. Y ahora completas esta versión info también. Entonces es solo una forma para nosotros de especie si quisiéramos colaborar con gente y decirles lo que estamos haciendo y lo que estamos viendo. Y esto nos lleva al final de este video. Nos vemos en el siguiente video vamos a ver cuáles nuestras pautas para iOS y cómo usarlas en nuestro próximo proyecto de app de Nike.
16. Comprender y crear directrices para iOS: Bienvenido de nuevo. En este video, vamos a ver qué pautas y cómo usarlas en nuestro próximo proyecto de app de Nike. Los lineamientos son un conjunto de recomendaciones sobre cómo aplicar los principios de
diseño para proporcionar una experiencia positiva al usuario. Directrices de uso de diseñadores para crear diseños
convincentes y satisfacer y superar las necesidades del usuario. Este curso se enfoca principalmente en las pautas de iOS. Por lo que no estamos cubriendo el material ni las pautas de Android en este curso. Entonces empecemos este video creando un sistema de directrices de diseño para nuestro próximo proyecto de Nike Air. Para crear una guía de diseño. En primer lugar, crear un marco. Ahora vamos a sumar gobernantes en este marco. Por lo que para agregar gobernantes, pester, hotkey, Shift R para habilitar gobernantes. Y ahora agarra dos reglas de la izquierda y más una a la derecha y otra a la izquierda con un espaciado igual de 16 píxeles. Para agregar reglas precisas, dibuja aquí un rectángulo, cambia su color a negro para que sea visible. Y ahora cambia su ancho a 16 píxeles y alinea las reglas con este rectángulo. De igual manera, mueva este rectángulo en el centro superior y cambie su altura a 44 píxeles. Y ahora más otro gobernante aquí. Mueve este rectángulo hacia abajo y añade otra regla aquí. Esta primera porción es para la barra de estado del iPhone. Y la segunda porción es para el título y botón de retroceso. Ahora mueve esta ciudad rectángulo y agrega dos reglas aquí, una para el icono del indicador de inicio y otra para el menú con fichas. Bendízala, con el mismo espaciado en la parte inferior. Y ahora nuestras pautas para iOS se crean con éxito. He proporcionado este archivo con este curso, tipo de descargarlo y usarlo. También incluye la fuente, imágenes, iconos, y colores que estamos utilizando en nuestro proyecto. Entonces por favor descargue este archivo y en los próximos videos, comenzaremos a conseguir la app Nike en Fichman que ustedes sepan cómo conseguir una verdadera buildup en FISMA. Eso es todo por este video. Nos vemos en el siguiente video.
17. Descripción general de la aplicación: Bienvenida minutos extra. partir de este video, comenzaremos a crear nuestra app del mundo real en FISMA. El app que vamos a construir es app de carrito de compras
Nike desde donde puedes comprar diferentes tipos de zapatos. Y además, vamos a vincular las pantallas para crear interacción entre las pantallas de la app Nike. Por lo que parece una aplicación del mundo real. Por lo que en el siguiente video, vamos a crear nuestra pantalla de bienvenida de la app. Eso es todo por este video. Nos vemos en el siguiente video.
18. Pantalla de tablero de UI: Bienvenido de nuevo a esto. En este video, vamos a crear nuestra pantalla de bienvenida de la app. El Exercicio Archivos que proporcioné contiene toda la fuente y tipografía. Entonces, en primer lugar, pongamos eso en nuestro archivo demo. Seleccione el color uno por uno. Y aquí del lado derecho, click en estos puntos de color Phil. Y a partir de aquí, haga clic en este icono más para crear nuestros estilos de color y darle un nombre también. Digamos hash triple a triple a. Ahora da click en este botón Crear estilo. De igual manera, nuevamente, presione el botón más y agregue los colores restantes a esta lista. Ahora, nuestros colores se colocan en los estilos locales. Añadamos fuente al estilo local también. De igual manera, haz lo mismo que hicimos con los colores. Esta vez al nombre de la fuente con su tamaño, nombre S. Copiar el nombre de la fuente. Haga clic en estas puertas, haga clic en el icono más, y ahora pegue ese texto para que sepamos que es un titular de 49 puntos. El mismo proceso con todas las demás fuentes también. A partir de aquí, estoy acelerando el video. Y ahora, si selecciono este texto aquí a la derecha, vemos todos nuestros estilos locales que vamos a usar en la app de Nike. Y ahora empecemos a crear la pantalla de bienvenida para nuestra app. En primer lugar, marco popular que se proporciona con este curso Exercise Files. Y ahora vamos a cambiar esto a pantalla de bienvenida. En primer lugar, lidera la barra de título y el menú tocado. Después de eso, haga doble clic en el marco en el panel Propiedades y cámbielo a una pantalla de bienvenida. Es una técnica muy buena para renombrar tu marco para que puedas trabajar con él fácilmente. Ahora aquí, seleccione la herramienta Rectángulo y dibuje rectángulo sobre este marco y cambie su color a color oscuro. Y aquí el panel Propiedades, mueva este rectángulo hacia abajo y cambie su nombre a Packer. ¿ Cómo cambió eso el color del indicador y de la Barra de Estado a blanco? Por lo que se ven visibles. caliente que importan el logotipo de Nike de los archivos de ejercicios y lo pegan aquí y lo alinean centralmente horizontal y verticalmente. Ahora, bediencia creada, hay esperanza para este video. Nos vemos en el siguiente video.
19. Pantalla de inicio de UI: Bienvenida excelencia. En este video, vamos a crear una pantalla de inicio de sesión. En primer lugar, copy sí setup prim y muévelo a la derecha presionando la tecla all. Ahora solo copia el logotipo de Nike y muévelo aquí. Reducirlo a alrededor de 78 por 28. Y ahora la barra de título Cellectis y este local presionando la tecla Mayús y alineando su centro horizontal y verticalmente. Ahora sólo tienes que eliminar este título par. Y después de eso, haz una elipse de alrededor de 220 por 220. Fuera de eso el arte y cambiarlo juntos y hacer una copia de esta elipse y reducirla a alrededor de 166 por 1-6, 5-6. Ahora sólo deja que ambos y alinearlos Centro. Y simplemente cambia el color de ambas las elipses a este tercer color de nuestra lista. Después de eso, cambie la opacidad de la elipse externa al 20%. Por lo que se ve bien. Y también agruparlos al
seleccionarlos a ambos con la tecla Mayús y presionar control G. Ahora solo colocarlos menos 90 en la salida y menos 80 en el eje y. Y después de eso en el panel Propiedades cambió el nombre de este grupo a Grupo de
elipse y muévelo hacia abajo en el panel Propiedades. Ahora acaba de presionar en Tiki y secó el inicio de sesión y cambiar su teléfono para conocer a Nieto y su tamaño a 40 semi board. Y aquí cambiar su ancho, 23 AD2 y su altura a 109, y colocarlo en el centro. Después de eso, alinear el texto para centrar también. Y ahora muévelo hacia arriba con un margen superior de 25 píxeles. Después de eso, edita capa de texto, derecha. Introduce tu correo electrónico y contraseña. Cambia la fuente, el tour, la fuente de la app, y su tamaño a 16, semi negrita, y colócala con un margen superior de 0. Ahora cambia su ancho a 382 y su altura h2, 44, y su color a tercera forma curva de biblioteca. Después de eso, agreguemos campos de inicio de sesión para ahorrar tiempo. Sólo tienes que copiar eso de los archivos de ejercicios y pegarlo aquí. Y sólo tienes que organizar estos campos correctamente y burlarse de la fuente para conocer nato y tamaño de fuente a 16 y agrupar estos campos también. Después de eso cambió el color de este texto olvida contraseña, color de tema fluido. Ahora es el momento de agregar un botón de inicio de sesión. Así que dibuja un rectángulo de alrededor de 350 por 44, cambie su radio de borde a 20. Alinee su centro horizontalmente, y llénelo con un color oscuro para nuestra biblioteca. Ahora presiona que Tiki y escribe, inicia sesión en esta carga y cambia su teléfono a 16 aburrido extra. Después de eso, cambie el color del texto a color blanco. Ahora muestra este botón con un margen superior de 50 píxeles. Después de eso, presiona ese Tiki y área de texto oscuro. Y aquí, bien, no tengas una cuenta de registro. Se cambió la fuente de este primer texto a 16, semi negrita. Y este texto de registro2, 16, extra audaz. Y también cambiar su color y darle un subyacente, NO solo una línea, todo este texto se centrará verticalmente y colocarlo con un margen superior de 20 píxeles. Ahora, haz una copia de este texto, muévelo 30 píxeles hacia abajo, y cámbialo a ancho de inicio de sesión. Después de eso punto iguales líneas de 116 píxeles y colocar una línea a la izquierda y otra a la derecha con un espaciado de 16 píxeles de los sitios. Y ahora selecciona estas líneas y este texto y alinearlas centrando verticalmente. Y también cambia el color del trazo a esta forma de color C6 de una lista. Y aquí y sus artículos de redes sociales, cobia iconos de redes sociales de los archivos de ejercicios y pegados aquí. Después de eso, colóquelos con un margen superior de 30 píxeles. Por último, mueve este texto hacia abajo y reemplácelo por saltar. Ahora texto, alinear centro y y cambia de color, color azul claro. Y renombrar este marco a pantalla de inicio de sesión. Y esto nos lleva al final de este video. Nos vemos en el siguiente video.
20. Pantalla de recuperación de cuentas: Bienvenida minutos extra. En este video, vamos a crear una pantalla de recuperación de cuenta. En primer lugar, copia el fotograma anterior y muévelo a la derecha presionando los todos Qis. Y después de eso, renombrar este marco a pantalla de recuperación de cuenta. Después de eso, renombrar este inicio de sesión a recuperación de cuenta. Y este segundo X2 restablezco enlace será enviado en tu correo electrónico. Después de eso, elimine este campo de correo electrónico y este texto de contraseña plegada, y ahora acaba de renombrar a este sordo para ingresar su correo electrónico. Después de eso, vamos a bajar. Y aquí, solo lidera todo esto excepto con este botón. Y por último, renombrar este botón para enviar. Y ahora nuestra pantalla está terminada. Nos vemos en el siguiente video.
21. Repara la pantalla de reinicio: Bienvenidos de vuelta a los estudiantes. En este video, vamos a crear pantalla de restablecimiento. En primer lugar copie la pantalla de inicio de sesión y muévelo a la derecha presionando la tecla ALT y renombrarla para restablecer pantalla. Después de eso, renombrar este inicio de sesión para restablecer y este segundo texto para ingresar tu nueva contraseña. Y ahora renombró este campo de correo electrónico para ingresar nueva contraseña y contraseña Tx2 y confirmar contraseña. Ahora acaba de poner estos contraseña olvidada y todo esto debajo de este botón pasado dejando todo esto y presionando borrar tecla de tu teclado. Por último, renombrar este texto de botón para restablecer. Alinear correctamente su centro. Y ahora nuestra pantalla está terminada. Nos vemos en el siguiente video.
22. Pantalla de registro: Bienvenidos a los exponentes. En este video, vamos a conseguir una pantalla de registro. En primer lugar, copia la pantalla anterior y muévala a la derecha
presionando la tecla ALT y cámbiala a pantalla de registro. Después de eso, cambie el nombre de este restablecimiento para inscribirse. Y este segundo texto para crear primero tu cuenta. Ahora, vamos a sumar dos campos más aquí. Entonces mueve este botón aquí abajo. Basta con mover este segundo campo hacia abajo pasando la tecla ALT y turno juntos y hacer dos copias del mismo. Después de eso, cambie el nombre de este primer campo a nombre completo, segundo campo a correo electrónico. Tercer campo a contraseña. No cambies el cuarto. Ahora vamos a añadir un icono con estos campos de contraseña. Así que solo agarra el ícono de los archivos de ejercicios y empuja aquí. Y ahora volándolos adecuadamente. Después de eso, copia esta línea de texto de los inicios de sesión y paciente aquí, muévala debajo de este botón y cambia el texto para que ya tenga una cuenta. Iniciar sesión. Por último, basta con cambiar ese espaciado de texto y botón a 20 píxeles. Y mueve estos dos hacia arriba. Y mueve estos dos hacia arriba con un margen superior de 50 píxeles. Y ahora nuestra pantalla está terminada. Nos vemos en el siguiente video.
23. Pantalla de casa 1: Bienvenido de nuevo. En este video, vamos a crear la pantalla de inicio uno. Esta es la pantalla de inicio antes de que un usuario inicie sesión en la aplicación. Entonces, en primer lugar, copie la pantalla anterior y muévala a la derecha presionando la tecla ALT, y luego cámbiala a la pantalla de inicio uno. Después de eso, basta con eliminar todos estos excepto este logotipo y barra superior. Y ahora solo presiona que Tiki y escribe categorías. Es 0.222 y colocarlo con un margen superior de 20 píxeles. Ahora, sólo deja que esa herramienta en particular y dibuja un rectángulo de alrededor de 85 por un 100. Después de eso, dibuja una elipse de alrededor de 66 por 66. Alinearlos centralmente vertical y horizontalmente. Ahora haz tres copias de esto y colócalas con un espaciado igual entre ellas. Ahora pester Tiki y derecha Snickers. Estaño es teléfono a 12, semi negrita. Y colóquelo dentro de este primer rectángulo con un margen superior de diez píxeles. Después haz cuatro copias de ella también. Después de eso, es hora de agregar imágenes a estas elipses. Seleccione estas cuatro elipses. Y desde esta Barra de herramientas, elige colocar imagen, y desde los archivos de ejercicio, elige tus imágenes deseadas. Y ahora aquí, da click en este círculo para colocar tu imagen de deseo en ese círculo. Para encajar esta imagen en estos labios. Presiona hacia arriba y haz doble clic en esta imagen para entrar en esta imagen. Y a partir de aquí, apropiadamente. Después de eso, selecciona estas cuatro elipses y dale un trazo de color claro. Cambia su tamaño a dos. Y aquí diez nombres también. Ahora, cambia esta primera elipse y color de texto a un color de tema. Por lo que se ve prominente y el usuario sabe que esta categoría está actualmente seleccionada. Y ahora solo deja todo esto y colocarlos con un margen superior de 30 píxeles. Después de eso, oculte estos rectángulos haciendo clic en el icono del panel Propiedades. Ahora vamos a sumar productos aquí. Entonces, en primer lugar, mover este texto arriba hacia abajo. El margen superior de 30 píxeles y renombrarlo a calzado drenante. Después de eso, dibuja un rectángulo de alrededor de 181, pero 211, cambia su radio fronterizo a 20. Dibuja otro rectángulo de alrededor de 139 por 107, colóquelo con un margen de 15 píxeles y cambie también su borde radio. Después de eso, copia, el icono del corazón de los archivos de ejercicios. Hágalo aparente componente haciendo clic en este botón de componente y haga una copia del mismo y colóquelo aquí. Después de eso, geeky aliado a los cambios de nombre del producto, teléfono a 16 Board. Bendízala, con un margen izquierdo de diez y un margen superior de cinco píxeles. Después de eso, hacer dos copias de este texto. Sostenlo y estaño el segundo nombre de categoría dx2. Y el tercer texto a precio. También cambió el segundo teléfono x para morar en negrita, y cambiar este primer color de rectángulo a un color claro con 30% de opacidad de nuestra lista. Después de eso, vamos a añadir un botón de carrito. Así que dibuja un rectángulo de alrededor de 41 por 41. Es el radio fronterizo a cinco desde tres lados, pero 20 desde abajo a la derecha. Colóquelo correctamente. Y se va a ir. Tim Keller. También sumar más icono sobre este botón. Copia el icono de los montones de ejercicios y colócalo sobre él. Esto lo puso correctamente estructurado israelí, hacer tres copias de la misma y colocarlo en este marco adecuadamente. Aquí al fondo. Añadamos nuestro menú de diez. Copia eso de los archivos de ejercicios y pegarlo aquí. Por último, vamos a añadir imágenes, ir rectángulos, y encadenar precios y nombres de los artículos. Entonces este es un proceso largo. Entonces estoy acelerando el proceso aquí. Y ahora nuestra pantalla está terminada. Decimal para este video. Nos vemos en el siguiente video.
24. Pantalla de perfil 1: Déjalos minutos extra. En este video, vamos a crear una pantalla de perfil, una. Esta es la pantalla de perfil antes de que un usuario inicie sesión o se inscriba en la aplicación. Entonces, en primer lugar, copia la pantalla anterior y muévala a la derecha presionando la tecla ALT y cámbiala a pantalla de perfil. Uno. Después de eso, solo lidera todo esto excepto esta barra superior y estas pestañas. Y ahora solo dibuja un rectángulo de alrededor de 404 por 100 para cambiar su color a cuarto relleno con 20% de opacidad y cambiar su radio de frontera. Esquinas inferior izquierda y derecha a 40. Después de ese senado detrás de esta barra superior en el panel de capas. Después de eso, presione que Tiki y plug-in derecho choquen, cree cuenta, cambie su teléfono a 18 y colóquelo con un margen inferior de 25. Ahora hizo dos copias del mismo, los movió hacia abajo. Teléfono de Tinder al 16, regular y renombrar los dos primeros, mis órdenes. Y el segundo Centro de Ayuda X2. Y ahora vamos a añadir iconos aquí. Así que solo agarra los elementos de los archivos de ejercicios. O tal vez solo puedas agregar este piso. Puedo plug-in en sus iconos frecuentes e importar desde ahí. Después de importar los iconos, es hora de colocarlos correctamente. Así que basta con agarrar un rectángulo de alrededor de 33 por 29, hacer una copia de él y moverlo hacia abajo. Ahora coloca los artículos sobre estos rectángulos. Imprime los iconos al frente, y alinéelos correctamente. Ahora agrupa estos iconos con estos rectángulos y alinea ese texto con estos iconos correctamente. Y cambie el espaciado interno entre texto y rectángulos a 20 y el espaciado horizontal a 40 y menos presionando a 24. Por último, hacer una copia del texto anterior, Moby abajo, cambiarle el nombre a términos y condiciones. Y estos rectángulos haciendo clic en este icono en el panel Propiedades. Y ahora cambia el color de este elemento de perfil de pestaña inferior a un color de tema para que un usuario sepa que el control está en el icono Perfil. Y ahora nuestra pantalla está terminada. Eso es todo por este video. Nos vemos en el siguiente video.
25. Pantalla de casa 2: Bienvenidos de vuelta a los alumnos. En este video, también
vamos a crear una pantalla de inicio. Esta es la pantalla después de que el usuario inicie sesión en la aplicación. Por lo que en primer lugar copia la pantalla número cuatro y muévelo a la derecha presionando la tecla ALT. Y ahora renombralo a pantalla de inicio. Para. Después de eso, solo tienes que añadir un icono de carrito, copiarlo de los archivos de ejercicio, y pegarlo aquí, alinearlo correctamente. Y ahora aquí, cambia estos dos feroces colores de iconos a un color de tema. Y ese es nuestro usuario. Agrega estos artículos a su lista favorita y se completa nuestra piel. Eso es todo por este video. Nos vemos en el siguiente video.
26. Pantalla de lista de productos: Bienvenido de nuevo. En este video, vamos a crear una pantalla de lista de productos. Por lo que en primer lugar copie la pantalla anterior y muévala a la derecha presionando la tecla Alt, ganarle a la pantalla de lista de productos. Después de eso, elimine esta sección de categoría y estos pasos. Y ahora solo mueve el restante hacia arriba con un margen superior de 20 píxeles. No sólo renombró este encabezamiento dos zapatillas de deporte. Y aquí, basta con llenar este espacio vacío con estos artículos anteriores. Por último, sólo tienes que añadir aquí una flecha hacia atrás. Entonces solo copia eso de los archivos de ejercicios y pegarlo aquí y colócalo correctamente. Y ahora pantallas terminadas. Hay esperanza para este video. Nos vemos en el siguiente video.
27. Pantalla de detalles de productos: Bienvenido extra S. En este video, vamos a crear una pantalla de detalles del producto. Por lo que primero copia la pantalla anterior y muévete a la derecha presionando la tecla ALT y cámbiala a la pantalla de detalles del producto. Después de eso, elimina esta sección de Snickers, y llena el fondo con el cuarto color de una lista con 20% de opacidad. Después de eso, en rectángulos sobre este marco. Senado detrás de la topper y llenarlo de color radial blanco. Después de eso, muévelo de estas asas y colóquelo aquí adecuadamente. No sólo importar la imagen del zapato aquí. Copia eso de los archivos de ejercicios y colócalo aquí correctamente con un margen superior de 20 píxeles. No sólo dibujar para elipses de 15 por 15. Bendice con un espaciado de 15 píxeles y con un margen superior de 20 píxeles. Y agruparlos y alinearlos Centro adecuadamente. No sólo quitó un relleno de estas tres elipses y les da el mismo color de trazo. Después de eso, dibujemos un rectángulo alrededor de 414 por un 5.3.2, cambiemos su color a blanco y su radio de esquina superior a 40. Y colóquelo aquí con un margen superior de 30 píxeles. Ahora, vamos a agregar algunos detalles sobre el producto aquí. Entonces para la deuda, en primer lugar, escribir tamaño, hacer 13 copias de este texto. Y ahora encadenar el primer texto a 18. Para. Ahora, voy a cambiar estas capas de textos. Es un proceso largo, nadó acelerando el proceso aquí. Ahora, he cambiado esas capas de texto. Déjame decirte que no estamos usando el color negro puro. Por lo que solo reemplaza el color negro por nuestra comida para llevar de nuestra lista. Y este párrafo texto a esta tercera curva de nuestra lista. Y ahora vamos a arreglar todo esto. Por lo que se ve bien. En primer lugar, dibuja rectángulos alrededor de 55 por 25. Cambie el radio del borde a cinco y colóquelos detrás de estas capas de texto. Después de eso, alinee estas capas de textos con estos rectángulos. Ahora cambia el segundo color del rectángulo a un color del tema, y su color del texto a blanco. Después de eso, alinee estos rectángulos dentro de un espaciado interno de 20 píxeles entre rectángulos y 30 píxeles. A partir de este rumbo de prueba, también
un margen superior de 50 píxeles. Y ahora sólo esconden los rectángulos restantes. Ahora vamos a sumar contador de cantidad. Así que dibuja un rectángulo de alrededor de 150 por 35, cambia el radio de puerto a cinco. Y es de color a color claro. Ahora dibuja dos rectángulos de alrededor de 46 por 33 hora. Este rectángulo cambia su radio fronterizo a cinco de todos lados y su color para luchar. Alinearlos correctamente. Ahora hizo dos copias de este texto y cambiarlos a menos y más. Con un tamaño de 30, regular en este centro texto a 22 semi barco. Notado como este botón entero y agruparlo como uno. Y después de eso, alinea su centro verticalmente con este texto y colóquelo con un margen superior de 20 píxeles. Ahora estoy acelerando el proceso aquí porque estoy sugiriendo ese espaciado de texto a 2030 píxeles. Después de ese espaciado, es hora de agregar estrellas de calificación y un botón aquí. Así que solo copie las estrellas de los archivos de ejercicios y pegarlo aquí. Y también el botón, porque se trata de un botón predefinido proporcionado en las Directrices de iOS. Por último, voy a copiar este botón, reducirlo a unos 160 por 44, y colocarlo detrás de este texto favorito. Cambio. Es de color a color claro con 30% de opacidad. Y agrega un ícono favorito con él. Copia el icono favorito de la pantalla anterior y colócalo aquí correctamente. Y ahora nuestra piel está completada. Su buscado para este video. Nos vemos en el siguiente video.
28. Pantalla de carrito: Bienvenida minutos extra. En este video, vamos a crear una pantalla de carrito. Por lo que primero copia esa pantalla anterior y muévala a la derecha presionando la tecla ALT y cámbiala a la pantalla actual. Sobre eso, elimine todo esto, y agregue dos rectángulos de alrededor de 382 por 147 y cambió su radio de frontera a 15 y su color a blanco. Después de eso, copia, el tercer rectángulo de la pantalla anterior, lo
encoge hacia abajo a cerca de 404 por cuatro pies cinco. Ahora vamos a colocar cosas sobre estos rectángulos. En primer lugar, puntea dos rectángulos de alrededor de un 100 por un 100 sobre estos enredos vitales. Y ahora inserta imágenes de los productos en estos dos. Y mascota con forma. Ahora, sólo tienes que copiar el producto en texto completo de la pantalla anterior y pegarlo aquí y alinearlo correctamente. Después de eso, alinear estas capas de textos a la izquierda con un ritmo izquierdo de 20 píxeles. Y aquí el espaciado es de cinco píxeles de la derecha. De igual manera, añadir otro producto. Aquí. Solo estoy acelerando el proceso aquí. Ahora pasemos a la parte inferior aquí. En primer lugar, pester Tiki y dirección de envío correcta. Colócala con un margen superior de 30 píxeles. Después de eso, haz nueve copias de este texto y muévalas hacia abajo. Ahora vamos a reemplazar todas estas capas de texto. Entonces desde aquí, estoy acelerando el proceso. Para que no te aburras. Ahora ya estoy de vuelta. Después de eso. Aquí hay dos líneas punteadas de alrededor de 150 píxeles. Y aquí en el panel de propiedades, haga clic en este trazo, cambió sus guiones
a, para hacer darle un aspecto agradable. Fuera de eso. Copia aquí el botón Favorito del paciente de pantalla anterior y cambia su texto para cambiarlo y alinearlo correctamente en el centro. Esta nave. Después de esa elipse de alrededor de 16 por 16. Llénalo con el color de nuestro equipo. Dendrita. Cambie el tamaño de fuente a diez, y colóquelo sobre esta elipse y alinéelo correctamente. También agruparlo. Y aquí, solo coloca esto sobre este icono del carrito correctamente. Por último, basta con copiar la carga de la pantalla anterior y pegarla aquí y cambiar el nombre de su texto para seguir pagando. Y ahora se completa pantalla. Eso es todo por este video. Nos vemos en el siguiente video.
29. Pantalla de pago: Bienvenidos de vuelta a los alumnos. En este video, vamos a conseguir un skin de pago. Entonces, en primer lugar, copie la pantalla anterior y muévala a la derecha
presionando la tecla ALT y luego renombrarla a pantalla de pago. Después de eso, elimine toda esta porción superior. Y ahora sólo dibuja rectángulo de alrededor de tres por 70. Radio fronterizo de Qaeda de alrededor de 20. Y Kavita color blanco. Ahora lo mejor en Tiki y método de pago de paseo. Su fuente debe ser 22 negrita. No sólo colocarlo con el margen superior e inferior de 20 píxeles. Después de eso, hagamos una copia de ella presionando la tecla ALT y moverla hacia abajo, cambiemos su fuente y cambiemos el nombre a tarjeta de débito de barra inclinada graduada. Por favor con el margen izquierdo de diez píxeles y alinear su centro verticalmente. Después de eso, dibuja una elipse de alrededor de 44 por 44. Cambia su color a color claro con 30% de opacidad. Después de eso agregó marca de verificación sobre esta Elipse. Copia esa marca de verificación de los archivos de ejercicios y colócala aquí. También cambia su color a tercer color de nuestra lista API que me permite copias de estos rectángulos, moverlos hacia abajo con un espaciado de 20 píxeles. Y ahora solo Tinder colores y texto. Aquí. Estoy acelerando el proceso. Ahora movámonos aquí abajo. En primer lugar, pitido esta porción de dirección de envío y cambie la altura de este rectángulo, 2469. Aquí. Vamos a mover estos detalles de precio hacia arriba con un margen superior de 30 píxeles. Por último, cambie el nombre de este texto de botón para hacer orden. Y ahora se completa el escaneo. Hay esperanza para este video. Nos vemos en el siguiente video.
30. Coloque la pantalla de la orden: Bienvenidos de vuelta a los alumnos. En este video, vamos a crear una pantalla de pedido de lugar. Entonces, en primer lugar, copiar piel W. Y cuando hacemos lo correcto presionando la tecla ALT y luego cambiarle el nombre para colocar la pantalla de orden. Después de eso, elimine todo esto excepto este texto y una forma. Ahora, vamos a cambiar el color de fondo a dipolar y este color de texto a color claro. Y luego muévelo hacia abajo en el centro. Después de eso, simplemente elimina el
elemento de descarte y agrega un rectángulo de alrededor de 28 por 28. Cambia el radio del borde a diez y su color a blanco. Y después de eso, agrega un icono de brillo sobre él. Copia ese icono brilla de los archivos de ejercicios Y visitante, y alinea estos dos adecuadamente. Ahora movámonos hacia abajo. Y aquí. En primer lugar, dibuja alguna elipse aleatoria y
colóquelas aleatoriamente para que el diseño de la pantalla se vea bien. Después de eso, movamos aquí esta marca de verificación. Y ahora copia media de esta elipse. Escale hasta cerca de 104 por 74 y colóquelo detrás de esta elipse. Ahora, la primera, segunda elipse, color, color del tema. Y aquí cambia el tamaño de primera elipse a 72 por 72. Ahora alinearlos centrados verticalmente y horizontalmente entre sí. Después de eso, bajar la opacidad del círculo exterior a alrededor de 20%. Por lo que se ve bien. Conocido como liso hacia abajo. Y aquí, cambie el nombre de este dex a orden colocado y colóquelo por el margen superior de diez píxeles. Después de eso, cambia, este barco color a este tercer color. Con 20% de opacidad. También cambiaron todos los colores de elipse a este color. Aquí, por favor, este rectángulo con diez píxeles, margen superior. Por último, renombrar este dx2. Esperaba que se escuchara la entrega. Oír cambió la fuente de los primeros textos a 1870 voltios y esta segunda mitad a 18 voltios. Por lo que se ve prominente. Después de eso. Alinearlo para centrar correctamente con este rectángulo. Aquí también cambia este indicador de inicio y el color de la barra de estado a blanco para que se vea visible. Y ahora nuestra pantalla está terminada. Eso es todo por este video. Nos vemos en el siguiente video.
31. Pantalla de búsqueda: Bienvenidos de vuelta a los alumnos. En este video, vamos a crear una pantalla de conjunto. Por lo que en primer lugar copió tu pantalla y muévala hacia abajo presionando la tecla todo fuera de eso, elimina todo esto excepto el logotipo y topper de Nike. Y después de eso, cambia el color del marco al cuarto Khaled de nuestra lista con 20% de obesidad. Y ahora solo copie la barra de búsqueda predefinida de los archivos de ejercicios. Básicamente aquí con un margen superior de diez píxeles. Y ahora vamos a sumar búsquedas recientes, así sucesivamente muertos, dibujar un rectángulo de alrededor 404 por dos H6, luego cambiar su color a blanco y es borde radio 25. Y luego colóquelo con un margen superior de 20 píxeles. Después de eso, dibuja un rectángulo vertical de alrededor de 48 de altura. Prof, de cinco a seis secciones con una línea separadora entre ellas. Y después de eso, presiona que dp y derecha los números de
modelo de zapatos Nike aquí y agrega un icono de búsqueda reciente en el lado derecho. Hobby que puedo formar los archivos de ejercicio. Entonces a partir de aquí, cómo acelerar el proceso. Y ahora solo cambia el color de las líneas a la cuarta lista de seguidores de 100 con 30% de opacidad. Y nuestra búsqueda casi está terminada. Lo último que voy a añadir es agregar un teclado. Así que copia el teclado de los archivos de ejercicios y base aquí con un margen superior de 20 píxeles. Y ahora nuestra pantalla se completa decimal para este video. Nos vemos en el siguiente video.
32. Pantalla favorita: Bienvenidos de vuelta a los alumnos. En este video, vamos a conseguir una pantalla completa. Entonces, en primer lugar, copia el esquema número ocho y pegarlo aquí. Entonces renombralo a pantalla de miedos. Después de eso, basta con eliminar esta parte inferior, y luego cambiar el color del marco a color blanco. Y el color del producto hacen color claro con 30% de opacidad. Después de eso, mueve estos rectángulos hacia abajo y presiona que Tiki y secó favoritos. Colóquelo con un margen superior de 20 píxeles y margen inferior de 30 píxeles. Y ahora vamos a pasar aquí abajo. Basta con eliminar estos contadores y añadir al carrito botón desde la pantalla de inicio y redimensionarlo. Después de eso, agrega un icono de carrito sobre él. Entonces copia ese icono del carrito y elimina el icono de los archivos de ejercicio y visita aquí, alinearlo con la carga correctamente. Harbor eso. Alinear estas capas de texto probablemente después de eso, hacer lo mismo con el segundo rectángulo. Entonces para eso, solo estoy acelerando el proceso aquí para ahorrar tiempo. Por último, copia esa barra de pestañas de la pantalla de inicio y pega aquí. Por último, el enfoque a la pestaña favorita. Y ahora nuestra pantalla se completa decimal para este video parecía el siguiente video.
33. Pantalla de perfil 2: Bienvenidos de vuelta a los alumnos. En este video, vamos a crear una pantalla de perfil para. Entonces, en primer lugar, copia la pantalla de perfil uno y pega aquí, y luego cámbiala a pantalla de perfil para después de eso, dibuja una elipse de alrededor de 80 por 80. Después agrega una imagen de usuario aleatoria a esos labios. Tengo instalado un plug-in llamado y splash. Y aquí, basta con hacer clic, basta con hacer clic derecho para abrirlo. Y luego aquí, busca hombres. Y después de eso, agrega una imagen aleatoria a esta elipse. Masa esta imagen en esta forma. Y ahora hagamos una copia de este texto, lo
movamos hacia abajo, reemplazamos estas dos capas de textos. Y después de eso, Jane, la primera herramienta de texto, ese nombre de usuario y la segunda dos ubicación. Cambie también la fuente y el color de estos declara. Avisa agrupar estas dos capas y alinearlas Centro con esta imagen. Después de eso, agrega aquí un botón de edición. Por lo que sólo dibuja un rectángulo de alrededor de 109 por 44, cambia el radio fronterizo a 20. Y después de eso, añadir un texto de alrededor de 16 auditoria regular y alinearlo para centrar, adecuadamente. Conocido como mover aquí abajo. En primer lugar, alinear estos encabezamientos a la izquierda con esta elipse. Y ahora haz cuatro copias de éstas y muévalas hacia abajo. Sé que voy a sustituir estos declarados e iconos. Todos los iconos están en archivos de ejercicios. Entonces a partir de aquí, solo estoy acelerando el proceso. Y ahora es el momento de agregar líneas separadas entre estos menús. Por lo que se ve bien. Entonces dibuja una línea aquí y cambia su color a color claro con 50% de obesidad. Y ahora la línea, estas líneas con un espaciado interno de 20 píxeles. Y ahora se completa pantalla. Eso es todo por este video. Nos vemos en el siguiente video.
34. Editar la pantalla de perfil: Bienvenidos de vuelta a los alumnos. En este video, vamos a crear una pantalla de perfil de edición. Entonces, en primer lugar, copia la pantalla número 12 y pega aquí, y luego cámbiala para editar la pantalla de perfil. Después de eso, sí comía todos estos excepto este texto. Y ahora reemplaza este icono de guardia por un icono de marca de verificación. Copia el cheque mi icono del SKY número diez, y luego pega aquí. Cambie su color a color oscuro y colóquelo aquí correctamente. Después de eso, cambie el nombre de este texto a información de contacto. Y ahora vamos a sumar campos aquí. Entonces, en primer lugar, hacer algunas copias de este texto y muévalas hacia abajo. Después de eso, sumar dos líneas de alrededor de 382 aquí en dos líneas más de 155 arenilla. Y ahora mueve ese campo de texto aquí. Cambia su fuente a 14, semi negrita y su color a una lista. Cambie el nombre a nombre. Fuera de eso, mueve este segundo texto hacia arriba. Verde m it a Alex, y cambia de fuente a 16, irregular. Y colóquelo aquí adecuadamente. Y ahora solo haz una copia de este campo de texto. Muévelo a la derecha, renombralo también. Y ahora solo mueve esta primera prueba de campo hacia abajo con ese margen de caída de 20 píxeles y renombralo también. Entonces a partir de aquí, cómo acelerar el proceso. Y ahora nuestros campos se crean a la perfección. Aquí, cambia estas líneas, colores, haz ese cuarto color de nuestra lista. Y esta primera curva de línea a un color de tema para que sea un campo de enfoque. Edita aquí la línea de texto, y cambia su color a un color de tema también. Por último, añadió teclado aquí. Copia eso de la pantalla anterior, y pegarlo aquí correctamente. Y ahora se completa pantalla. Eso es todo por este video. Nos vemos en el siguiente video.
35. Mis pantalla de mis pedidos: Bienvenidos de vuelta a los alumnos. En este video, vamos a crear mi pantalla Pedidos. Entonces, en primer lugar, copia la pantalla más de 12 y pega aquí. Y luego cambiarle el nombre a mi pantalla Pedidos. Después de eso, elimina este icono del carrito y cambia el fondo al cuarto color con un 20% de opacidad. Y este rectángulo colores para morder de eso, cambiar estos rectángulos tamaño 2414 por 246, y el borde radio a 0. Y ahora solo mueve estas capas de textos hacia abajo. Y aquí, mejor en Tiki y escribe el número ordenado. Después de eso, hicieron dos copias de la misma, moverlas hacia abajo, cambiaron su teléfono a 12, negrita y su color a tercer pilar. Y después de eso reemplazó el primero por un lugar en fecha y segundo con pagado en fecha. Y ahora colocarlos con un espaciado interno de cinco píxeles. Applet que hacen una copia de este texto anterior, lo
mueven hacia abajo, y luego lo reemplazan por total. Y agrega aquí nuestro mensaje entregado. Así que dibuja un rectángulo de alrededor de 96 por 27, cambia su radio de borde a 20, y su color a nuestro color de tema. Y también Jane, la cantidad de color a un color de tema. Después de ese texto del anuncio, digamos entregado. Su fuente debe ser de 14 punto y coma y luego cambiar su color a blanco. Por lo que se ve visible. Y luego mover este texto total debajo de esto, entregado con un espaciado interno de diez píxeles. Y aquí se hace un primer rectángulo. Pasemos a la segunda. Ahora acelerando el proceso para ahorrar tiempo. Y por último, cambia el texto favorito a mis órdenes. Y ahora nuestra pantalla está terminada. Hay esperanza para este video. Nos vemos en el siguiente video.
36. Pantalla de mis tarjetas: Bienvenidos de vuelta a los estudiantes. En este video, vamos a crear la pantalla de mis tarjetas. Entonces, en primer lugar, copia la pantalla anterior y pega aquí, y luego cámbiala a la pantalla de mis tarjetas. Después de eso, suprimir todo esto excepto que este texto. Y luego cambia el color de fondo a color blanco. Ahora acaba de renombrar este texto a mis tarjetas. Y después de esa importante imagen de dios de los archivos de ejercicios y pegarla aquí con un margen superior de 30 píxeles. Y ahora haz una copia de este texto. Y si bien no cambiamos la fuente a 14 semi bolt, luego cambiarla el nombre para agregar un nuevo Dios. Y ahora solo agrega un rectángulo de alrededor de 25 por 25. El cambio es el radio fronterizo a cinco y su color al color de nuestro equipo. Ahora sumar más icono sobre este rectángulo y alinearlo correctamente. Copia el icono más de los archivos de ejercicios y pegado aquí correctamente. Y ahora solo coloca este texto y este icono más con un margen superior de 50 píxeles. Y ahora nuestra pantalla está terminada, y eso es todo por este video. Nos vemos en el siguiente video.
37. Añade la pantalla de tarjeta: Bienvenido de nuevo a los minutos. En este video, vamos a crear pantalla de agregar tarjeta. Entonces, en primer lugar, copia la pantalla número 14 y péguela aquí. Diez, cámbialo a pantalla de guardia. Después de eso, elimine estos textos de marcador de posición y mueva estos arriba boca abajo. Y estos dos son campos arriba y colocan este primer campo con un margen superior de diez píxeles y estos otros con un margen superior de 40 píxeles. Después de eso, cambie el nombre de este primer lugar titular a nombre en tarjeta. Después de eso, cambie el nombre del primer campo a nombre de usuario. Segundo campo a número de tarjeta, cambia de color a color claro para que un usuario sepa que no es el campo enfocado. Cambia el tercero para caducar IT, color de línea genio. Y después de eso, cambia el cuarto campo a Cv. Y ahora solo copie este texto de la pantalla anterior y péguelo aquí. Reemplaza este icono plus por un icono de marca de verificación y este texto con guardado mi tarjeta y colócala correctamente. Por último, sumar botón aquí. Copia eso de lo anterior, copia eso de la pantalla previamente creada, y pégalo aquí y renombra ese texto para aplicarlo. Y ahora nuestra pantalla está terminada. Eso es todo por este video. Nos vemos en el siguiente video.
38. Pantalla de mi dirección: bienvenida a los estudiantes. En este video, vamos a crear mi pantalla de direcciones. Entonces, en primer lugar, copia la pantalla anterior y pega aquí. A continuación, renombralo a la pantalla de mi editor. Después de eso, elimine todo esto excepto este botón. Y ahora agrega un mapa y un icono de mapa para el margen superior de 20 píxeles. Copia el mapa y el icono de mapa de Exercicios Archivos y colócalo aquí correctamente. Después de eso, presiona el Tiki y escribe, edita tu dirección, colócalo con un margen superior de 30 píxeles. Y ahora dibuja aquí tres rectángulos. Primero debe ser 382 por 80, y el otro debe ser 382 por 50. Cadena. En tercer lugar, el color del rectángulo a color claro con 20% de opacidad. Ahora, alinee correctamente estos tres rectángulos con un espaciado interno de 20 píxeles. Y ahora pasemos al primer rectángulo. Aquí. Agrega una ubicación que puedo primero. Y después de eso, agrega este texto. Alinear esto correctamente aquí en segundo rectángulo, unidad de piso. Y en este tercer código postal de barra derecha. Y luego la línea estos textos capas con estos rectángulos. Y por último, Cambia el texto del botón para guardar. Y ahora nuestra pantalla está terminada. Eso es todo por este video. Nos vemos en el siguiente video.
39. Pantalla de centro de ayuda: Bienvenidos de vuelta a los alumnos. En este video, vamos a crear la pantalla del Centro de Ayuda. Esta es la última semana de nuestra app nike. Entonces, en primer lugar, copia la pantalla anterior y pega aquí, luego cámbiala para ayudar a los centros verdes. Después de eso, elimine todo esto excepto este rectángulo. Y ahora cambia este tamaño de rectángulo a 382 por 580. Dale un radio de borde de cinco y barrió su color con color de fondo. Y ahora primero en TV. Y bien, ¿cómo puedo ayudar a cambiar su teléfono a 22 de oro y su color a nuestro color tema. Y luego colóquelo con un margen superior de 30 píxeles y un margen izquierdo de 16 píxeles. Después de eso, haz una copia de la misma. Y el mentón es aficionado a 16 semipúblico y erudito al color oscuro. Y luego cambiarle el nombre a este texto. Y luego gent hace texto a texto multilínea con un ancho de 250. Ahora agrega una línea de unos 350 píxeles debajo de ella. Y después de eso, agrega una flecha frente a este texto. Copia la flecha desde la parte superior, y pega aquí cambiando su posición. Ahora, solo agrupa estos juntos y haz cuatro copias de ella con un margen superior de 20 píxeles y muévalos hacia abajo uno por uno. Y después de esa cadena ese texto vive. Entonces a partir de aquí, solo estoy acelerando el proceso a tiempo Sierra. Y ahora todas sus pantallas están terminadas. Eso es todo por este video. Nos vemos en la siguiente lección. Vamos a vincular a sus amigos para hacer un prototipo de nuestra app.
40. Prototipo: Bienvenidos de vuelta a los alumnos. Este es el último video de este curso. En este video, vamos a echar un vistazo a cómo podemos vincular los fotogramas. Por lo que parece un anuncio del mundo real y luego compartirlo con otros miembros del equipo y partes interesadas. Entonces aquí en la parte superior derecha, ve que se divide en tres vistas. Diseñarte, prototipearte, e inspeccionarte. Esta vista prototipo se utiliza para crear conexiones entre amigos y para definir las conexiones entre ellos a través de la interacción. Así que basta con hacer clic en esta vista prototipo, acercar y hacer clic en el primer fotograma. Y oye, ya ves si un juega este ícono Play, lo considerará como marco de inicio. Déjalo tal y como está. Porque esta no es su pantalla de inicio. Y aquí se ve esta flecha. Simplemente arrástrelo y suéltelo en el segundo fotograma. Y a la derecha, tenemos ventana de propiedades. En la ventana Propiedades sólo tienes que elegir. Después del retraso. Ese tiempo debe ser de 400 milisegundos y la animación debemos disolver y la comida debe ser 0s. Después de eso, en nuestra siguiente pantalla, conecta este enviar con siguiente sueño con auto animate y 400 milisegundos. Haz lo mismo con la siguiente pantalla. Y aquí, protege este botón de reinicio con pantalla de inicio de sesión. Y ahora pasemos a la pantalla de registro. Aquí. Conecta este registro con la pantalla de inicio después de iniciar sesión con animación en movimiento. Y conecta este inicio de sesión con pantalla de inicio de sesión con smart animate. Y ahora pasemos a la pantalla de inicio. Esta es la pantalla de inicio antes de que un usuario haya iniciado sesión o se registren en la aplicación. Entonces aquí, solo conecta esta pestaña de búsqueda con la pantalla número 11 y este paso de campo con el esquema 12 en animación en movimiento. Y por último, corrija este perfil con perfil Pantalla1. También comprueba este smart de todos modos que coincidente capas casilla de verificación. Ahora en Powell Screen1, conecta este inicio de sesión y crea cuenta con pantalla de inicio de sesión. Y la animación debe estar moviéndose desde el lado derecho. Y aquí, conecta esto mis pedidos con pantalla
de registro porque nuestro usuario no puede ver el pedido a menos que se haya inscrito al add. Y esta pantalla de ayuda con ayuda configurar la pantalla. Y después de eso, conecta estas profundidades como lo hicimos en la pantalla anterior. Entonces a partir de aquí, solo estoy acelerando el proceso. Y ahora stern nos dijo pasar a la pantalla de inicio inicio de sesión de usuario externo a la aplicación. Aquí. En primer lugar, conecta esta zapatilla con la siguiente pantalla. Y este cuarto zapato con pantalla de detalle. Y su animación. caso de que nosotros inteligentes de todos modos aquí conectar estos pasos como lo hicimos en puro esquema. Pero esta vez conecta este Bhopal ICOM con la piel Provost después de iniciar sesión. Pantalla número 13 con mujer desde la emisión final inferior. Ahora pasemos a la pantalla número seis aquí, corrija esta flecha hacia atrás con pantalla anterior. Por lo que sólo tienes que elegir esta bolsa de golpeado hacia abajo. Ahora en la pantalla número siete. En primer lugar, hacer una copia de esta pantalla, muévala aquí arriba y renombrala a siete en dos. Y después de eso, diez, El primero consiguió icono a símbolo icono. Y ahora solo conecta estas dos pantallas junto con smart animate. No hay pantalla número siete en dos. Conecta ese icono del carrito, pantalla número ocho. Y su animación debe ser inteligente animate también, conocido como mu2 skene operar aquí, conecta esta flecha hacia atrás con FactoryGirl. Y después de eso, conecta estos botón de cambio con pantalla alrededor de 18 con animación en movimiento a la izquierda. Y conéctate esto continuar al botón Checkout con pantalla número nueve, el smart animate. Después de eso. En la pantalla número nueve, conecta esta flecha hacia atrás con la reina anterior y es el botón Hacer orden con siguiente crema. Ahora pasemos a la pantalla alrededor de diez. Aquí. Conecta este icono de cierre con la pantalla número cinco en una, que es la pantalla de inicio. Y su animación es inteligente de todos modos, ahora hemos vinculado diez pantallas en nuestra app. Vamos a probarlo haciendo clic aquí. Y estos están funcionando perfectamente bien. Ahora pantalla alrededor de 11, conéctate mejor con las bacterias y deja el resto como está. Y en pantalla. Y haremos lo mismo con la flecha de atrás. Y ahora solo conecta estos pasos como lo hicimos en la pantalla anterior. Ahora en pantalla más de 13. En primer lugar, corrija este botón de edición y este nombre de usuario con el número de pantalla 14. Y esta dirección con pantalla mayor a 18, donde un usuario puede actualizar fácilmente su dirección. También cambia las animaciones para moverse desde el lado izquierdo. La mitad de eso. Muémonos aquí abajo. Conecta este mi pedido con mi pantalla de pedidos. Ponlo esta mi tarjeta con mi pantalla actual, paréntos dirección. Con pantalla de direcciones. Dejar la notificación tal como está. Y aquí, conecta este Centro de Ayuda con la pantalla del centro de salud y este logotipo con pantalla de inicio antes de iniciar sesión del usuario. También únete a estas pestañas, simplemente elimínalas y pega las pestañas de la pantalla anterior para ahorrar tiempo. Debido a que ya están conectados en pantalla anterior, solo
necesitamos copiarlos y pegarlos aquí. Ahora en la pantalla número 14, corrija esta flecha hacia atrás con ese gatillo. Y este icono de marca de verificación con pantalla de perfil con animación de diapositiva derecha. Aquí. No pudo el resto de estas pantallas, flechas
traseras con gatillo de flecha hacia atrás y también estas profundidades. Para ahorrar nuestro tiempo. Después de eso, pasemos al esquí número 15. Aquí. No cambies nada. Y ahora cine 16, agarre esto, agrega una nueva tarjeta con pantalla por encima de 70 con animación en movimiento a la izquierda. Y ahora en pantalla más de 17, conecta este Botón Aplicar con pantalla superior a 16 con moverse desde la derecha y emisión. Y Nowinski número 18. Conecta este botón de guardar con la pantalla número ocho con auto animate. Y ahora letal escaneable 19, peligroso. Por último, todos nuestros marcos están vinculados. Para comprobar este enlace, basta con pulsar el control a. Y aquí se ve esa red de interacción. Es hora de ejecutar nuestra app. Por lo que sólo tienes que hacer clic en este botón Pigou. Y ahora ves que todas nuestras proyecciones están vinculadas entre sí. Y parece una aplicación real. Ahora para compartirlo con otros integrantes del equipo. Basta con hacer click en el botón Compartir. Y aquí puedes compartirlo para revisión de diseño, desarrollador de
hardware y muchas otras opciones también. Simplemente voy a elegir a cualquiera con un enlace puede agregarlo. Y por último, da click en Copiar Enlace y solo comparte este enlace con los miembros de tu equipo o con las partes interesadas. También puedes compartir este archivo ingresando sus correos electrónicos. Y esto nos lleva al final de este curso. Espero que les haya gustado este curso. Y si tienes alguna curiosidad con respecto a este curso, por favor siéntete libre de contactarme. Nos vemos chicos en otro curso de tratamiento.
Shehar Yar, UI/Ux Designer
