Introducción a Figma: aprende lo básico rápidamente | Gary Shikhelman | Skillshare

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Introducción a Figma: aprende lo básico rápidamente

teacher avatar Gary Shikhelman, Learning is fun

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      0:50

    • 2.

      Por qué Figma

      1:03

    • 3.

      Comienzo

      1:32

    • 4.

      HERRAMIENTAS

      3:49

    • 5.

      Wireframe

      4:09

    • 6.

      Diseño (alta fidelidad)

      19:27

    • 7.

      Prototipos

      6:44

    • 8.

      Sistema de diseño

      5:52

    • 9.

      ¿Complementos de Plugin?

      2:40

    • 10.

      Reflexiones finales

      0:54

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

4112

Estudiantes

26

Proyectos

Acerca de esta clase

Allow mostrarte los fundamentos básicos de la Figma. Escucha mi enseñanza, mientras te muestra con patiently Comenzaremos haciendo una cuenta de Figma, luego aprenderás algunas herramientas básicas. Te mostraré cómo crear un marco de wire, un diseño de alta fidelidad y prototipo. Estoy seguro de que vamos a divertiremos juntos en esta clase corta. ¡Vamos!!!!

Conoce a tu profesor(a)

Teacher Profile Image

Gary Shikhelman

Learning is fun

Profesor(a)

Habilidades relacionadas

Diseño Diseño UX/UI Wireframing
Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Hola. Mi nombre es Gary, y tengo mi base en Los Ángeles, California. Soy una U X tú soy diseñador y bienvenido a mi curso de figura. Big era una herramienta muy poderosa, principalmente porque puedes diseñar en ella y también puedes hacer prototipos de vida en ella. Y además, es algo que vive directamente en tu navegador Web. Por lo que no estás confiando en ningún software. En realidad no tienes que instalar nada necesariamente en ninguna computadora. En este curso. Donde vamos a hacer es te voy a mostrar cómo usar algunas de las herramientas básicas y cómo tipo de trabajo con ellas. Y después de eso, voy a crear un marco de alambre solo con una pantalla, y a partir de ese marco de alambre, voy a crear un diseño de alta fidelidad usando algunas de esas herramientas. Y luego de ese diseño de alta fidelidad, también vamos a hacer un prototipo. Para que así pudieras aprender todo el paquete muy, muy rápidamente. He diseñado específicamente este curso para alguien que sólo trata de mojarse los pies y simplemente realmente empezando en figura. Como principiante, sé que vas a hacer un gran trabajo pasando el corto tiempo conmigo. Vamos a abrigar 2. Por qué Figma: algunas de las principales razones por las que se funge un programa tan bueno es. Básicamente, es como lo mencioné antes. Es puramente basado en navegador. Literalmente puedes simplemente abrirlo en, ah, ah, navegador moderno y simplemente empezar a diseñar lejos. Se trata de un programa muy ligero y no requiere que tanto recurso sea de tu computadora , por lo que puedes tener computadora más antigua y todo aún debería funcionar. Figura fina permite a múltiples diseñadores trabajar en el mismo documento exacto a la misma hora, lo que significa que podría estar trabajando en este documento en Los Ángeles, y otra persona podría estar trabajando en el mismo documento exacto en Israel, y podríamos estar ambos modificando cosas simultáneamente. Funciona muy rápido y suave, y solo con un poco de esfuerzo, es bastante fácil de aprender. Las entregas son bastante sencillas también. Después de que termines con tu archivo, hay un pequeño botón de compartir. Simplemente haces clic en eso y obtienes un enlace, y solo podrías enviarlo a desarrolladores u otros tomadores de decisiones donde cualquier otra persona y acostumbrada a ver eso y las cosas se guardan de forma similar a Dropbox Google Drive solo directamente en la nube. Yo sí quiero mencionar que el software es completamente gratuito para los individuos, y creo que todo el mundo debería estar usando esta cosa y realmente lo aprovechó. En el siguiente video, te voy a mostrar cómo empezar en la Fig MMA y también utilizar algunas de las herramientas básicas. 3. Comienzo: en este video, te voy a mostrar rápidamente cómo empezar en fig MMA. Entonces estoy aquí en igman dot com. Ahí es donde quieres ir a crear tu primera cuenta, y más o menos podrías ver que tienen, ya sabes, un par de videos, cosas diferentes, tipo de explicar y describir qué tipo de qué pueden hacer y lo que hacen. Hay video realmente bonito. Te recomiendo checar eso cuando tengas oportunidad, pero lo primero que quieres hacer es ir al registro SETI y la parte superior derecha haga clic en eso y más o menos aquí pones tu email, pones tu contraseña y simplemente crea tu primera cuenta y solo tipo de seguir los pasos. Una vez que crees tu cuenta, seguirás un par de pasos y llegarás a esta pantalla básica porque la mayor parte de la pantalla estará vacía y no tendrá demasiados archivos. Por ahora, más o menos se podía ver aquí en la parte superior izquierda, empezarás. Tendrás tu cuenta, cual tendrá tu información básica en tu perfil, y luego tienes ah, busca. Podrías buscar faltas para Beginning estará vacío, pero eventualmente tendrás muchos archivos ahí, y esto te mostrará unos archivos recientes de diferentes archivos. Recientemente Europan aquí mostrando diferentes enchufes que puedes instalar, y hablaré de eso un poco más tarde. Aquí es muy útil. Tienes borrador de varios seguimientos en los que trabajaste, y estos serán tus primeros proyectos, cuales quieren hacer es solo golpear archivo nuevo, y tienes un lienzo totalmente nuevo donde puedes empezar. Y si quieres volver a tu objetivo en este pequeño ícono de hamburguesa y solo tienes que volver a los archivos y regresas, ves que tu nuevo archivo ha sido generado. Si tienes que atrapar a Padre, básicamente puedes tomar este catch files e importarlos a este navegador directamente alrededor esta zona y convertirlos en ficheros de figura para ti es muy, muy útil y también para recordarte que somos navegador basado, así que eso es muy, muy poderoso 4. HERRAMIENTAS: Ahora déjame mostrarte algunas herramientas y paneles en este increíble programa. Entonces antes que nada, cambié este nombre. Realmente no puedes cambiar este nombre a lo que quieras, solo tienes que hacer clic derecho e ir a renombrar. Y podrías simplemente llamar al seguimiento a lo que sea. Y yo sólo lo estoy llamando nuestro primer expediente. Entonces solo estoy haciendo clic y entrando dentro del archivo que hicimos antes y aquí, empezando por el lado izquierdo, aquí sería donde existirán todas las capas. En el lado superior izquierdo, tenemos diferentes. Ahora tenemos este menú el cual tiene diferentes opciones, que podemos hacer cosas diferentes. Pero normalmente empiezo haciendo un marco en ese marco. Aquí puedes ver en el lado derecho puedes tener diferentes marcos con los que estás trabajando. Digamos que estás trabajando con un iPhone 11 pro, para que puedas hacer clic en eso. Y ahora acabamos de crear ese tablero de arte creativo para ti. Ese marco. Y básicamente, cuando creas a su amigo, podrías ver aquí en el lado izquierdo esas serían tus capas para que puedas crear varias cosas que viven en las capas como yo solo estoy creando estas cajas aleatorias y tú podría ver que mientras estoy creando las cajas, las capas se crean en el lado izquierdo. Si quiero escalar la caja, puedo mantener el turno y simplemente mantener el lado inferior derecho. Y solo me estoy moviendo y lo está escalando en proporción. O si quiero cambiar el tamaño de la caja, puedo moverla arriba y abajo, izquierda y derecha, y van a cambiar en la parte superior aquí. Además, puedo ahí hay linea aero labios, estrella poligonal y puedes colocar imágenes así que como vamos a hacer una por ejemplo para que pueda hacer como una línea y solo podría crear líneas. Yo quiero si quiero tener solo quiero crear líneas para mi diseño. Si quiero usar un marco de alambre o algo así, solo puedo crear líneas. Otra forma de Hacer esto es simplemente hacer con atajos. Simplemente puedo golpear L. Y luego cuando golpeo L, me deja crear Ah, esta línea y otra vez me deja crear esta línea. Y hablando de atajos, puedo ir aquí en la parte inferior derecha y golpear el signo de interrogación y aquí, teclado y literalmente puedo ver todos los atajos que existen dentro de esta aplicación, que son muy, muy servicial y hace que mi trabajo fluya más rápido. Entonces, por ejemplo, uno de los atajos importantes que usó son tu espacio. Entonces lo tenía espacio. Hace el pañuelo, que, si utilizaste photoshop o ilustrador cualquier otro programa de diseño, eso es como un estándar bastante. Otro atajos que es muy popular Que me gusta usar es hacer periodo de comando, que oculta el menú. Entonces estoy golpeando mando, punto, punto, y se podía ver aquí el lado izquierdo y el derecho y la parte superior todo se esconden. Entonces si solo me acerco, hice comando plus y estoy acercando y estoy dirigiendo comando menos y alejando otra cosa importante que me gusta. Entonces soy un gran fan de tipo de modo oscuro, y esta aplicación realmente no tiene modo oscuro, sino un pequeño truco a su alrededor. Entonces estoy aquí y tengo el marco seleccionado en este momento, y si dis elijo el marco, me acabo de apresurar afuera y con solo dar clic en el campus. Nada seleccionado notó el lado derecho. Dice antecedentes. Él cinco e cinco o 5 35 55 y puedo simplemente hacer clic en eso y hacer clic en cualquier color que quiera en el fondo cambia a mi color de preferencia y típicamente me gusta cambiar de color al color más oscuro, que tipo de emula modo oscuro. Y este lado derecho es algo dinámico. Entonces sea lo que elijas, digamos elige esta caja y podrías ver que la caja está seleccionada. Puedo tener información diversa para el tipo de caja de la ubicación donde se encuentra. Puedo agregar efectos que no pueden trazos. Digamos que quiero tener un trazo en la caja. Te das cuenta que estoy agregando un trazo o puedo agregar una sombra de gota y afectar eso de cualquier manera uno. Pero es una especie de tipo contextual de dinámica, dependiendo del elemento que elija, este lado cambia rápido pequeño tip en otra cosa. A mí me gusta hacerlo. Tengo este marco seleccionado y vengo aquí en el radio de la esquina, y me gusta cambiar esto para que me guste algo alrededor, como un 40 algo así, en una especie de emula cómo podría verse un dispositivo móvil, Y si quieres exportar algo Digamos que estos son iconos o imágenes o quieres esperar todo el archivo. Simplemente eliges básicamente el artículo que quieres exportar y solo vas aquí dedo exportación, y podrías simplemente exportar qué formato te uno. 5. Wireframe: Ahora te voy a mostrar rápidamente cómo manejo el proceso de encuadre de alambre. Así que traje el boceto hace apenas unos minutos y literalmente puedes arrastrar imágenes o cualquier otra cosa por escrito para figurar literalmente simplemente arrastrarlo desde tu escritorio o desde donde esté ubicado. Y en esta APP, demostración es más o menos va a ser una aplicación de contacto, más o menos una versión avanzada de una aplicación de contacto. Entonces voy a empezar golpeando a una que me hará abrir mis marcos por aquí. Voy a golpear mi teléfono 11 pro, que crea este cuadro va a entrar aquí y cambiar ese marco de alambre de remolque porque eso es lo que estamos a punto de hacer. Entonces en mis marcos de alambre suelen ser como trabajar con este color azul. Entonces vengo aquí en el Phil y estoy cambiando el color hexadecimal a decimal a ese color. Puedes entrar aquí y elegir cualquier color que quieras, pero en típicamente cuando hago marcos de agua, me gusta que sean azules porque entonces tiene esa sensación de blueprint. Y estoy usando los bocetos una referencia que estoy golpeando Oh, en mi teclado, que es un atajo para sus labios herramienta. Y ahí acabo de hacer en los labios. Puedo hacer click, hace 100 por 100 o simplemente puedo arrastrar así y simplemente hacer el tamaño que quiera. Entonces voy a hacer 70 por 70 y luego voy a golpear Shift X, que invierte el primer plano en segundo plano. Y entonces no voy a entrar ahí y lo estoy cambiando a blanco puro que estoy golpeando té en mi teclado para crear, para elegir el texto y estoy golpeando. Y yo sólo estoy escribiendo a nombre porque así van a ser los nombres de las personas arriba aquí. Estoy cambiando el color. Yo vengo aquí y el color en el campo y eligiendo el blanco para tener ese color blanco . Estoy teniendo ambos seleccionados manteniendo el turno y eligiendo el nombre y eligiendo eso para que la pudieras ver en el lado izquierdo y las capas están siendo seleccionadas. También podría elegirlos sosteniéndolo aquí y manteniendo turno. Y ahora ambos están seleccionados que estoy sosteniendo mando bateando G. Así que hace un grupo si sostengo opción al mismo tiempo. Al hacer clic en el ítem. Duplica el artículo, y solo puedo tener un duplicado rápido del mismo. Y si estoy sosteniendo turno una opción al mismo tiempo, me estoy moviendo y se puede ver aquí que me estoy moviendo a cierta cantidad de píxeles. Entonces lo voy a poner a 10 píxeles de distancia y estoy soltando. Ahora estoy golpeando el comando D, que duplica mi última acción, lo cual es realmente, realmente útil. Entonces puedo hacer un montón de estos círculos realmente, muy rápidamente haciéndolo de esa manera. Ahora me estoy poniendo en mi teclado para solo hacer una línea muy, muy rápida y por defecto es negra. Y sólo voy a cambiar ese dedo blanco aquí del costado. Ahora tenemos esto. Los blancos venían bastante bien. Ahora voy a volver a asumir al presidente t. Simplemente escribe contrato, y yo sólo vengo aquí en la fuente y sólo estoy haciendo el mucho más grande y lo estoy haciendo blanco. Entonces eso estaría ahí. En realidad cambia eso al contacto porque será opción de retención plural. Lo estoy duplicando, y lo voy a hacer más pequeño, tal vez como 12 y voy a poner filtros aquí. Filtros. Serán el icono de los filtros no golpeando nuestro en mi teclado. Y yo sólo estoy haciendo esta caja muy rápido. Estoy golpeando al Shift X para invertirlo. Eso va a ser un atajo para que la gente pueda desplazarse por el contacto. Muy rápido abajo opción de retención es sólo arrastrar ese grupo que hicimos antes realmente va a eliminar este nombre. Y voy a tomar el contacto y duplicar eso y luego hacer otro justo debajo de él . Y sólo voy a llamar. Yo sólo voy a decir nombre de pila en la parte inferior. Ah, no hay escuelas. Oye, apellido lo que estoy haciendo. Tú solo copias pegado, y yo lo voy a hacer un poco más pequeño. Algunos viniendo ya y cambiando en 22 como un 12. Algo así. Y estos no tienen por qué ser perfectos. No hay alineación ni nada así necesario. Esto es literalmente simplemente muy, muy rápido. Porque esto es sólo el marco de alambre. Al tener los tres ítems seleccionados, estoy golpeando comando. Cielos, Otro grupo. Ahora solo estoy sosteniendo opción y duplicando ese grupo que acabamos de hacer un comando no hitting d para duplicar la acción. Acabamos de hacerlo. casi terminamos con este marco de alambre. Ahora voy a tomar el filtro y sólo copiar eso también. Y voy a cambiar eso para agregar a la derecha, porque vamos a tener add Estoy golpeando todo en mi teclado para hacer un pequeño círculo muy rápido y golpear el comando X para simplemente invertir ese círculo. Y eso sólo va a ser un ícono de anuncio rápido sólo se va a quedar ahí flotado. Y muy rápidamente, esto es alto. Crear marcos de alambre. En el siguiente video, te mostraré cómo convierto este marco de alambre en un diseño de alta fidelidad. Nos vemos ahí. 6. Diseño (alta fidelidad): En el último video, creamos este marco de alambre a partir del boceto. Y en este video, voy a mostrar cómo crear un diseño de alta fidelidad. Hijo, vas a golpear un y crear otro iPhone pro proyectado por cierto En lugar de hacer eso , también podríamos solo mantener opción podría simplemente copiar esta cosa. Copiar a nuestros amigos. Nosotros eso es otro. Eso es otra cosa que podemos hacer. Pero sólo voy a crear este marco por ahora. Y lo que voy a hacer es seleccionar mi marco de alambre y mi marco regular que acabo hacer este nuevo y voy a escuchar Ve a escuchar el radio de esquina y voy a golpear 40 ahí. Entonces eso hace que estos rincones agradables que me gusta trabajar así. Como que va a mover esto un poco de esa manera. Y voy a llamar al diseño de pantalla Voy a golpear están en mi teclado y solo estoy creando esta caja y poniéndola en el lateral y notaré cómo se rompió a los bordes cuando lo pongo todo el camino a los bordes a las 3 75 Y esta caja necesita ser de 3 75 por 2 25 que podría simplemente entrar aquí también. Entonces voy a entrar a 25 si golpeo esta caja y si hago doble clic en ella, realidad puedo venir al costado aquí y puedo hacer click en estas esquinas y realmente podría, como, romper esta caja alrededor y hacer lo que quiera. Entonces sabiendo que estoy sosteniendo turno, simplemente moviendo la caja para notar cómo está cambiando a alrededor de 1 83 ahí mismo. Entonces solo estoy haciendo eso. Simplemente voy a cambiar el nombre de este artículo en la parte superior por defecto. Se llama Rectángulo, también, y sólo voy a llamarlo Ah, contacto rápido BG para antecedentes. Yo quiero saber, convertir este artículo en un Grady. Y así, por defecto, vemos aquí que es que hay un color de campo y si elijo ese sentimiento, si voy bajo sólido y voy lineal, puedo crear un int Grady, y básicamente puedo tener. Yo puedo elegir el color superior aquí, y ella era otro color en la parte inferior. Cambiando la transparencia de la bebida al 100% y podrías ver aquí hay un bonito nuestro desvanecido y podrías mover el Grady y alrededor dependiendo en qué dirección quieras que se desvanezca. Y como que quiero tenerlo de todo el camino desde el costado, desde el lado izquierdo hasta el lado derecho, hasta el borde. Este es mi lado izquierdo, y este es mi lado derecho. Y el lado izquierdo va a tener esto niega el color azul, que es algo así, y el lado derecho va a tener este tipo de color azulado más púrpura. Ahora quiero cambiar el fondo de la pantalla de blanco a este otro color azul. Y básicamente podrías hacer clic en esto y simplemente realmente, ya sabes, elegir y podrías querer, Pero yo voy con ese color. Entonces solo voy a abrir en Splash muy rápido. Quiero encontrar a una persona para mostrar cómo hacer perfiles muy rápidamente para poder tomar esta foto, por ejemplo. Podría hacer copia, y podría simplemente pegarla justo dentro. Entonces ahora tenemos esta imagen ahí dentro, y está en este marco de forma automática. Eso es esperanza, no hablar conmigo, sólo tipo de trabajo en fig MMA. Entonces soy como ajustar esto, y es automáticamente mantener todo en este bonito marco. Entonces voy a entrar aquí. Recordamos que estos eran 70 por 70. Voy a entrar aquí, pero está pasando a los 70. Entonces sé que va a ser algo así alrededor de esta zona. Y puedo cambiar el radio de esquina del portero a, como, 100 veces, Voy a tomar este impuesto y entrar aquí y simplemente pegar Es. Y ahora tenemos este texto con nombre. Yo iba a cambiar la fuente aquí. Por cierto, Figment viene con un montón de fuentes precargadas de Google, lo cual es increíble. Y también carga una gran cantidad de fondos de su sistema. Y hay más. Hay otras formas de cargar más fondos, pero solo para que sepas que hay muchos fondos pero alejándose de las fuentes por ahora, digamos que queremos convertir esto en una forma dinámica de tener muchos perfiles diferentes, que es realmente, realmente genial. Podría cambiar esto a la imagen de perfil de nombre. Vamos a crear esto en un componente. Solo estoy eligiendo el artículo que vengo aquí y haciendo clic en este botón crear componente . Ahora se podía ver que este es un componente y se puede ver por el costado que tiene un icono diferente. Estoy duplicando el componente de hacer algunas instancias más de los componentes porque estos tres son instancias de este componente. De lo que podría hacerlo. Puedo llegar a este componente y puedo lo que cambié a ese componente, como fuera de algún tipo de efecto, o hacerlo transparente, que puedes venir aquí y hacer que haga el artículo, Digamos, 50% transparente. Sólo estoy cambiando en hacer un 50% transparente, y los tres artículos también se están volviendo 50% transparentes, y también tienen ese efecto también en ellos. Pero si voy a cada ítem individualmente y quiero cambiar eso a, digamos, 100% ese, digamos 5% este. Puedo tocarlos individualmente, así que podría parecer un poco confuso por ahora, pero te prometo que es algo muy poderoso. A medida que lleguemos un poco más lejos, verás lo genial que es. Entonces solo estoy golpeando el comando deshacer Z para volver un poco atrás en el tiempo, así que simplemente no lo pillo y ahora este ítem sigue siendo un componente. Y lo que voy a hacer es sólo ir un poco en el futuro y traer unas cuantas imágenes de perfil más . Así que me adelanté un poco para ahorrarte algo de tiempo e importé en unas cuantas imágenes más y creé y convertí cada una de ellas en una imagen de perfil componente. 123 y así sucesivamente. Porque ahora los hemos creado en componentes. Podría venir aquí junto a las capas es un pequeño ícono que dice Activos. Yo puedo hacer click en eso y se podría ver aquí que tenemos nuestros componentes a un lado. Podría venir aquí y simplemente arrastrar de estos componentes hacia fuera. Y como dijimos antes, si entro al amo, estos aire, solo todas las instancias de la queja que le llegan al amo y me cambio como estoy pegando a ahora mismo para cambiar un transparente para que pudieras verlos todo cambió. Entonces cuando tienes una pequeña aplicación realmente grande con cientos de pantallas, simplemente cambias literalmente uno de estos componentes y actualizaciones por todas partes. Muy, muy cool. Estoy borrando estos fuera de la pantalla al volver a las capas y también lo que quieres hacer por la organización. Estoy golpeando a a para crear un nuevo nuestro puerto. Y yo solo estoy golpeando a los son pobres así por defecto es llamar a un marco uno. Y lo voy a cambiar de gordo que lo tienen decir imágenes de perfil. Entonces ahora quiero ir a los activos del dedo. Se podía ver cuando golpeaba bajo imágenes de perfil. Ahora es una especie de organiza. Entonces cuando tenga un montón de más componentes u los organice bien para ti, las cosas no estarán por todas partes. Entonces tomemos uno de estos perfiles ahora y lo pongamos por aquí. Toma ese texto que hicimos antes. Sólo ponlo por aquí. Otra cosa que podemos hacer es que en realidad podríamos componentes dentro de otros componentes. Estoy eligiendo ambos artículos, y voy a componer y solo golpear crear. Entonces ahora tenemos elemento ahí dentro que es un componente, y uno que sólo es texto duplicando este ítem y bajándolo. Vamos a quitarnos eso. Entonces eso fue 80 abajo y 20 de la izquierda, para que pudieras ver que estoy sosteniendo la opción para que pueda medir eso. Entonces solo estoy sosteniendo opción de subir segundo. Ves, es un de arriba y 20 de izquierda, y creo que tengo ese nombre un poco demasiado bajo. Entonces, solo volvamos aquí arriba y moveos eso un poco y podías ver que nos movíamos . Aquí está Bueno, estoy sosteniendo opción y solo duplicando ese perfil. A 10 píxeles de distancia, sin golpear Comando D y acaba de copiar más perfiles múltiples. Entonces ahora lo que podría hacer aquí es realmente puedo hacer doble clic dentro de ahí, y puede venir aquí donde dice instancia, y puedo cambiar de porque creamos esos componentes organizados para venir aquí. El valor predeterminado es el perfil. Imagen uno. Ahora estoy haciendo clic en imagen de perfil para elegir esa otra vez, eligiendo perfil Imagen tres y así sucesivamente. Así que adelante hace un ejemplo con los nombres que consigo entrar aquí y poner nombres diferentes, diferentes. Si cambio este nombre por digamos, como las fuentes a gustar un negro o algo así, podrías ver su todo o como un rojo. Eso se puede ver más fácil Así que todos cambiaron a leer y estos todos cambian directamente porque estoy cambiando ese componente principal que voy a hacer ahora mismo y simplemente eliminar estos de aquí . Entonces ahora entiendes cómo funciona esto. Y sólo voy a entrar aquí y cambiar todos estos nombres. También quieren tener una situación donde los apellidos aire seleccionado. Déjame mostrarte lo que quiero decir con eso. Sé que en el marco del alambre, solo voy a duplicar el círculo y hacerlo más pequeño. Voy a acercarme un poco y zapatos el círculo, y en realidad voy a venir aquí en el Phil, elijalo. Y si golpeo este cuentagotas de ojos, en realidad puedo soltar este color. Estoy seleccionando este color y cualquiera que sea el color que elija, lo pone en ese círculo. Por lo que ahora estoy golpeando su social. Algo llamado lápiz. Ivan te mostró eso ya? Entonces ha venido aquí, el pentáculo, y más o menos quiero solo hacer un chequeo realmente rápido. Solo estoy dando click, dando click y dando click. Y yo hice un pequeño cheque rápido. Esto es sólo muy, muy rápido sólo para mostrarte a lo que me refiero. Entonces esto es solo una situación en la que se selecciona algo y se olvidó de hacer eso en el proceso de encuadre de alambre, pero quería que veas cómo hacerlo. Ahora queremos hacer una versión de alta Fidelity de eso. Entonces intentemos venir aquí y solo copio ese pequeño círculo y lo estoy pegando. En realidad es 28 por 28 Dimensión sabia. Voy a venir aquí y cambiarlo a 23 por 23. Muy bonito que voy a venir aquí por el costado y golpear esta pequeña tecla menos para borrar el trazo por completo. Y voy a volver a elegir este artículo, y voy a simplemente elegir el blanco solo blanco puro. Lo voy a poner arriba aquí en el componente y notaré aquí cómo lo pone en todos los demás también. En realidad pongamos eso aquí abajo. Se podría ver como está sucediendo en tiempo real. Voy a acercarme un poco y elegir un pequeño círculo, y sólo voy a añadir un poco de sombra. Entonces aquí voy a ir a efecto, y sólo pone un poco de sombra. Podría venir aquí en la sombra y un poco ajustado para tener un poco más sutil. Es un 25% por defecto. Simplemente lo estoy cambiando al 10% que voy a volver por ese pequeño cheque que hicimos aquí. Y voy a volver aquí y ponerlo y simplemente pegarlo. Y justo cuando vale la pena ponerlo en ese lugar, realmente no lo puedes ver. Y voy a simplemente voy a cambiar este cheque de, como, un dedo blanco como un color más oscuro para que pudiéramos verlo, y voy a bajarlo un poco. Entonces es una especie de más línea. Voy a acercarme un poquito más. Normalmente creo mis iconos en un programa llamado Illustrator. Pero aunque figuras muy, muy buena herramienta para hacer iconos también, muy potente va a hacer un par de pequeños ajustes aquí, mover eso hacia abajo. ¿ Vienes? El trazo en realidad cambió el peso del trazo de uno a uno para hacer un poco más gordo , y yo sólo podría hacer un par de ajustes más y no quiero que las esquinas se vendan afiladas. Entonces entro aquí y le pego a este lado pequeño y luego donde dice ninguno. Debajo de este menú, golpeé dos rondas y noto cómo lo hice redondo. No es agradable y limpio. Tipo de funciona mejor con su diseño. Y yo sólo estoy saliendo y se podía ver ahí todos ellos han seleccionado. Entonces por defecto, voy a venir aquí y zapatos esa pequeña flecha, voy a acercar y otra vez, voy a venir a seleccionar ambos elementos y voy a mientras ambos están seleccionados, estoy golpeando comando G. Entonces los estoy teniendo agrupados. Y sólo estoy cambiando este nombre para chequear. Vuelvo a elegir el cheque, y vengo aquí donde está el cheque y estoy golpeando este globo ocular, que lo apaga y enciende. Entonces lo estoy apagando por defecto. Entonces de esa manera están todos apagados por defecto. Estoy moviendo ese componente de vuelta por aquí. A pesar de que lo apagué en el componente principal. Mira, están todos estos aire apagados. Se podía ver aquí, aquí, aquí, todos están resultados por defecto. Pero digamos que quiero encender este, como la forma en que lo tenemos en nuestro ejemplo en nuestro marco de alambre, algunos viniendo aquí eligiendo éste. Y sólo estoy encendiendo esa. Entonces es una forma dinámica de controlar este material es realmente, realmente poderoso. Antes de que me olvide, déjame mostrarte este otro truco. Estoy sosteniendo turno, solo seleccionando estos elementos de nuestra imagen de perfil, y solo los estoy agrupando. Ahora tengo este grupo y lo acabo de llamar. Simplemente voy a llamar a este grupo contactos demasiado rápidos porque todos son igual espacio al programa es lo suficientemente inteligente como para detectar eso. En realidad puedo moverlos por igual en el espacio. A mí me gusta que estén alejados a 10 píxeles el uno del otro. Pero sólo quería mostrarle a la escuela tener en cuenta la razón por la que fuimos adelante y creamos estos sobre componentes también, es para que podamos hacer estos pequeños trucos rápidos. Sin que sean componentes, no seríamos capaces de lograr algunas de las cosas. Entonces solo voy a agregar un pequeño contacto rápido aquí. Entonces ahora vamos a tener los contactos de trabajo, que serán de 20 píxeles de arriba y 20 píxeles de izquierda. Ahora mismo son 42. Estoy sosteniendo opción y estoy moviendo mis teclas de flecha. Entonces estoy viendo todas estas alineaciones, lo cual es realmente útil para mí y más o menos de la misma manera que acabamos de hacer ese cheque. Mark, creé este ícono de filtro también, solo para ahorrarte algo de tiempo. Y voy a tener ese 25 de arriba, que eso es lo que es. Y van a ser 85 de lado. Voy a agrupar estos juntos y presionar el comando G que voy a llamar a la parte superior de los contactos . Ahora, voy a volver a la cima aquí donde estábamos antes. Tomemos uno de estos perfiles y en realidad lo movamos hacia abajo junto a nuestra referencia. Entonces tenemos un nombre de pila en la parte superior aquí. Sólo ponlo aquí mismo. Nombre en la parte superior, apellido en la parte inferior. Entonces sería algo por ahí. Pondrá el nombre de pila en la parte superior aquí. Se copiará ese duplicado que pondrá apellido. Yo quiero hacer esto divertido realmente, realmente grande, en realidad. Entonces voy a cambiar eso a 50 y hacerlo un poco más pesado Cambio. Eso es un medio perfecto. De hecho, quitemos el nombre y solo mantengamos la palabra primero. Sube un poco eso. Realmente bueno medir todo, y en realidad voy a elegir esto y voy a golpear cinco desde mi teclado. Entonces cambia la capacidad al 50% y cambia las fuentes a alrededor de 20. Ponga un poco más bajo, y yo ambos serán seleccionados y golpeó comando Grupo Geo. Um, ahí a unos siete píxeles de distancia. Podríamos hacer alrededor de cinco que esos números no sean exactamente precisos porque estos viven en cajas que agregan píxeles extra. Pero es bueno tener las cosas bien alineadas en general. Ahora, voy a elegir nuestra instancia de ese componente que hicimos antes y elegir este grupo también, y voy a hacer otro componente en eso. Por lo que ahora tenemos unos contactos regulares componentes. Entonces tomemos eso en realidad a un año para que podamos tener todos nuestros componentes en un solo lugar y podamos tener nuestras instancias de esos engorrosos va a dejar eso por aquí y de los componentes siete. Voy a llamarlo listas de perfiles solo para mantener las cosas organizadas. Voy a tomar nuestra lista de perfiles instancia de ese componente y ponerlo aquí. 20 pixeles desde un costado y 20 y debe ser 20 imágenes desde la parte superior. Muy bonito. Voy a tomar esa instancia y ponerla a unos 20 píxeles de arriba. Y voy a golpear comando d como lo hicimos antes para duplicar nuestra acción. Y te mostré antes cómo podemos venir aquí y tú puedes ir al perfil. Podemos cambiar esto de un lado y simplemente cambiarlo a otras imágenes si quieres. En realidad hay otra forma de hacer esto de manera un poco más visual. Déjame mostrarte eso realmente rápido ahora mismo para que pueda venir aquí en el lado de los activos. Y si quiero que esta imagen reemplace a esa imagen, puedo elegir la imagen. Sacarlo a cabo. Podría o simplemente dirigirlo a donde quiera dejarlo. Cuando podía elegir la imagen y podía mantener opción y comando y notar cómo esa caja se está volviendo morada y literalmente simplemente reemplaza esa imagen. Entonces es literalmente ese reemplazo. Voy a seguir adelante y hacer eso al resto de las imágenes muy rápido. Entonces de la misma manera sólo puede venir aquí y cambiar los nombres como lo hicimos antes. Voy a poner a Bob Smith. Simplemente voy a seguir adelante y cambiar todos los demás nombres muy rápidamente. Entonces seguí adelante y agregué todos los demás nombres, nombre y apellido. Y también creo botones R ab similares a cómo hicimos la marca de verificación solo para ahorrar un poco tiempo. Y eso debe ser de 20 píxeles de la derecha y 20 píxeles de abajo. Este Grady, um, por cierto, es exactamente lo mismo genial. ¿ Y ése es? Por lo que ambos son solo el ingrediente exacto, una forma rápida de duplicar un Grady. Y puedo mostrarles un ejemplo. Entonces solo estoy creando esta caja para poder entrar en esta genial en click derecho sobre ella, ir a copiar pegar, y solo hacer copiar propiedades que podría venir aquí y solo hacer pegar propiedades y una copia del verde. Y así es como hice ese ingrediente revisando por aquí. Esa última parte es este pequeño bar que queda. Esto es sólo un atajo rápido para que las personas puedan desplazarse muy rápidamente. Entonces voy a crear una caja muy rápido, que va a ser de 28 de ancho y 494 y altura. Voy a añadir un radio de esquina. Digamos que 100 y son unos cinco píxeles de un lado. Entonces solo estoy poniendo esa mirada. Yo solo estoy sosteniendo opción y mostrándome siete píxeles aquí y luego me estoy moviendo, y ahora sabemos que son cinco píxeles y deberían ser 215 desde arriba en opción de retención y presionando arriba y abajo para ajustar eso y moverlo y pude ver que está cambiando números y lo estoy guardando un a 15 desde arriba. Entonces de nuevo, estoy copiando ese int Grady. Estoy eligiendo el artículo haciendo clic derecho en él, yendo y degustando el radiante y noto cuando pegué el Grande y también estropeé mi radio de esquina y podría simplemente entrar ahí y cambiarlo de nuevo. Pero en lugar de hacer eso, permítanme mostrarles otra manera, una mejor manera de potencialmente hacer eso. Entonces en lugar de elegir propiedades y solo seleccionarlas todas, solo podrías elegir una individual para que pudiera venir aquí a un lado, notar mis flechas aquí a un lado, y solo estoy haciendo clic aquí. Y sólo estoy presionando comando. Ver, venir aquí y encabezar Comando V. Y esa es sólo una forma de no copiar todas las propiedades solo para copiar propiedades individuales. Y esta barra aparece apareciendo demasiado dominante para mis gustos en solo elegirla y bajarla al 10%. Yo también podría simplemente hacer eso golpeando a uno. Y ahora mirándolo a segunda idea, realmente no quiero tener a esa tía abuela ahí en el bar. Yo solo quiero mostrarte tipo de cómo hacerlo. Y así solo lo voy a seleccionar, y voy a ir al relleno y eliminarlo, eliminarlo y luego golpear. Además, Así que eliminé la sensación de que sólo tenemos este gran color y quiero hacer este color azul en su lugar. Y también voy a golpear tiende a sólo tener que un 10%. Yo quiero agregar algunas letras aquí, así que sólo estoy viniendo aquí y eligiendo ese nombre y copiando en ellas, viniendo aquí, golpeando a esta cosa, y luego solo estoy pegando pasta. Entonces ahora tenemos este texto y yo solo estoy consiguiendo un bateo el turno pegando no regresé bateando, Ver, regresa bateando D y me voy a saltar un poco hacia adelante y solo sumar el resto de ellos. Ahora tenemos el resto de las letras tipo de poner eso por aquí. Entonces estoy haciendo un torcido a propósito otra vez porque quiero mostrarte esos tiempos más cálidos. Entonces estoy eligiendo ambas capas, esta capa y esta capa, y entonces realmente voy a alejarme. Se podía ver un poco mejor. Voy a venir aquí y delineador de ojos de izquierda a derecha, y me alineo de arriba a abajo. Y si te gusta esta fuente un poco pesada, en realidad. Entonces, tal vez cambiemos eso a una versión más ligera. Creo que eso es un poco más fuerte. Este es Wells un poco pesado, así que voy a volver. Imagen de archivo en general también dedo del pie un poco de una versión más ligera de ese mismo fondo. Sentí que ese era un poco demasiado pesado. Muy bonito. Bajemos aquí y todo se ve bien, pero estoy contento con ello. Estoy contento con la forma que resultó antes de que terminaran estos videos. También sólo quería mencionar que te diste cuenta de House deshaciendo muchos pasos y tipo de retroceder en la historia y al golpear Command Z y prácticamente solo quería mencionar que esta aplicación todo se guarda en la nube, realmente puedas deshacer para siempre. menos, creo, um, creo que la cuenta gratuita que no pudiste hacer en 30 días y aún puedes volver. Entonces toda tu historia y todo se salva, lo cual es tan poderoso. Y creo que la versión pagada. Creo que literalmente podrías volver a la historia para siempre. Pero sólo algo, algo para tomar nota. En el siguiente video, te mostraré cómo hacer un prototipo realista donde las cosas realmente se están moviendo y animando. 7. Prototipos: En nuestro último video, te mostré cómo crear este diseño de alta fidelidad, usando este marco de alambre como referencia. Y en este video, te voy a mostrar cómo crear un prototipo bastante interesante muy rápidamente Y cuando digo prototipo, lo que quiero decir con eso es una especie de ir. Es una especie de mostrar, Ah, poca animación de las cosas de la casa se vería yendo de una pantalla a la otra. Siempre puedes tener diferentes pantallas que estás mostrando a tus clientes o a algunos tomadores de decisiones o desarrolladores en general. Pero quieres mostrar también qué, cómo se verían las cosas, cómo se verían las cosas cuando van de pantalla en pantalla y cómo se podrían sentir las cosas cuando estás animando. Y este es un buen ejemplo para mostrar cómo lograr eso. Entonces seguí adelante y creé esta pantalla de perfil aquí solo para saltar un poco adelante, y lo que voy a hacer ahora es aquí del lado izquierdo, tienes diseño, prototipo y código. Voy a dar click en Prototipo, y cuando hacemos clic en prototipo, realidad llegamos a algunas nuevas selecciones aquí del lado derecho. Y si hago click en esta pequeña sección. Si hago click en esta sección, me sale este pequeño puntito y solo pude elegirlo y puedo ir a diferentes pantallas. Entonces eso significa que cuando haga clic en esta sección, me llevará a esta siguiente pantalla, y podría mostrarles un ejemplo rápido de que lo que se vería así podría venir aquí donde es un prototipo es que hay un botón de reproducción que podría golpear jugar y se abre una nueva pantalla, y mi pantalla genera la razón un cargado en ese iPhone. Si hago clic afuera, simplemente no estoy dando click en la pizarra. Estoy cocinando afuera en el lienzo y uno rápido afuera pude ver aquí. Hay información diferente en él dice aquí Dispositivo, este es iPhone 11 pro, y podrías tener modelos. Se pueden tener diferentes, tener el oro elegido. Entonces cuando golpeo el play, consigo este dispositivo, que es realmente, muy bonito. Entonces recordando que creamos esa acción, pasemos de una pantalla a otra. Entonces si hago click en cualquier lugar fuera si hago click aquí, podías ver aquí que esto tiene un enlace que creamos antes. Si hago clic en este enlace que nos lleva a eso a esa pantalla, lo que nos permite saltar rápidamente de pantalla a pantalla en un entorno de prototipado. Ahora, si vengo a este botón Atrás y hago clic aquí y solo muevo esta flecha por aquí ahora vamos a tener una acción para volver atrás. Entonces ahora podrías venir por aquí, yo podría dar clic atrás, y ahora lo está llevando de vuelta a las pantallas anteriores. Ahora nos vamos. Vamos de pantalla en pantalla volviendo atrás que estoy eligiendo esto, puedo ir y venir. Entonces si tienes muchas pantallas diferentes, puedes mostrar todo tu flujo algo que es bastante cool que existe. Dentro de la figura hay algo llamado auto enemigo. Entonces cuando cargas de pantalla a pantalla, en realidad puedes tener cosas como auto animadas. Déjame mostrar un ejemplo lo que quiero decir con esa causa hace que tu prototipo se vea mucho mejor e hiper realista. Voy a bajar aquí y hacer clic en esta flecha. Voy a venir aquí de lado y se podría ver aquí hay algo por defecto. Normalmente va a decir instantáneo y voy a venir aquí y cambiar eso de instantáneo a animar inteligente. Voy a volver a esta pantalla Y luego cuando tuvimos la flecha aquí, voy a cambiar eso de instantáneo a inteligente, animado también. Y voy a hacerlo. Y con el auto animado habilitado, déjame mostrarte un ejemplo de cómo puedes hacer algunos realmente bastante Imation muy rápidamente. Por lo que acabo de copiar y pegar este botón de anuncio que creamos antes. Y se podía ver aquí que el título de la misma se llama Ad On y de este lado. También se llama en Así que mientras las capas aire llamen exactamente la misma capa, el sistema va a saber cómo animar y déjame mostrarte cómo funciona eso. Voy a venir aquí a presionar la plaga y y cuando me devuelva el golpe, podía ver que este juego bollos. Es auto animando a esto a la colocación de donde se encuentra en esa pantalla. Entonces voy de ida y vuelta dentro de las pantallas, y se podía ver cómo es auto animar. Entonces en un ejemplo de la vida real, permítanme simplemente borrar esta pantalla de ahí. En un ejemplo de la vida real, podría tomar algo como esta pantalla y ponerla en esta pantalla un poco abajo y tal vez moverla fuera del marco y luego tomar este botón de reproducción, tal vez lo voy a poner atrás en la capa superior clave. Pondré esto detrás de esos marcos. Algo así. Voy a moverlo a un lado. Entonces está del lado derecho y se puede ver aquí que voy a venir aquí y sólo tocar esta cosa para mostrarte lo que está pasando. Y puedes ver rápidamente cómo estas animaciones están afectando nuestras pantallas. A medida que estamos saltando de ida y vuelta en un prototipo, se podría ver que el administrador viene de izquierda y derecha, y esta barra de abajo viene arriba y abajo. Entonces voy a volver a nuestro diseño, y voy a elegir estas secciones en un grupo ellas las voy a sacar de esta pantalla . Voy a sacar esto de nuestro marco y voy a volver aquí a jugar. Estoy golpeando nuestro enlace y se está bajando y las cosas son sólo una especie de auto animando. Y con este enlace en la parte superior, eso es un prototipo de share puedo hacer clic en eso, y podría venir aquí y decir, Copy Link y podría literalmente enviar este enlace a cualquiera, ya sea desarrollador o decisión o alguien en tu equipo que necesites. Necesitas que revisen este diseño para darte algunos comentarios. Puedes enviarles este enlace, y podrían simplemente abrir eso directamente en el navegador. Y en base a lo que piensan, podrían venir aquí a un costado y hay un bollo aquí arriba a la izquierda. Agregar comentarios. Podrían golpear eso, y en realidad puedes venir. Ven en tu prototipo y apenas empieza a actuar. Agregando comentarios. Podrían decir algo. mí me gusta este post, y luego cuando vengas a tu diseño, puedes ocultar los comentarios y puedes revelar los comentarios y realmente eres capaz de verlos . Y cuando recibas todos los comentarios de diferentes personas, podrías volver aquí a tu pizarra, y al hacer click en comentarios que podías ver aquí del costado, obtendrás todos tus comentarios aquí, y luego podrás sólo tienes que ir a través de ellos y tipo de respuesta de vuelta a los comentarios y hacer algunos cambios según sea necesario. En este video, te mostré cómo crear Ah, prototipo y saltar de pantalla a pantalla. Y también te mostré cómo compartir tu documento y cómo el dedo del pie potencialmente dejar comentarios y cómo hacer que la gente deje comentarios para ti y para que tipo de ver dónde están esos comentarios . En el siguiente video, te mostraré cómo tener tipo de preparar un mini sistema de diseño. 8. Sistema de diseño: en el último video, te mostré cómo crear Ah, prototipo y tipo de cómo compartir tu prototipo con otras personas y cómo la gente puede dejar tus comentarios. Y puedo mirar como esos comentarios. Y en este video, te voy a mostrar como tipo de iniciar tu sistema de diseño. Un sistema de diseño podría volverse potencialmente muy grande, pero solo te voy a mostrar como los pasos iniciales de empezar a crear uno. Por lo que seguí adelante y tomé algunos de los elementos que teníamos de nuestra pantalla y creé un par de estos elementos en este único marco. Y básicamente, empecemos con los colores en nuestro sistema de diseño. Eso es algo bueno para empezar. Así que nota aquí en el fondo aquí en el lado, Realmente no tenemos nada todavía, Así que si vengo aquí y simplemente elijo este color aquí, este círculo, podría venir aquí de lado y notar dónde las palabras para sentir. Ahí hay un pequeño ícono con los cuatro puntos que es un estilo. Yo puedo golpear ese estilo y luego puedo venir aquí y golpear Plus y qué hace eso me permite tipo de nombre este color para en mi estilo. Entonces estoy llamando a una primaria este color al año, estoy diciendo crea estilo. Entonces ahora creamos el estilo notado que estaba ahí dentro, y ahora está ahí. Y si salgo de esto y me acabo de pegar encima del cannabis, recuerda, solíamos tener este parpadeo. Antes no había nada ahí. Y ahora tenemos estilos locales y tiene aquí dice primaria. Entonces ahora cuando tenemos, cuando creamos algunos elementos, podría venir aquí y en realidad seleccionar los diversos elementos y venir aquí a un lado y elegir eso y luego zapatos de este color. Y ahora hemos afectado en base al color que seleccionamos allí antes, y luego siempre pude editar este color primario a otro color para que pudiera venir aquí y golpear este ícono. Ven aquí y puedo cambiarlo a otro color. Y mira nota cómo está afectando en todas partes donde se ha aplicado ese estilo, que podría ser extremadamente, extremadamente poderoso. Cuando tengas tantas pantallas, algo encendido, haz eso y vuelve a nuestro color original. Voy a borrar estas pantallas que hicimos antes. Voy a volver aquí y seguir con nuestro sistema de diseño. Vuelvo a seleccionar el círculo. Yo vengo aquí a donde el Phil y yo estoy dando click en esos iconos y estoy dando click en plus long que seleccionado. Esos son los colores blancos. Sólo estoy llamando a que el blanco crea estilo. Ahora, acabamos de crear esa cosa. Entonces ahora tenemos que salir por aquí y mirar, tenemos primaria, y luego tenemos blanca. Déjame sólo hacer esto Una más frente a ti. Voy a elegir disco radiante el radiante específico que tenemos viniendo por aquí y golpeando de nuevo a este ícono con los cuatro puntos y que estoy llegando a este plus luego golpeando el plus, tocando eso y luego dando nisting un título, ingrediente de llamada y crear ese estilo que estoy volviendo por aquí golpeando lona y se podría ver aquí. Ahora tenemos ah, Grady en estilo. Te voy a mostrar cómo aplicar el estilo a nuestros algunos de nuestros elementos existentes desde la celebración del turno. Y estoy eligiendo este elemento que tenemos un genial y luego estoy eligiendo este elemento y estoy eligiendo este elemento sosteniendo turno, pueden seleccionar múltiples elementos. Permítanme aplicar ese radiante que acabamos de crear a esos tres artículos. Entonces solo elijo el icono Un poco ahí y solo estoy eligiendo este radiante ahora. No viste ninguna diferencia porque ya teníamos esa calificación. Pero ahora que se aplica como estilo, podría venir aquí desde el lienzo y se podía ver aquí que donde es genial y cuando estoy eligiendo lienzo y puedo golpear este pequeño ícono y puedo elegir propiedades y que puedo cambiar esto alrededor y nota cómo está afectando aquí, aquí y aquí al mismo tiempo, les está afectando a todos para que se pudiera ver que esos se han aplicado, son y lo poderoso que podría ser eso. Permítanme mostrarles algunos ejemplos de cómo se podría hacer la misma idea con la tipografía también. Entonces, vamos a venir aquí. Y ella era el primer nombre, y cuando voy al texto, puedo hacer clic en este ícono aquí para crear un nuevo estilo y estoy golpeando. Además, y yo sólo podría llamar a esto tal vez como algo así como H uno. Ya que es una copia tan grande, por lo general quieres llamar a la picadura algo descriptivo, pero para fines de demostración, solo te lo estoy mostrando de esa manera a ellos golpeando crear estilo. Y ahora tenemos una H uno. Entonces ahora cuando vas aquí y miras tu estilo aquí a un costado, podías ver que hay uno H. Entonces podría venir aquí y aplicarlo a nuestro componente que hicimos antes. Al aplicarlo a este componente, afectará a todas las instancias de esos componentes. No tienes que ir a cada cosa. Entonces voy a hacer clic en estas palabras de tipografía como primero voy a venir aquí y voy a sumar y todo lo que hago es solo golpear el H y ahora se ha aplicado. Por lo que se podía ver ahora cuando le pegué a Bob, se podía ver que cada uno ha sido aplicado. Pero hacer lo mismo con el apellido incluso cambió hasta un 50% la forma en que teníamos esa configuración. Y voy a venir aquí a enviar un mensaje de texto y golpear a ese pequeño ícono y darle un plus justo al lado y solo llamar a este H dos por ahora aviso. El H uno es capital en H dos está en capital. Es decir, puedo cambiar eso. Tan solo ven aquí, es esa pequeña edición. Y podría venir aquí en la cima y cambiar eso a una H mayúscula también. Siempre podrías cambiar estos nombres según sea necesario. Entonces ahora voy a venir aquí a nuestro componente a nuestro apellido. Voy a elegir eso. Y luego voy a venir aquí y elegir un pequeño ícono. Ahora voy a elegir H dos. Eso se podía ver cuando llegamos a nuestro expediente. Cuando golpeo el apellido, ahora tenemos una h que escuchar. Vuela a ella. O si le pego el apellido aquí, se podría ver que se le ha aplicado el H dos. Entonces eso fue solo una rápida demostración de cómo puedes empezar a crear tu sistema de diseño y lo poderoso que es eso. En el siguiente video, te voy a mostrar cómo funcionan los enchufes en cómo puedes instalarlos. 9. ¿Complementos de Plugin?: en el último video, te mostré cómo empezar en tu sistema de diseño a lo largo de un año. Y en este video te voy a mostrar cómo instalar enchufes y qué enchufes son incluso . Por lo que los enchufes son más o menos muchos APS del software dentro de Big My en sí, y se puede llegar a él sólo viniendo aquí y haciendo clic derecho y pasando enchufes y avisos dice aquí, administrar enchufes. No hemos instalado ningún plug ins del mago. Muéstrate rápidamente cómo hacer eso. Entonces vengo aquí al lado superior izquierdo. Estoy haciendo clic en el ícono de la hamburguesa y estoy pegando de nuevo a archivos que podías ver aquí. Nuestra primera caída se ha actualizado en base a todo el trabajo que hemos hecho, y por aquí es ella la palabra plug ins? Entonces estoy haciendo clic en ese link plug ins, y hay diferentes enchufes que puedes elegir, y específicamente te voy a mostrar uno, y al pegarle las cejas, todos los enchufes, te lleva a la sección donde todos los enchufes existen, y hay una búsqueda aquí en la parte superior, derecha, y puedes tipo de tipo en lo que estés buscando algunos, específicamente buscando uno que te quiero mostrar llamado Splash La imagen que usamos antes con el perfil de hace algunos videos. Quiero mostrarte cómo podemos llegar a eso directamente desde la app. Entonces voy a hacer clic en este enchufe y hay un botón de llamada de instalación a la acción en el que podría hacer clic. Voy a dar click en eso y voy a instalar el enchufe. Ahora que tenemos instalado el enchufe, voy a volver a nuestro archivado yendo aquí a First Project, y voy a dar clic en nuestro archivo y volver a meterlo y acercar dentro de él. Y aquí puedo, click derecho como lo hicimos antes e ir a enchufes y aviso. Ahora tenemos ceniza virgen. Entonces estoy dando click en la selección de chapoteo de ONU Y ahora estamos consiguiendo la selección de in splash aquí. Justo dentro de la Fig MMA. Recuerda antes cuando entré en el navegador algunos videos atrás y escribí en persona, podría venir aquí y escribir en persona otra vez, y estoy obteniendo imágenes justo dentro. Creo que mi propio aviso aquí basado en la palabra clave que ponemos, estamos consiguiendo gente diferente para que yo pueda meter. Esa es una casa. Ahora estamos consiguiendo casas o algo más ¿se te ocurre? Entonces voy a volver atrás y pegarle a sido persona otra vez, y solo puedo hacer clic en la imagen que seleccioné y solo importar para escribir en la Fig MMA y podría hacer en mis ajustes de la misma manera que si hubiera ido a, ah navegador web para conseguir esa imagen y luego cerrar el enchufe. Y yo solo, ya sabes, puedo darle a la pequeña X y se la cierra. Los enchufes son realmente geniales y potentes, y te sugiero revisar diferentes, y realmente puedes, realmente mejorar tu flujo de trabajo al usarlos. 10. Reflexiones finales: Espero que haya sacado algún buen conocimiento de tomar este curso. Aprendemos algunas herramientas básicas y Sigma, y de eso aprendimos a un marco de alambre. Y luego, desde el encuadre de alambre, aprendimos a hacer Ah, diseño de alta fidelidad. Y con ese diseño de alta fidelidad, aprendemos a hacer micro interacciones y hacer algunos prototipos de la vida real. Ahora es hora de que te asigne algunos deberes. Y cuando era niño, solía odiar de verdad la tarea. Pero esto es sólo parte del proceso. Es importante hacer esto para que realmente pudiéramos practicar y ponernos bien en nuestro oficio. Entonces, serio, ¿ puedes simplemente tomar el diseño que he hecho? Tipo de uso que como referencia? Y también asegúrate de crear un marco de alambre que hice, y también crear un diseño a partir de ese marco de alambre para luego experimentar con algunos de los prototipos y equipo. Si puedes llegar a animar en base a cómo te mostré algunas indicaciones antes, por favor no olvides compartir tu progreso conmigo ya que espero que hagas un buen trabajo y buena suerte a ti más. Tú más tarde