Diseño UI/UX con Figma: 5+ proyectos reales (2022)

1. Introducción Diseño de UI/UX con Figma): Bienvenido al diseño UX de UI con Figma. Este es el uno de los mejores tutorial del planeta. Por limitado que soy diseñador de UI UX, YouTuber, freelancer, creador de contenido, y programadores. A la fecha ya sea impartido o toneladas de Turín presencial y en línea. Y estoy tan emocionado de ser tu instructor en este curso. Como estudiante en este curso, vas a obtener acceso a las cuatro horas de contenido de video HD. ¿ Qué contenidos? Tutoriales paso a paso, proyectos interactivos, ejercicios, y modo. Te guiaré por todo el proceso paso a paso mientras me sigues junto a mí a través de este curso. En este curso, vamos a hablar principios y fundamentos del diseño gráfico, todo el camino hacia la creación de productos de retiro. Aprender sobre UX, UI e interacción, y crear un proceso de diseño completo para que lo utilices con todos tus futuros proyectos y clientes. Vamos a aprender todas las herramientas modernas y tejidos blandos por las principales empresas para laicos como Figma. Ahora el diseño es la habilidad valiosa que no se desfasa fácilmente, como la mayoría de la habilidad técnica que hay por ahí. Estoy usando Figma desde hace cuatro años y sé que cada tick y tips para este curso va a cubrir cada salida de la Y si X desde el principio para avanzar. Después de caminar por la interfaz, te guiaré paso a paso a través creación de proyectos cool PHI del mundo real, como la construcción de aplicaciones, aplicación de redes sociales, lo siento, para plataforma auditiva, aplicación de reproductor de música. Y el último se sorprende. Diseñé este curso para todo el diseñador de cargas arriba, ya sea que solo seas un principiante en diseñar audiencias emocionadas y diseño, busco aprender este nuevo campo, Martin. Entonces, ¿por qué seguimos esperando este curso tiene todo lo necesario para dominar en Figma. Entonces únete a la clase y empecemos a diseñar. 2. La diferencia entre UX y UI: Qué tipo de realmente grave Bienvenido de nuevo con otro video. Entonces en este video vamos a aprender sobre cuál es el diseño y, el diseño UX, y cuál es la diferencia entre UI y UX? diseño de UI y el diseño de UX son dos de los términos más confundidos y conflictivos en el diseño web y de la aplicación y comprensiblemente por lo que se colocan rígidamente juntos en un solo término como el diseño de UX de la interfaz de usuario. Y la herida del servicio ahí parece estar describiendo lo mismo. Y a menudo es difícil encontrar la discreción sólida de los dos que disienten demasiado lejos en la jerga. Pero no teman al final de este video, tendrán una buena comprensión de lo que los diferencian y cómo se relacionan entre sí. Entonces vamos a sumergirnos. Entonces lo primero que queremos discutir es que lo que es el blanco está en la orina tú, no soporté la interfaz de usuario. El interfaz de usuario es el diseño gráfico de una aplicación. Consiste en el botón que el usuario haga clic en el texto, leen la imagen, texto del deslizador en campo y todo el resto del elemento que conviertes en x que obtenemos. Esto incluye diseño de pantalla, animación de interfaz de transición, y cada micro indirección mucho ser diseñado. Este trabajo era para diseñador de UI, sí decidió qué aplicación se va a ver. Tienen que elegir esquema de color, pero luego dar forma al ancho de las líneas y a las fuentes utilizadas para los textos. Eres diseñadores crear el look y el Philip y las aplicaciones, interfaz de usuario, diseño de interfaz de usuario diseñador gráfico de activos. Son concurrentes con la estética. Depende de ellos asegurarse de que las interfaces de aplicaciones se atraigan a visualmente estimulantes, tentadas apropiadamente para que coincida con el propósito. Y necesitan asegurarse de que cada elemento visual se llene, United tanto ácida como de insumos. Entonces lo siguiente es, ¿qué es el diseño UX? Ampliar por experiencia de usuario o experiencia de usuario de la aplicación está determinada por la forma en que interactúan contigo. Es el experimentado, suave, ER, entidad o chunky o confuso. Vamos a narrar la app filológica o se siente confuso? ¿ Interactuar con las personas para enviar manera muy eficiente cumpliendo la tarea que se propusieron lograr? ¿ O se siente como una lucha? Las experiencias de usuario se determinan por lo fácil o difícil que es interactuar con el elemento de interfaz de usuario que el diseñador de interfaz de usuario cómo se creó. Por lo que el USD es otro también concur con la interfaz de usuario de la aplicación. Y es por eso que la gente se confunde. Nuestra diferencia entre los dos. Pero mientras que si lo hice en nuestra tarea, estamos decidiendo cómo se verá la interfaz de usuario. Deuda enorme y son los encargados de determinar cómo funciona la interfaz de usuario. El determinó la estructura de la interfaz y la funcionalidad, cómo se organiza, y cómo todas las partes se relacionan entre sí. En resumen, diseñan cómo funciona la interfaz. Si funciona bien y totalmente sin fisuras, el usuario tendrá buena experiencia. Pero si la navegación es complicada, entonces un usuario pésimo experimenta probable trabajo de diseñador estadounidense a nuestro segundo escenario. También hay ciertos análisis de datos de homeodominio en todo en el diseño de UX, los diseñadores crearán representación de estructura alónica de la interfaz en dirección y obtendrán comentarios de los usuarios. Interactuarán esto en su diseño. Es importante para nosotros el deseo de tener una comprensión holística de los preparadores de Pauser para interactuar con la aplicación. Entonces cómo trabajan juntos. Por lo que has diseñado, decide cómo funciona la interfaz de usuario mientras que el diseñador de UI decide cómo se ve la interfaz de usuario. Este es un proceso muy colaborativo y los dos equipos de diseño tienden a trabajar en estrecha colaboración ya que el equipo de UX está trabajando en el flujo de la aplicación. Cómo todos los botones nunca te llevan a través de tu tarea, y cómo la interfaz atiende eficientemente a las necesidades de información del usuario. El equipo de UI está trabajando en cómo todo este elemento de interfaz aparecerá en la pantalla. Digamos que en algún momento del proceso de diseño, decidió que se necesitan agregar botones adicionales a o dar pantalla. Esto cambiará cómo tendrán que organizarse los botones y podría requerir cambiar su forma y tamaño. Para UX equipo determinará la mejor manera diseñar el botón mientras los equipos de UI se suman, están diseñados para adaptarse al nuevo diseño. Constante comunicación y colaboración entre UI, UX diseñan una ayuda para asegurar que la interfaz de usuario final se vea lo mejor que pueda. Al mismo tiempo que opera de manera eficiente e intuitiva. Hay algunos arriesgados, como investigar vital tanto para la UI como para el diseñador UX. Es importante que ambas disciplinas reúnan la mayor cantidad de información posible para ayudarles a elaborar un diseño apropiado. Y ambos siguen un enfoque similar. Qué investigará, qué quiere el usuario, qué es lo que el experto desde aplicación del tipo de que se está desarrollando. El ciudadano es a menudo sesión de usabilidad de interfaz interactiva, donde el usuario real interactuará con versión escalada de cierta funcionalidad o diseño visual siendo texturizado y determinará si el diseño se están moviendo por el camino adecuado. Para la bolsa se integra con cada interacción. Este proceso implica la dispersión prototipos de baja fidelidad como wireframes, ingreso del elemento de interfaz con el fin de medir rápidamente una respuesta del usuario a la funcionalidad que se está probando. Esto también puede fomentar prototipo visual de diferente origen posible de la mirada y llenar la interfaz para determinar qué usuario prefiere. En todos los casos, la investigación ayuda a guiar a la garrapata del diseñador estatal a medida que construyen su contribución. No obstante, la información UI y UX deuda y R están buscando es muy diferente. Entonces todo esto se trata de cuál es el porqué los diseñadores UX diseñan y notan la diferencia entre ellos. Y también discutimos algunas claves de investigación. Entonces eso es todo para el video de hoy. Y los veo en el próximo. 3. Introducción a Figma y descarga y la instalación: Sea lo que sea, si alguna vez vuelves a ello otro video. En este video vamos a aprender sobre Weber general Figma, y también cómo descargar Figma para tu PC. Entonces como puedes ver, abrí la versión del navegador Figma. Simplemente ve a tu navegador y escribe figma.com así. Y después de golpear Enter, esta página estará abierta. Entonces como puedes ver, el espacio se ve realmente genial. Ya tiene algo de animación en esta portada. También algunos, creo que estos son la reutilización. Vamos a ver uno por uno. Por lo que en la parte superior tenemos este logo. Después de eso, tenemos producto. En productos, contamos con diseño, prototipado, sistema de diseño y descargas desde aquí, vamos a descargar nuestro software. Lo descargaremos a mi carta. Entonces veamos qué hay en la empresa. En empresa Contamos con todos tus clientes y ventas de contacto. Si haces click en la fijación de precios, habrá como tres opciones. Vamos a usar la versión gratuita. Y si quieres comprar la provisión de origen o todo NIOSH y puedes hacer eso, pero te sugeriré que uses versión gratuita. Digamos que la pestaña Comunidad en comunidad, hemos archivado y plantillas y plugins. Y también tenemos algunas opciones como evento y live estream, mejores prácticas de privacidad y programa de nutrición y grupos de usuarios. Por lo que nos interesa archivo y 10 bits en un archivo y Tenbrunsel, tenemos 1000 plantillas más. Podemos usarlo en nuestro proyecto. También tenemos plugins. Por lo que te mostraré cómo usar plugins en nuestro proyecto en futuros videos. En compañía, creo que llevaron a cabo blogs, carrera, nuestra historia y Centro de Ayuda. Si es necesario, ayuda puedes contactar desde aquí. Sé que eres nuevo aquí. Por lo que da click en el botón Regístrate y podrás conectar tu cuenta de Google. Y también puedes usar correo electrónico y contraseña para crear la cuenta en Figma. Pero te sugeriré que uses la cuenta de Google porque si agregas tu e-mail y contraseña, tienes que recordar la contraseña. Entonces si te conectas con tu cuenta de Google, no tienes que recordar el parcial de Figma. Y si haces click en el botón Regístrate y te mostrará tu cuenta de Google y podrás teclearlo y solo conectarte con ella. Entonces no voy a hacer eso porque ya tengo la cuenta de Figma. Por lo que me limitaré a bloquear mi cuenta de Google porque es realmente simple. Está bien, esta es mi cuenta. Después de iniciar sesión en nuestro registro en Figma, este es el tablero que vas a ver. Por lo que en este dashboard tenemos alguna razón, comunidad de perros y tu proyecto y tu equipo, tu perfil. Y también puedes ver las opciones desde aquí. Entonces vamos a mirar esas cosas en el próximo video. Entonces tengo que hacerlo, creo que tenía dos logotipos para mostrarte cómo descargar Figma. Entonces vamos a entrar en producto y sólo descargar. De acuerdo, después de hacer click en Descargar, esta página aparecerá. Ya puedes ver puedes descargar Figma para macOS o Windows. Puedes usar tu dispositivo Apple o Android para la vista previa. Y también hemos encontrado un toroide, pero nos interesan las aplicaciones de escritorio. Por lo que actualmente estoy usando Windows, así que voy a dar click en Windows. Si estás usando Mac, entonces haz clic en el macOS. Por lo que ya lo instalé en lo más óptimo, así que no tengo que volver a descargarlo. Por lo que tienes que hacer click en el botón Guardar. Se va, se va a dominar para ti. Entonces eso es todo para el video de hoy. Y te mostraré más cosas en el próximo video. Por lo tanto, mantente atentos para eso. Ese soy yo firmando. Gracias por mirar y los veo en el próximo. 4. Interfaz Figma: Bienvenido de nuevo. En este video, vamos a aprender nuestro tablero hasta Figma. Entonces cuando instalas el software, puedes ver que la interfaz va a verse así. Si inicias sesión en Figma, somos viaje. Y entonces también la interfaz es la misma. Después de instalar cuando inicias sesión en Figma, entonces las interfaces se ven así. Ahora estamos en tiempos recientes, en EP reciente, tenemos algunos archivos de figma, prototipos en Figma desde wireframing obesidad, y algunos colores. Puedes elegir para tu equipo. Pero estás trabajando por ti mismo, entonces no tienes que crear un equipo. Como puedes ver, creé un proyecto. Este proyecto se trata de diseño web. Por lo que la siguiente opción son borradores, interrupciones. Contamos con archivos no de proyecto. Si tan solo dices, vamos a dar click en este proyecto uno. Y si quieres mover este archivo al proyecto, puedes hacerlo. De acuerdo, el proyecto ya está abierto. Entonces, lo que tienes que hacer es solo hacer clic en este botón de flecha hacia abajo, y este menú aparecerá. Y desde aquí puedes mover este archivo a proyecto. Y también puedes buscar en tu proyecto desde aquí. O si quieres crear un nuevo proyecto, también puedes dar click en Nuevo Proyecto y MOOC. Por lo que está mostrando que tu proyecto se mueve. Por lo que este ahora es archivo de proyecto. Ahora si entramos a Home y se puede ver el archivo no está en D cae ahora. El archivo está en primer proyecto. Aquí se puede ver. Por lo que la siguiente opción es la comunidad. La comunidad es una de las mayores características de Figma. Desde aquí puedes descargar plug-ins, gema fija, sistema de diseño, wireframes, ilustración, icono, y mucho más. Como puedes ver, ya hemos creado plantillas. Puedes utilizar estas plantillas en nuestro proyecto. Entonces tomemos este. Por lo que puedes ver esta página web. Por lo que esta es la página web de la plataforma de e-learning. Y si quieres saber más sobre esta página web, puedes dar click en ella. Y te mostrará algunas cosas más, nuestra página web. Y también puedes conocer quién es el creador. Los opioides también pueden seguirlos desde aquí. Si quieres venir a, también puedes hacerlo desde aquí. Entonces, por ahora, lo vamos a hacer filtraciones. Y también nos puede gustar desde aquí y basta con hacer click en él para litigar. Después de duplicar archivo, entonces puedes ver que el proyecto está abierto en los borradores. Pero si quieres trasladar este proyecto a tu proyecto, solo puedes hacer click en proyecto MOOC y seleccionar tu proyecto. Al igual que no estoy creado ningún proyecto aquí, pero si hago clic en Predeterminado y se va a pasar a primer proyecto, si quieres. También puedes leer esta página, pero por ahora, vamos a aprender nuestras cosas. Entonces voy a cerrar esta pestaña. Entonces volvamos a casa otra vez. Entonces si eres nuevo aquí y quieres crear un nuevo proyecto, vas a entrar en primer proyecto puedes hacer clic en este botón más y solo tienes que hacer clic en el archivo de diseño. Digamos incluso que no tiene título, pero si queremos renombrarlo, también puedes renombrarlo desde aquí. Digamos que es una app. Entonces voy a, voy a teclear Enter. Así que despejemos el marco y solo elijamos a alguien como iPhone. Y podemos agregar elementos de ti, como una línea. O si quieres agregar otra forma como un triángulo o elipse Polígono. De acuerdo, puedes hacer todo tipo de Tokio, pero echemos un vistazo a la interfaz. Y se puede ver el pelágico que creaste. Es, no es efectivamente gotas. Y si quieres eliminar este archivo es solo hacer clic derecho en él y simplemente eliminarlo. Y si estás trabajando con tu equipo, solo puedes hacer click en Crear un nuevo equipo y el nombre del equipo y solo tienes que hacer click en el Crear un equipo. Pero actualmente solo estamos trabajando en solitario, así que no vamos a crear un nuevo equipo. Cerremos esta página. Por lo que hay más opciones como hay este botón de notificación. Recibirás una notificación aquí. Y este es el perfil. Desde aquí se puede acceder como plugins. Actualmente flotaba este plug-in fotográfico. Y si quieres, y si quiero desinstalarlo, solo puedo hacer clic en este botón y se va a desplegar para mí. Y también puedes descargar tantas como quejas de la comunidad. Y en comunidad tengo mi nombre, perfil de molaridad Beecher Stowe, en mi propio estilo. Por lo que tengo el mismo nombre de inmediato. Bibliotecas y aplicaciones de conexión y todo eso. Si quieres agregar más para acompañar, también puedes agregarlos de ti. Y puedes, si quieres cerrar sesión después de completar un proyecto, también puedes iniciar sesión aquí. Y creo que ese traje, eso es todo sobre el tablero de Figma o la interfaz. Por lo que en el siguiente video, aprenderemos sobre las herramientas de Figma y más. Entonces gracias por ver este video y los voy a ver chicos en el siguiente. 5. Importar archivos Figma en Figma: Bienvenido de nuevo. En este video vamos a aprender sobre cómo importar archivos como archivos Figma, archivos boceto, y plantillas. Entonces como pueden ver, tengo este equipo. Entrémonos en ello. Y tengo algunos archivos en ella. Entonces no voy a ir Newton este, así que voy a hacer éste por importar, bien. Ir a Nuevo. Y puedes ver tenemos botón Importar, así que haz click en él. Y tengo un proyecto de Figma. Y se puede ver la extensión es llenar. Entonces haz click en él y haz click en abrir. Por lo que tomará algún tiempo. Nuestros últimos lideratos en frontera realizados con éxito. Entonces si entro en proyecto. Por lo que se puede ver en este proyecto está abierto ahora, así que puedo hacer cambios si quiero. Y en la página 1, tenemos como cuatro marcos. Y para dos marcos son páginas web y, y estos dos marcos para la aplicación. Y esto también es página web. Si quieres hacer algunos cambios, también puedes hacerlo desde aquí. Entonces así es como importar un proyecto desde archivo local. Digamos que si quieres descargar como nuestras plantillas, por lo que solo puedes teclear en Google, descargar plantillas de Figma. Así que me pareció muy útil este sitio web, figma.com. Por lo que en este sitio web tenemos un montón de proyectos. Por lo que solo puedes hacer click en él y descargarlo desde la vista. Y el siguiente tamaño de paso es como, digamos que este es el Figma template.com. En esta imagen tuvimos como montones de plantilla y todas estas plantillas son libres de hacer para que podamos retener, puedes hacer cambios. Y también puedes inspirarte este proyecto si no estás teniendo idea de cómo hacer tu próximo proyecto. Por lo que descargué este proyecto de ti. Digamos que si quieres que te guste importar archivo de boceto, también puedes hacer eso. Y para los recursos para este archivo de boceto, se puede utilizar este sitio web llamado Sketchfab dot, así lo dice. Por lo que en este sitio web tenemos un gran jabón recursos como plantillas gratuitas y se puede decir wireframe. También guardo para el Icon Android y todo eso. Por lo que descargan este. Y ya lo hiciste en el archivo, ya he descargado éste. Para que te veas. Entonces no sólo voy a escuchar. Y puedes ver este archivo de ejercicios que descargamos y extraemos. Haga clic en él. Se puede ver el archivo de boceto. Ir a Figma, dar click en Nuevo e importar. Por lo que actualmente el mismo límite de archivo DEM g. Así que tengo que hacer algo. Por lo que quiero hacer en este. Nuevamente, haga clic en Nueva importación. Y este es un archivo de boceto. Y dar click en Abrir. Por lo que nuestro archivo está importando. Se puede ver el nombre y el archivo se importa correctamente. Hecho. Entonces haga clic en él. Entonces después de ofrecer archivo, incluso ver la aplicación es se ve así. Entonces solo estamos diciéndome que caiga teléfonos no están disponibles para que podamos reemplazarlos por cualquier otro formulario. Entonces hay un problema con el archivo Sketch, así que tenemos que ganar esos formularios. Otra vez. Vayamos a casa a por éste porque tengo que mostrarte algo. Y justo cuando creé este único orden completo, una gran UI, digamos que quiero mover este proyecto para que me guste mi nuevo proyecto. Para que veas que tenemos opciones como múltiplo. Entonces si hago clic en esto y en opciones de V8 como borradores, y este es mi equipo. Y si quieres crear un nuevo equipo, también puedes hacerlo desde aquí. Por lo que actualmente quiero mudarme. Voy equipo de programas imaginarios. Entonces voy a dar clic en este y moverme, creo que es mono 2 primer proyecto. Y podemos ver nuestro proyecto es 0. Entonces así es como puedes importar desde un archivo, boceto de archivo y descargar esas plantillas. Entonces eso es importante. Y los veo en el próximo. 6. Herramientas en Figma: Entonces somos realmente severos. Volveremos a ello otro video. En este video vamos a aprender sobre herramientas. Vamos a crear un nuevo proyecto. Demos click en el Nuevo y podrás ver las opciones como archivo de diseño, Figma, archivo de salto, importar y, y navegar plantillas. Puedes ver desde aquí puedes elegir Templarios como para iPhone 11 Pro Max, o puedes elegir como otros smartphones. O si queremos hacer nuestra página web, también puedes elegir un escritorio, o también puedes elegir una diapositiva de 16 años a nueve. Y si lo deseas, también puedes elegir desde aquí estas plantillas prefabricadas. También hemos conservado presentación del sistema de diseño y wireframe. Y si haces click en la comunidad CMO, entonces te redirigirá a la sección de la comunidad. Y además cuenta con unas plantillas de gestor de higo. Actualmente es versión beta. Por lo que nos interesa el espacio en blanco. Y se puede ver aquí actualmente es un imaginario programador equipos y primer proyecto. Y se puede ver que es el primer proyecto. Por lo que necesitamos una pantalla en blanco. Entonces voy a ir con el archivo de diseño. Después de crear un nuevo archivo, la interfaz se verá así. Y si quieres cambiarle el nombre, solo puedes hacer clic en este menú desplegable y solo puedes renombrarlo desde aquí. También se puede mover a proyectar, eliminar, lubricar y exportar, y también se puede ver la cadena de origen. Entonces, por ahora, sólo voy a renombrarlo. Vamos a renombrarlo en herramientas. Y como puedes ver, hay un logo de Figma en el lado izquierdo. Y si hago click en este Meno, entonces puedes ver las opciones. Desde esta opción de sección rápida, puedes buscar cualquier cosa como yo quiero buscar como polígono. Puedo usar directamente. Y solo puedes dibujar el polígono así. Pájaro. Echemos un vistazo a las más opciones. Y, y desde aquí también puedes ir a File Edit, View, object vector taked Ahrens plugins. Actualmente instalé el único plug-in que es fotos. Y se puede, también podemos agregar hay más opciones como bibliotecas de integración y rendimiento. Y también puedes ver la cuenta de horquilla para usar versión web de Figma entonces opción podría ser diferente. No todas las opciones, algunas opciones como en esta sección se obtendrá aplicación de escritorio. ¿ De acuerdo? De acuerdo, Esta es la jugada. De aquí. Puedes mover tus vectores, objetos, imágenes, y todo eso. Y también hay opciones de escala. De acuerdo, el siguiente es marco. Como puedes ver desde el atajo es F. Si presionas F en el teclado, entonces tiene algunas plantillas como teléfono, tablet, escritorio, presentación, escritorio, presentación, ver las redes sociales de las personas y la comunidad de Figma. Pero si quieres crear como basado en web, entonces puedes elegir estas opciones como escritorio, MacBook, MacBook Pro e iMac. La mayoría de las veces elijo MacBook Pro. Entonces vamos a dar click en él. Entonces la plantilla está en la pantalla y marco también tenemos una opción de rebanada. Creo que la herramienta Slice no se usa tanto, así que voy a saltarme esto. De acuerdo, en la siguiente sección tenemos como formas como un rectángulo, flechas de línea, elipse, polígono, estrella. Y si, si quieres colocar una imagen de tus medios locales, también puedes hacerlo. Y elijamos un rectángulo. Simplemente puedes arrastrarlo en el marco. Y se puede ver en ese rectángulo es crear aquí. Pero si quieres dibujar cuadrado, el cuadrado perfecto, entonces tienes que mantener presionado Shift en el teclado así. Y se puede ver el cuadrado está dibujado, dibujado el marco así. Pero si me quito el dedo de la nave, entonces se puede ver que la forma se cambia ahora. Y sucede con todas las formas. Al igual que quiero crear un círculo. Entonces puedes ver que elijo la elipse y estoy arrastrando esto. Y me estoy muriendo el círculo en la pantalla, pero no son las encuestas es el ol. Entonces quiero crear el círculo. Entonces voy a sostener Shift en el teclado. Entonces como puedes ver, ahora es círculo así. Y aquí está como árbol realmente fresco. Se puede ver que hay un cuatro puntos en el lado este. Y si lo arrastro por dentro, puedes crear un círculo como este. Y si quiero crear un icono, entonces puedes usar esta opción para hacerte bordes más nítidos en esquina redondeada. Creo que ya te muestro cómo usar estas cosas en video anterior, pero creo que no te muestro cómo hacer Likud el artículo. Al igual que si tuvieras que duplicar este círculo, solo tienes que hacer clic en él y mantén presionado Alt en tu teclado y simplemente arrástralo. Siempre que quieras así y déjalo. Y también puedes cambiarlo a otra forma ya encontrada para hacer de este círculo pequeño. Simplemente puedes mantener pulsado shift y arrastrarlo hacia abajo así. Hazlo más pequeño y menos placas explícitas aquí. Podría ser nuestro logo, así. De acuerdo, La siguiente opción es girar desde el dolor. Puedes hacer formas, formas aleatorias como esta. También podemos hacer ruedas a partir de ella. Digamos así. Al igual que unirse. Al igual que esto. Puedes ver si quieres, también puedes añadir un color en él. Basta con dar click en el relleno y este botón más. Y se puede ver y el color, y el color es gris. Y si quieres hacer algunos cambios, y luego puedes elegir, o simplemente puedes presionar V en tu teclado y solo tienes que ir en este punto rojo. Simplemente puedes arrastrarlo así. La forma va a cambiar. Al igual que esto. Si quieres cambiar este color gris a otro color, entonces solo tienes que pulsar este icono y simplemente, y simplemente arrastrarlo en esta sección de color. También puedes usar gradiente si quieres. Ya puedes ver el cambio de color en el marco, así. De acuerdo, La siguiente opción es lápiz. A partir de aquí, solo puedes dibujar como algo así. Y la siguiente opción es el texto. Añadamos algo de texto en la pantalla así. Cualquier cosa así como al azar. El tamaño de la fuente, es muy pequeño. Entonces si queremos hacerlo más grande, solo tienes que seleccionar la fuente usando Control a. Y puedes ir a esta sección de texto y cambiar el tamaño de fuente a P2. Te voy a mantener hasta 48. Por lo que podemos ver los tamaños de fuente aumentados ahora. Y también puedes cambiar el tipo de fuente así. Mi fuente favorita es VCR. Entonces voy a elegir este. Y se puede ver la fuente así. Si quieres. También puedes agregar trazos, efectos y todo eso. Y la siguiente herramienta es Hand Tool. Digamos que si tienes más de un fotograma, Vamos a duplicar este marco. Presiona Alt y muévelo así. Y actualmente si estás trabajando en como primer fotograma y quieres mover un fotograma a otro. Puedes usar esta barra deslizante para desplazarte a otro fotograma. Pero no es eso. Pero si tienes mucho marco, como tres o cuatro marco, solo podemos usar la mano. Y el atajo para la herramienta de mano es de borde. Y se puede ver que la mano está en el marco. Y sí, solo puedes arrastrarlo así. Segundo marco. El primer marco. Y la siguiente herramienta es el comando. Digamos que estás trabajando en el proyecto y a tu manera te recomiendo en el marco como este es el logo. Para que me digas qué te gusta. Este es el cambio. Al igual que esto. Está bien. He cometido muchos errores ortográficos. Entonces te metiste con saber que este es el logo para que no tengamos que hacer ningún cambio. Entonces eres otro compañero o un compañero de equipo puede responder a este mensaje, ¿de acuerdo? Y basta con dar click en la respuesta. ¿ De acuerdo? Pero se puede ver cuando entro a la herramienta Mover, entonces va a ser invisible. Pero si vuelvo a entrar en comentario, entonces es visible ahora. Y de nuevo, se puede ver que este es el logotipo no puede cambiar. Y su compañero de equipo, señor. Está bien. Esas son todas las herramientas en el Figma que puedes usar para hacer cualquier proyecto como este sería a Mary le gusta proyecto realmente extraño en pantalla. Entonces eso es todo por hoy. Y los veré en el próximo. 7. Panel de capas de Figma: Bienvenido, bienvenido, bienvenido. Y esto será alrededor aprender sobre cómo hacer capas, páginas y componentes. Por lo que este es un proyecto del video anterior. Entonces como puedes ver, tenemos dos listas que es MacBook Pro para terminar mi MacBook Pro V1. Y dentro de ella tiene como vectores, elipses, círculos y todo lleva al texto. Y si queremos crear una nueva página, una página en blanco, solo voy a dar clic en este botón más. Y si quieres renombrarlo, simplemente puedes renombrarlo lo que quieras. Por ahora, voy a elegir pares para presionar Enter. Y se puede ver que el espacio está completamente vacío ahora. Pero si quiero este marco, no muevas de la página 1 a la página 2 o solo quiero copiar. Simplemente puedes presionar Control C y simplemente ir a la página dos y presionar el control V. Y puedes ver nuestro marco desde la página uno. Ahora está en marco, y sólo lo copiamos en un fotograma. Digamos si quieres copiar todas las cosas de la página 1 a la página para ir a página uno y seleccionar todos los amigos lean usando Control o Command D en el Mac. Y Control C para copia. Ahora ve a la página dos y presiona el control V. Y puedes ver todas las cosas de la página uno. Ahora está en la página dos. Por lo que es nuestras páginas D. Y puedes ver estos son los listados, el MacBook Pro 21. Entonces estas son las capas. Y digamos que tengo este círculo, pero es logo, y quiero usarlo una y otra vez. Puedo hacer este logo en componentes como seleccionar este círculo, ir al Departamento DOE. Y se puede ver este icono del medio. Eso es crear un componente y el atajo es Control Alt, y dar click en él. Y si entramos en activos, se puede ver el MacBook Pro V1 y el componente es herramienta de Ellipse como esta. Y si queremos usar esto y simplemente arrástralo en la pantalla así. Y queremos ayudar cuando estás trabajando con un montón de amigos. Todo proyecto grande. Entonces esas son todas las cosas de las capas, las páginas y el SSRS. Entonces esa es tu foto. Y los veo en el próximo. 8. Componentes de Figma: Bueno, entonces realmente necesita ser una bienvenida de nuevo a otro video. En este video, vamos a aprender sobre los componentes. En videos anteriores, aprenderemos sobre cómo crear componentes y cómo usarlos. Pero en este video, vamos a aprender más sobre componentes como qué tipo de cosas puedes hacer con los componentes. Digamos que estás diseñando una app, app de navegador Hub. Y tienes múltiples páginas como esta. Y tienes iconos como este. Y hay que utilizar estos iconos en esta página superior del barco. Al igual, digamos que quiero agregar este icono de YouTube. Entonces lo voy a seleccionar. Y movamos este marco. Como dije, la mayoría de estos iconos. Y también queremos este punto y coma en la siguiente página. Esta duplicada usando alerta en Mac, es la tecla Opción, así. Pero quiero cambiar el color de este ícono como icono de YouTube. Entonces voy a entrar a llenarlo y cambiarlo a comercio. ¿ De acuerdo? Los colores cambian. Ahora. Se puede ver el color real. Pero al mismo tiempo, también quiero gustarme el color de género de este ícono también, pero tengo que hacerlo de nuevo. Entonces, entonces en este caso, los componentes nos van a ayudar. Vamos a mover este bombo el domingo. Este espacio en blanco, también, éste. Y selecciona el icono. Y aludimos a antes cómo crear un componente. Así que ve en el amino de la barra superior, selecciona este botón de diamante y haz clic en él. Y ahora tienes un componente. Entonces, ¿cómo sabrás que esto es un componente o no? Entonces, si haces zoom en esto, puedes ver el pequeño icono de diamante en ti. Y también hay un componente. Y esto también se llama como componente después o componente de patrón. Entonces si entramos en activo Pentland y se puede ver nuestro logotipo de YouTube, ahora es componente. Simplemente puedes arrastrarlo así y colocarlo en trabajar muy bien. Tú quieres así. Entonces hagamos de este Instagram también un componente y este ícono de PayPal. Por lo que este también es el botón de componente plus. Entonces estos son los componentes. Ahora solo podemos arrastrarlo así, colocarlo donde quieras, así. Entonces lo que quiero hacer es que muestre este icono en, también en el siguiente fotograma. Presiona Alt y arrástralo en el siguiente fotograma, así. Este es el componente maestro y estos son el componente hijos. Y lo que quiero hacer es que quiero cambiar el color de esto y esto. Entonces lo que voy a hacer es que voy a dar click, voy a seleccionar este componente maestro y vamos a diseñar panel y dar click en este color de selección. Por lo que actualmente este color negro y yo quiero cambiar, te va a gustar leer. Entonces voy a arrastrarlo a la carga sobre el rojo. Y se puede ver el componente maestro y también el color del componente hijo también se cambia en el marco de uno y también en diferente también. Entonces por esto, no tienes que cambiar el color una y otra vez en los diferentes marcos. Hagamos el panel de navegación. Y sólo podemos sumar todos los elementos en él. Y vamos a crear ese panel de navegación en componentes para que no tengamos que gustarle arrastrarlo en el segundo panel de plumilla una y otra vez. Entonces vamos a crear un panel de navegación. Escogamos un rectángulo. Vas a presionar R para el atajo para crear un panel de navegación simple como este. Por lo que creamos esta barra de navegación. Por lo que puedes ver en la sección posterior en el primer fotograma, iPhone 11 Pro Max, el rectángulo está en la parte superior. Entonces v lo hará, si v, si arrastro este YouTube, icono de YouTube en inhabilitado, entonces no se va a mostrar. Se puede ver. Entonces si muevo este rectángulo a la baja, así al final del marco. Y si vuelvo a arrastrar este icono de YouTube en el panel de navegación, y se puede ver el logo ahora visible. Entonces, arrastremos este icono uno por uno. De acuerdo, el panel de navegación es creador. Entonces vamos a seleccionar esto y puedes presionar el botón Componente para crear componente. Por lo que ahora se trata de un componente y se puede ver el componente en el panel Asset dentro del iPhone 11 Pro Max 1. Digamos que si muevo esto fuera de este marco. Por lo que no es componente universal. Y puedes simplemente arrastrarlo en el marco así. ¿ De acuerdo? Por lo que estos componentes, y estos componentes son totalmente diferentes. Hicimos esto en el panel de navegación luego después de crear un componente. Entonces estos son los diferentes. Si elimino este, se puede ver el componente maestro desde el panel Activo no se elimina ahora, pero no desde este panel de navegación. Por lo que este tipo de cosas se pueden hacer con un componente. Entonces eso es 24. Y los veré en el próximo. 9. Pasear y panel de: Bienvenido de nuevo. En este video, vamos a aprender nuestro uno de los penaltis más importantes que está diseñado panel. Entonces vamos a abrir este proyecto. Entonces si hago clic en este top uno, para que puedas ver panel de diseño y puedes ver la posición x e y. Estamos cansados angulo. Y si quieres hacer rondas a los colonos, no puedes gastarlos desde aquí. Si quieres agregar auto-layout, lo vas a hacer desde aquí. Pero si hago clic en esto, se puede ver si está mal. Entonces no voy a hacer eso. Por lo que presiona Control Z para deshacer las cosas. Está bien, ahora es normal. Y si quiero agregar una columna, puedes hacerlo desde aquí. Actualmente es ingrediente. Entonces vamos a elegir el color y puedes establecer cuánta columna quieres, como actualmente, dedicado es de cinco. Por lo que en su mayoría en la industria, usaron fracaso. Entonces nos vamos a apegar a ella. Para que veas podemos ajustar estos textos así de acuerdo a estas columnas. Por lo que se verá más mejor. Ok. Y tenemos opciones como capa, trazo de color silicio, efectos y exportación. Entonces veamos uno por uno. Entonces vamos a quitar esto. ¿ De acuerdo? Por lo que si hago clic en este logo, se puede ver la posición x e y. Entonces si quiero entre como un niño, puedo generar a partir de aquí, como actualmente son 100 ohmios, así que puedo hacerlo bien, es como un 100. Por lo que se puede ver que es j ahora. Y si quieres, puedes mover esto manualmente de esta manera. También se puede cambiar el ancho y la altura. Al igual que actualmente el opiáceo es como 1906. Y se puede ver que es una especie de la palabra distrito estirada. Y rastreemos la hidrólisis. Para que podamos ver que se ve realmente raro. Hazlo normal. Está bien. Entonces a partir de esta opción podemos hacer como proporciones de restricción. Entonces digamos si cambio esto en como 200, por lo que automáticamente va a agregar solo EPR en altura. Echemos un vistazo a otro ejemplo. Digamos que hago, lo voy a recuperar hasta 250. Por lo que se puede ver el cambio de voltaje de acuerdo a la altura. Entonces voy a hacer que sea normal. Por lo que si quieres cambiar el ángulo de este logotipo, puedes hacerlo desde aquí. Digamos que 45. Ya puedes ver cadena colgando. Entonces si me muevo más hacia el logo y puedes ver mi cursor, cambias. Por lo que sólo puedo moverme como manualmente. O simplemente puedes ir aquí y teclear 0. Y si quieres que te guste hacerlo esta ronda, entonces es una, ya es redonda, así que no voy a hacer eso. Entonces digamos si tienes un cuadrado como este y quieres cambiar las esquinas agudas en como redondas. Entonces desde aquí puedes hacer que eso suceda. Digamos, vamos a dar valor. Y se puede ver que los rincones agudos están cambiando a la ciudad. Por lo que desde la restricción podemos comenzar nuestros logotipos y botones de navegación. Por ejemplo, si hago clic en mi logo y vamos a ir a la restricción. Restratificación. ¿ De acuerdo? Por lo que actualmente no se queda ni arriba. Entonces si me cambio como un derecho y Morton y si decido mi digamos este marco, se puede ver el logo, se ha movido de ese marco. Entonces lo que quiero hacer es que cuando cambie el tamaño de esta fase, el logo tiene que quedarse aquí. Por lo que quiero anclar este logo en esta posición. Entonces lo que voy a hacer es que voy a ir a la intervención y a la posición 4, esto se vive y tiene que estar en el libro. Entonces digamos que si selecciono de nuevo este marco, tenía lo decide, lo puedes ver girar ahora. Y se puede hacer lo mismo con este contacto domiciliario y sobre. Digamos que quiero anclar un contacto domiciliario y sobre pero quiero hacerlo al mismo tiempo. No una y otra vez. Entonces lo que quiero, entonces lo que voy a hacer es que voy a dar clic en Inicio y mantener pulsada Mayús, click en Contacto, y dar click por nuestra cuenta. Por lo que este contacto domiciliario sobre son seleccionados. Por lo que quiero anclar en esta posición. Entonces voy a entrar en restricciones. Y actualmente no es el lado correcto, así que voy a elegir brillante y se debe enseñar la policía. Y si hago click en este marco y menos redimensionarlo. Por lo que se puede ver que ha sido. Entonces así es como puedes usar la conciencia. Entonces lo siguiente son las capas. Entonces a partir de esto puedes elegir diferentes modos de mezcla como daga Modibo, clavícula, así. Por lo que garantizo seleccioné la plaza. Digamos que quiero cambiarlo para multiplicarse. Por lo que voy a dar click en multiplicar. Para que se pueda ver el efecto. Se ha vuelto transparente. Y también tiene el color gris. Entonces si quieres cambiar el color, también puedes cambiarlo desde aquí. Pero actualmente lo voy a dejar como está. Entonces mi favorita es como esta exclusión. Se puede ver la magia. Entonces esto se convierte en una película negativa. Por ahora, solo multiplicémoslo. Si quieres usar otras opciones como pantalla grande color dodge, puedes usarlo. Simplemente juega con él. ¿ De acuerdo? Por lo que si quieres, también puedes disminuir o aumentar la obesidad web. Por lo que actualmente es un 100 por ciento, así que voy a grados hasta como 60. Por lo que se puede ver que se ha convertido en trasplante alfabetizado. Para contratar. Simplemente puedes hacer click en este botón. Se hará automáticamente. Entonces hagámoslo normal a un 100 por ciento así. Entonces cambiemos el color. Ya puedes ver, podemos cambiar el color así. Entonces elijamos éste. ¿ De acuerdo? Entonces desde aquí también puedes, si quieres, también puedes agregar el código hexadecimal y pegarlo aquí. Y también podemos disminuir uno enqueued es opacidad 50 por ciento. O si quieres esconderte, puedes esconderte así. Y digamos que no quieres color, solo puedes presionar este botón y se va a quitar. Vamos a deshacer esto. Entonces el siguiente es derrame cerebral. Por lo tanto, trazo, puedes agregar un trazo. Por lo que puedes ver cuando hago clic en el trazo, que ya agregó el trazo que es negro. Por lo que quiero cambiar a otro color. Por lo que solo puedo hacer clic en este cuadro que es color. Y solo puedo arrastrarlo en la paleta de colores cuando, donde quiera. Entonces elijamos esta lección, esta roja. Está bien, Ya puedes ver que la frontera es roja. Y si quieres agregar como color degradado. Por lo que solo puedes ir a esta caja. Y a partir de aquí se puede elegir lineal. Por lo que se pueden agregar dos pilares. Por lo que actualmente está lloviendo. Entonces voy a añadir el segundo color, como el gris. Por lo que se puede ver que el hub se vuelve rojo y el hub se convierten en núcleos. Entonces hagámoslo sólido por ahora. ¿ De acuerdo? También puedes aumentar o disminuir lo contrario. También puedes agregar el código hexadecimal. Y también puedes elegir diferentes formatos de pellets como RGB, CSS, ya que SSL es SB. Entonces si quieres aumentar el trazo, solo puedes agregar el número como menos aire en fino. Y se puede ver que el derrame cerebral se incrementa en cinco. Y digamos que si quieres, el derrame cerebral debe estar en centrado, puedes elegir centro. Y también puedes hacerlo por fuera así. Por lo que a partir de estos tres botones, obtendrás más opciones. Al igual que yo no trazos, como un estilo de trazo debe ser sólido o guión. Por lo que actualmente, actualmente obligatoriamente el sólido. Entonces voy a elegir dash. Por lo que se puede ver desprendido. Entonces si quieres agregar cuánta deuda y cuánto quiere Gabby, ya puedes familiar. Entonces por defecto creo que es 10, así que vamos a maquillarlo hasta 15. ¿ De acuerdo? ¿ Y qué debemos Desk app? Entonces por defecto es como Satanás a ninguno. Entonces si quieres, puedes hacer cuadrado o redondo así. Por lo que el escritorio se vuelve alrededor. Para que puedas ajustar la unión así es un bisel milímetro y creo que éste es todo. Por lo que también puedes agregar este ángulo delta desde aquí. Entonces voy a dejarlo tal y como está. Se ve realmente bien. Pero sólo esta raíz cuadrada se ve bien. Entonces así es como puedes agregar un trazo en formas y objetos. Entonces elijamos el efecto. Entonces desde efecto puedes agregar, vamos a agregar el efecto en este texto emergente programador. Por lo que elegí este texto y la sangre del patio de recreo actualmente. Vamos a eliminar este y añadir nuevo efecto. Eso es sombra de gota. Y se puede ver que este texto es algo así como rotar. Entonces si quiero, también voy a añadir sólo la cantidad de sombra que quiero. Por lo que actualmente, es como por qué está llena y la sangre es 4. Entonces cuando x aumenta, y. Aumentemos demasiado. Para que se pueda ver la sombra. Entonces pasemos los próximos 40. Por lo que obtendrás ese efecto de sombra de gota fresca. Entonces por esto es demasiado, así que lo voy a hacer como listas, bien. Y debe ser 0. Ahora se ve realmente genial. Entonces si quieres, puedes cambiar los colores como efectivos solo. Por ahora me voy a ir como está, porque se ve realmente genial. Entonces me gusta lo contrario que quieres de ti. Si lo deseas, también puedes elegir diferentes modos de mezcla como mezclas de color marrón oscuro de varias partes, suaves, claros y tomacorriente. Usemos multiplicar. Está bien, veamos. Yo no lo hacía normalmente. Digamos que si hago clic en otro elemento como una lista, hago clic en este marco. Entonces las únicas opciones de diseño como capas de marco serán diferentes para ese elemento. Igual para este elemento, este elemento para todas las cosas. Creo que me olvidé de contarte más sobre efectos. Entonces voy a hacer, y vamos a añadir otro cuadrado. De acuerdo, así. Entonces si entro en efectos, por lo que actualmente estoy recibiendo opcional y drop shadow. Por lo que si quieres, también puedes elegir opciones como Sombra interior, desenfoque de capas. Entonces veamos uno por uno. Usemos la sombra interior. Por lo que podemos ver que se agrega la sombra interior. Aquí se puede ver. Si quieres, también puedes incluir es el, la sangre. Al igual vamos a sumar el 20 y 20. Por lo que ahora se puede ver el corto interno de la misma. Entonces, vamos a elegirlo de nuevo. Y hagámoslo. Por lo que se puede ver el efecto de desenfoque de capa que se le agrega. También podemos agregarle sangre de micras así. Entonces esas son todas las cosas que puedes hacer con efectos. Digamos que tengo este marco, escritorio tres, y quiero agregar como una imagen en el fondo opuesto. Añadamos esta imagen de pizza. Arrástrelo y suelte esto en el marco así. ¿De acuerdo? Creo que es algo así como realmente estropeado. Entonces elegamos la pantalla de escritorio y podrás ver la imagen en las imágenes en la parte superior. Entonces lo que quiero hacer es que quiero ver todas las opciones como las formas, texto sobre todo eso. Entonces voy a mover esto al fondo. Para que puedas ver, podemos ver todas las opciones. Entonces disminuyamos la opacidad de la misma. Se puede ver en la imagen colgante de diseño y lo contrario, es un 100 actualmente, por lo que vamos a elegir hasta 20 por ciento. Entonces nuestros botones de navegación y todas las cosas de este marco se harán visibles. Si quieres. También puedes elegir los diferentes modos de mezcla como el lunes por clavícula, exclusión, diferencia, diferencia, y todo eso. Por lo que me voy a ir como está pasando actualmente. Y si haces click en esta imagen, entonces obtendrás este mineral. Al igual que las restricciones de exposición, saturación, reflejos de temperatura y tinte y sombra. Y puedes abordarlo qué imagen de ti, como, así. Entonces solo depende totalmente de ti. Entonces soy como meterme con ello. Entonces si estás trabajando en el proyecto como realmente cool, entonces, así que vamos a asegurarnos de que tienes un cierto debe ser perfecto. Entonces hay tipo de cosas, puedes hacerlo con el panel de diseño. Entonces eso es desafortunado. Y los veo en el próximo. 10. Herramienta y fuentes de texto: Bienvenido de nuevo. En este video, vamos a aprender sobre. Entonces como pueden ver, tengo este marco llamado escritorio one. Y para acceder al texto, podemos colocar P por código corto. Consideraré genuino icono 2k plus. Y si hago click en el marco y escribo texto en él, así, si quieres, también puedes copiar pegar tu texto usando el control C y el control V. Así este es el primer método que se selecciona en el texto y dar click en la pantalla. Y te discutirán y podrás escribir lo que quieras así. Y el segundo método es que puedes seleccionar texto y puedes dibujar la dimensión de acuerdo a tu proyecto así. Puedes escribir lo que quieras en esta caja. Yo solo quiero copiar pegado así. Si quieres abordar de nuevo este texto camina, puedes acceder a ellos haciendo click en él. Y ahí está esto añadido esto de acuerdo a tu proyecto, así. Digamos que si quieres que te guste aumentar el tamaño de fuente de este texto, puedes seleccionar en él y luego ir al panel de diseño. Y se puede ver el menú de texto. Y desde aquí se puede ajustar la fuente. Al igual, ¿qué tipo de teléfono quieres que hace actualmente en Roboto? Entonces si queremos cambiar otra fuente, como digamos ataúdes. Y solo puedes teclearlo y dar click en él. No quiere cambiar para ti. Si quiero decir cuatro formas diferentes, puedes buscar en ella. Entonces por ahora sólo estoy en los Poppins. Entonces aumentemos el tamaño de la fuente hasta como 50. Digamos que si quieres cambiar tu fuente, regular a negrita, puedes cambiarla desde aquí. Actualmente se encuentra en regular. Podemos entrar en este menú y solo puedo seleccionar Bold. Y puedes ver tu texto cada pizarra genuina. Ahora, si lo deseas, también puedes usar el atajo llamado control y B para cambiar tu rotación normal demasiado negrita, también a bordo de esta manera. También obtenemos otras opciones como línea extra, delgada, ligera, regular, media, semi negrita, extra negrita y negra. Y también puedes elegir esta opción si quieres. El texto nace ahora. Entonces como pueden ver, tengo esta paradoja y vamos a aumentar la fuente opuesta. Entonces selecciona este párrafo y canónicamente el tamaño de la fuente es como morar. Entonces vamos a maquillarlo hasta como 30. ¿ De acuerdo? Se incrementa el tamaño de fuente. Entonces, sumémosle sólo este. Al igual que esto. Digamos que quiero alinear este texto en el centro poder ir a este menú. Desde aquí, puedo alinear mis herramientas de texto, la izquierda, el centro y la derecha. Por lo que actualmente es en vivo a esta avenida centro. Por lo que puedes ver nuestra prueba es alanina a centro. Y también podemos alinear nuestra notación para escribir. Al hacer esto, terminamos. Entonces me gusta esto, la nefrona, así que voy a dejarlo así. Digamos que queremos agregar un espaciado entre letras. Eso se puede hacer desde aquí. Y el país hizo 0%. Entonces voy a aumentar hasta como phi. Y de nuevo ver cómo un espaciado entre letras es ya sea en este texto. Y si quieres agregar como un angustiante, puedes añadirlo de ti actualmente a 0. Vamos a sumar el cesionario flex. Y se puede ver cómo se agrega el espaciado paralelo o aquí. También puedes ajustar este texto de acuerdo a tu marco. Actualmente esto está en la parte superior. Quiero editar este texto en el medio para poder elegir esta opción llamada alinear medio. Por lo que se alineará mi texto, anclado a este texto. Y actualmente está en Milán. Y también vamos a alinear el tote de Oberlin y también el arma como este estudiantes este. Desde este menú Complementos, puedes elegir diferentes opciones como División de Elementos, párrafo, sangría, estilo de lista. Casos posteriores como si quieres hacer tus conjeturas altas o más grandes, también puedes hacerlo desde aquí. Y también puedes ver la vista previa de tu texto. Entonces digamos que elijo este centro uno para que veas la prueba de ello. Y el aparentemente está a la izquierda. Entonces, elegámoslos. Centro. Y ésta es la correcta, y ésta es la recursión justificada y la de frente. Si quieres subrayar a tu gusto, puedes hacer, puedes añadirlo desde aquí. Se puede ver que el subrayado se agrega en su texto. También puedes agregar un tachado en él. Elija esta declaración de fuente mínima. Y se puede ver el texto ahora es huelga a través. Y también podemos añadir la venación paralela. Tan conectado a 0, Vamos a sumar como 20. Y se puede ver la sangría se suma en nuestra prevalencia. Y también podemos añadir los puntos de viñeta como puntos y la lista como esta que se puede ver el punto se suma por aquí. Y si elijo el número uno, así se puede ver 12 se suma por aquí. Digamos que copia, pega algún texto de internet. Y el alt-texto está en minúscula. Y si quieres aumentar el texto todo en como mayúsculas, podemos cambiarlo de ti yendo de esto más tarde se pone Meno, y pulsa este botón en mayúsculas. Por lo que puedes ver nuestro texto ahora está en mayúsculas, y también puedes convertirlos en minúsculas otra vez. Y si quieres cambiar a título, caso de título, también puedes hacerlo desde aquí, mucho usando este título se pone Meno. Y desde esta sección también puedes agregar esto los números. Y obtenemos mucha opción a partir de aquí, pero sólo nos interesan estas opciones como alineación, declaración, organización de padres, estilo de lista, minúsculo, caso n. Seleccionemos este texto. Añadamos algo de color en ella. Por lo que actualmente está en sólido. Por lo que encontramos también puedes hacerlos brillantes usando este lineal. El primer color es el rojo. Y hagamos de este color como un libro como este. Y aumentemos la opacidad hasta el máximo a menos que haga esta barra. Por lo que se puede ver el gradiente se agrega en nuestro gusto. Por lo que se agrega efecto gradiente en este texto. Entonces si quieres aumentar o disminuir lo contrario, puedes ajustarlo desde aquí. Digamos que quiero disminuir lo contrario de la liquidez no era. Por lo que puedes ver lo contrario se disminuye, hazlo 100. Y si quieres ocultar el texto, te puede gustar la forma híbrida aquí, así. Y si quieres quitar, el efecto, puede hacer clic en el botón Menos. Entonces el texto se ha ido. Ahora, vamos a presionar Control Z para deshacer esta cosa. Y también puedes agregarle un trazo. Entonces si hago clic en el trazo, se puede ver el trazo se agrega en este texto. Si hago zoom en esto, se puede ver el trazo. Y también podemos cambiar el color de Destiel. Y también puedes aumentar o disminuir la opacidad y también puedes aumentar el homenaje. Queremos por defecto es uno. Entonces optemos por encontrar. Y puedes ver que el trazo es ahora phi, y también puedes cambiar la posición de tu trazo como actualmente está afuera para que puedas elegir dentro. Nuestro inconveniente de higiene central es que se ve genial, así que voy a elegir afuera. Entonces agreguemos algún efecto. Por lo que si hago clic en este efecto, se puede ver por defecto, se le aplica efecto de sombra de gota. Se puede ver que tutorizó drop shadow en este texto. Si quieres hacer algunos cambios, puedes hacerlo desde aquí. Al igual que actualmente y es cuatro. Si quieres añadir solo esta explosión de esa sombra de gota, puedes hacerlo desde aquí. Por lo que actualmente y es 4, así que elijamos una lectina. El drop shadow es nuestro distrito según la posición Y, es decir diez. Y también puedes agregar justo lo contrario, la fórmula. Por defecto son 25. Y creo que se ve genial. Entonces me voy a ir como está. Y también podemos agregar otros efectos como Sombra Interior, desenfoque de capas y vegetal. Actualmente voy a elegir drop shadow. Entonces esas son toda la opción que obtenemos con el texto. Entonces eso es asequible, Julia, y los veo en el próximo. 11. Imágenes en Figma: Bienvenido de nuevo. De esta manera, vamos a aprender sobre la imagen. Entonces vamos a crear un rectángulo. Un rectángulo simple como este. Y actualmente se llena de color gris. Por lo que ahora es sólido. Pero quiero reemplazar esta sólida imagen de veto. Por lo que voy a dar clic en el menú desplegable. Y voy a esta imagen. Y se puede ver que obtenemos este patrón como tablero de ajedrez. Por lo que desde aquí puedes elegir una imagen. Por lo que si hago click en esto, será directo a mi carpeta. Por lo que desde aquí puedo elegir unas imágenes diferentes. Entonces digamos que elegiré este. Entonces esta es la imagen de nosotros coreano. Actualmente es muy popular en todo el mundo. Si quieres ver esta serie, puedes auditar en el Netflix. Por lo que se puede ver que por defecto es relleno. Entonces, ¿qué se llena? Entonces digamos que tengo esta forma y cuando la redimensiono, se pueden ver imágenes ajustándose de acuerdo a esta forma. El siguiente son los pies. Entonces lo que hace es eso, digamos Cuando me gusta cambiar el tamaño de mi contenedor, entonces se puede ver la forma de la imagen no está cambiando. El único que la continuidad de Scheppach está cambiando. Entonces así es como puedes usarlo. El siguiente es crop. Por lo que desde crop puedes recortar tu imagen como otros temas como Photoshop y todo eso, así. Y si cierro esto, ya puedes ver las imágenes recortar ahora. Y si entro de nuevo este relleno, para poder recortar esta imagen de nuevo así. Y el siguiente es el título. Entonces, qué ordenadamente hace que repetirá la imagen de acuerdo a la forma. Se puede ver. Digamos que redimensioné mi contenedor así. Y se puede ver que la imagen se está repitiendo acuerdo al tamaño de ese contenedor. Al igual que esto. Se ve genial. Se puede ver el patrón infrarrojo por aquí. ¿ De acuerdo? Por lo que esas son alguna opción que puedes jugar con ella. Por lo que siguiente opción, actualmente menos sujeto en campo. Simplemente te sientes entumecido. Y si quieres rotar esta imagen, puedes hacerlo desde aquí. De botón interrumpido. Si hago clic en esta imagen se enrutará al nitrógeno. Y recuerda una cosa, sólo la imagen va a girar, no la nave. Si hago una forma como esta, si la vuelvo a girar, solo se pueden ver las imágenes girando, no la forma. Si quieres ajustar tu imagen. Obtenemos opciones como la exposición, el contraste, saturación puede predicar alertas, reflejos y poco profundos. Si utilizas el Adobe Lightroom, entonces es posible que conozcas todas las listas. Por lo que hay tres formas en que puedes importar tus imágenes en tu proyecto. Vamos a crear un marco de un solo, un marco de datos como este. Y si muevo mi esta imagen en el escritorio, entonces puedes ver las imágenes. Además ahora tengo que ajustarlo manualmente. Así que vamos a despejar algunas formas como perfil de elipse. Digamos que hay que añadir imagen en esto. Para que puedas hacer eso usando menos imagen. Puede ponerse en forma. Y puedes elegir la opción llamada Colocar imagen. Y también puedes usar curso corto como concluyente. Entonces voy a seleccionar este. Vamos a la imagen. Da click en Abrir. Y se pueden ver imágenes en mi cursor. Y si hago clic en el círculo, la imagen está subiendo. Por lo que las imágenes van a colocar en ese círculo. Y también lo mismo con este polígono. Y si quieres hacer cambios enérgicos y seleccionar este círculo e ir a llenar. Y puedes cambiar todas las opciones como cultivo a turno, alimentación y todo eso. Digamos que este perfil de imagen es una especie de retrato un poco hacia arriba, así que podemos hacerlo así. Y el siguiente método es importar tus imágenes que solo arrastran y soltan, seleccionan nuestra imagen y simplemente la arrastran en tu software Figma así, y puedes libertario abordarlo donde quieras, como esto. Entonces esas son todas las cosas que puedes hacer con las imágenes. Entonces ese es tu portafolio y los 0 en el siguiente. 12. Operaciones Booleanas en Figma: Bienvenido de nuevo. En este video, vamos a aprender sobre las operaciones booleanas. Entonces, ¿cuáles son las operaciones de la operación booleana? Se puede crear forma personalizada. Al igual que si quieres diseñar un logotipo, puedes hacerlo usando operaciones booleanas. Hagamos unos chips como una elipse. Tomemos otra elipse como esta y seleccionemos ambos usando Shift. Para que se pueda ver en la barra superior que tenemos con un operativo. Entonces el primero es sindicato. Digamos que quieres combinar dos formas juntas que puedas seleccionar esta selección sindical. Y ahora se combina. Y solo yo deshago este Control. D o normal otra vez. Demos la vuelta para restar que puedo hacerlo. De aquí. Estaba tratando de seleccionar ambas formas e ir a operaciones booleanas y restar selección. Y se puede ver la operación de restar. De acuerdo, vamos a deshacer este. ¿ De acuerdo? Por lo que la siguiente es la sección de introducción. Para que puedas ver en tu jurisdicción, solo queda la sección media, n Todas las cosas se han ido. Ahora, se puede ver esta sección de interacción sólo queda. Por lo que la siguiente es la sección aguda. En explorar sólo la sección de introducción será corte. Y todas las cosas se van a quedar como está. Entonces vamos a dar click en la sección. Se puede ver sólo distinto se corta. Por lo que solo necesitas jugar con él. Puedes editar formas de modo, como, digamos rectángulo, así. Y vamos a todos ellos. Y elijamos sección de excusas. Y se puede ver la opción booleana se realiza en estas tres formas. Apenas limitado. Puedes hacer personalizar la forma. Si quieres hacer un logo, también puedes hacerlo desde aquí. Es tipo de nivel. Por lo que solo puedes colocarlo en la parte superior, así. Entonces así es como puedes hacer nave personalizada usando operaciones booleanas, así que Deci adelante. Y los veo en el próximo. 13. Alineación y distribución de Figma: Bienvenido de nuevo. En este video, vamos a aprender sobre cómo alinear las cosas en Figma. Entonces como pueden ver, tengo este proyecto abierto, Llamemos más tarde obstáculo. Por lo que como pueden ver, tengo esta página de inicio de sesión. Digamos que estos iconos son bastante math.pi así. Y quieres alinearlos juntos así. Entonces de esta manera, vamos a utilizar estos botones de alineación para seleccionar múltiples cosas. En Figma, tienes que sostener Shift. Entonces haga clic en el botón de Twitter y mantenga presionado Shift, y luego haga clic en facebook y luego en Google. Por lo que puedes ver las múltiples cosas están seleccionadas ahora. Por lo que ahora entra en panel de diseño. Por lo que actualmente estos tres logotipos no están alineados verticalmente, por lo que los vamos a alinear en casa a verticalmente. Por lo que tenemos botón especial para ello. Por lo que se puede ver esto es alinear botón vertical. Entonces si hago clic en esto, se puede ver nuestro logotipo está alineado verticalmente, pero hay un problema. Y el problema es que se puede ver el espaciado no está coincidente por aquí. Por lo que tenemos que sumar esos espacios. Por lo que podemos sumar espacios usando este mínimo heroínas. Por lo que tenemos opciones como en la opción Más como espaciado vertical de distribución amarrado, y distribuir espaciado horizontal. Por lo que vamos a seleccionar el espaciado horizontal distribuido. Y se puede ver que nuestros logotipos están alineados juntos y la especie también es la misma entre ellos. Entonces así es como puedes alinear las cosas en Figma. Entonces eso es importante para ustedes y los veo en el próximo. 14. Librerías de equipo de Figma: Bienvenido de nuevo. En este video, vamos a aprender sobre la biblioteca Team. Entonces, ¿qué se considera biblioteca? Si entra como cualquiera de su archivo y si queremos activo, puede ver las opciones. Se puede ver este ícono del libro. Y si hacemos click en esto, esto aparecerá este menú. Por lo que se puede ver y nosotros representamos en las bibliotecas. Y el archivo actual no tiene título. Se puede ver que este es el sin título. Al igual que si quieres usar estos componentes en mini-proyecto, por lo que puedes utilizarlos, pero actualmente estoy usando la versión gratuita. Y si hago click en esto, lo puedes ver. Me está diciendo que es sólo por la cuenta profesional. No es por la cuenta gratuita. Por lo que hay muchas otras opciones como realmente no necesito este ícono de filtro, nuestro archivo de la comunidad Figma. Entonces otra vez, usa esto. Entonces, vamos a encenderlo. Y se pueden ver los iconos así. Y yo sólo puedo arrastrarlo. Por lo que puedo usar estos iconos en mis proyectos. Y también me está mostrando mi equipo creativo que es programador imaginario. Y si abro esto, sólo me dirá qué tipo de colores se utilizan en este equipo de programadores restante. Entonces vamos a Inicio y vamos a entrar en comunidad. Y en esta sección de iconos tenemos estos iconos de bisel. Haga clic en él. Y si quieres usar esto, todos los iconos, solo puedes hacer click en este botón duplicado y se va a duplicar para ti. Y luego puedes usar esto, todos los iconos de esta biblioteca del equipo. Y tenemos que simplemente alternar esta opción. Y podemos simplemente arrastrarlo sobre el proyecto o marco así. Y también te mostrará qué tipos de iconos utilizamos en este proyecto. Utilizamos esta mujer honesta y también esta señal de advertencia. Por lo que este tipo de cosas se pueden hacer con una biblioteca de equipo. Entonces eso es todo para el video de hoy. Y los veré en el próximo. 15. El panel de código en Figma: Bienvenido de nuevo. En este video vamos a aprender sobre inspeccionar panel. Por lo que si hago clic en este panel de inspección, se pueden ver opciones como el carbón. Se puede ver también el CSS. Y si hago clic en esto, se pueden ver las opciones como iOS o Android. Y este es el código. Y si hago click en esto, esta es la mesa. Desde aquí, se puede ver esto el fondo-color, mi no-color arriba este proyecto que es verde y actualmente no estoy seleccionado edición, está en fondo. Si selecciono esto, mi primer fotograma como uno de escritorio. Y se pueden ver opciones como actualmente estoy seleccionado escritorio un marco y todas las propiedades como altura rara, labio superior, y blend. El color. Actualmente, somos totalmente blancos, por lo que el color lee, el código hexadecimal es FFA para 16. Y se puede ver también la parte central. Digamos que eres compañero de equipo es un desarrollador web, un desarrollador web front-end, y está trabajando con CSV. Por lo que solo puede copiar estas propiedades y solo puedes pegarlas en su llamada. Por lo que no tienes que escribir emitiendo como solo estas propiedades como la altura o la posición de altura y el color de fondo. Y si hago clic en este texto modelo de programa imaginario, así me lo dirá. Se pueden ver todas las propiedades como nos esconderíamos, izquierda, a la mezcla, y sólo el texto. Y todo es el contenido que puedes ver en Photoshop, dirá, qué tipo de fuente usé, un tamaño híbrido, longitud de la misma, o cuáles son los colores que usé como usé un color degradado y similares. Cuando es morado y uno es como un color lavanda. Y en este curso, y se puede ver la opción CSS, iOS y Android. Y si hago clic en este botón IS. Y puedes ver que tenemos código iOS, por lo que solo podemos copiarlo y pegarlo en nuestro núcleo de desarrollo de aplicaciones iOS. Y también es lo mismo para bajo Android. Simplemente puedes copiar y pegar en código de desarrollo como este. También puedes verlas. ¿Cuál es la tabla de contenidos para ello? Al igual que los colores y tipo de tamaño deformado, altura, y todo eso. O hace la exclusión o hace la posición y. Por lo que puedes ver uso este monstruo, alterna forma a otro con el estilo 700 es normal. Si cambio esto en negrita, entonces me va a mostrar que este es el perno. Por lo que también me hablará de cuál es el tamaño del píxel, actualmente 60 pixel. ¿ Cuál es la altura de la línea y todo eso? Entonces hay un poco de opción que obtendrás en el panel de inspección. Entonces esa es tu carpeta. Y los veré en el próximo. 16. Prototipos en Figma: Bienvenido de nuevo. En este video, vamos a aprender sobre el prototipo. Entonces vamos a crear un marco. Y vamos a crear otro. De acuerdo, tenemos dos marcos ahora. Y puedes renombrarlo lo que quieras para la herramienta de movimiento. Y renombrarlo como esta mañana también. De acuerdo, vamos a crear un cuadrado en este marco. Y el atajo es, y vas a crear un cuadrado. Y se puede ver que la plaza está en la primera pantalla. Entonces vamos a copiar este cuadrado en el segundo marco, así. Y hagamos de este cuadrado un círculo usando estos puntos. ¿De acuerdo? Por lo que ahora entra en prototipo. En la sección de producto, tienes opciones como modelo de fondo. Este es el modelo de meta del iPhone 11 Pro Max, y este es el nombre del dispositivo y puedes cambiar este no violín dos posición horizontal, vertical. Entonces cambiemos el fondo a blanco, así. Ver en el fondo a blanco. Entonces lo que quiero hacer es que cuando yo, cuando voy a dar click en esta plaza, entonces tiene que cambiar a este círculo. Si hago click en la plaza, se puede ver que hay un punto blanco en el lado derecho de la plaza. Y si hago click en esto, se puede ver que hay un cable como este. Y si muevo esto en el segundo fotograma y artista a él, entonces se puede ver este panel de introducción va a aparecer. Por lo que desde aquí puedes agregar opciones como a tiempo, tienes que hacer esta acción. Como si tocara esto, entonces esta raíz cuadrada estará cambiando a este círculo. Para que puedas configurar todas las cosas desde aquí. Entonces por ahora, voy a elegir por grifo. Y ahora llegamos al círculo. Estamos navegando desde esta página. Para ello, vamos a elegir navegar y estamos navegando de cuadrado a círculo. Desde el primer cuadro se cuadra y el segundo premisa círculos. Entonces por eso está diciendo el círculo. La mayoría de las veces, la opción de misión final está en la instancia. Por lo que tenemos que elegir el inteligente y la emisión para tener ese efecto fresco. Y también puedes fijar la hora. Actualmente no hace 300 milisegundo. Si lo deseas, puedes cambiarlo desde aquí. Pero por ahora, me voy a ir como está. Y ahora vamos a dar clic en este botón Jugar o botón presentar. Y se puede ver que aparece la nueva ventana. Y también se puede ver el fondo es blanco. Si hago clic en este teléfono inteligente, puedes ver esto me está diciendo que esta es la tecla de acceso rápido. Y si hago clic en esta plaza, se puede ver que está cambiando a círculo. Pero si vuelvo a hacer clic en el círculo, no es querer cambiarlos a cuadrados. Entonces podemos hacer eso. Vamos a entrar de nuevo en proyecto y basta con hacer click en este círculo. Y se puede ver este punto. Y puedes mover estos 2 primeros fotogramas así. Se puede ver el panel de interacción. Por ahora me voy a ir ya que es como todas las opciones como smart y emisión y on-time outlet. Entonces, volvamos a entrar en proyecto. Y se puede ver actualmente está en un círculo. Y si vuelvo a hacer clic en esto, y se puede ver el círculo está cambiando para cuidar ahora. Y si vuelvo a hacer clic en esto en el cuadrado, se puede ver la tangente a circular ahora. Por lo que tengo un proyecto como hice este proyecto aleatorio para el propósito demo. Se puede ver este botones de navegación como home contact about. Entonces lo que quiero hacer es que quiero unirme a estos dos botones de conexión a esta página y sobre nuestra navegación a la última página. Por lo que realmente sabes qué hacer. Puedes pausar el video y pensarlo, cómo vamos a hacer esto. Entonces hagamos estas conductas. Actualmente estoy en panel prototipo, por lo que puedes ver en este botón Plus y menos arrastrar esto a este segundo panel, segundo fotograma y listas. Haga clic en esto sobre a menos que se unan a estas herramientas. Tercer panel, así. Y si toco esto, si hago clic en este marco, entonces se puede ver entonces los hospicios niños son contacto y sobre y si hago click en este contacto, entonces se puede ver el intercambio de marcos en contacto. Y hagámoslo otra vez. Por lo que actualmente en esta página no tenemos ninguna clave de puerto host, por lo que tenemos que limpiar esas cosas. Otra vez. Sólo nos unimos a esta primera página, por lo que tenemos que hacerlo para la segunda, tercera. Entonces hagámoslo para la segunda página. Desde casa, tenemos que ir a la página de inicio y desde así esta es la página de contacto, que no tengamos que hacer nada con esto. Y vamos a dar click en el sobre y arrástrelo en el tercer fotograma así. Y lo mismo para nuestro pitch from home button. Tiene que ir a la página de inicio y, y, uh, de contacto. Tiene que ir a la página de contacto así. Y si hago clic en esto, uno de estos cables y se puede ver que hay una introducción detalles como on-time. Tiene que seguir no tenía herramienta de escritorio como esta. Entonces por ahora solo estamos interactuando con estas páginas para que no tengamos que elegir ninguna otra opción como Smart Dimension y todo eso. Pero si quieres, puedes hacer eso como solo puedes usar mudarte. Se puede ver esta pequeña animación o aquí. Por lo que vuelve a mostrarlo. Por lo que como puedes ver actualmente en la página de contacto y las teclas rápidas Alto home y sobre y si hago click en esta casa, puedes ver actualmente estamos en la página de inicio y listas. Vamos a cambiarnos en contacto. Por lo que actualmente en contexto. Entonces vamos, vamos al marco. Y si hago click en este contacto, se puede ver en esta mudanza. Entonces ahí está cómo podemos prototipar tu proyecto. Para este proyecto, elijo este hiperprotocolo 0.9. Puedes elegir lo que quieras, como. Los elementos de Ipad Pro son pro. También puedes elegir Apollodorus. Pero esta es la alma de la página web, y por eso elijo esto. Se puede decir el iPad Pro, porque esto tiene una resolución más grande. Entonces creo que eso es todo. Entonces eso se da para hacer video y los veo en el próximo. 17. Scrolling horizontales y verticales: Bienvenido de nuevo. En este video, vamos a aprender acerca de cómo agregar qué llamada más profunda y desplazamiento horizontal. Entonces, elijamos un marco. Escojamos iPhone 12 Pro Max. Digamos que estamos diseñando apps como Instagram. Y en esa app tenemos historias. De acuerdo, vamos a seleccionarlos a todos. Y menos. Trazo naranja. El derrame cerebral va a ser blanco. Hagámoslo un árbol. ¿ De acuerdo? Ahora, haga clic con el botón derecho en él. Ir a Plugins. Y, y ya te dije cómo agregar plugins en Figma. Entonces creo que plugins llamado fotos. Entonces haga clic en él. De acuerdo, Entonces desde aquí puedes elegir diferentes opciones como la gente animal argumentó extenderse a tu ciudad y alertar. Pero actualmente vamos a sumar, Actualmente vamos a elegir al azar. Digamos que habrá una gente pro habitual. Entonces voy a elegir a la gente. Y automáticamente va a hacer círculo y contarlos todos. Y va a sumar todas estas imágenes en el círculo. Se puede ver así. Entonces vamos a cerrar este. De acuerdo, así se agregaron imágenes. Ahora vamos, vamos a agruparlos. Por lo que haga clic derecho sobre él y hágalo en grupo. Usando, también puedes usar Control G para agruparlos. Se puede hacer clic derecho en él. Elige esta selección de grupos. De acuerdo, guardaré en ese grupo ahora. Por lo tanto, haga clic de nuevo en él y elija selección de marco. Y ahora solo arrástrelo en el marco del iPhone. Al igual que esto. En ocasiones será difícil ganar la historia dentro de este marco. Por lo que finalmente elevé después de eso. Por lo que las historias se suman en el iPhone 12 Pro Max. Por lo que ahora da clic en el contenido del clip. Ahora seleccionamos los contenidos del clip. Vamos a cambiar el tamaño de este algoritmo a este marco así. De acuerdo, ahora vamos a crear una copia de campo. Voy a usar alguna dimensión aleatoria para ello. Entonces porque es sólo para fines de demostración en esta resolución. De acuerdo, creo que seleccioné seis. Así que selecciónalos todos haga clic derecho sobre él. Ir a plugins, dar click en fotos. Y en fotos se puede ver tenemos una opción llamada aleatoria. Haga clic en él y elija al azar. Por lo que si quieres, si quieres agregar manualmente, puedes usar la opción denominada Colocar imagen y puedes agregar imágenes de tus archivos locales. De acuerdo, ahora todas las imágenes se suman en esta primera sección. Ahora cierran estas fotos. Ahora haz clic con el botón derecho en él, haz un grupo. También puedes usar atajo Control G. Así grupo distinguido ahora. Y de nuevo, haga clic derecho sobre él y elija selección de marco. ¿ De acuerdo? Entonces después de Selección de Marco y arrastre este campo a nuestro marco así. De acuerdo, ahora da clic en el contenido del clip. De acuerdo, Vamos a ajustar esta primera sección así. Ahora ve al prototipo. Y se puede ver seleccionada la primera sección. Y actualmente no hay desplazamiento. Escojamos un vértice dispuesto y los turistas eligen desplazamiento horizontal. Y hagamos que este marco más oscuro porque hoy en día son bastante famosos. Y también me gusta usar el modo oscuro. Entonces presentemos este. Para que puedas ver que la app se ve así. Entonces creo que tengo alguna audiencia tema de Internet. Por eso la imagen no se está cargando. Entonces si arrastro mi ratón por el lado izquierdo y ver el desplazamiento está sucediendo o en el smartphone. Y también en esta primera sección, desplazamiento, este tipo de liso. Si te desplazas, puedes ver que se ve así. Entonces es así como puedes agregar puntuación vertical y un desplazamiento horizontal en tu aplicación o páginas web. Entonces eso es todo para el video de hoy. Y los veré en el próximo. 18. Máscaras en Figma: Bienvenido de nuevo En este rebelde y aprende sobre cómo usar la masa. Entonces como puedes ver en mi pantalla, tengo diferentes tipos de blop en mi pantalla. En el escritorio, un ion, es color. Pero lo que quiero hacer es que quiero colocar la imagen en este globo para poder hacer eso. El modo tradicional de hacerlo es simplemente descondensar. Y puedes ir a formas y puedes colocar imagen o aquí. O puedes ir a llenar y elegir solar a imagen de lo que es. Para mí. También puedes elegir una imagen, pero también puedes usar masa para hacer lo mismo. Entonces tomemos, emita alguna imagen aleatoria. Tomemos esta imagen e implícita o aquí que coincida con las capas o tú, Vale, En el segundo vector que es nuestro soplado, quiero colocar esta imagen. Así que déjame gustarme el multi-atributo en el lado derecho y solo comprobarlo una vez más en el lado izquierdo. De acuerdo, así que ahora puedo más 0 audiencia de imagen. Por lo que para ello, siéntate en el vector v Queremos colocar tu imagen y seleccionar tu imagen. Y ahora agruparlos usando control. Por lo que ahora es grupo. Entonces lo que vamos a hacer es un DAG es ir al grupo este grupo B, grupo dos cosas, guerrero. El primero es esta imagen y secundario es nuestro bloque. Entonces selecciona el blog, haz clic derecho en él, haz clic en usa una máscara y puedes ver la imagen está dentro de esa zona azul. Y también vas a abordar este blog. Al igual que el cultivo, esta imagen se atribuye hacia arriba, así. Entonces así es como puedes usar la máscara. Sé que podrías estar pensando que la imagen de la lección puede ser más simple como seleccionar la forma e ir a la imagen y usar como imagen de tu disco local y desplazar ya aquí. Yo lo sé muy sencillo, pero tampoco uso tanto el enmascaramiento. Por lo que es totalmente depende de ti. Si es necesario, alguna personalización, entonces puedes usar esta técnica de enmascaramiento. Entonces coloquemos esta imagen en esto. Coloquemos esta imagen en esta cuadra. Colocación de imágenes tipo de enmascaramiento. Pero es como un proceso muy sencillo. Entonces así es como puedes usar el enmascaramiento. Entonces esa es la cuarta derivada. Y los veo en el próximo. 19. Exportaciones de Figma JPG . PNG PNG SVG . PDF | Guardar proyecto en .fig: Bienvenido de nuevo. En esta unidad vamos a aprender sobre cómo exportar tu proyecto. Y archivo PNG JPEG tendrá n es región. Entonces como pueden ver, tengo este clon up Instagram y quiero exportar este marco. Hay muchas opciones para exportar en Figma. Entonces veamos uno por uno. El primero es ir al archivo Figma. Y puedes ver tenemos botón Exportar. Y actualmente seleccionamos iPhone 12 Pro Max 2. Este es el marco y está en formato PNG. Y también se puede ver la resolución por aquí. Ahora da click en la Exportación. Y te pedirá dónde queremos almacenar tu proyecto. Entonces vamos a crear una carpeta por aquí. Y digamos este proyecto en esta carpeta. Haga clic en el guardar. Este grupo descarga en la carpeta de exportación y se puede ver nuestro proyecto se exporta. El segundo método es el selectivo de marco. Ve al panel de diseño y ve al final. Y se puede ver que tenemos opción de exportar por aquí. Y actualmente este x y dejar como está. Y si quieres exportar en diferentes formatos como JPEG, SVG, o puedes elegir estas opciones. Digamos que queremos exportar esto a como un JPEG. Haga clic en este EPEC y haga clic en Exportar, iPhone 13 partido también. Y también puedes ver la vista previa de esta app. Entonces da click en la Exportación y te va a preguntar dónde quieres almacenar. Por lo que actualmente queremos almacenar esto en para descargar y exportar carpeta. Por lo que da click en la venta. Y vamos a Download. Y se puede ver de hecho está en formato JPEG. Este está en formato PNG. Y lo mismo con este SVG y PDF. Actualmente nos gusta la exposición en listado. Y digamos que si quieres exportar cuadro múltiple, puedes ir a Archivo y elegir exportar marcos a policía. Y tu proyecto va a ser exportado a formato PDF. Entonces da click en esta flecha. Y vamos a abrir este. Y puedes ver nuestro archivo se abre en Chrome. Y este es nuestro frames, cuatro frames de nuestra app de música. Entonces así es como se puede exportar múltiples archivos en el Parlamento. Digamos que quieres compartir este proyecto con alguien y quieres exportar esto a archivo como Figma. Así que vuelve a los archivos y haz clic en esta copia local de C1. Y te preguntará dónde quieres almacenar. Por lo que queremos caer en carpeta de exportación, dar click en la venta. Y este es nuestro expediente de Figma. Y si quieres compartir con alguien con Gmail o puedes compartir este archivo directamente y pueden abrir este archivo en su software Figma. Entonces esos son todos los metales para exportar nuestros proyectos. Entonces esta importación valor religioso, y te veo en el siguiente. 20. Mockup en photoshop: Bienvenido de nuevo En esta rebelión y aprende cómo crear maquetas en Photoshop. Entonces voy a crear una maqueta de este marco. Se trata de un clon de Instagram, pero puedes compartir o como el anfitrión de alguien, seleccionar el marco e ir al panel de diseño. Tales para exportación. Se puede ver la exportación está al final del panel de diseño. Entonces lo que queremos hacer es que quiero exportar este marco a imagen, es decir en formato PNG. Puedes elegir diferentes formatos como JPEG, SVG, PDF, pero quiero esto en PNG. Entonces voy a elegir un PNG. Y si quieres ver un azul, también podemos ver un azul desde aquí, éste. Y ahora da click en la Exportación. Por lo que exportará el disco local más nuevo. Actualmente seleccioné estas descargas específicas, por lo que la va a guardar en esta carpeta. Entonces vamos a dar click en la venta. Entonces vamos a las descargas. Por lo que puedes ver esto es que la imagen se explota en esta carpeta. Abramos tu navegador favorito y busquemos maquetas gratis. O puedes ir a este sitio web llamado pico libre. En esto en realidad obtendrá un montón de maquetas de forma gratuita para usar buscar maquetas de iPhone y golpear Enter. Y queremos que este sea un formato GIF que sea formato Photoshop. Para que puedas ver podemos filtrar en esta categoría. Por lo que sólo tenemos un marco. Entonces, elijamos un marco único. Este. Creo que éste se ve bien. Entonces vamos a descargar este. Configurar el marco, dar click en la descarga y dar click en Descarga gratuita. Después de descargar actualmente sí sí formatear. Por lo que hay que extraer esta carpeta. Puedes usar un excedente como 7 Zip o frotándolos para extraer esa carpeta zip donde se descarga el archivo. Extraiga ese archivo, haga clic derecho en él. Tengo 7-Zip. Entonces voy a usar 7-Zip. Se puede ver el archivo de Photoshop y la imagen de esa maqueta. Entonces ve a Photoshop. Entonces da click en el Abrir. Esta es nuestra carpeta. Extraímos y elegimos el archivo. El expediente está abierto ahora. Entonces ve a capas. Y esta es la imagen inteligente. se pueda ver el ícono de la pequeña imagen por aquí. Entonces haga doble clic en él. Y creo que tuvimos que eliminar esta carpeta, así que voy a hacer esta. Ahora selecciona tu imagen que exportamos kate. Así que arrastra esta imagen a Photoshop y pegarla en esta pantalla en blanco. Y se pueden ver las imágenes bestiales por aquí. Ahora guarda esta imagen usando Control S. Y está pidiendo en su lugar la final antes de guardar. Entonces da click en el lugar. De acuerdo, Se coloca la imagen. Ahora vamos a nuestro expediente original. Y se puede ver que tenemos nuestra maqueta, pero hay un problema. Se puede ver que hay un texto y quiero quitar este texto. Entonces el texto sí elimina éste, y es diligente. Ahora. Ahora vamos a exportar esta imagen. Vaya a Archivo y vaya a Exportar. Y puedes elegir Exportar como o puedes hacer clic en Exportar como PNG. Voy a dar click en Exportar rápido como PNG. Y vamos a guardarlo en descargas. Y dar click en Guardar. Vamos a Descargar carpeta. Se puede ver nuestro lema. Abramos este. Y se puede ver así es como se ve nuestra maqueta. Entonces así es como puedes crear maqueta dentro de Photoshop. Y puedes ir a esta página web. Y puedes, si quieres, como usar un maquetas de escritorio y solo buscarlo y solo tienes que descargar la maqueta de escritorio e importarlo a Photoshop. Y todos los procesos igual. Entonces así es como puedes crear maquetas en Photoshop. Entonces eso es todo para la capa original. Y los veo en el próximo. 21. Planos en Figma: Bienvenido de nuevo. En este video estamos en aprender sobre los plugins. Se puede ver que tengo un marco o un backstop. Por lo que hago click en él. Se puede ver que tenemos opción llamada plugins. Para que puedas gestionar tus plugins desde aquí. Si ya instalas algunos plugins. Y si quieres plugins italianos, puedes hacer click en la comunidad de complementos del navegador. Ahora ve a la pestaña plug-in. A partir de aquí obtendrás un montón de plug-in. Se puede utilizar este proyecto de plug-in senior. Digamos que quieres instalar este plugin llamado blobs. Por lo que basta con hacer click en este botón, Botón Instalar. Por lo que también sabrás sobre cuál es la función de la misma. También te mostrará quién es el creador de este plugin y cuándo se crea, y cuánta gente no relaciona este plugin. Entonces lo vamos a instalar. Vayamos a rechazar. Entonces haz clic con el botón derecho en él, vuelve a los plug-ins, y puedes ver que el plugin lo está instalado, así que haz clic en él. Entonces lo que hace la sangre es que crea algunas acciones aleatorias para ti. El valor del contrato cómplice 10 está bien. Entonces vamos a dar click en los bloques MEG. Por lo que puedes ver que ha creado algún cambio aleatorio para que lo utilicemos en nuestro proyecto. Entonces si quieres, puedes dar un valor diferente, digamos 31. Entonces nuestra nueva forma está aquí. Por lo que este tipo de equipo lo puedes hacer con este plugin. Ahora veamos un plugin fotos actuales. Ahí está una de mis llamadas de plug-ins favoritas. Te mostraré por qué. Se puede ver que este es el plugin. Y este plugin obtenemos un montón de sitios web que tiene imágenes de stock y Julio, pero no teníamos un plugin. Para que puedas ver el plugin lo está instalado, así que haz clic derecho en él plugins y puedes ver en las fotos. Por lo que el blogging fotográfico está abierto. Ahora, puedes buscar de foto como si quieres gustarte buscar cualquier específico para pero puedes buscar zona. También obtenemos álbum dar archivos y numb y biblioteca. Y también puedes elegir diferentes tipos de categorías como tecnologías, arquitectura de ciudad portuaria y todo eso. Pero me gusta esta opción aleatoria. Al igual, digamos que tengo estas dos formas y quiero colocar imagen en estas dos formas. Entonces voy a entrar en tándem. Y puedo elegir diferentes opciones como animales, Ciudad, Playa, gente. Pero también hay una opción llamada aleatoria. Por lo que automáticamente va a elegir dos pronósticos cualquiera y ganó un lugar en estas formas. Entonces si hago clic en este aleatorio, para que puedas ver las dos fotos se inserta en esta forma. Y se ve un poco guay. Te ayudará cuando estés construyendo una app de redes sociales y esa app, tienes una sesión de estudio y quieres colocar todas las imágenes a la vez. Por lo que puedes usar esta función son al azar y puedes elegir personas. Entonces en esa historia y última instancia una de las caras de las personas, ahora sabemos cómo instalar plug-in, cómo usarlos. Entonces veamos cómo desinstalar los plugins. Así que haga clic derecho en él y vaya a plug-ins nuevo y haga clic en Administrar plugin. Y puedes ver que actualmente infectamos estos dos plug-ins cuando eres primero es lóbulos y segmentos enfocan. Así que basta con dar click en este tres.me. Y lo hará, te dará opciones como escasez y desinstalación. Entonces vamos a dar click en la desinstalación. Y nuestro plugin lo desinstala. Y desde aquí también puedes navegar por los diferentes plugins. En el próximo año, te voy a contar cinco mejores plugins para usar en tus proyectos. Entonces esa es tu agua es. Y los veo en el próximo. 22. 5 ¡Deben tener Plugins para diseñadores de Figma diseñadores!: Bienvenido de nuevo. En este video, te voy a contar los cinco mejores plugins para ahorrar tiempo. Entonces, en principio, aprendemos sobre cómo instalar plug-in, desinstalado plug-in y cómo usarlos. Por lo que ahora aprendo a acceder a plug-in, haga clic derecho en su marco, vaya a Plugins. Y se puede ver en los plug-ins infrarrojos por aquí, una de mis fotos de plug-ins favoritos que uso mucho para hace días, uno de mis amigos recomendó este plugin Unsplash también es genial y es una especie de, el interfaz es una especie de misma. Obtenemos todas las categorías como tecnológico o para abstracto y todos aprendemos. En esta editorial obtenemos un montón de fotos, conservas. Y si quieres buscar en una carpeta específica, puedes buscar aquí. Anuncian lugar. También obtenemos esta opción aleatoria, como las fotos. Digamos, digamos que estás haciendo un campo Instagram liberado. Y en eso hay que añadir múltiples fotos. Por lo que solo puedes agregarlo por localmente, pero tomará mucho tiempo. Para que puedas seleccionarlos todos, todo este rectángulo y solo tienes que hacer clic en el inserto aleatorio. Y en última instancia va a agregar todas estas fotos en estas formas. Por lo que se puede ver el 34 plus se suma en nuestra forma así una vez. Hablemos del siguiente plugin. Eso es rubor. Digamos que su cliente quiere agregar institución en sus proyectos. Por lo que puedes usar este plug-in llamado rubor. Y desde menos se puede ver obtenemos mucha ilustración. También llegamos a conocer a nuestros creadores y qué tipo de ilustración tenemos. A mí me gusta esta intrusión llamada garabatos abiertos. Entonces lo que tenemos que hacer es eso, digamos que quieres crear una app de meditación. Por lo que solo haremos click en esta ilustración de meditación. Y automáticamente va a agregar esa imagen en tu marco. Puedes redimensionarlo así, y puedes agregar algo de texto por aquí. En esta ilustración, no obtenemos opción de cambiar el color porque puedes ver si hago clic en este icono de color, necesitamos agente pro. Por lo que depende totalmente que quieras comprar enfoque y puedes comprarlo. Pero hay otra administración, son totalmente gratis y también puedes cambiar un poco el color. Creo que este poder se mueve. Hagámoslo, éste. Y digamos que tengo una imagen de esto. Se puede ver que obtenemos opciones como el color de la piel. Contienen la rueda de color de piel desde aquí puedes elegir herramienta cuentagotas al diferente color. También puedes cambiar al guerrero más cercano como cara inferior, cabeza superior y todo eso. Algo así como Bitmoji, Snapchat. Obtenemos, obtenemos mucha opción para cambiarnos de ropa frente a la fase de remitente y salida. Entonces digamos que queremos 10 más abajo en esta flor es más corta. Si hago clic en esto, ya puedes ver la cadena lateral de cierre. Se puede decir el género del tono muscular como este. Es así como puedes usar el rubor. Hablemos del tercer plug-in que es maquetas de estudio. Y también es uno de los similares. Mi plug-in. emparejado pero puedes usar alguna plantilla gratuita. Para que puedas ver este iPhone y iPad. Vamos, usemos este marco es marco. Y basta con dar click en esta maqueta. Y puedes ver nuestra interfaz está en la pantalla como ésta. Por lo que si quieres exportar, solo puedes hacer clic en el Exportar como archivo o como documento. Documento de lenguaje tan actual. Y te guardará en tus archivos locales como en el escritorio o en tu unidad C. Puedes guardarlo donde quieras. Para que puedas ver una maqueta es nuestra historia en mi archivo local, en la carpeta de descargas. Para que lo pueda abrir a partir de ese seguimiento. Entonces la maqueta se ve un poco así. Puedes compartirlo con tus amigos o tus compañeros para que sepamos cómo se ve tu app. El último plugin es que uso mucho que se llama wireframe. Entonces en este plugin, obtendrás un montón de opciones como si estás haciendo un sitio web, puedes elegir wireframe para web, Oliver making, haciendo una app. Puedes elegir diafragma móvil o podemos conseguir un montón de opciones por aquí, como diferentes niños, como kit wireframe de 360 grados para web y móvil. Si hago click en este kit de estructura alámbrica de 360 grados para móvil, me gustaría obtener como diferentes opciones por aquí. Digamos que quiero usar este. Simplemente lo voy a arrastrar en mi marco. Entonces realmente se va a sumar en mi marco. Puedo añadir solo disparar así, así. También puedes estirarlo. Antes de este plug-in nuestras vidas que hacer es que utilizo para crear todos los elementos para wireframe manualmente mediante el uso de formas. Y después de hacer esa forma, deseo agruparlos y meterme en componentes. Yo uso esos componentes en wireframe. Pero administrando este plugin, todavía podemos mucho tiempo como una lista, digamos que quiero construir una aplicación de reproductor de música. Entonces solo puedo hacer una búsqueda por aquí, o simplemente puedo desplazarme por esta ventana y se pueden ver en elemento de marco de alambre. Yo sólo puedo colocarlo por aquí. Y podemos sumar así. Y vamos a añadir sólo un poquito. Para que puedas ver en un minuto creamos un wireframe para nuestra app de reproductor de música. Por lo que esta imagen es una especie de lista negra y que sea puntual. A mí me gustaría porque en marco de alambre utilizamos sólo bicicletas como estas. Por lo que este es el wireframe para nuestra capa de aplicaciones de música. Al usar esto, puedes ahorrar mucho tiempo. Creo que olvidé decirle a nuestro plugin llamado por los iconos. En nuestros proyectos de I+D. Yo uso este pack de iconos, pero de manera diferente. Yo solía entrar al ácido, a la biblioteca Tim. Y a partir de eso usé para los iconos. Y a partir de eso uso iconos. Pero al usar este plugin, solo puedo hacer clic en, digamos que quiero usar este botón en mi app. Solo puedo hacer clic en él y luego agregar solo alguna dimensión por aquí. Y esto por aquí. Con este plugin, puedes ahorrar mucho tiempo. Se puede ver por aquí. Entonces esos son nuestros cinco plugin para usar en un proyecto por decir mucho tiempo. Entonces eso es todo para la relatividad. Y los veré en el próximo. 23. ¿Qué es el encuadre de alambre de alambre: Bienvenido de nuevo a otro video. En este video vamos a aprender sobre qué es tipos de wireframe de wireframe y el mejor spot de espectro mientras que las mujeres. Entonces dondequiera que conozcas, el sitio web es la resolución simplificada de la estructura básica, o tal vez podríamos llamarlo el esqueleto AAP, sitio web o aplicación. Eslabones de devocional. Algo que da una imagen clara respecto a la usabilidad. El estilo es muy importante, pero al principio del diseño, puede ser un poco distrayente. Por lo que puede desplazar el foco de la funcionalidad a algo elegante como el color o el pitcher. Porque wireframes es tan simple que se mantiene enfocado en el tema importante como la funcionalidad y usabilidad del sitio web y la experiencia del usuario. Hay considerablemente dos capas de wireframing. El afortunado es el wireframing de baja fidelidad, y el segundo es el wireframing de alta fidelidad. En wireframing de baja fidelidad, los desarrollos se presentan con formas grises como un rectángulo y un círculo, o simplemente líneas. Y en un nivel de alta fidelidad, la interfaz de usuario adivina un poco más de detalle, como el logotipo de la marca, la textura del texto real, o la sombra también. Y así en el caso de la textura y la deuda, siempre tratar de ser contenido real, que finalmente estará en la página principal en lugar de mayo persona. Podría esto, se puede obtener una perspectiva real del diseño. Ahora hablemos de la mejor práctica hacia adelante de. Entonces la primera regla aquí es sobre estética. Y eso es para mantenerlo sencillo. Quiero decir, realmente simple. Emitido no usar ningún color en lugar de blanco, negro y gris utiliza como máximo dos formas en todo el diseño. Y por supuesto usa una fuente sencilla como Roboto o meseta. Nada de fantasía. Representaban gráficos y cajas de imágenes. Wireframe es el escenario donde se considera pantallas wireframe toda la versión del diseño para diferentes tipos de dispositivos, ya sea para escritorio o móvil o tablet. Además, hay que considerar la orientación de este modelo. Dispositivos como teléfonos o tabletas. También hay que tener en cuenta el contexto del usuario del dispositivo en particular. Al final, cualquiera que sea la tecnología o software que utilices, hay mucho mejor que un simple bolígrafo y papel. Si quieres diseñar un modal de UI originalmente, empezaré en el buen papel viejo con un lápiz. Entonces ahí lo tienes. Entonces eso es todo sobre wireframing. Al igual que lo que es wireframing Pi. Por lo que wireframing y las mejores prácticas para la salud. Entonces esa es una fotoresistencia ahí, y los veo en la siguiente. 24. Encuadre de alambre con Figma: Bienvenido de nuevo. En este video, vamos a aprender sobre cómo hacer wireframes. Pero vamos a abrir nuevo archivo. Puedes hacer click en este botón más y dar click en Diseño. Bien. De acuerdo, vamos a cambiar el nombre de este archivo. Entonces, elijamos un marco. Voy literalmente ¿cuál es el alambrón? Por lo que en este video, vamos a hacer baja facilidad reformulándolo como un soporte como un wireframe de baja tarifa. Digamos que estamos haciendo sitio web de portafolio simple. Y solo queremos agregar alguna información en ella, como navegación, botones, imágenes, texto, y el logotipo. Entonces, empecemos con el logo. Para logotipos. Ahí está dibujar un círculo. De acuerdo, hagamos algunos botones de navegación como contacto domiciliario y sobre. Así que desliza el menú de texto y haz clic en la pantalla. El primero es el hogar. Aumentemos el tamaño de la fuente hasta como 24. ¿ De acuerdo? Texto del programa y mantenga presionada la tecla Alt y haga clic. ¿ De acuerdo? Y el último para aproximadamente así, este sería el contacto. Y el último es por lo que hicimos una duda razonable. Entonces, alinémoslos juntos. Sostenga Mayús, seleccione Contacto y seleccione sobre bosques aleatorios en la parte inferior. Después de eso, Alan los juntos verticalmente y menos Alan ellos para distribuir el espaciado horizontal. De acuerdo, entonces este botón de navegación está alineado entre sí ahora. Y vamos a añadir algunos lanzadores. No exactamente lanzadores. Entonces te dirá que lo hice encima, tenemos que poner imagen aquí. Y para eso podemos sumar algunas líneas en ella. Eres duradero, lo sabrás. Por lo que este espacio es para la imagen. ¿ De acuerdo? Al igual que esto. Y hagamos unas casillas para el texto. En primer lugar, seleccione el rectángulo. Y esta podría ser nuestra caja principal de título, por lo que podría ser tu nombre. Y luego seleccione otro rectángulo. Y en este rectángulo más pequeño, podemos recuperar esa información sobre ti. Al igual que qué haces, ¿Qué tipo de trabajo haces? Y lo dejaré, y digamos que quieres agregar algún enlace. Y llamémoslos uno por uno. Por lo que esto podría titularse. Entonces este es el párrafo. Este es el botón Unirse. Entonces después de hacer wireframe, te puede gustar hacer un proyecto como este que hice aquí. Se puede ver este proyecto. Por lo que puedes ver esta primera página. Es exactamente igual a nuestra estructura de cable. Esto es para el logotipo, es para los botones de navegación de suma inferior. Y este espacio es para una imagen. Se puede ver que esta es la imagen y desesperarla. Y el último es el botón Unirse ahora. Entonces así se puede hacer una alambrada en fema. Hagamos simple wireframe sobre como botón de inicio de sesión. Eligamos el teléfono. Ahí está el círculo de dibujo. Hagamos un rectángulo. Entrada de inicio de sesión o una entrada de texto. Hagamos otro rectángulo o simplemente puedes seleccionar este cuadro y este Alt y arrastrarlo hacia abajo. Y cambiemos el color en esto. Por lo que el usuario no lo hará. Entonces en este cuadro tenemos que llenar nuestro inventario y como login, y pongamos algún nombre de usuario de texto. Entonces disminuyamos el tamaño de fuente va a ser utilidades. Vamos a maquillarlo como 14 O K. Así. Científicos, así. Este es el botón de inicio de sesión, así que agreguemos texto por aquí. Aumentemos el tamaño de la fuente. Seleccionar el actual es 14 listas hacer reflejo se mueve a Miller. Y podemos hacer como botón de reenviar Contraseña aquí. Entonces hagámoslo adelante un poco pequeño. Al igual que diez. De acuerdo, así. Y podemos hacer algunas cajas. O aquí, Digamos que el usuario quiere iniciar sesión a través de Google, Facebook, en Twitter. Para que pueda hacer eso. Escojamos un rectángulo como éste. Arrastra, arrastra. Y en este cuadro, Vamos a añadir, esto es para el Facebook. Esto incluye los formularios. Y esto es para Google. Actualmente los estoy alineando manualmente, pero puedes usar esta carga, cómo usarlos. Por lo que el siguiente último es Twitter. Seré así. Entonces, alinémoslos. Estos botones están alineados ahora. Y puedes ver nuestras páginas de inicio de sesión creando así. Y puedes agregar otra opción como botón de inscripción por aquí. Entonces elegamos otro triángulo, o simplemente puedes seleccionar esta casilla. Y este cómputo, así. El texto podría ser la inscripción. Por lo que este es el inicio de sesión del teléfono wireframe. Por lo que este es el wireframe para nuestra página de inicio de sesión de la página de registro. Por lo que puedes ver hice un proyecto que uso este biofilm para una referencia para crear un proyecto. Para que puedas ver esta es nuestra página de inicio de sesión. Por lo que puedes ver esta es la página de inicio y esta es la página de registro. Pero este wireframe, hice dos cosas en un solo lugar como login, página de registro bayesiana dentro de una sola página. Entonces si quieres, puedes hacer así o puedes hacer páginas de inicio de sesión como esta, como separadas para página de inicio de sesión y página de inicio de sesión de org separada y auditoría como Google, botón de Facebook. Aquí abajo. Se puede ver en el logo wireframe como Facebook, Google, y Twitter, entonces este es nuestro logo. Entonces en este proyecto lo que quiero eliminar luego hice este logo más grande y agregué alguna imagen también en el fondo. Algunos efectos y todos aprenden. Entonces este es el wireframe de bajo costo. Entonces en este wireframe, así de esta manera desde Viena, cosas importantes como virtual sean nuestro logo, que será nuestra versión de login box de nuestro registro y el nombre de usuario, contraseña y todo eso. Entonces así es como puedes hacer wireframe en Figma. Por lo que V hizo una sencilla página web por aquí, y por lo tanto también el smartphone. De acuerdo, te puedes ver en el siguiente video. Te voy a mostrar cómo hacer wireframe en el que llamé wireframe dot cc. Por lo tanto, mantente atentos para eso. Entonces esto es lo que religión. Y los veré en el próximo. 25. Cómo crear el plano Wireframe en wireframe.cc: Bienvenido de nuevo. En este video vamos a aprender sobre cómo hacer wireframe, wireframe dot cc. Por lo que en provisionalmente aprenderemos sobre cómo hacer alambrada en Figma. Y a partir de eso, también creé algunos proyectos. Se puede ver esta página web y esta página de inicio de sesión y página de registro. Entonces hagamos una alambrada en este sitio web llamada wireframe CC. Es una de las formas más sencillas hacer wireframe para tus proyectos. Por lo que ve a este sitio web, puede ver el enlace o aquí. Cuando te guste, entra en este sitio web, te pedirá como registro. Entonces si quieres, puedes inscribirte, pero te sugeriré que te saltes ese proceso. Y después de saltarse esto poseído, la interfaz va a verse así. Para que se pueda ver en el lado izquierdo, obtenemos opciones como desde aquí podemos elegir diferentes dispositivos, como para el escritorio o software. Podemos usar esta plantilla o V si quieres gustarte, hacer algunas apps para tu tablet, puedes elegir este formato. Y esto también es para el smartphone. Se puede elegir éste, pero a mí me gusta elegir éste, el cuarto. Entonces hagamos sencilla página de inicio de sesión para nuestro smartphone. Por lo que después de soltar el ratón, puedes ver que obtengo esta opción. Por lo que quiero que esta porción debe ser una caja. Entonces voy a elegir esta caja y la caja ahora. Para que puedas, si quieres, puedes mirar como a mí simplemente no me gusta esto. Entonces hagamos, como, digamos que quiero agregar en esta sección. Y se puede ver este botón de imagen. Entonces a partir de esa hora, esta es la sección de imágenes. Tenemos que poner imagen por aquí. Y podemos hacer simple icono de logo por aquí así. Si lo deseas, puedes poner esto a nivel medio o a la izquierda o a la derecha. Por ahora, Vamos a poner 0 aquí. Hagamos cajas para nuestra página de inicio de sesión. Paja. Caja tan simple. Entonces esta es la caja para nuestro UserInput. Dibuja otra caja y solo podemos seleccionar esta caja y copiar pegar como Figma seleccionando la caja y mantenga presionada Alt y arrastre donald así. Y si haces doble clic en él, obtendremos paleta de colores. De aquí. Puedes elegir diferentes colores. Entonces esto es para botones de inicio de sesión, así que vamos a elegir este color. Entonces agreguemos texto en él. Entonces este es el botón de texto. Entonces y este es el botón de inicio de sesión, menos dirección 200 aquí. Y luego cambiemos el color op-eds. O puedes convertir este inicio de sesión en negrita o cursiva. Y si quieres, puedes subrayar este texto así. Y cuanto menos cambie el color del texto aquí. Por lo que actualmente es verde, así que hagámoslo blanco, así, y aumentemos el tamaño de la fuente. Este es nuestro botón de inicio de sesión, y este es el campo de texto de nombre de usuario. Hagamos posible otra textura o hacia adelante. Sostenlo y arrástrelo hacia abajo. Vamos a cambiar ese color a negro y peguémonos con el tamaño de fuente, negrita y subrayado, renombralo por contraseña de reenvío. Y podemos iniciar sesión a través como otras opciones como Facebook, Google y Twitter. Por lo que podemos sumar esas cajas por aquí también. Entonces, sumémoslos. Y si quieres mezclarlos , también puedes hacerlo. Selecciona la casilla o lograda. Configuración. El segundo, el tercer cuadro. Y se puede ver que tenemos, tenemos este botón Elemento. Haga clic en él. Y puedes ajustarte de acuerdo a tu requerimiento. Por lo que quiero alinearlos juntos en la parte inferior. Entonces voy a dar click abajo. Por lo que está alineado. Ahora, vamos a añadir texto en él. Entonces este es el botón de Facebook o Google. Y nos pueden gustar macos, texto sencillo. Por aquí. Seleccione este texto, mantenga presionada la tecla Alt y arrastre estas herramientas hacia abajo. Y podemos agregar ancho de texto como login. El usuario lo sabrá, podemos iniciar sesión con Facebook, Google, y Twitter de esta manera. Entonces este es el sencillo alambre con Katelyn, este cable de tu FCC. Y si hace clic en el botón Guardar, se va a guardar para usted. Y solo puedes, si eres como trabajar con tu proyecto, como éste. Por lo que se puede tomar una referencia de ella. Al igual que donde debe haber logo, donde debe ser imagen, caja, donde debemos iniciar sesión botón y botón postural hacia adelante y todo eso. Entonces así es como puedes usar wireframes o sitio web CC para crear wireframes simples y hermosos. Creo que es más sencillo que Figma. O puedes ver que creamos en Figma algunos wireframes. Pero creo que es bastante como nosotros, experiencia similar, pero me gusta usar este sitio web llamado Y de North Jersey porque es realmente sencillo de usar. Por eso prefiero usar este sitio web. Por lo que es totalmente depende de ti. Si no utilizas, incluso podrías usar Figma o si vas a usar este sitio web. Entonces así es como se puede crear sistema de puerta de estructura alámbrica, estructura alámbrica. Entonces eso es todo para el video de hoy y los veré en el siguiente. 26. Configuración de equipo y crear un proyecto de equipo: Bienvenido de nuevo. En este video, vamos a aprender sobre cómo crear un nuevo equipo. Entonces como puedes ver, tenemos una opción aquí llamada crear una nueva tumba. Entonces haga clic en él. Y puedes ponerle el nombre que quieras. Entonces démosle el nombre Prueba, y haga clic en Crear un equipo. De acuerdo, ahora puedes agregar a los miembros de tu equipo y puedes agregarlos usando ID de correo electrónico. Actualmente estoy trabajando solo, así que no voy a agregar ningún ID de imagen. Entonces me voy a saltar por ahora. Entonces voy a dejarlo como venir por, elige un plan. Por lo que tenemos opciones como organización profesional de startups. Entonces estoy trabajando solo, así que voy a elegir el libre. Entonces como puedes ver, archivos de alineación raros en gotas a los archivos Figma en equipo, último archivo de gemas fijas y el proyecto de un equipo. Entonces elijamos el libre. Para que veas que se crea nuestro equipo, eso es prueba. Entonces vamos a crear un proyecto. Se puede hacer clic en este botón más y se pueden agregar archivos como este archivo m. Si arreglaste archivo gem, puedes, si tienes un archivo, también puedes importarlo. También puedes navegar por la plantilla y puedes añadir a tu proyecto. En lo que va de ahora voy a elegir archivo de diseño. Vamos a renombrarlo primero. Apk. De acuerdo, si entro de nuevo en proyecto como, en proyecto de equipo, se puede ver cómo se crea sabor épico. Por lo que en Equipos podemos agregar tantos como archivos que queramos. Al igual, digamos que quiero crear un objeto simple pero en la forma de sitio web. Por lo que voy a dar clic en este Archivo Nuevo y diseño. Y vamos a renombrarlo a Taste. Perdón por haber escrito mal. Esto. Vete a casa. Y se puede ver que tenemos web de prueba y test. Por lo que está el beneficio de usar Equipos. De acuerdo, vamos a este equipo. Y desde aquí también puedes agregar, qué se trata el proyecto si estás construyendo como comida entregando m, puedes agregar una descripción para ello. Y si quieres invitar a un miembro, también puedes invitar desde aquí. Y desde aquí verás quién tiene el eje de este proyecto. Al igual que actualmente estoy trabajando. Soy el único que tiene acceso para este proyecto. Y también puedes tener esto algunas configuraciones como queremos cambiar el nombre. También puedes cambiarlo desde aquí, icono, mango de perfil. Y si quieres hacerlo esta vez, también puedes eliminarlo. Y si quieres habilitar algunas bibliotecas, también puedes hacerlo desde aquí. Entonces esto es plan y la facturación es para profesional. Puedes comprarlo desde aquí. Entonces, vamos a entrar en proyecto ahora. Si lo desea, también puede marcar este proyecto como un proyecto favorito haciendo clic en el Inicio. Y también puedes compartir tu proyecto usando la molaridad. Puedes agregar múltiples ID de correo electrónico desde aquí. O simplemente puedes copiar este enlace y pegarlo en tu grupo de WhatsApp o en Gmail. Digamos que quieres eliminar a este equipo, solo puedes ir a este equipo que es gusto y hacer clic derecho en él. Y tenemos opciones como renombrado, cambio, icono, y eliminar. Entonces vamos a eliminar. Y tenemos que añadir ese nombre de equipo. Eso son pruebas. Y dar click en Eliminar equipo. Entonces así es como puedes usar los equipos para crear, proyectar múltiples archivos, app, sitio web y todo eso. Entonces eso es importante para Julia y los veo en la próxima. 27. Colaborar en tiempo real: Bienvenido de nuevo, mejora la preocupación. Aprenderemos sobre cómo crear un equipo. Entonces de esta manera podemos usar el poder del equipo. Entonces lo que quiero decir con poder es que fema es una plataforma donde el equipo diseña juntos. Aune a todos en tu proceso de consulta. Da vida a tu idea. Digamos que tus compañeros de equipo se van del otro lado del globo. Él o ella puede trabajar contigo al mismo tiempo en el mismo proyecto. Por lo que está el equipo de pólvora en Figma. Te voy a enseñar cómo hacer eso. Entonces haz click en el nombre de tu equipo. Digamos que actualmente voy a elegir a este imaginario equipo de programadores. Y se puede ver que tenemos una opción llamada miembros y menos invitar a algunos de nuestros compañeros de equipo. Y desde aquí también puedes compartir un enlace con ellos desde el gmane o puedes compartirlo en el grupo WhatsApp. Y puedes establecer algunos ajustes para ellos. Al igual, digamos si quieres compartir este proyecto al cliente y puedes configurar el ajuste como él solo puede ver así y puedes compartir el enlace. Y quieres compartir este enlace con la demanda DVR de lo que puedes elegir, puedes editar. Y si quieres añadir una melodía, también puedes añadirla desde aquí. Añadamos un único ID de imagen de mi compañero de equipo. Puedes presionar Enter o puedes presionar coma. Coma y puedes ver puedes agregar otro ID de correo electrónico desde aquí. Y también puedes establecer algunos ajustes para ellos, como puedes hacerlos significar por defecto se puede editar. Y si quieres compartir esta tendencia al por menor puedes elegir, puede ser menos renunciar a admisión de airman y mandar el interior. Se puede ver que se envía el ruido. Ahora, cierra este en su laptop o PC, recibirá notificación para la invitación. Para que a partir de ahí pueda aceptar nuestra invitación. Para que se pueda ver en su ocupado consiguió a nuestro equipo. Puede ver todos los proyectos. Y digamos que queremos editar este proyecto juntos. Para que se vea que sube en la pantalla. Y también se puede ver es nuestro guerrero total. Si hago click en este exterior y puedes ver qué está haciendo y qué es lo actualizado en qué panel está trabajando actualmente? Digamos que tienes un 20 o 30 fotogramas y no sabes con dónde está interactuando haciendo clic en su valor atípico. Conoceremos en qué habitación está trabajando. Por lo que necesitamos arreglar este proyecto como disjoint now button. Y también quiero agregar una imagen. Entonces voy a sumar la similitud. Por lo que arreglamos este proyecto. Es así como puedes colaborar con tus compañeros de equipo. Entonces así es como puedes colaborar con tus compañeros de equipo es una de las mejores características de Figma. Puede acceder a tu proyecto. ¿ Puedes conseguir que te puedas ver cuando él pierde otro lado del globo? Puede hacer diez días para trabajar en proyectos al mismo tiempo. Entonces esa es la visión del conocimiento anticipado, y los veré en la siguiente. 28. Encuadre de alambre para LattoFatto: Bienvenido de nuevo. En este video, vamos a hacer wireframe para nuestro proyecto que es eso apagado en la aplicación de pedidos completos en línea. Por lo que se puede ver que la aplicación se ve así. ¿ Es el proyecto final? Entonces vamos a crear un marco alámbrico para ello. Esto crear nueva página. Haga clic en el icono más. Diseñar un archivo. Entonces vamos a renombrarlo. Entonces, en primer lugar, vamos a necesitar marco. Puedes presionar F o puedes entrar en esta sección y elegir marco. Y vamos a seleccionar marco iPhone 11 Pro Max. Por lo que en primer fotograma, sólo queremos mostrar el nombre de marca que se lleva sobre dos. Entonces vamos a crear algunos componentes para ello. En primer lugar, hagamos algunos fotogramas más. De acuerdo, nuestros cinco marcos están creados ahora. Por lo que primer marco va a ser nuestra página de nombre de marca. Y la segunda es la página de inicio de sesión LAN, tercera es la página de registro. Y en marco completo queremos agregar como tontos, podemos pedir a través de esta app como pizza de hamburguesa y pollo frito y todo eso. Entonces creo que no necesitamos la quinta llanta, así que hagamos ésta. Voltea el marco M. En tu teclado. El marco es digital ahora. Entonces tenemos cuatro marcos ahora, hagamos algunos componentes. Selecciona el rectángulo, dibuja el rectángulo así, agrega nuestro texto. Por lo que va a ser nuestra marca. El tipo de letra es demasiado pequeño. Fuente. Acude a este panel final y aumenta la fuente hasta como 36. De acuerdo, vamos a yo sólo la fuente y el centro. Entonces este es nuestro primer componente. Por lo tanto, seleccione el, tanto el rectángulo el texto para seleccionar un múltiples cosas. Ya sabes que tenemos que mantener pulsada Mayús y presionar el texto y el rectángulo seleccionado ahora y tienes que pulsar Control G para hacer un grupo. Entonces si me muevo así, entonces ambas cosas se mueven juntas. Digamos que no haces un grupo en su primer lugar, necesito desagrupar esto. ¿ De acuerdo? Entonces si muevo esto, se puede ver el nombre de la marca no viene con este rectángulo. Vamos a cinco V, agruparlos. Hasta el momento, agrupar, seleccionar la forma del rectángulo, mantener pulsada Mayús , seleccionar el texto y pulsar Control G. Y esto ahora es un grupo. Entonces si me muevo así en la pantalla, puedes ver las dos cosas se están moviendo para conseguir que menos hagan curvas. Por lo que ya te dije cómo hacer componentes. Selecciona tu elemento y ve al menú de la barra superior y selecciona este botón de diamante. Y ahora este es tu componente, por lo que puedes usarlos varias veces en tu proyecto. Y también se puede acceder a través de este panel de activos. Se puede ver el nombre de la marca. Hagamos un segundo gobernador. Esa va a ser nuestra imagen. Escojamos rectángulo. El atajo es r. Y hagamos un cuadrado perfecto. Sostenga turno así. Y vamos a añadir un poco. ¿ Estás al filo? Se puede ver el polígono de color y el cuadrado es un árbol, por lo que tenemos que cambiar el color del polígono. Entonces para hacer eso, seleccione el polígono, vaya al panel de diseño, haga clic en el relleno, y movamos este cursor herramientas de color blanco así. El más pequeño como éste. De acuerdo, vamos a duplicar este. Está bien. Hagamos un poco, sí tiene las montañas y hagamos una pequeña suma como esta. Tenemos que hacerlo, ya que cambiamos el color de ese sol por blanco, así. ¿ De acuerdo? Entonces esta es nuestra imagen. Y selecciona todas las cosas y pulsa Control G. Así que esta cosa es grupo ahora. Y hagamos de este elemento componente. Entonces este es nuestro segundo componente. Entonces hagamos un componente de imagen de perfil. Vamos a usar círculos. Para que puedas presionar o o podemos elegir este botón de elipse. Añadamos esta imagen en ella. En primer lugar, necesitamos hacerla pequeña. Ahora agreguemos esta imagen al círculo. Pero se puede ver que la imagen no es visible porque está en la imagen seleccionada. Haga clic derecho sobre él. Y se puede ver la opción llamada Traer al frente. Y se pueden ver las imágenes ahora al frente así. Y selecciona todas las cosas y pulsa Control G para agruparlas. Ahora está agrupado y hagamos un componente. De acuerdo, éste es un componente ahora. Por lo que este elemento es para perfil, que son, Hagamos iniciar sesión y registrarnos barra, barra de navegación. Para eso, vamos a necesitar un rectángulo. Vamos a asegurarnos de que solo con nuestro marco, para que coincida perfectamente con nuestra pantalla. Creo que tuvimos que disminuir un poco. Ahora agreguemos una imagen de texto. En primer lugar es el inicio de sesión. Y la segunda es la inscripción. Entonces, alinémoslos juntos. Establece todas las cosas. En primer lugar, el inicio de sesión, por lo que el rectángulo ahora selecciona el botón Registrarse. Ahora ve a panel de diseño y menor falla Alan ellos fondo. Ahora alinémoslos verticalmente. De acuerdo, ya está en línea. Entonces lo siguiente que tenemos que hacer es ese botón de inicio de sesión y botón de registro. Por lo que necesariamente discreta, duplicarlo presionando Alt. Y el fotón va a ser nuestro login. Olvidé convertir esta barra de navegación en componente. Selecciona todas las cosas, Control G, y selecciona en este botón LeBron. Entonces esta cosa ahora es componente. Hagamos esta página también componente. Duplicar esta carga. Y vamos a renombrarlo para registrarnos. Entonces este es nuestro último componente, y vamos a necesitar algunos botones de menú como hamburguesa, algunos iconos como Facebook, Google y Twitter. En el video de la biblioteca de Tim realmente te mostré. Empezamos algunos paquetes de iconos para que podamos usar esto, usarlos en este proyecto. Por lo que para acceder a esas cosas, vaya a activo y haga clic en este ícono de libro. Se puede ver para el ícono más extra, haga clic en este botón de encendido. Se puede ver que podemos utilizar estos iconos. Por lo que necesitamos este humilde icono de aminoácidos. Entonces vamos a mover este. Y también puedes buscar como primero, segundo, tercero 1 es Google, pero no está disponible. Entonces podemos usar otros iconos como ok, este globo, Ok, ahora tenemos estos cuatro iconos. Hagamos nuestro alambrón. Por lo que creamos todos los componentes, así que los vamos a utilizar en nuestro biofilm. Entonces en portada UP cómo agregar un nombre de marca. Entonces voy a escribir esto así. Y vamos a abordarlo verticalmente. De acuerdo, lo es, estoy justo ahora, vamos a renombrarlo a como una marca. Y la segunda reelaboración va a ser la firma. Y la tercera es nuestra página de inscripción. Y el último es mínimo. De acuerdo, entonces tenemos cuatro páginas ahora, la primera está hecha. Entonces en segundo Prim, lo que quiero hacer es que quiero agregar una imagen en la parte superior. Entonces vamos a estirar así. Y también quiero poner un nombre de marca, esta imagen. Entonces vamos a arrastrar esto y vamos a añadir un nombre aleatorio. Por lo que nuestro desarrollador de UI lo sabrá. Entonces esto se imagina y este es el nombre de la marca. Creo que el color es el mismo, así que tenemos que cambiar el color del nombre de la marca. Entonces vamos a seleccionar el componente maestro. Hagámoslo más oscuro así. Y hagamos página de inicio de sesión. Entonces vamos a requerir este botón de navegación. Por lo que a continuación queremos que me guste el nombre de usuario. Entonces dibujemos una línea. Entonces necesitamos dos líneas. El primero es para nombre de usuario y el segundo es para contraseña. Y tenemos que añadir un botón de inicio de sesión. Aguanta hacia el segundo cuadro, así. Y agreguemos nuestro login con botones. Esos son Facebook, Google, y Twitter. Entonces, alinémoslos para levantarse primero. Entonces hagámoslos más grandes. Cuarto es uno sobre Facebook. Segundo va a ser Google. Entonces, alinémoslos juntos. Selecciona Facebook, mantén pulsada Mayús, selecciona y selecciona Twitter. En primer lugar, tenemos que abordar el fondo y menos abordarlos verticalmente. ¿ De acuerdo? Y vamos a añadir algo de espaciado horizontal. ¿ De acuerdo? Entonces estas cosas son Alana. Entonces en este caso tenemos problema. Entonces nuestra u no sé esta es la página de inicio de sesión de registro porque todas las cosas son iguales. Entonces lo que podemos hacer es que podamos hacer el fichazo de poco. Por lo que la conectividad es regular. Hagámoslo audaz. De acuerdo, ahora nuestros datos por pertenecen, esta es la página de inicio de sesión. Por lo que siguiente página tenemos que hacer algunas cosas. Esos son como este nombre de marca. También tenemos que usar estas imágenes. Entonces voy a copiar esto, las dos cosas. Ya casi terminamos. Sólo queda lo único que queda. Por lo que los usuarios ingresan ahora. Entonces es ícono de Perfil. Agregar una hamburguesa es una como ésta. Entonces seleccionemos el botón más y llamemos. Esto hace que algunas categorías. Entonces vamos a añadir imagen para ti. Hagámoslo más pequeño. Y alinémoslos juntos. Sostén Mayús selecciona el segundo y el tercero. Añadamos es el fondo y luego vertical. Y vamos a añadir algo de espaciado horizontal. ¿ De acuerdo? Entonces vamos a bordes así, ¿de acuerdo? Y vamos a añadir algo de textura en ella. Seleccionar categorías, mantener Alt. Y digamos una imagen en la falsedad. Disminuyamos el tamaño de la fuente. Sostenga Alt, arrastre hacia la segunda categoría. Y vamos a renombrarlo por pizza y terminus. Entonces alineemos la fuente juntos. Ahora está alineado entre sí. Suavizarlos hacia arriba, así que está bien, esto es perfecto. Y así actualmente estamos en como digamos, actualmente estamos en bugger Minow. Entonces hagamos que esta imagen sea un poco azul. Por lo que actualmente en Bogle, actualmente estamos a granel una sección. Y digamos que sólo tenemos dos opciones para lo falseado en la primera página. Tan solo haz otro como éste. Y hagamos que esta imagen sea más grande. Porque el usuario con un conocido, actualmente seleccionamos este toro. Y también podemos hacer de este texto un tazón. Por lo que nuestro desarrollador sabrá actualmente que el cliente está en la sección de falso. Y podemos sumar algunos premios por ello. Al igual, digamos que esta hamburguesa es por $15. Escucha, da los sitios de fuentes. Por los $15.1. Vamos a maquillarlo hasta como 244 segundos. Vamos a maquillarlo para que me guste, sé que estos son bastante caros. Esto, hagámoslo normal. Porque fue o es seleccionado la primera hamburguesa. Y esto entra al texto hacia arriba así. De acuerdo, entonces vamos a añadir algún círculo de sección. Por lo que nuestro usuario sabrá que tenemos más opciones. Y selecciona el primer círculo. Cambiemos el color para ello. Por lo que nuestros datos podemos saber que nuestro cliente pertenecerá actualmente él o ella se encuentra en frontpage. Entonces si se desliza, entonces va a estar en la segunda página como esta sección. Por lo que este es el marco de cable para nuestro primer proyecto. Ese es un proyecto fotográfico más ligero. Se puede ver nuestro proyecto final. Este es nuestro nombre de marca. Se puede ver el nombre de la marca más imagen, inicio de sesión, registro, nombre de usuario, contraseña de inicio de sesión, e iniciar sesión con botones como deshacerse de Facebook y Google. Lo mismo para aquí. Se puede ver también hicimos este login en color como rosa porque nuestro usuario sabrá actualmente que está en la página de inicio de sesión. Y en esta página, aprenderás que está en la página de inscripción. Y podemos ver las categorías desmenuzar Bogle el pollo. Y puedes ver que hicimos esta hamburguesa destacada. Por lo que usuario con largo actualmente se encuentra en categoría burbuja y seleccionó este logotipo. El primero es audible de preimpresión. Y se puede ver también agregué la tarjeta para que pueda revisar la imagen del perfil y el amino de Hamburgo. Y también podemos agregar la barra de búsqueda. Por lo que este es el marco de cable para nuestro primer proyecto. Por lo que en el siguiente video, vamos a hacer este wireframe en este proyecto. Sé que este es el extremo muy bajo el video, pero sólo tenemos que arrastrar y soltar las cosas. E hice la posición sumaria del elemento así. Por lo que una vez que hagas tu alambrada, puedes hacer que tu proyecto sea más rápido. Entonces voy a dividir cada video en la parte separada, como en primer video, agregaré esta página de inicio de sesión más 2 y n en la primera fila. Y el segundo video, voy a añadir un video de la página de inscripción. Y a su vez, voy a añadir esta legibilidad de página Meno hacerse más corta. Y también va a ser fácil entender para que tengan que literalmente, y los veo en el próximo. 29. Página Página de nombre de marca para LattoFatto: Bienvenido de nuevo. En anterior habríamos hecho este alambre. Ahora hagamos una interfaz de usuario para nuestra aplicación. Entonces ve a Inicio, crea un nuevo equipo. Démosle un nombre. Puedes ponerle el nombre que quieras. Por lo que actualmente lo estoy nombrando llevó a ella a la aplicación proyecto uno, crear un equipo. Entonces actualmente estoy trabajando, así que voy a saltar ahora. Por lo que actualmente estoy usando una versión gratuita. Por eso voy a elegir, elegir datos. Si tienes prohibición de plantas que puedes elegirlas. Entonces vamos a dar click a la puesta en marcha. Para que puedas ver el nombre de nuestro equipo y el color de nuestro equipo. Vayamos a wireframe. Y movamos esta alambrada a nuestro equipo. Se puede ver en el color de nuestro equipo y el proyecto de equipo. De acuerdo, nuestro archivo es click en proyectos de equipo. Se puede ver nuestra estructura alámbrica. Creo que vimos el eliminar este y dar clic en Proyecto de equipo y hacer clic en el botón Plus y crear un archivo de diseño. Por lo que no estarás pensando que el wireframe se ve diferente porque accidentalmente borré ese biofilm anterior. Entonces por eso creé de nuevo esta alambrada. Entonces por eso se ve diferente. Entonces vamos a renombrarlo. Eligamos un marco. Presiona F, elige iPhone 11 Pro Max. Por lo que en marco de alambre se puede ver la primera página es para nuestro nombre de marca. Entonces eso es plomo a los gordos. Entonces vamos a crear ese primer fotograma y vamos a renombrarlo. Está bien, puedes ponerle el nombre que queramos. Entonces, elijamos un texto. De acuerdo, aumentemos el tamaño de fuente de este texto hasta como cuatro. ¿ De acuerdo? Y elijamos la fuente en para sensibilizar explícitamente en el medio. De acuerdo, Vamos a alinear esta fuente para la verticalmente y luego horizontalmente. Está bien, está alineado ahora en el centro. Selecciona el marco y cambiemos el color del mismo. Por lo que actualmente el color es blanco. Entonces voy a elegir el rojo, por lo que actualmente el sólido. Entonces hagámoslo gradiente. Entonces elige segundo color lineal en poeple. O podemos elegir cualquier color que quieras. Aumentemos la opacidad del segundo pilar. Está bien, ahora se ve genial. Entonces si quieres, puedes agregar justo tu gradiente así. Está bien, eso se ve genial. De acuerdo, creo que selecciono una fuente diferente. Entonces guarde la fuente. Y éste es el que requerimos para este proyecto. ¿ De acuerdo? Por lo que necesito darles vertical y horizontalmente en el centro. ¿De acuerdo? Ahora, hagámoslo blanco. Por lo que no se verá mejor así. De acuerdo, nuestro primer marco se crea ahora, esa es la página de nombre de la marca. Por lo que se puede ver en el wireframe, este es el nombre de la marca y esta es la página. En siguiente video, vamos a crear esta página de inicio de sesión. Y los veo en el próximo. 30. Página de inicio para LattoFatto: Bienvenido de nuevo En anterior habría hecho esta página aleatoria. Por lo que en este video vamos a hacer la página de inicio de sesión. Entonces, elijamos un marco. Iphone 11 Pro Max. Al igual que esto. Vamos a renombrarlo en como firmar. Entonces como puedes ver en Wireframe, colocamos la imagen por lo que vamos a reemplazar la imagen, pero en formato diferente. Entonces hagamos un círculo y el atajo es 0. Y el centroide en el marco así, Vamos a maquillarlo hasta 450. Creo que tengo que hacerlo más grande. Vamos a hacer hasta como 70, ¿de acuerdo? De acuerdo, vamos a añadir esto, los bordes para que veas que hay un hueco. Muévete hacia la derecha, así. Ok, selecciona el círculo. Cambiemos el color. Hagámoslo gradiente a lo lineal. Y el primer color va a ser nuestro color rojo. Y el segundo color va a ser así. Cerremos esta pestaña. De acuerdo, ahora tenemos los llamados, así que duplicemos el círculo, seleccionemos el círculo y sosténgalo y arrástralo. Al igual que esto. mano selecciona el círculo, ve a nuestra herramienta de forma y elige imagen. Y elijamos esta imagen abierta y la coloquemos en la elipse. Entonces después de bendecir imagen, seleccione el círculo, este. Y vamos a movernos en el marco. Al igual que este solenoide juntos. ¿ De acuerdo? Y el centro del círculo. Entonces disminuyamos la opacidad hasta como del 70 al 80 por ciento. Menos garrapatas, 70%. Está bien, esto se ve bien. Y se puede ver en Wireframe, bendecimos el nombre de la marca. Por lo que esa es tarifa más ligera para seleccionar el nombre de la marca. Sostenga Alt en el segundo marco, así. ¿ De acuerdo? De acuerdo, disminuyamos el tamaño de la fuente hasta como 15. Centro de tutoría. Al igual que esto. Esto se ve genial. De acuerdo, ahora hagamos esta barra de navegación de inicio de sesión. Entonces voy a usar el método diferente para ello. Añadamos un rectángulo como este. Creo que tengo que introducir un poco. Está bien, y menos alanina y decentren. Está en el centro. Ahora, probémoslo una pizarra. Entonces volvamos los bordes hasta como 35. Y ahora cambiemos el color a blanco. Por lo que tiene algún efecto como sombra gota. Añadamos esto algunas configuraciones. Hagamos desenfoque de dos. Espíritu de dos para estar bien. De acuerdo, Ahora esto se ve genial. Entonces hagamos un botón de inicio de sesión e inscríbase. Escogamos un rectángulo. Leí alguna dimensión, se puede ver el ancho es 264 y la altura es 45. Y la posición x e y se puede ver aquí. Entonces hagámoslo afilado, esquina en redondo. Vamos a reponerlo hasta 13. Duplicemos esta forma. Hágalo hasta el salto. Y cambiemos el color de la misma. Hagámoslo como vamos a elegir este hueso y menos en la parte superior de esto. Está bien. Al igual que esto. Está bien. Cambiemos el color de eso. Hagámoslo blanco, grisáceo, así. De acuerdo, Vamos a añadir algún efecto. Haga clic en efecto. Por lo que se puede ver que la sombra de gota está agregando. Creo que se ve bien, así que me voy a ir como está. Entonces hagamos un texto. El primero va a ser login. De acuerdo, El actualmente la fuente es sensible uno, así que vamos a cambiarla en como cuatro pines. Y vamos a hacer reafirmado hasta, vamos a añadir sólo una fuente de acuerdo a esta cadera está en el centro ahora. Entonces vamos a duplicar este texto. Hacer que se inscriba. Entonces vamos a simplemente totalmente blancos. Entonces por eso no es visible. Seleccione la fuente. Hagámoslo negro. O si lo deseas, puedes elegir este color. También nos veremos geniales y alinémoslo. Vamos a abordarlo manualmente. En el centro. Al igual que esto, citando, esto está bien. Ahora esto se ve genial. Alejar el zoom, se puede ver la interfaz de la página de inicio de sesión. Se ve así. Entonces hagamos nombre de usuario contraseña. Entonces iré a Shapes, elige la línea, a menos que lo hagas aquí. Y vamos a añadir sólo, vamos a convertir el ángulo en 0. Entonces vamos a sumar esto en medio. Está bien, está en el medio. Y duplicemos esta misma línea. Sostenga Alt, arrástrelo hacia abajo. Añadamos algo de texto, como el correo electrónico. De acuerdo, disminuyamos el tamaño de la fuente hasta como 10. Y cuanto menos bordes el texto. Cambiemos el color de este texto y también el daltónico. Simplemente hazlo como éste. Y cambiemos también el color de esta línea . Ir a accidente cerebrovascular. Y elijamos Seleccionar herramienta. Hagámoslo así. Selecciona correo electrónico y carpeta de usuario, arrástrala hacia abajo, y vamos a enviarte a contraseña y también cambiar el color de esta línea. Ahora hagamos reenviar contraseña, esta alerta de texto de contraseña. Colóquelo aquí. De acuerdo, agreguemos así. Hagamos botón de inicio de sesión. Copiemos esta forma. Creo que esto va a estar bien. De acuerdo, volvamos el objeto de color. Actualmente es una especie de gris. Hagámoslo como este color púrpura. Y selecciono esta fuente, que la alinean juntos. Sake, pero las cosas sostienen usando turno, horizontal, está bien, ahora está en el centro. Entonces vamos a revisar el tipo de fuente. La tasa actual es regular, así que hagámoslo semi audaz. Entonces se verá más fresco, vale, así. De acuerdo, ¿Qué más pasa? Por lo que se puede ver en tarifa wireframe hecho todo. Entonces sólo cosa sedimentando así, login con botones, ok, Menos agregarlos de los archivos locales. De acuerdo, vamos a importar esos archivos SVG, vale, necesariamente el tutor para este grupo los juntos. Entonces, ¿por qué los estamos agrupando? Porque estos son los archivos SVG. Digamos que quería mudarme a algún lado. Para que veas que si selecciono en este ícono, puedes ver el vector que seleccionamos. Entonces va a haber un desajuste con nuestro proyecto. Entonces por eso estamos agrupando con ella. Si dijera si todo esto y agruparlos usando Control G para agrupar ahora. Y si hago click en esto, puedes ver que puedo moverlo a donde quiera. Entonces hagámoslo este. A menos dirección la altura de todos los logotipos arriba Twitter y Facebook. Desean 15 altura y el peso. También para Facebook y también para Google. Entonces estamos ajustando el ancho y la altura, así que son los bordes. Ahora, uno de los míos, Lo único que queda es que tenemos que añadir o texto, es decir R. Escojamos este texto y sostengamos Alt y moverlo en el centro. Y hagámoslo menos dirigiéndose al centro. El Figma es realmente inteligente. Automáticamente te va a decir dónde está el centro de la misma y también el espaciado entre ahí. Piensa que aumentemos el tamaño de la fuente hasta como 12. De acuerdo, nuestra página de inicio de sesión ya está lista. Por lo que en el siguiente video vamos a crear una página de inscripción. Entonces ese es su portafolio y los veo en el próximo. 31. Página de inscripción para LattoFatto: En videos anteriores, hicimos la página de inicio de sesión. Por lo que en este video vamos a hacer una página de inicio de sesión. Entonces vamos a seleccionar esta página de inicio de sesión marco, y para empezar a hablar así. Y vamos a renombrarlo en signer. Entonces en la página de registro, tenemos que cambiar algunas cosas. Se puede ver en el alambrón sin embargo, cosas como tenemos que cambiar el botón de registro. Vamos a añadir algunas líneas extra como confirmar contraseña, y también tenemos que cambiar el registro. Entonces hagamos esos cambios. De acuerdo, Vamos primero, vamos a cambiar el color de esta fuente. Actualmente es una especie de nebulosa de limón. Entonces hagámoslo blanco. Y movamos este rectángulo del lado derecho. ¿ De acuerdo? Ahora, así que volvamos el color del inicio de sesión. Por lo que actualmente es blanco. El erudito. ¿ De acuerdo? De acuerdo, ahora lo que tenemos que hacer es que tenemos que sumar una línea más. Esa va a ser nuestra contraseña de confirmación. Entonces vamos a mover esta contraseña hacia adelante que sería hacia abajo así. Y vamos a copiar esta línea. Vamos a copiar esta contraseña y esta línea. Sostenga Alt, arrástrelo hacia abajo. De acuerdo, confirmaré la contraseña es mayor ahora. De acuerdo, alinémoslos juntos. Selecciónelo y mantenga pulsado Shift. Selecciona todas las cosas que contraseña, contraseña y la línea cortada, y ve a Alinear ajuste y haz clic en Más opciones y elige. Deberías ser espaciado vertical. Está bien, ahora está alineado. Aquí se puede ver. Entonces vamos a mover esta contraseña hacia adelante para ser hacia arriba, así. Por lo que actualmente estamos en una página de inicio de sesión. Vamos a cambiarnos a registrarnos. Alinémoslo horizontalmente. Podemos ver que está alineado en el centro ahora. Entonces una cosa es que algunos iconos, como podrías ver algunas apps donde tienes el área del símbolo del ojo. De acuerdo, sumémoslos. Eisenberg. Vaya a S8, haga clic en esta biblioteca del equipo y conmueva estos iconos de plumas y busque I. Ok, se puede ver el símbolo del ojo. Entonces usemos este. Entonces disminuyamos el tamaño de la misma hasta que me guste este Q. Así que cambiemos el color de la misma. Actualmente es de color negro. Entonces vamos a elegir este color para arriba. Mismo cuidado de esta contraseña. Y selecciona mantener presionado Alt, arrástrelo en la página de registro. Sólo, confirme contraseña. Entonces lo único que queda es lo último, esa es la página principal. Se puede ver el armazón de la misma. Entonces en el siguiente video, vamos a hacer esa página de menú. Entonces esa es tu foto. Y los veo en el próximo. 32. Página de menú para LattoFatto: Bienvenido de nuevo. En el año anterior hicimos la página de registro. Por lo que en este video vamos a hacer esta página principal para que puedas ver el alambrado para ello. Escojamos un marco. Iphone 11 Pro Max. De acuerdo, hagamos esta página. Porque vamos a agregar algunos elementos como barra de búsqueda y mayores. Por lo que la barra lateral va a ser blanca, por lo que no va a ser visible en el fondo así. Por lo que nuestra página de Meno será más visible. Por lo que para este salario mínimo, se puede ver en el wireframe requerimos este ícono del menú de hamburguesas, el ícono del perfil, y el texto, y algunas imágenes. Entonces hagamos esas cosas. Por lo que en mi carpeta, tengo todos los recursos. Entonces vamos a moverlas a un figma de torbellino. De acuerdo, las imágenes son como que se llevan a cabo para responderlas. Por lo que tenemos todos los recursos como este ícono del menú de hamburguesas, el humilde real, la imagen del perfil, y algunos elementos como este factible. Entonces vamos a usar uno por uno. Entonces hablemos. Entonces, a menos que pregunte. Y lo segundo es proporcionar retornos. Entonces hagamos ese perfil. Para eso vamos a necesitar elipse y mantener pulsado shift e ir a la herramienta Forma y esta, puedes elegir tu propia imagen también. Y lo voy a pegar en este círculo. Se puede ver que se coloca. Pero se puede ver que la foto es una especie de en el lado derecho e ir al panel de diseño. Y se puede ver en la opción de campo, tenemos esta imagen, dar click en ella. Y elijamos cultivo. El imagen así. ¿ De acuerdo? Entonces vamos a añadir un poco de trazo en ella. Haga clic en el trazo. Vamos a maquillarlo hasta dos. Y cambiemos el color del trazo a blanco. Y vamos a redimensionarlo. Al igual que Ok, así que agreguemos algo de texto que es C y Control V. Así puedes ver utilicé fuente Poppins. Por esto. Utilizo el extremo regular de N Para este amarillo fresco, utilicé el semi negrita. Entonces vamos a abordarlo de acuerdo a este ícono de la hamburguesa, así. Entonces, ¿qué es lo siguiente que tenemos que hacer? Por lo que podemos agregar categorías como esta. Se puede hacer ese trabajo. Añadamos una barra de búsqueda para donde el usuario pueda encontrar sus artículos. Por lo tanto, seleccione el rectángulo. Podemos simplemente copiar esta forma. El forma, sostenga Alt y arrástrelo en el resorte. De acuerdo, entonces cambiemos el color de la misma. Y se puede ver que ya tenemos alguna sombra de gota. Para que lo podamos ver. Me voy a ir como está. Entonces, agreguemos un texto. Entonces vamos a seleccionar este texto e imágenes para buscar. Un ícono de búsqueda. Actual es negro. Entonces voy a elegir. Entonces texto como este y simplemente disminuir el tamaño del que está alineado ahora. Y hagamos que la barra de búsqueda sea un poco más grande. Hagámoslo en el centro. Y el científico es la búsqueda y el icono. De acuerdo, lo siguiente es agregar categorías. Entonces vamos a añadir algunas categorías. De acuerdo, vamos a añadir algunas categorías. Entonces elige un rectángulo y dibujarlo así. Vamos a maquillarlo hasta como con hasta 110, 1, 1, 0, y altura de 70. Algunos bordes. Vamos a hacer las paces para que me guste codificar esta otra vez. Entonces, alinémoslos juntos. Entonces Hagámoslo blanco. Si quieres. También puedes añadir sombra de gota en ella. Volvamos el color de ese fondo. Actualmente el blanco es visible, LACMA, este Iconos. De acuerdo, estos son el archivo SVG, así que vamos a Controlar G. Segundo uno gira fuera de control. Y controlar G. Así que cuando estamos trabajando con el desajuste, está bien, El primero va a ser Bogle, agrega la hamburguesa. Y el primer apartado es dimensión de género de la misma. Hasta como 45 y el centro. Está bien. Eso está bien. ¿ Cuál es su remanente? Por lo que tenemos que nombrarlo como diseño de logotipo. Entonces, entreguémoslos. Entonces, llamémosle el primero. Entonces voy a copiar este texto. Entonces haga clic en la hamburguesa. Y pizza. Permitir alinearlos verticalmente así. Por lo que tenemos que cambiar el color de esta burbuja porque actualmente somos sección depuradora. Para que podamos cambiar un poco el color. Entonces o sabemos que está en la sección. Entonces movamos estas categorías. Esta sección, que será, por supuesto, actualmente estamos en la sección Boulder, por lo que vamos a sumar bolo. Entonces, elijamos un rectángulo y dibujemos un rectángulo como este. Demos la dimensión de la pierna y altura de 2, 1, 0. Añadamos algunos bordes redondeados. Sumaremos hasta 35. ¿ De acuerdo? Por lo que este va a ser nuestro primer logo. Este. Por lo que voy a aumentar la altura de la misma porque actualmente el usuario seleccionado es Bogle. Entonces hagámoslo un 199. Así, y cambiemos el color. Hagámoslo en para el segundo color. Y puedes colocarlo donde queramos según tu requerimiento. Entonces lo estoy colocando todo te gusta esto. De acuerdo, ahora agreguemos la imagen de ese libro. Por lo que actualmente este es el primer logo y noméndalos. Entonces el primero, no sé cuál es el nombre del émbolo para que podamos nombrarlo lo que quieras o puedes buscar en el Google fue yo puedo lidiar con ellos por aquí. Entonces cambiemos el color de esta fuente. Es negro, Hagámoslo blanco. Por lo que se verá más mejor. Sitios. Hagámoslo un símbolo. Y terminemos con el precio de un signo de dólar. Vamos a maquillarlo hasta como 20. Por lo que si quieres, también puedes añadir en ella. Entonces a menos que esa calificación creo que he introducido. Déjame revisar. Está bien. Tengo este proyecto. De acuerdo, se puede ver el color de la misma. Al igual que esto. El cliente anterior tuvo buena experiencia con este logotipo, vendiéndolos juntos. Entonces pongamos un nombre a este logotipo actualmente ancho de distrito, así que hay pelea no es visible, así que hagámoslo negro. O disminuir el tamaño de la fuente. Copiemos este. Y cambiemos el valor de cada uno. Entonces, ¿qué queda? Todo está hecho. Por lo que creo sedimentación distinta. Entonces, agreguemos esas cosas. Elige círculos de elipse. Hagámoslo como Guardar el primer punto. Y hagámoslo. O podemos elegir este color. Hagámoslo un poco más grande. Por lo que el usuario estampillará así. Creo que tenemos que alinearlo juntos. Y creo que una cosa es agregar una tarjeta. Entonces vamos a seleccionar la Elipse y corto plazo en en ácido por amor tenemos eso. Se puede ver. Entonces vamos a añadir esta bolsa de compras trasera y el centro. Entonces hagámoslo centro blanco, vale, así que todo está hecho. Por lo que ya se hace nuestra sesión de Meno. Por lo que lo único que queda en este proyecto es entonces hacer prototipado. Entonces en el siguiente video vamos a hacer prototipado. Y los veo en el próximo. 33. Prototipos para Lattofatto: Bienvenido de nuevo En privilegio o una película hecha este menú mascota. Entonces una cosa es lo que queda para que este proyecto se haga para hacer prototipado. Entonces, así que ya te mostré cómo hacer prototipado. Para que puedas pausar el video y hacerlo por tu cuenta o si no sabes cómo hacerlo, para que puedas continuar con el video. Entonces supongo que hiciste esa parte. Entonces hagamos lo predominante para este proyecto. Vayamos al panel de prototipos. Y se puede ver este punto blanco. Y cuando paso el cursor sobre él, se convierte en un icono más. Haga clic en él y arrástrelo en la página de inicio de sesión. Para que puedas ver este menú aparecerá. Entonces este es el panel de detalle de interacción. Para que veas que tenemos opciones como R-type. Por lo que actualmente menos configurarlo en tap y navega a la página de inicio de sesión. Por lo que estamos navegando de fanpage a página de inicio de sesión. Entonces lo es, está bien. Por lo que si quieres, puedes añadir nuestra animación en ella. Por lo que actualmente, vamos con desierto instantáneo y escondido. Ahora, haga clic en la página de inicio de sesión. Para que puedas ver tenemos opciones como login e inscribirte. Digamos que usuario está instalada esta app llamada primera vez. Por lo que quiso ir a la página de inscripción para que puedas dar click en el botón Iniciar sesión. Entonces hagámoslo interacción. Por lo que podemos ver en los detalles de integración en pestaña navegar a la página de inscripción. Y la animación está terminada. Y digamos que el usuario es como un toque fuertemente sobre accidentalmente en el botón Registrarse. Por lo que quería volver a página de inicio de sesión o a la página de inicio de sesión. Para que pueda volver usando este botón de inicio de sesión. Entonces vamos a dar una introducción y navegar a la página de inicio de sesión. Todas las cosas van a ser iguales para ello así no tenemos que cambiar nada ni aquí. Entonces digamos que el usuario puso su ID de correo electrónico y la contraseña y quiso ir a la página principal del menú. Entonces vamos a dar la introducción a este botón. De acuerdo, desde Logan BIG irá a la página principal. Y también lo mismo, el botón de inicio de sesión desde el inicio de sesión e irá a la página del menú apropiándose de todo legal como un nombre de usuario, contraseña y confirmar contraseña. Creo que hemos terminado aquí. Cuando haga clic en este espacio en blanco y obtendremos estas opciones. Entonces desde aquí, si quieres cambiar el contingente dispositivo desde aquí. Por lo que actualmente elijo este iPhone 11 Pro Max. Por lo tanto, selecciona este. Y si quieres entrenar al modelo, o puedes hacerlo desde tu actual tu objetivo. Puedes elegir espacio plateado, gris, verde medianoche, así. Y mostrará la vista previa. Y si quieres cambiar la propiedad de color de fondo, podemos hacerlo desde aquí. Por lo que actualmente este negro, podemos darle cualquier color que quieras así. Entonces vamos con blanco. Entonces no importa. Puedes elegir cualquier color. Por lo que puedes ver aquí tenemos orientación horizontal o vertical si quieres cambiarla a contingente horizontalmente como este, nuestro retrato. Entonces vamos con un retrato y vamos a dar click en este botón Presentar. Podrás ver nuestra app se está presentando y el ícono del presente por aquí en la barra superior. De acuerdo, se puede ver la primera página del nombre de la marca. Si hago click en esto, nos pondremos en la página de inicio de sesión. Después de eso. Si hago click en este espacio en blanco, puedes ver que llegamos a las teclas rápidas. Esos son como página de registro y página de inicio de sesión. Digamos que soy un nuevo usuario y quiero inscribirme. Por lo que voy a escribir el botón de inscripción y puedo poner mis datos como nombre de usuario, contraseña y confirmar contraseña. Y después de eso puedo apuntarme. Por lo que también puedo volver a la página de inicio de sesión si quiero así. Y vamos a dar click en Iniciar sesión. Por lo que estamos en la página de meno. Por lo que puedo pedir estos bichos desde aquí si quieres. Puedes agregar animación a estas páginas. Si hacemos click en la inscripción, quieres dar animación como mudarse o salir o empujar. Entonces podemos hacerlo desde aquí. Escogamos película. Y verán la pequeña indirección por aquí. Y también puedes disforia de género. Actualmente este 300 milisegundos y la animación está en formato exacto. De acuerdo, Vamos a presentar este. Se puede presionar R hasta el inicio, esta aplicación desde el principio. Entonces voy a presionar R en el teclado. Por lo que puedes ver nuestra página de nombre de marca. De acuerdo, así que vamos a dar click en inscribirte. Se puede ver ese audio de efecto en movimiento. Déjame mostrarte una cosa genial. Entonces vamos a la página de marca, página aleatoria. Haga clic en esta flecha, flecha prototipo. Y actualmente estamos en la ficha. Entonces vamos a dar animación inteligente por aquí. Y vamos a estar a la altura como milisegundos de género. Y podemos cambiarlo como argumentar y aducción como en Taiwán y arrastrar mientras se sostiene y todo eso. Vamos a elegir como un rato flotando ratón entrar. Y pongámoslo en la prensa R para reiniciar. Y si paso el ratón por encima de esta app, se puede ver esa animación. Déjame hacerlo otra vez. Se puede ver esa animación. Entonces cambiemos un poco como nuestra profundidad. Vamos a incluir el nombre hasta como 50 milisegundos. A menos que se vuelva a presentar. Para reiniciar. Y en la pestaña, se puede ver que la animación se convierte en base de datos lenta. Al igual que esto. Entonces por este arte inteligente y la medición, obtenemos ese efecto fresco. Por lo que me gustará a nuestro me gusta mientras se cierne. Y hagámoslo hasta un 100. Se ve realmente genial. Y vamos a presentar. Cuando me gusta NDA, mi ratón en la lista basada en marca, se puede ver la indirección. El nombre de la marca va en la parte superior. Y si vivo esta app, puedes ver esto de nuevo viene a la página del nombre de la marca. Y puedo hacer en dirección por aquí, como apuntarme. Se puede ver ese efecto en movimiento y se puede ir a su página de inscripción. Si lo desea, puede agregar la animación a esta página principal y la creación de imágenes en el mini-lote. Por lo tanto, haz clic en la página de inscripción, selecciona esta flecha. Y digamos mi animación. Entonces probemos este desorden y el espíritu y éste. Vamos a golpear nuestro inicio de sesión. Está bien. El sodio golpeó nuestra página de inscripción y desde la página de inscripción v, dado ese efecto. Está bien. Se ve realmente genial. Se siente miedo. Creo que está bastante en efecto, sí te da esa animación a los botones de inicio de sesión. Entonces vamos a ir a nuestra larga playa. Se puede ver que se disuelve si solo se fue también utilizar otra animación como inteligente y emisión. Entonces elegamos una animación inteligente y presentemos la pantalla. Golpea nuestra tala. Se puede ver esa animación cool, audio, animación inteligente. Echemos un vistazo a Escuela. Por lo que puedes como decir, cualquier animación que quieras. Por lo que depende de ti y también es depende de tu proyecto. Entonces aquí es donde completamos nuestro proyecto uno, digamos si estás luchando con este proyecto, si tienes que ver un video una y otra vez para hacer este proyecto. Entonces si hiciste este proyecto que podemos compartir este proyecto en el Instagram o Twitter, y también puedes etiquetarme o allá. Por lo que en el próximo proyecto vamos a hacer una página web de cine. O puedes decir como aplicación de servicio de streaming como Netflix, Amazon Prime. Entonces eso significa que yo sabía OFF. Gracias por mirar y los veo en el próximo. 34. Encuadre de alambre para la plataforma de transmisión de la transmisión de OTT: De igual manera, para poder volver a otro video en esta unidad, vamos a crear un wireframe para plataforma OTT como Netflix y Amazon Prime. Entonces vamos a crear un nuevo equipo y vamos a nombrarlo. Equipo mayor, salta por ahora para empezar. De acuerdo, Nuestro equipo es mayor. Se pueden ver los optimistas de color L0 y archivo de diseño discreto . De acuerdo, vamos a renombrarlo. Por lo que ya les muestro un seguimiento de tenemos que despejar algunos componentes. Entonces vamos a crear componentes, o simplemente puedes copiar componentes de pegar de tus proyectos anteriores que se lleva a la aplicación fértil. Se pueden copiar estos compuestos como esta imagen, este login y sign y veteranos y el número de marca, gire la hamburguesa Meno y todo eso. Por el momento, esta alambrada, voy a requerir esta imagen, así que voy a hacerlo, así que voy a seleccionar esto. Entonces haz clic derecho sobre él y puedes ver aquí, por lo que somos copia opcional. Por lo que también puedes usar atajo Control C. Así que voy a copiar este y vamos a hacer para ayudarlo MCU. De acuerdo, ahora presiona Control V para pegar esa imagen en nuestro modelo de cable. Entonces estamos haciendo que Audrey actúe. Entonces vamos a crear otro. Y la imagen de pantalla. Puedes ponerle el nombre que quieras. Y 31 es uno de los programas de televisión. De acuerdo, vamos a añadir un nombre de marca. Y vamos a añadir algo de texto. Aumentemos el tamaño del texto. Grupo, control G para agruparlos. Entonces en el marco de la película, necesitamos esta imagen por aquí. Y hagámoslo más grande. Entonces en esta parte, estamos en una pantalla, la imagen de la película. Y vamos a crear algunos botones como pinup. Listados disminuir el texto hasta que me guste, digamos 24. Y vamos a abordarlo o te inscribes. Y vamos a crear algo de texto para película. Martin. Y el último es para sesiones televisivas. Por lo que actualmente estamos en movimiento, por lo que vamos a hacer que estas películas se lleven dos a Bolt. Por lo que el usuario lo va a saber, o nuestro desarrollador de UI sin, está actualmente en estas películas de acción. Y si lo desea, puede agregar underlain a este texto. Entonces vamos a añadir una película nim. Entonces, en primer lugar, estamos en un rectángulo requerido. Entonces plus r. Así que selecciona Texto, y vamos a añadir texto por aquí. Es hacerlo más grande. Digamos hasta Lycos 48 tutorial. Y después de eso tenemos que crear una descripción para nuestra película. Entonces vamos a crear un rectángulo de nuevo. Ahora aquí va a ser nuestra descripción para nuestra luna. Entonces agreguemos texto por aquí. De acuerdo, Y después de esto, vamos a crear un botón de reproducción. Y frente a esto vamos a añadir, creo que hice esta descripción más. Voy a la industria. Vamos a mover este topo, cosas como película Play now antilog button. De acuerdo, vamos a crear un bar donde se va a cambiar toda la película, el color opuestos. Entonces le vamos a agregar más rectángulo. Entonces el color de esos rectangulares va a ser el mismo. Entonces tenemos que cambiar el color de este rectángulo. Entonces elijamos rectángulo. Esa cena para nuestros anchos a más grande esta, sostendremos Alt y lo arrastraremos. Arrástrelo. Creo que cuatro va a ser suficiente. Entonces ahora alinémoslos juntos. Mantén pulsado Mayús, selecciónalos todos. Y el mortero se mueven verticalmente. Entonces donde algo de espaciamiento por aquí. Digamos que usuario está actualmente en la segunda película, entonces, así que sabrá actualmente que está en una segunda película, así que tenemos que hacer algunos cambios. Entonces hagamos que esta región rectangular un poco más grande, así. Y vamos a añadir un trazo. Hazlo efecto ondulado. Sólo esas dos cosas queda es el anuncio que tuvimos que crear. Por lo que tenemos que añadir un botón de búsqueda y un botón de icono de campana. Entonces ve a la biblioteca de Equipos y dobla este botón de icono de plumas. Y busquemos cirugía. Y arrastrémoslo en esta página. Y lo mismo para el icono de campana. Nosotros vamos a hacer esto. Entonces, arrastrémoslo así. ¿De acuerdo? Entonces, alinémoslos juntos. Selecciona todas las cosas alineadas e inferiores y alinearlas verticalmente. Está bien, ahora están alineados. Y al azar se va a sobreutilizar. Entonces vamos a añadir un nombre de marca, seleccionar rectángulo. Por lo que podría ser branding o podría ser logos. Al igual que esto. Al centro, no va así. Por lo que este es el wireframe de para la sección de cine de la hora. Y esto va a ser tan exactamente lo mismo para nuestra sección de programas de televisión. Entonces tenemos que hacer cambios como tenemos que hacer esto en regular y hacer programa de televisión en Bolt. Y cambiemos el nombre de este marco en programa de televisión. Y todas las cosas van a ser iguales. Al igual que este nombre de película y todo lo que podemos meternos como programa de televisión. Entonces vamos a copiar esto y vamos a renombrarlo programa de televisión. Y aquí también hacer descripción visual. Entonces este es el alambrado, por lo que vamos a hacer referencia desde él y vamos a crear nuestro proyecto final. Por lo que nuestro proyecto final se va a quedar así. Se puede ver la página de nombre de la marca, sección de películas y sección de TV. Entonces nombre de esa descripción de película para ello, el botón avión Ahora, el botón de remolque. Y también agregué estas calificaciones por aquí. Para que se pueda ver esta película ficción. Entonces a partir de aquí, usuario va a estar eligiendo qué ver. Lo mismo para la sección de programas de televisión. Y los veo en el próximo. 35. Plataforma de transmisión de flujo OTT: Bienvenido de nuevo. En anterior cuando creamos este wireframe para nuestro MCU o para el proyecto. Entonces en este video vamos a crear el proyecto real. Entonces vamos al equipo que es MCO 2D y creemos un nuevo archivo, el archivo de diseño. Entonces esta es una imagen. Puedes renombrarlo como quieras. Entonces por ahora voy a renombrarlo. De acuerdo, entonces vamos a crear un marco. Escritorio uno. Ya sabes que el de escritorio va a ser nuestra página aleatoria. Ahora selecciona el marco y cambiemos el color de paloma para que se lea así. Y esto agregó texto en el centro. Eso va a ser demasiado pequeño. Entonces hagámoslo más grande, como hasta 60. Añadamos decisión al centro. Y cambiemos la fuente. Tipo. Una búsqueda en el tipo de fuente de Google 48 es como efecto Pro algo, pero no soy capaz de descargarlo. Entonces voy a usar la fuente llamada impacto. Por lo que es similar a esa fuente. El tamaño de la fuente es demasiado pequeño, así que vamos a hacer que se tome como 96, o vamos a maquillarlo hasta como 120. ¿ De acuerdo? Al igual que esto. Agregémoslo al centro. Otro texto que va a ser nuestro universo cinematográfico. En lo que va de esto, utilizo la nueva fuente de esta Baba. Y esto es regular y el tamaño de fuente es 45. Esto y acaba de golpear hacia abajo así. Entonces si lo desea, puede agregar un rectángulo en el exterior de este texto. Pero por ahora, lo voy a dejar tal cual es porque se ve genial. Por lo que nuestra segunda página se va a mover página. Entonces hagamos que esa página de película transmita imagen en películas. Entonces echemos un vistazo a nuestro alambrón. Para pH. Por lo que la sección MouseX y judía, el nombre de la marca, el icono de búsqueda, icono de campana, n botón de registro. Entonces tenemos que crear esas cosas. Entonces vamos a crear un rectángulo primero. Porque cuando vamos a agregar esa imagen, entonces la prueba no va a ser visible. Entonces vamos a colocar nuestro texto en este rectángulo. Y cambiemos tipo de género de este rectángulo, coloreemos la corriente, es sólida así que lo voy a hacer hasta lineal, así. Por lo que nuestro equipo para este proyecto, es un poco loco. Entonces lo voy a hacer como un rojo. Y un color secundario va a ser como éste. Y este borde es la longitud del rectángulo. Al igual que esto. Creo que el segundo color es como volverse demasiado oscuro. Entonces hagámoslo así. De acuerdo, ahora agreguemos algo de textura aquí. Entonces en primer lugar van a ser películas. Por lo que actualmente la mejor nueva. Entonces lo voy a cambiar por como nosotros los que crecimos este. Entonces creo que esta fuente no está disponible en el quinto más operadores. Para que pudieras descargar esta fuente desde el exterior, desde el similar Google. Puedes descargar esas fuentes e instalarlas en tu PC. Entonces el problema con esta fuente es que no podemos ponerla en negrita. Entonces tengo un truco para ello. Entonces lo que puedes hacer es que puedes agregar un trazo y se convertirá en un perno como este. Entonces disminuyamos el tamaño de la fuente. Actualmente es de 45. Vamos a maquillarlo hasta 30. De acuerdo, así. Y segundo va a ser nuestro programa de televisión. Y así esto va a ser normal. Entonces eliminemos ese shock como éste y acabamos de añadir el nombre de la marca. Entonces voy a copiar este y arrastrarlo hacia esta página. Entonces disminuyamos el tamaño de la fuente hasta como, digamos 80 grados el tamaño de la fuente hasta 30. Entonces si quieres contener el color de la misma, como, hagámoslo rojo. Así, o incluso como puedes elegir cualquier color que quieras. Entonces voy a hacer esto en rojo. A continuación tenemos que añadir es que el icono de búsqueda y el icono de notificación de campana. Entonces ve a S8. Tan bueno hoy en febrero. Y alterna este ícono más. Y busquemos el icono de búsqueda y simplemente arrástrelo hasta aquí. Y también necesitamos un icono de campana. Y el último va a ser nuestro registro. Entonces alinémoslos juntos primero y luego abajo y verticalmente. Por lo que ahora están alineados. Para que podamos agregar una cosa más. Podemos agregar subrayado a esta película. Por lo que podemos agregar subrayado a este texto de película. Por lo que el usuario alargará sección ahora. Entonces, elijamos un rectángulo. Vamos a crear una barra simple como esta. Así, y cambiemos el color de los hoyos. Te puede gustar hacerlo blanco o rojo. Entonces creo que el blanco se va a ver más mejor. Entonces voy a elegir uno blanco como éste. Entonces, arrastrémoslo un poco hacia arriba. Entonces digamos si quieres mover algo un poco hacia arriba para que puedas cambiarlo desde aquí, o puedes presionar el botón hacia arriba en tu teclado así. ¿ De acuerdo? Entonces está bien, se crea nuestra fabricación, así que vamos a añadir una imagen a esta página o a este marco. Tengo esta imagen de Avengers Endgame. Entonces, arrastrémoslo a Figma y peguémoslo aquí. Entonces vamos a abordarlo así. Y haga clic derecho en esta imagen y envíe esta imagen a negro. Y un poco mejor, el problema con las imágenes que puedes ver, esto encabeza algún texto. Por lo que podemos igual a Zoom así. Y vamos a abordarlo así. Ahora sólo tienes que lucir perfecto. De acuerdo, ahora agreguemos algunos textos como nombre de la película, descripción de la película, trabajo hecho, y todo lo que se puede ver en la estructura alámbrica. Por lo que tenemos que añadir nombre o descripción de la película, jugar ahora botón y esta película. Entonces creo que para que sea, quiero crear esa barra de cine. Entonces vamos a crear una película Partes. Elige rectángulo. Entonces hagamos transparente este rectángulo. Entonces elige lineal. Por lo que se puede ver que se vuelve transparente así. Por lo que nuestra nueva barra de sección es mayor. Entonces agreguemos películas. Elegamos un rectángulo y solo creamos un rectángulo como este. Entonces, alinémoslos juntos. Voy a desplazar seleccionar todos los marcos, y también el rectángulo L y M inferior y los presto políticamente. De acuerdo, vamos a añadir esto, el espaciado entre ellos. Entonces digamos que usuario está actualmente en esta película. Entonces hagámoslo más grande. Entonces vamos a añadir una flecha. Por lo que vamos a crear la flecha usando cuadrado así. Entonces selecciona este rectángulo y vamos a rotar alrededor como menos 45. Al igual que esto. Haga doble clic sobre él y se pueden ver los puntos por aquí. Entonces haz clic en eso y pulsa el Enter en tu teclado. Por lo que sólo tenemos dos partes de esa plaza. Entonces vamos a añadir un trazo en. Sí suman ocho. Para que podamos hacerlo un poco más grande para que se vea más natural. Entonces vamos a sumar 10. El 10, el color al blanco. Ahora da click en Hecho. Entonces, movámoslo a este marco. Y a menos que n distribuya curva en estos bordes, hay que añadir más acariciándolo. Actualmente es de 10. Vamos a sumar como voltear. De acuerdo, y hagámoslo más pequeño o colectemos 50. De acuerdo, agreguemos a este agente al centro. Nuestro primero por recién creado. Entonces duplicemos esta página para programa de televisión. Y cambiemos el nombre de las imágenes a programas de televisión. Y suavizar esta herramientas subyacentes, programa de televisión. Y vamos a quitar el trazo de la misma. Y vamos a añadir el trazo en el tejido. Y también tenemos que cambiar la imagen de la misma. Así que guarde este marco y haga doble clic en necesidad. Entonces tenemos que cambiar la imagen. Por lo que obtendrá este menú de imagen y haga clic en este botón. Y lleno de aire. Después ve a la herramienta Forma y coloca la imagen. Y agreguemos esta imagen. Digamos que dos por aquí, así. Y agreguemos esta imagen. De acuerdo, y ahora agreguemos la imagen en estos azulejos. Sostén Mayús, selecciona todas las secciones. Ir a Herramienta de forma más imagen. Entonces estas son las películas también. Voy a colocar esas imágenes en estos azulejos. Por lo que la primera imagen va a ser Endgame. Y segundo va a ser, Digamos, gracias. Y Viuda Negra y Spiderman. De ninguna manera a casa. Seleccionar abrir. Por lo que voy a colocar la imagen del final del juego en este azulejo. Segundo va a ser, creo, guerreros e inspirarlos y va a estar en el cuarto estilo. Y la viuda negra va a estar en el estilo de vida. Entonces agreguemos un trazo a esta imagen para que se vea más fría. Entonces tomemos que un poco digital puede ser blanco. O puede gustarte un agente de cambio para leer. Esto, haz un golpe de hasta cinco. O puedes hacerlo un poco más grande como una proteína. Por lo que depende totalmente del trazo u coma que quieras. Entonces agreguemos imagen a esta sección de TV. Seleccione el estilo, mantenga pulsada la tecla Mayús, selecciónelos todos. Ir a Herramienta Forma. Vamos a la imagen. Entonces primero voy a colocar esta imagen desde motivo. Y el segundo va a ser esperanza I. Tercero va a tener suerte. Y la última es de una división. Entonces para escribir el fotón es floopy, así que voy a añadir loci o aquí en primero en tercera división uno. Entonces agreguemos el nombre y la descripción de la película para ella. Entonces vamos a duplicar este. Y vamos a rotarlo 90 grados. Y solo ajústalo para aquí. Y hagámoslo más grande así. Y ve a Effects. Añada su grupo. Y hagamos que esta capa se difume hasta 80. Por lo que depende totalmente de la cantidad de desenfoque que desee agregar. Entonces en este caso, el, será perfecto para mí, así que voy a añadir eso. Entonces vamos a añadir el nombre de la película. Entonces selecciona el texto. Entonces el nombre de la película, Es arregla Endgame. Y se puede ver que la fuente es Oswald, y es regular. Y el tamaño de fuente es 11 Pi. Entonces vamos a anticipar aquí. Al igual que esto. Añadamos otra textura. Y va a ser cualquier juego. Y agreguemos una descripción de película. Por lo que la descripción de la fórmula, puedes ir a MDB y copiar pegar esa descripción y texto MO . Vamos a crear un rectángulo. Y es en el control de texto a voz V, así. Entonces para esto, elijo una fuente llamada Sofia pro, y el tamaño de fuente es 22. Entonces, despejemos ese botón Play. Ir al rectángulo. Crea un rectángulo como este. Y vamos a sumar. Entonces hagamos este rectángulo en redondo así, o aquí. Entonces volvamos el color un poco azul a rojo. Y agreguemos el texto. Object se va a jugar ahora. Actualmente la fuente es Sofía pro. Por lo que el color de la fuente va a ser blanco. Y vamos a añadir un trazo y color de género del trazo en blanco. Al igual que esto. Aumentemos el tamaño de la fuente hasta como 40. Al igual que este interminable NTC por aquí. Y tenemos que crear ese botón Play. Ir a la herramienta Forma, elige este polígono. Truong un triángulo perfecto usando Shift. Y vamos a rotar esto en menos 92. De acuerdo, y vamos a añadir algunas esquinas redondeadas. Entonces creo que podemos hacer esto un poco más grande, maquillarlo como 15. Entonces creo que la pantalla menos suave pasó a funcionar para ellos. Ok, y vamos a añadir esta pantalla ahora. Está bien, esto se ve genial. Cambiemos el color de la obra ahora en blanco. Entonces hagámoslo agrupar para que podamos usarlo en la página del programa de televisión. Todas las cosas usando Shift y pulsa Control G para agruparlas. Ahora, selecciona el avión, nuestro botón, mantén presionado Alt y arrástralo hacia programa de televisión. De acuerdo, vamos a crear ese botón de remolque. Entonces vamos a duplicar este. Por lo tanto, seleccione Mostrar. Ahora, sostén este tráiler. Y agreguemos subrayado, subrayemos tuit, como ese botón de película. De acuerdo, volteemos el color de eso subrayado en rojo por aquí. Por lo que se crean esos botones. Entonces vamos a añadir la lectura por aquí. Entonces primero nos tiene que gustar esto a la baja, así. Así que ve a la herramienta Forma y mantén pulsado Shift para crear una estrella perfecta. Vamos a duplicar esta tarea a phi veces. Alinémoslos. Vamos a mantener pulsado Shift seleccionarlos todos. Primero Allen, abajo, luego vertical. Y espaciado de distribución horizontal. De acuerdo, cambiaré el recolector de color. Digamos que se vea así. Selecciona la última estrella y quítale el relleno y añade un trazo como este. Si lo deseas, puedes cambiar el color de la misma. Puedes hacerlo blanco así. Y una cosa le queda es que a la curva AD en ella. Añadamos radio de esquina hasta como 200. Entonces, agrupémoslos juntos para que podamos usarlos en otro fotograma, seleccionarlos todos, y controlar G para agruparlos. Para que puedas ver las películas, programa de TV, registro, el icono de búsqueda y el icono de campana, el color es negro y no pierde eso. Genial. Entonces hagámoslo blanco. También cambia el color del trazo a blanco, así. Misma 40 icono de búsqueda visual. Y el último es apuntarse. Entonces terminamos con nuestros proyectos. Por lo que queda una cosa es que agregar prototipado. Por lo que inicialmente vamos a hacer eso. Entonces eso es todo para el video de hoy, y los veré en el siguiente. 36. Prototipos para la plataforma de transmisión de transmisión OTT: Bienvenido, bienvenido, bienvenido. Por lo que en este video vamos a añadir tipo de rol a este proyecto. Así que selecciona la primera página, ve al prototipo. Se puede ver por qué este punto blanco. Haga clic en él y arrástrelo en la página de la película. Y actualmente es navegar a las películas. Por lo que es un instrumento onclick y luego de imágenes. Por lo que en proyecto anterior elegimos esta animación inteligente escuela más pequeña con dinámica inteligente y divulgamos esta. Entonces segundo, va a ser nuestro programa de televisión. Entonces cuando el usuario va a hacer clic en el programa de televisión, así que va a redirigir a esta página de programa de televisión. Para que puedas ver todas las cosas como onclick. Y dijimos la animación en animación inteligente. Y desde la página del programa de televisión, usuario quiere ir a la página de cine que podamos ir a la página de Moodle así. Por lo que las cosas serán lo mismo como onclick, navegar a películas y animación inteligente. De acuerdo, ahora presentémoslo. Haga clic en este botón para presentar. De acuerdo, para que puedan ver nuestras bases se ven así, pero por lo que actualmente esta encaja de acuerdo a mi pantalla. Entonces tengo que hacerlo, se puede ver en esto, a pesar de tamaño completo. Por lo que voy a elegir escalado hacia abajo para caber. Para que podamos ver todas las cosas. Presione R para reiniciar. Y quiero dar click en este. Se puede ver esa animación genial, animación inteligente. Por lo que si hago clic en esta página de película, se pueden ver las teclas rápidas es programa de televisión. Entonces vamos a dar click en él. Y se puede ver el efecto de animación por aquí. Para que puedas ver ese efecto de animación inteligente en esta película. Por lo que si vuelvo a hacer clic en el programa de televisión, se puede ver el efecto cambiante así. Y también el mismo defecto inteligente en este programa de televisión. Entonces así es como puedes crear prototipos de tu proyecto. Y este es nuestro proyecto final. Entonces soy un gran fan del poder. Entonces y por eso atesoro esta página forma nuestra, digamos si eres fan de DC del tau de n, un fan de Star Trek, puedes crear este tipo de proyectos para ellos así. Por lo que después de crear este proyecto, puedes subir este proyecto en el Instagram. Y me pueden etiquetar todo para que puedan ver mi ID de instrumento por aquí. Entonces lo sabré o eres fan de la marihuana o DC o Star Trek o Star Wars. Entonces esa es la Reserva Federal. Y los veo en el próximo. 37. Diseñar tu aplicación música: Bienvenido de nuevo con otro video. Entonces, hasta ahora, creamos proyectos como este, ¿ o te desempeñabas para malware? Y la primera es nuestra palabra, la app de entrega de alimentos. Entonces para este proyecto, escuché tarea para ti o puedes decir o probar. Entonces en esa prueba, lo que tienes que hacer es eso, así que tengo este wireframe. Por lo que este es el alambrón para un reproductor de música. Para que puedan transformarlo y hacer tu propio reproductor de música usando estos wireframes, puedes nombrarlo como quieras. Podrás colocar tus terceras canciones sobre hill y tomar inspiración de como Spotify o la música YT. Y puedes usar cualquier color que quieras, o si quieres que te guste hacer un clon de Spotify también puedes hacerlo. Por lo que depende totalmente de ti. Si suposición que no somos capaces de hacer esto, también voy a crear ese proyecto después de este video. Por lo tanto, mantente atentos para eso. Entonces si tienes confianza, entonces ve por ello y haz este proyecto. Entonces esto es lo que haremos la religión y yo como en la siguiente. 38. UI de la aplicación Musify: Por lo que en video anterior, te di este wireframe. Sé que algunos offshore podrían hacer ese proyecto. Entonces si hiciste ese proyecto, puedes compartir ese proyecto en tu historia en Instagram y puedes etiquetarme, oh querida, puedes ver también mi ID de Instagram. Y también puedes compartir sus proyectos en nuestro servidor de discordia. Entonces aldosterona puede inspirarse en tu proyecto. Esos no serán proyectos liderados, así que hagamos un proyecto para ellos. Entonces vamos a crear un nuevo archivo. Entonces lo voy a leer es que suena así Spotify. Sé que sí suena como Spotify porque sí pago por inspiración por 45. Ya te dije que puede inspirarte en Spotify, música auto ID o cualquier aceite o cualquiera, tu reproductor de música favorito. Entonces, elijamos un marco. Actualmente tenemos iPhone 13 max, así que vamos a elegir este. Echemos un vistazo a nuestro alambrón. Por lo que tenemos cosas como perfil, imagen, logotipo, el mínimo de hamburguesa, y algunos insomnio Picchu. Entonces, ¿esto creará esas cosas? De acuerdo, ahora vamos a crear un logotipo para nuestro reproductor de música. Ahora lo que tenemos que hacer es arrastrar para crear esta sección para nuestra imagen y también para nuestro nombre de canción. Entonces, elijamos un rectángulo. Entonces lo siguiente, tenemos que usar eso para agregar estos iconos como un icono de corazón, icono disgusto, botón labrado y pausa y botón de avance y retroceso. Entonces vamos a crear esos botones. Ahora, lo que es el modo oscuro es realmente famoso y mucha gente los está usando. Yo también soy uno de ellos. Entonces vamos a crear ese modo oscuro antes de que hagamos el nodo superior. Entonces cambiemos el color de estos botones. Al igual que si aplico el modo oscuro en el prim, así que todo va a ser negro. Entonces nuestro libro sí le gusta Les Paul Bourdon hot-button y la dislipidemia no va a ser visible. Por lo que las listas hacen algunos cambios por aquí. Si lo deseas, solo puedes seleccionar estas tres cosas como reproducción, pausa y botón de avance y retroceso. Y puedes cambiar el color del botón de corazón y este botón de No me gusta. Puedes hacerlas blancas y estas tres cosas serán azules. Por lo que depende totalmente de que veas el color de la hamburguesa y también el color de éstas. Bajo me lo dice. Ahora podemos ver nuestro logo en el íconode la hamburguesa ícono y se hicieron los españoles. Y esto. Entonces hagamos esas cosas. Entonces V Esto es música. Música. Entonces, entonces vamos a crear las canciones. Este. Entonces el siguiente. Por lo que este parece parece el siguiente. 39. Aplicación Prototipos de Musify: Bienvenido de nuevo. En este video lo vamos a hacer por nuestra app de música. Entonces, empecemos a hacer prototipos. Como pueden ver, tengo cuatro fotogramas en mi pantalla. Empecemos desde el primer arroyo. Por lo tanto, seleccione el marco que va al panel de prototipo. Entonces me voy a sumar al segundo marco de primer principio. Y agreguemos audio de animación inteligente. Navega a nuestra pestaña, navega a iPhone 12 Pro Max 1. Y una emisión es un instrumento. Entonces elijamos Smart Dimension. De acuerdo, ahora al segundo fotograma, digamos que el usuario quiere cambiar la canción. Entonces si haces clic en este botón por carga que la canción va a cambiar y la firma va a ser esta tercera llanta. Entonces elijamos Normal. Y desde el tercer fotograma, el usuario puede ir al segundo fotograma así. Y todos los ajustes serán los mismos para esto. Y a partir de aquí, se va a abrir la playlist. Escojamos misión Martin por aquí. Creo que terminamos con nuestra mezcla de productos, así que inhalemos en ella. Entonces usemos esta app. Por lo que en la admisión tech smart, se puede ver, se puede ver el logotipo está en la parte superior ahora. Y no finjo la canción. Por lo que voy a dar click en esto prohibido. Esta es la segunda canción. Y desde aquí puedo volver a mi primera canción. De este botón de lista de reproducción. Puedo acceder a playlist así. Se puede ver esta animación genial, pero no puedo volver atrás porque no dije prototipado para esta playlist. Entonces hagámoslo primero. Entonces a partir de esto, tiene que ir al segundo cuadro y menos inteligente y emisión. Ahora, vamos a jugar de nuevo. Si hago clic en este botón y puedes ver lista de reproducción va hacia abajo y abrirla de nuevo, cierra. Y también se puede ver el efecto de animación, Oreo. Esto se ve realmente genial. Entonces esta es la proteína para nuestra app de reproductor de música. Entonces esa es tu derivada. Y te veo en el próximo video o en la próxima semana. 40. Encuadre cable para la página web de redes sociales: Bienvenida. Por lo que en británico argumentaría tarea para crear una aplicación de redes sociales. Entonces conozco a algunos de mis competidores con esa tarea. Entonces en este video, voy a crear mi palabra para ello. Vamos a crear un nuevo archivo de diseño. De acuerdo, vamos a renombrarlo. Por lo que en Bruce, realmente alude a antes, puedes usar como marco de iPhone. O si quieres hacer una aplicación web, puedes hacerlo. Entonces para este proyecto, lo voy a mover. Entonces, primero creemos un marco alámbrico para ello. Por lo que en esta sección vamos a tener un grupo como ese. Digamos que el usuario se encuentra actualmente en la sección de gráficos. Por lo que el usuario sabrá de esta botella, el usuario sabrá que está a cargo de la sección. ¿ De acuerdo? Entonces estos van a ser nuestros grupos. Entonces vamos a añadir un poco de textura. De acuerdo, Entonces en esta sección vamos a sumar un grupo. Entonces vamos a editar texto por aquí. Y en esta sección vamos a tener un mensaje de personnels. Y por aquí vamos a tener como un mensaje de un grupo o de personal. Agrega un botón de llamada aquí. Añadamos también un botón de videollamada. Y vamos a crear esa caja de chat. Aquí vamos a añadir un micrófono. Y en esta sección vamos a tener algunos chats. De acuerdo, Así que eliminando ligero hierro en Berkeley. Entonces en grupos nos vamos al infierno, como algunos grupos, grupos, grupos escolares de amigos. Y también en el mensaje personal de la persona de sus amigos o su maestro o de sus colegas así. Entonces este va a ser nuestro marco de cable para este proyecto. Entonces así es como se va a ver mi versión. Entonces sé que podrías estar hecho de una manera diferente. Por lo que me inspiré en como la peor discordia aparente. Por lo que en el siguiente video, voy a diseñar una interfaz de usuario para nuestra aplicación de redes sociales. Entonces esa soy yo firmando. Gracias por mirar y los veré en el próximo. 41. Diseño de media de sitios web de redes sociales: Bienvenido de nuevo. Por lo que en Bruce, hicimos este wireframe para nuestra aplicación de redes sociales. Entonces en este video vamos a hacer la interfaz de usuario real para eso. Creo que tengo que recordar en esta alambrada. Alambre, Vamos a elegir un rectángulo de marco. Y solo al centro. Y esto es divertido. ¿ De acuerdo? Para que veas que los colonos están afilados, así que hagámoslos sostener turno y seleccionarlos todos. Vamos a maquillar hasta 20. Accidentalmente utilizar este relacional a tengo que usar el radio de esquina por lo que el color de fondo de gris. Hagamos un color blanco como este, y añadamos una sombra de gota. Por lo que realmente depende de ti de qué color quieres usar. Entonces digamos por trabajar en una app y no sabes de qué color usar, entonces puedes usar este sitio web llamado Color Hunt. Y en este sitio web localizarás muchas paletas de colores como esta. Por lo que para este proyecto voy a utilizar esta paleta de colores. Entonces ya lo descargué, así que lo voy a arrastrar en mi proyecto Figma. Este, o éste. Para esta sección, voy a elegir digamos este color. Te gusta, Discord wipe. Y vamos a añadir un logotipo por aquí. De acuerdo, Ahora es el momento de agregar nuestros iconos, como en nuestro ícono más allá, obtenemos como dos de ellos, como este aleatorio normal de D cuadrado para este proyecto, este. Por lo que depende totalmente de que se ponga. Entonces por ahora, soy importante estos iconos, así que vamos a agregarlos uno por uno. Entonces, antes que nada, hagámoslos un poco más grandes. Entonces uso como 35. Entonces hagámoslo 40. Por lo que se verá más metal o fresco. Creo que lo haré blanco. Hacerlos ¿por qué? Esto no es seleccionar. De acuerdo, entrémoslos uno por uno. Nube va a estar por aquí. Se va a estar fijando. De acuerdo, vamos a entrar a ellos. Sostén Mayús, selecciónalos todos. Y el centro alinean el espaciado horizontal. Entonces leí el espaciado también. De acuerdo, vamos a añadir un perfil ahora. Haga clic en él. Ir a Herramienta Forma. Entonces pongámoslo en este logo. Ya puedes ver en este lugar. Y también lucir perfecto. Accidente cerebrovascular. Por lo que depende totalmente de si quieres agregar trazo, puedes agregar. Puedes irte como es así. Por lo que estamos actualmente en sección silla, así rectángulo. Voy a usar esto. Mira este. Este. Vamos a llevar eso al frente. O haga clic en él y traiga al frente o incluso use ese corchete cuadrado derecho para empujar hacia arriba. Bien. Se puede ver cómo se ve. De acuerdo, entonces actualmente es así. De acuerdo, entonces hagamos un grupo. Yo quiero hacer. Entonces cambiemos la fuente, el color de la fuente. Hagámoslo más así. Grupos de borde. De acuerdo, agreguemos un grupo de tus compañeros. Hagámosla una línea regular. Así. 1909, me voy a gustar un poco bien, como este. Entonces digamos que alguien dejó caer un mensaje o algo así, el tamaño de la firma, así. De acuerdo, a menos que un tiempo. Por lo que el usuario sabrá cuándo se entrega este mensaje. Rey cita de alguien, digamos 38, 130, graba un mensaje de ese grupo. De acuerdo, hagámoslo un 10. Creo que me maquillé como diez. De acuerdo, hagámoslo un grupo. Porque vamos a usar esta cosa varias veces. Presiona Control G para convertirlos en grupo. Y vamos a copiar una frase como esta. Seleccionarlos todos hacia arriba, así. Y puedes girar ese tiempo OB. Y también el nombre de ese grupo es como hasta como 21. Entonces vamos a copiar esto exactamente lo mismo en nuestra sección de primera clase, así. De acuerdo, entonces antes que nada, menos que el nombre del grupo. Digamos que tienes k-mers en este grupo. Entonces agreguemos imagen en esta sección de grupos. De acuerdo, entonces la primera es, la primera imagen es nuestra consola. Entonces voy a sumar este segundo son estudiantes. Digamos que los estudiantes imaginarios son programadores. Entonces voy a añadir una palabra aquí. No tiene sentido para esta imagen, así que voy a elegir una imagen diferente. Digamos que nuestros rumores fuera del expediente. Entonces voy a sumar esa imagen como loci. Entonces vamos a añadir el corión leucémico. De acuerdo, así. Digamos que editas la imagen, pero la imagen está muy bien, por lo que puedes hacer doble clic sobre ella, ir a Rellenar, seleccionar la imagen. Y puedes elegir un cultivo, esa imagen. O te puede gustar Moody's y esto, cancela este. Por lo que ahora voy a añadir algunas imágenes. Creo que en Windows, el atajo es para Windows plus r tecla de punto. Por lo que abrirá el público del panel de emoji. Para que puedas agregar imágenes como ésta. De acuerdo, Esta suma está diciendo, gracias a esto. Por aquí, así. Por lo que depende totalmente de quién puedas agregar lo que quieras. Entonces terminamos con nuestro grupo. Entonces digamos que el nombre de esta chica es ritual. Al igual que soy un gran fan de como amigos. Entonces nemo está escrito. Para que puedas agregar lo que quieras. Incluso arity run nombre GF, audio toma nombre, DO liberación en ti. Y el último va a ser Chandler. Gracias. Añadamos alguna dicción aleatoria. De acuerdo, entonces escuché algún texto aleatorio por aquí. He retenido ese tiempo. También el mensaje de Rachel, actor 46. Entonces agreguemos una imagen o imágenes más ahora. Entonces en esta sección vamos a copiar esta. De acuerdo, en la sección de pruebas. Para que se pueda ver el problema por aquí. Entonces copié este grupo, pero el grupo no es visible, así que tengo que añadir un texto. Otra vez. Añadamos un rectángulo simple. Por aquí, van a ser 20. Entonces hagámoslo un poco más grande. Entonces vamos a añadir, si lo arrastro por aquí, se va a agregar de nuevo. Por lo que tenemos que poner esto al frente o click en él y elegir Traer al frente. Y ahora vamos a colocarlo aquí así, así que tenemos que hacer algunos cambios o añadir un trazo. Hagámoslo blanco. Va a ser blanco y también aumentar el tamaño de la fuente. Y actualmente está en línea. Y tenemos que quitar éste. Entonces tenemos algunos iconos audiencia que va a ser la capa inferior, arrástrela por aquí. Y el color de este fondo es blanco y también el color de ese Taiwán es blanco. Por lo que no es visible. Entonces pongámoslo al frente. Traer al frente o 40. Y explícito aquí. Así que pista, ícono de video. De acuerdo, Trae al frente. Alineemos esta convocatoria y esta convocatoria. Entonces es lambda. Podría parecer ese ícono de tres. me, no tenemos ese Minnesota, tenemos que crearlo manualmente mediante el uso de tres elipse. Una elipse como esta. Creo que tenemos que hacerlo un poco más pequeño. Entonces tal vez como bien, así está hecho. Ahora, vamos a mover esto por aquí. Ser más fácil moverse de un lugar a otro. Entonces chats. Entonces vamos a copiar este. En la paleta de colores. No hay color en la paleta de colores. Hagámoslo más pequeño. Entonces vamos a crear así. Importemos eso mi protón por aquí. El camara. ¿De acuerdo? En primer lugar, hagámoslo más grande. Como digamos hagámoslo así. Este capítulo secciones, esto va a ser aquí. Creo, es por eso que esta película de aquí. Está bien. Alineemos estas cosas. Estas cosas están alineadas ahora. Me gusta escriba su mensaje. Creo que son 14, va a estar bien. Al igual que esto. Entonces las cosas están pasando es que sólo el chat o algo así? Entonces voy a añadir alguna oportunidad al azar para ti. Digamos que le recomendé un juego a Rachel. Demos a la esquina 20 polígono. ¿ De acuerdo? Entonces veamos un poco así. Entonces hagamos un grupo de ellos para que podamos usarlo varias veces o Shift para seleccionar esta flecha por aquí, este texto de edición. Entonces hagámoslo. Y puedes usar tu fuente favorita así. Entonces hagámoslo más pequeño. Sitios, un poco más pequeños, así. Y vamos a terminar a tiempo. Entonces voy a copiar este, arrastrarlo por aquí. Entonces vamos a crear otra sección. Puedo copiar este, pero, pero quiero este polígono en el lado izquierdo. Entonces tengo que crear el nuevo. Por eso tengo que crear uno nuevo. O puedes usar el mismo. Entonces voy a describir este polígono. Entonces aquí es donde termino mi proyecto de app de redes sociales. Entonces sé que podrías usar de otra manera o te inspiraste en diferentes aplicaciones como Facebook o Instagram. Por lo que depende totalmente de ti. Podría verse diferente o mejor que yo. Entonces esta es la aplicación de una sola página, por lo que no vamos a usar el prototipo. Entonces si tuviéramos múltiples páginas como app de música, entonces, así que en esas páginas de fotos. Entonces por eso conectamos esos proyectos. Entonces esta es la página única. Entonces así es como se ve mi app de redes sociales. Entonces y los veo chicos en el próximo proyecto. 42. Proyecto 5(prueba tus habilidades UIUX): Bienvenido, bienvenido, bienvenido. En este te voy a contar sobre el archivo del proyecto. Para este proyecto, no voy a hacer ninguna alambrada ni idea alguna. Tienes que hacerlo por tu cuenta. Es una especie de su prueba. Podrías estar pensando lo que tenemos que construir o diseñar. El inicio es cualquier cosa que puedas diseñar, app o página web. Es totalmente depende de ti. Digamos que tienes que construir nuestro terreno de juego para algunas marcas como Nike, Puma. Entonces puedes inspirarte en Nike o puma. O simplemente puedes buscar en el Google, o también puedes buscar en Dribbble e intentar hacer este proyecto. Y recuerda una cosa, debe ser única. Y hay que ser creativo. Y algo de tu propia creatividad. Hay algunos pasos que debes seguir. Al igual que el paso uno se inspira. El segundo es hacer una alambrada. tercer paso es la aplicación de diseño o página web. El paso adelante se despeja en esta aplicación de tres páginas en una página web y el prototipo de multas rígidas. Y el último paso es compartir tu proyecto conmigo y también con tus amigos. Entonces esos son los pasos que tienes que seguir para hacer este proyecto. Sé que puedes hacerlo. Entonces esa soy yo firmando. Gracias por mirar y los veo en el próximo. 43. Sistemas de cuadrícula en el diseño web y el UI: Bienvenido de nuevo. En esta unidad vamos a aprender de qué es la grilla. Rejilla son el esqueleto de diseño declarado alineación te ayudan a crear, ordenar y organizar el contenido superior que estás diseñando. Ya sea que estés creando un layout para imprimir como revista, o combinando imágenes y textos para diseñar una página de aterrizaje, usarás grid para ayudarte a tomar decisiones de diseño y crear una buena experiencia para el usuario. Usando elementos de una cuadrícula, toma de decisiones aleatorias. En lugar de colocar elementos en lugares aleatorios. Al usar real correctamente, sabrás exactamente dónde colocar elementos como logotipo, elementos de menú, titulares, Copia corporal, Imagen y modo. Ayudará a acelerar su proceso de diseño. ¿ Por qué los agarres importan en el diseño digital? Parrillas ayudan a dar forma y herencia haces diseño digital. Sin ellos, no tendrás idea de dónde colocar los elementos. Los necesitamos para crear una buena experiencia de usuario. que el usuario sepa navegar por un sitio web y encontrar lo que necesitaría. Las rejillas también ayudan en lo que se trata de diseño responsive. Si bien la experiencia de escritorio de la página de destino podría usar varias columnas para pasar texto e imagen a través. El diseño necesita ser lo suficientemente flexible para condensarse hasta dos o tres columnas en la mesa y una columna en el dispositivo móvil. Observe cómo el Greer móvil se convierte en una pila como una columna o pequeña cuadrícula en el ejemplo. Existen cinco tipos principales de rejillas. Algunos son mejores que otros para el diseño web. Pero, ¿es probable que hayas usado todo phi a la 1 en tu carrera de diseño? El primero es cuadrícula basal, El segundo es cuadrícula manuscrita. Columna, tercera es cuadrícula de columnas. fotón es rejilla modular, y para el último es herético. Crear esos cinco grupos son realmente importantes, pero creo que la cuadrícula de columnas es realmente importante para nosotros. Columbia sí ayuda a romper el texto para publicaciones e ilustración. Para los sitios web se puede tener en cualquier lugar desde Goodwill o incluso 16 columnas. Pasemos la vértebra, la página de préstamos. Puedes complacer texto e imagen dentro de solo una columna, o pueden abarcar varias columnas. El espacio entre columna se llama vigas. Deben ser del mismo tamaño a través de todos, no todas las columnas cuadrícula pelo para ser simétrico. Por ejemplo, puede utilizar una rejilla de columnas de asimilador donde algunos son más delgados mientras que otros son más anchos, lo cual puede ser útil dependiendo de la herencia de su diseño. Una cuadrícula de columna de cementerio se usan comúnmente en blogs, sitios web donde tienes el contenido principal agrandar hacer tercer contenedor de la maquetación. Si bien el término más pequeño puede ser la barra lateral que interesa la información sobre el blog y el escritor. Después de que hayas hecho tu investigación, tal vez quieras explorar algún alambre de baja fidelidad sobre papel. Crear un Greer para tu página de destino es uno de los pasos más simples. Una vez que lo hayas creado, no tendrás que volver a pensar todas las páginas de destino posteriores. Antes de empezar, nada cubría primero la rejilla en lugar de dejarla hasta el final e intenta que tu diseño encaje en una cuadrícula. nuevo diseñador podría sentirse confinado por la idea de usar grupo, pero no deberías. Después de haber creado una cuadrícula, está bien romperla. Pero al menos lo estás haciendo intencionalmente y están escritos para decisión de diseño. Cuanto más uses grid, más te das cuenta de cómo es guía y en realidad te ayudará a diseñar mejor y más rápido. Entonces esas son todas las cosas nuestros grupos. Entonces eso significa fichar. Gracias por mirar, y los veo en el próximo. 44. 15 cosas que hacen que tu diseño UI Diseño de de UI haga el diseño de lecciones.: Y los jurados serán todos impulsados por la fructificación más densa o la pantalla de aplicaciones. Algunos de ellos son simples, algunos de ellos son sólo, pero algunos de ellos están encendidos. Podría otorgar plomo. Me refiero a que la interfaz de usuario que se ve atractiva como el usuario quiere y la interfaz de usuario que escucha a su usuario. A partir de entonces, la impresión que te hace vivir. Si aprendes todas estas cosas, aprenderás con éxito a hacer una interfaz de usuario que la escuche. El usuario se ve atractivo y agradable para el usuario. Entonces, aprendamos de esas cosas uno por uno, empezando por la tipografía. Toda UI con buffer WTP está encendida porque más del 60 por ciento de la aplicación es texto o depende completamente de los textos. Por ejemplo, una aplicación de artículo al igual que media, tiene más del 60 por ciento de aplicación para ello con detección. Y por otro lado, en aplicación que tiene la casilla de verificación del botón, Dropbox no puede ser efectivo sin texto, ya que el usuario podría no entender qué botón para el registro para el inicio de sesión se lleva a cabo como papel importante en el diseño de interfaz de usuario de aplicaciones. Por lo tanto, es crucial utilizarlo adecuadamente y utilizar el texto correctamente. Tiene que ser peinada con precisión. Colores. Los colores son la parte más importante y muy agradable del diseño. Al igual que el artista, nada sin colores, la UI no es nada sin colores. Por lo tanto, es importante poner colores dentro del diseño de la interfaz de usuario. Colores en el diseño de la interfaz de usuario proporciona atracción y usan una solapa. Al usar colores, el diseñador puede poner vida en su diseño como un hecho, pero también trabajar como un disparador psicológico para los humanos. Por lo tanto, para una mejor experiencia y diseño de interfaz de aplicaciones, debes usar color dentro de tu diseño. Pero a veces si hubiéramos hecho algún error al usar colores para que nuestros iconos, iconos fuera ese uno de los elementos más utilizados. Ahora lo que un diseñador baja usando el porque el usuario lo entiende rápidamente en lugar de leer el texto. A medida que los humanos entienden lo visual fácilmente, o la mejor manera de usarlos para tu beneficio mientras diseñas un diseño de interfaz de usuario, puedo comenzar las cosas nuevas como nuestros antepasados para usarlas para definir su reino y áreas. El reino donde se encuentra línea sostenida de bandera con símbolo de línea. Ilustración. Las ilustraciones son una de las mejores formas de agregar un visual atractivo que también puedes personalizar en consecuencia. Por lo general, la ilustración es mucho mejor que usar simple para ilustración son de bajo tamaño y nunca veía borrosa en cualquier tamaño de pantalla de la aplicación. Si utilizas la ilustración SVG, ilustración para que el contenido sea más comprensible para el usuario. La imagen es una de las más populares y la vieja visual dentro del diseño blanco. Las imágenes son todas pero se les llama como trabajos habituales locatarios, pero en ese momento el texto plano. Como los humanos son criaturas visuales, la carga para ver imágenes. Imágenes muestran emoción ante ese sentimiento atacado del usuario. Y realmente ayudó a atacar y hacer que el usuario cliente. ¿ Qué si no se usa correctamente, puede causar grandes problemas para ti. Y la emisión, la emisión es lo más usado dentro del blanco diseñado para impulsar interacción del usuario ya que donde usuario mira algunas de las animaciones frescas, se sienten bien y les gusta interactuar con el software de aplicación o sitio web. Y la emisión también se utiliza para proporcionar retroalimentación cuando los usuarios hacen clic en algo o para lograr algo. Por ejemplo, como un mensaje de tratamiento con éxito cuando transfieres tu dinero a otra cuenta. Dirección migrante indica alguna animación simple usando la app que hace que la función normal parezca ser atacada por Anna resaltada, por ejemplo, imagen de doble toque para que me guste Protección Migrante en Instagram. Esta sencilla animación, cómo ser utilizado listas perfectas como ordenar animación hace que el usuario se sienta aburrido por su animación. Personalización. Personalización significa recomendar el contenido relacionado con elección del usuario que hicieron previamente usando la aplicación. Al almacenar los datos y su equipo encajan con el permiso del usuario, puedes personalizar fácilmente tu aplicación. Al usuario le encanta ver algo más personalizado ya que se sienten importantes y hacer que la app sea más interactiva. Por ejemplo, si el usuario carga al carrito limpiando videos, le encantaría ver tu otro CAD. Por qué usaremos en esta recomendación de YouTube en lugar de un showings, deslizar video, navegación, nutritivo. Y una de las características importantes de la aplicación sin la cual el usuario no puede usar la aplicación. Por lo tanto, es mejor hacer la cocina de navegación y más inteligente. Flex 45, YouTube, Amazon utiliza barras de navegación, menús, y otros botones para hacer que el usuario navegue fácilmente por la pantalla de inicio de la aplicación. Este Eunice, hacer que el usuario UI es una de las tareas más importantes y los diseñadores de interfaces deben hacer en 2021. Y para la capacidad de respuesta básicamente hace que tu diseño de interfaz de usuario sea capaz de arreglar dentro de tantas pantallas como sea posible. Porque ahora estamos en la era de los medidores donde el 70% de las personas tienen más de un tíos aún poseídos o usados. Qué indagación por qué diseño? Minimalismo? El diseño de interfaz de usuario principal se enfocó en el minimalismo. Usar el minimalismo es básicamente restar elementos menos utilizados de la interfaz de usuario y poner el elemento más importante en la pantalla. Minimizar no significa quitar botones útiles solo por el bien de hacer que la pantalla de la aplicación sea limpia. Todo se trata de estilizar y espaciar. Paridad. Tú por qué se forma con la herencia del elemento, lo que significa que las cosas más importantes deben estar en la parte superior del diseño de la interfaz de usuario y el resto de las cosas están dispuestas en consecuencia. heterotrofia es realmente importante en el diseño de la interfaz de usuario porque se enfocó en el barrio importante y menos importante, y los diseñadores de ayuda para organizarlos de una manera particular que te ayuda a navegar por la aplicación fácilmente. La consistencia, el mantenimiento la consistencia es lo más importante. Significa usar el mismo estilo del elemento en toda la aplicación. Si utilizas diferentes estilos de elemento o dilema, hace que tu trabajo Lord High y la calidad de la app sea baja. Usando el bit de circunscripción básico pero crucial. Algunos elementos de la app podrían ser los mismos en la función, pero diferentes en los colores, esquema, y prueba los identificó y cambiarlos por su APTT él como exhibir un. Distribuido básicamente significa el diseño del diseño para personas diferentes a lo normal. Podrían incluir a personas de izquierda, personas discapacitadas son personas discapacitadas. Más atrás. Lo más crítico que hace cualquier manera diferente a la fuga es bastante malo. El diseñador que sabe usar su espalda es el diseñador que conoce nuestro diseño. Una interfaz de usuario real. Para defectos son las cosas más críticas como algún usuario para ti de vuelta con buenas críticas y otro con banco, solo trataron de entender sus problemas y luego resolverlo. Y recursos. Cuantas mejores herramientas y recursos tengas, mejor será tu aplicación. Como si tuvieras mejores recursos de iconos, esta UI de MCU se ve más atractiva además diseñar herramientas también importa en cierta medida. Herramienta para diseñar u1 debe ser de alto rendimiento. Have Plugin Support también apoya requisito de las empresas y cómo todas las cosas básicas requeridas para ti Diseñando resistencias son la colección de las cosas que los diseñadores usan para una mejor creación de UI, como, como el éxito de iconos, ilustración, los recursos de imagen, y el estado de ánimo. Entonces aquí llegamos al final de mi lista, filtrando cosas que hace que UI viva. Pero porque te quedaste junto a mí, algún bono para ti. Los bonos siguen la tendencia. Ustedes filamentos son parte de ello. Si transfiere valor a su usuario o simplemente mejore la calidad de su diseño de interfaz de usuario. Los diseñadores principales saben dónde están, cómo usar el tenso y no lo estamos. Y podrías aprender al respecto leyendo y entendiendo las tendencias. A veces como el morfismo de fideos son únicos y no se puede utilizar en, pero a veces como una roca se puede utilizar en cualquier parte del camino con funcionalidad básica. Entonces esas son todas las cosas que debes saber como desarrollador de UX de UI. Entonces eso es todo por hoy. Y los veo en el próximo. 45. ¡5 sitios web que tienes necesidad de verlo! Inspiración del diseño web: Bienvenido de nuevo. En este video, les voy a contar los cinco mejores sitios web de los que tomar inspiración. El primero es, y también mi favorito que el Drupal de gribble, puedes tomar mucha inspiración. Se puede ver a mucha gente subir su trabajo en tipo inspiración, obtenemos todas las opciones como animación de página web, branding, ilustración, móvil, impresión, página web, topografía, diseño de producto y todo eso. Entonces elegamos el diseño web para que puedas ver todas las páginas web. Digamos que tu cliente quiere construir un sitio web para criptomoneda, entonces puedes, luego puedes echar un vistazo a estos sitios web. Se pueden ver todas las cosas como color de trigo que usó en esta página web. También puedes seguirlos desde aquí. También puedes comentar en estas páginas. También me pueden gustar. Y también puedes ver las páginas web similares para criptomonedas. Y si quieres filtrar alguna página web o aplicación específica, puedes hacer click en este botón de filtro. Y también puedes agregar etiquetas. Digamos que quieres construir una aplicación de texto de salud like. Puedes teclear aquí un rastreo de cabeza. También puedes seleccionar un color. Y te recomendará todos los sitios web que tiene ese color es de color rosa. Y se puede ver la opción, obtenemos opciones como el figma o una base di escapó sobre la carne y nuestra pierna. Y desde descarga, puedes descargar para nuestros diferentes softwares como Figma o una gran ciudad para una tienda que conozco pierna. Y también puedes subir tu propio diseño desde aquí. Tenemos que inscribirnos primero para esto. De acuerdo, entonces el siguiente sitio web es Behance. Por lo que es algo parecido. A partir de aquí, desde el campo creativo, obtendrás todas las opciones. O si te gusta claro a ti qué idioma estás leyendo, ordenando, diseño de carteles, entonces este sitio web, te ayudará mucho. Ya puedes ver, ¿Somos buenas opciones como director de arte, branding, ilustración, y alerta? Y también. Por lo que nos interesan las ondas de interfaz de usuario alguna vez diseñadas. Entonces consiguiendo esas cosas. También puedes hacer click en esta página web para ver más detalles. Al igual que está construyendo la obesidad. Puedes seguir al Creador. Se puede ver cómo la descripción para ello. Si quieres filtrar algo, también puedes hacerlo. Digamos que si quieres buscar solo a Figma, también puedes elegirlo de mí o puedes sustituirlo aquí. Por lo que mostrará sólo los archivos de Figma. Al igual que este es un archivo Figma. Puedes hacer click en él y puedes ver toda la descripción de esa app. Al igual que Dribble, también puedes elegir un color. Y te mostrará todo el sitio web que tiene este color. También puedes filtrar por tu ubicación como cool y todo eso. Y se puede ver en la barra lateral tenemos opciones como un grupo, imágenes de proyecto, prototipos, personas, y moodboards. Digamos que quieres disparar, digamos que quieres ver algunos productos, puedes dar click en él. Y mostrará todos los prototipos. Y te dejaré que también puedas subir tu propia página web o app en este sitio web, pero tienes que apuntarte a esto. El tercero es Groenlandia. Desde este sitio web obtendrás todo como puedes ver las categorías como e-commerce celebrado y te dejaré también dar click en Show More para ver auditoría, como fitness, notación musical y todo eso. Por lo que no es para la app. Puedes ver ¿Estamos obteniendo opciones como páginas de aterrizaje y flujos de usuarios. Si nosotros, si hago click en esto, redireccionaré a la sección de la página web. Para que veas que conseguimos esto todas las páginas web desde aquí. También puedes filtrar desde aquí. Al igual que ¿qué tipo de sitio web quieres? Digamos que quieres construir un sitio web para el comercio electrónico, puedes seleccionar esta opción llamada e-commerce también es un sitio muy bueno para inspirarte. El cuarto es lado c. Este también es el mismo sitio web como Dribble Behance. Entonces si quieres buscar algo, puedes buscarlo desde aquí. Y también puedes filtrar nodo desde aquí. Al igual, ¿qué tipo de color quieres? Al igual, digamos que quieres un sitio web en plan de estudios. Y podemos elegir el gris. Y te mostrará lo mal que tiene una unidad curricular. Y también puedes filtrar algunos como si quieres construir un blog, también puedes elegir un blog, e-commerce y alerta. Por lo que hay algunas menciones honorables como resbalones, se llama horas a la semana. Tres W's. Entonces en este capítulo, tenemos todo nuestro complejo ganador como este. Tres son creo que nuestras plantillas ganadoras guerrero. También puedes enviar tu propio audio de diseño web. Y en este menú de hamburguesas, se pueden ver las ventanas y los nominados y la colección. Esto también es genial para observar, para inspirarse. Por lo que el siguiente sitio web honorable está inspirado en la vista. Este absurdo, sobre todo voluntad de inspiración. Desde aquí también puedes filtrar como behance jubiloso, como tipos de títulos, como qué tipo de tipos quieres. Digamos que quieres construir un sitio web para agencia y consultoría, puedes elegir esta opción. También puedes ver todas las opciones desde aquí. También obtenemos opción llamada tema. Desde aquí podemos elegir diferentes materias. También la plataforma y también el cuerpo de oleada. Desde la barra de búsqueda, puedes buscar un sitio web específico, como el e-commerce. Y la última mención honorífica necesita una página. Digamos que eres cliente. Ciertamente. Tenemos que construir algo así como una aplicación de una página. Y puedes echar un vistazo a este sitio web llamado de una página baja. Por lo que en este sitio web solo obtenemos una sola página, página web como esta. Se puede ver, esto se ve realmente genial. Guerrero. No sé que u para ser la aplicación de una sola página. También llegué a conocer por uno de mis amigos. También es diseñador de UX. Por lo que me contó de YouTube es una aplicación de una sola página. Entonces esos son todos los sitios web de los que tomar inspiración. Digamos que querías construir algo pero no estás teniendo idea de cómo construirlo. Podrás echar un vistazo a todo este sitio web para inspirarte. Entonces eso es un retrato. Y lo haré en el próximo. 46. más de 500 herramientas y recursos gratuitos para crear las interfaces de usuarios de usuarios: Bienvenido de nuevo. En este video, te voy a contar recursos gratuitos para usar para tus proyectos. Este artículo está disponible en el número 2. Este sitio web es realmente útil si eres programador o desarrollador web. Pero haría cosas como nuestra tecnología cosas alfabetizadas, entonces este sitio web, va a ayudar mucho. Por lo que en este sitio web compré el artículo. En este artículo obtenemos 50 más herramientas o recursos gratuitos para utilizar para nuestros proyectos, como fotos y video, paleta electricista, topografía y efecto de emisión, iconografía en formas de patrones y mutilación. Por lo que podría ver, utilizo el sitio web de DOE llamado pixels para mis proyectos. Por lo que es un sitio web realmente útil para usar videos de stock y fotos. También uso mucho este sitio web para hacer mis videos. Y se pueden ver otras opciones como carbón y para el teatro y todo eso. Puedes echar un vistazo a otros sitios web desde aquí también. Y si quieres, pero si tienes un like una página o una imagen de persona y quieres quitar el fondo de ella. Puedes utilizar este sitio web llamado en pantalla y también esta absurda tarjeta, remota gran ronda. En ocasiones los clientes proporcionan imágenes pero sólo necesitamos la imagen de esa persona. Yo uso este absurdo Eliminar BG. Por lo que me ayuda mucho. Por lo que este absurdo también es realmente genial. Este es el sitio web basado en EHRs. Entonces, qué sitio web hace es que va a crear un rostro aleatorio de la gente. Entonces si quieres usar, como, digamos que estás construyendo una aplicación de redes sociales. Y esa app, tienes una sección de historias. Y quieres poner imágenes de personas, entonces puedes usar este absurdo llamado gente de género. Entonces déjame decirte una cosa. Estas no son las personas reales. Estas imágenes son creadas por AI. Por lo que es realmente útil usar estas imágenes. El siguiente recurso gratuito, es ilustración. Por lo que no uso el lote de ilustración. Yo solo usé ilustración en mi, pienso en, déjame mostrarte mi proyecto. Por lo que solo uso la ilustración en este sitio web. Se puede ver la ilustración por aquí en la segunda página y de lo contrario en esta tercera página. Entonces para eso puedes mirar esta absurda tarjeta, papel abierto, ilustración de aplastamiento de la ilustración son libres de usarla. Obtendremos opciones como SVG, SVG y PNG. Se puede descargar en esos formatos. Y también la nutrición de control. Utilicé estas imágenes de este sitio web, de esta ilustración de control. También obtenemos otros sitios web como ouch y el auto-generado. Por lo que siguiente libre versus dice son los pellets, esos. Entonces si quieres construir un sitio web y tu cliente no produce ninguna paleta de colores. Por lo que puedes ir a esta página web para elegir un color. Puedes crear tu propio color. Y me gusta un sitio web llamado Color Hunt, así que te dije nuestra página web, así que también puedes ir por ella. Utilizo esta misma paleta de colores exactamente en nuestro proyecto de aplicación de redes sociales. Podrás ver todos los sitios web como espacio de color, aplicación válida, colorable, y outlet, y al día siguiente. Entonces esta tomografía, Digamos que tu cliente dice, solo quiero la fuente específica. Entonces puedes ir a este lado y puedes buscar esa fuente. Y puedes descargarlo y lo puedes usar en tus proyectos. Y podemos conseguir otras opciones como Fonda, Arianna, ser fuentes, fonts girl, disfrutando, escala de tiempo, y cómo LED. Entonces a continuación, recursos para usos, iconografía. Por lo que desde estos sitios web puedes descargar un ícono específico para tu proyecto. Digamos que estás construyendo una aplicación de redes sociales. Después puedes ir a esta página web y puedes descargar todos los iconos desde aquí. Y esos todos los iconos son libres de usar, entonces puedes usarlos en tu proyecto. Por lo que obtenemos opciones como icono estola, CSS, icono, icono, generador de traducción, icono cansado. Aquí se pueden ver adopciones. Por lo que los próximos recursos son las patentes en los buques. Por lo que estás aplicando a 12 como algún botón específico en tu página web o aplicación, puedes ir a estos sitios web como bastón CSS, gateway de disrupción. O puedes crear un personalizable. Se puede ver usé de ondas como esta página web y BS1. Pero creé esto usando Figma. Pero si quieres crear un cliente, entonces puedes ir a este sitio web llamado ghettos. Y si quieres crear un él personalizado, entonces también puedes utilizar este sitio web llamado vol La meca. De acuerdo, este es un sitio web realmente genial llamado líneas rojas. Puedes borrar las patentes de aspecto realmente cool de este sitio web. Por lo que esos son todos recursos gratuitos para usar. Por lo que te daré el enlace de esta página web en los recursos, puedes comprobarlo desde ahí. Entonces esos son todos los recursos gratuitos para usar para tus proyectos. Entonces eso es todo para el video de hoy, y los veré en el siguiente.