Diseño de UI/UX de Figma para principiantes: diseña un panel de Fintech | Ken Mbesa | Skillshare

Velocidad de reproducción


1.0x


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

Diseño de UI/UX de Figma para principiantes: diseña un panel de Fintech

teacher avatar Ken Mbesa, Web Designer | 3D Artist

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

      3:08

    • 2.

      Resumen del proyecto

      4:46

    • 3.

      Crea una cuenta de Figma

      4:36

    • 4.

      Descripción general del editor de Figma

      11:38

    • 5.

      Equipos, proyectos, archivos y páginas

      13:21

    • 6.

      Agrega un fondo y un logotipo

      5:08

    • 7.

      Crea los buttons de la barra lateral

      11:37

    • 8.

      Crea la barra de búsqueda

      5:02

    • 9.

      Tarjeta de ganancias totales

      16:26

    • 10.

      Assignment: el resto de las cartas

      2:45

    • 11.

      Agregar gráficos y gráficos

      16:20

    • 12.

      Assignment: finalización de las cartas

      3:47

    • 13.

      Organización de componentes

      11:21

    • 14.

      Reflexiones finales

      2:48

  • --
  • 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.

899

Estudiantes

32

Proyectos

Acerca de esta clase

¿Te gustaría aprender a crear interfaces de usuario para tu software, aplicaciones y sitios web con Figma?

Crear productos digitales intuitivos y fáciles de usar es esencial en la era digital actual. El éxito de un software o aplicación depende en gran medida de su interfaz de usuario (UI) y la simplicidad de su viaje de usuario (UX)

Antes de sumergirte directamente en la codificación, es importante que diseñes un diseño detallado de cada página. Esto te permite ver cómo se verá el producto final antes de construirlo, lo que te permite generar ideas sobre mejoras antes de tocar una línea de código. 

En esta clase, te enseñaré a usar Figma para diseñar interfaces de usuario hermosas para tu software, aplicaciones y sitios web para mejorar la experiencia de usuario. 

Al final de esta clase, habrás diseñado una interfaz de usuario de un panel para una empresa financiera de ficción, y tendrás las habilidades necesarias para crear tus propias interfaces de usuario con Figma en el futuro.

¿Quién soy? 

Mi nombre es Ken y durante los últimos cinco años, he estado ayudando a las personas a aprender a crear sitios web profesionales con Elementor.

A lo largo de este curso, te guiaré a través del editor de Figma, te enseñaré a usar las herramientas de Figma más comunes y te enseñaré a organizar tus proyectos de diseño.

Aprenderás trabajando en un proyecto, lo que culmina en un panel de control de una aplicación web de ficción con un hermoso diseño.

Esta clase es práctica y está diseñada para que pases de ser un principiante a ser un usuario seguro de Figma rápidamente.

¿A quiénes está dirigida esta clase?

  • Aspirantes a diseñadores de UI/UX que quieran ponerse al día con la herramienta de diseño de UI/UX más popular del sector
  • Empresarios que quieran crear sus propios productos digitales. Así que, si eres un empresario y quieres diseñar tu propio software o aplicaciones, esta clase es un buen comienzo
  • Cualquier persona que quiera agregar una habilidad de diseño valiosa a su repertorio

Acompáñame hoy y exploremos juntos el mundo de Figma.

Conoce a tu profesor(a)

Teacher Profile Image

Ken Mbesa

Web Designer | 3D Artist

Profesor(a)

My name is Ken.

I'm a web designer, creative educator, and digital entrepreneur with over a decade of experience in visual design (Web Design, Graphic Design, and Video Editing).

Over the years, I've helped thousands of everyday creatives, small business owners, and aspiring freelancers take control of their digital presence by teaching practical, no-fluff web design skills using tools like WordPress, Elementor, Forminator, and WooCommerce, with no coding required.

My goal is to keep things beginner-friendly, practical, and focused on helping you get real-world results. If you're building your first website or launching a fully functional online store, I'll walk you through the process step-by-step with clarity and confidence.

Beyond web design, I'm a... Ver perfil completo

Habilidades relacionadas

Diseño Diseño UX/UI Prototipado
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: Crear productos digitales intuitivos y fáciles es esencial en la era digital actual. éxito de un software o aplicación depende en gran medida su interfaz de usuario y la simplicidad de su viaje de usuario. Muchos productos digitales que han fallado en el pasado fracasaron porque se saltaron el paso crucial de diseñar un prototipo, lo que los llevó a tomar malas decisiones de colocación de elementos, llevó a una mala experiencia de usuario del cliente. En lugar de sumergirse directamente en la codificación, es importante que involucres a un diseñador para crear un diseño detallado para cada página. Esto le permite ver cómo se verá el producto final antes de construirlo, lo que le permite hacer una lluvia de ideas sobre mejoras antes de tocar una línea de código Y si puedes diseñarlo tú mismo, entonces eso es aún mejor porque no tendrás que gastar mucho dinero en un diseñador de UI UX. Y esta clase está destinada a mostrarte cómo hacer precisamente eso. Te mostraré cómo usar FIMA para diseñar hermosas interfaces de usuario para tus aplicaciones de software y productos de sitios web, asegurando que cada elemento esté colocado correctamente para una experiencia de usuario mejorada Y al final de esta clase, habrás construido tu propio tablero para una compañía financiera ficticia, y tendrás las habilidades para construir tus propias interfaces de usuario con Figma en el futuro Y por si acaso te estás preguntando quién soy, mi nombre es Ken, y durante los últimos cinco años, he estado ayudando a la gente a aprender a construir sitios web profesionales con Elementor Puedo consultar mi perfil para ver mi trabajo reciente. A lo largo del curso, te mostraré el editor Figma, te enseñaré a usar las herramientas Figma más utilizadas y te mostraré cómo organizar tus proyectos de diseño Y como mencioné, aprenderás trabajando en un proyecto del mundo real, lo que resultará en un hermoso dashboard para una aplicación web ficticia Aquí no estamos haciendo teoría. Entonces, como ya puedes ver, esta clase va a ser práctica, está diseñada para llevarte rápidamente de un principiante a un usuario seguro de Figma Pero quizás también te estés preguntando, ¿esta clase es para mí? Entonces, ¿para quién es esta clase? Bueno, esta clase es para aspirantes a diseñadores de UIUX que quieren ponerse al día con la herramienta de diseño UIUX más popular diseño UIUX Entonces, si siempre has querido aprender a usar Figma, que es la herramienta líder de diseño de UIUX, esta clase Esta clase también está pensada para emprendedores que buscan crear sus propios productos digitales. Entonces, si eres emprendedor o desarrollador web, pero quieres adquirir algunas habilidades de diseño para que puedas diseñar tu propio software antes de escribir tu código. Esta clase es un buen comienzo para ti. Entonces me siento muy emocionada por comenzar, y si te sientes tan emocionada como yo, exploremos juntos el mundo de Figma Pero antes de sumergirnos, echemos un vistazo rápido al proyecto de clase en el que trabajaremos a lo largo de la clase. Aquí vamos. 2. Resumen del proyecto: Como siempre señalo, la mejor manera de aprender una nueva habilidad, especialmente una habilidad técnica es trabajando en un proyecto. En esta lección, quiero mostrarles lo que vamos a construir. Entonces estoy dentro de mi editor, y este es el dashboard que vamos a estar creando. Como puedes ver, antes que nada, está muy bien organizado. Lo tenemos como tablero de instrumentos. Pero ahora si empezamos a expandir cada parte del tablero de instrumentos, Notarás que el tablero está compuesto por tres partes principales. Barra de búsqueda, que es esta sección que tiene todos estos iconos y la propia barra de búsqueda. Tenemos la barra lateral, que está compuesta por el logo y todos estos botones de barra lateral y este contenido, y puedo arrastrarla por ahí. Seleccionando esto, también puedo arrastrarlo por ahí. Y tenemos el contenido principal, que está conformado por, por supuesto, el contenido principal que quieres echar un vistazo, y puedo arrastrar todo alrededor. Si explico el contenido principal, también está bien organizado en las diferentes partes. Así que déjame hacer click aquí. Si pongo el cursor sobre cualquier elemento, lo verás resaltado dentro de la propia obra de arte Entonces solo échale un vistazo a eso. Por ejemplo, si selecciono esta tarjeta de ganancias totales, y la llamaré ganancias totales porque, por supuesto, es la tarjeta que muestra las ganancias totales. Se trata de las ganancias netas, pagos pendientes, gastos. Esto está agrupado. Puedo llevarlo por ahí y reorganizar toda la sección. El caso es que también es un grupo de otros contenidos. Estamos anidando elementos o elementos cada vez más profundos. Empezamos desde el tablero. Anidado dentro del tablero es, son estos tres elementos, estos tres grupos, y anidadas dentro del contenido principal son las tarjetas que contienen diferentes tipos de Y dentro de cada tarjeta hay otros elementos que conforman la tarjeta. Por ejemplo, tenemos este grupo que tiene el porcentaje de incremento o disminución. En el pasado, tal vez en las ganancias totales o en las ganancias netas. Hubo una caída de 3.4, un incremento de las ganancias totales, 3.8, y ese es un grupo que también tiene el 3.8, la flecha y el rectángulo que lo sostiene. Entonces anidando elementos dentro de los elementos dentro de los elementos. Te mostraré cómo organizar tu trabajo, y te mostraré cómo crear cada parte de este dashboard para que para cuando terminemos, tengas un dashboard como este para mostrar o exhibir a tus amigos o compañeros. Al mismo tiempo, recuerden que vamos a empezar de cero. No vamos a usar las plantillas de nadie. Vamos a empezar desde el fondo. Después agrega botones. Agrega el logo. Vamos a crear cada tarjeta desde cero, agregando cada elemento. Eso te permitirá entender cómo usar todas estas diferentes herramientas que estarás usando la mayor parte del tiempo cuando trabajas en Figma. Ese es el objetivo de darte una guía sobre las herramientas más utilizadas a través de ejemplos. Esta es la mejor manera de aprender a usar esas herramientas. Y por cierto, te proporcionaré esta plantilla de diseño para que puedas explorar y ver exactamente cómo creé cada parte a medida que trabajas en tus propias partes. Entonces solo revisa debajo este reproductor de video en la pestaña de proyectos y recursos, y encontrarás la plantilla ahí junto con cualquier otro activo que encuentre útil para ti. si acaso quieres ver cómo hice la mía, no olvides descargarla. Entonces, si estás tan emocionado como yo, si quieres aprender a construir este dashboard y adquirir las habilidades para construir cualquier otro tipo de diseño de UI UX, este proyecto será un buen comienzo para ti. Entonces, sin perder más tiempo, reunámonos en la siguiente lección y creemos una cuenta Figma. Te veré en breve. 3. Crea una cuenta de Figma: Bienvenida de nuevo. Ahora que hemos tenido una visión general rápida de lo que vamos a construir, es el momento de crear una cuenta en Figma. Yo sólo quiero salir de aquí. Vendré a este menú desplegable. A continuación, haga clic en volver a los archivos. Ahora, me llevarán de vuelta a mi página de inicio para esta cuenta específica. Si hago clic en este menú desplegable, como pueden ver, actualmente estoy conectado como este perfil, pero también estoy conectado como este otro perfil aquí. Déjame cerrar la sesión así. Cerrar sesión en todas las cuentas. Y esto es lo que tendrás cuando visites FIDMA. Así que voy a hacer clic en Comenzar gratis. Vamos a usar la cuenta gratuita. Y no te preocupes. Voy a hablar un poco sobre el plan gratuito en la siguiente lección. Así que vamos a seguir y crear una cuenta por ahora. Ahora, solo voy a seguir con una cuenta de Google, y voy a usar esta cuenta que nunca antes había usado. Haré clic en Continuar. A, aquí estamos. Debido a que es la primera vez que creamos una cuenta, vamos a pasar por este asistente de configuración de incorporación, lo cual es muy sencillo Así es como aparecerás en el archivo Figma. Así que voy a ir con el nombre por defecto, pero puedo dar click aquí y cambiarlo. Digamos que ¿Puede la D, entonces continuar? También puedes optar por saltarte algunos pasos. Continuar. ¿Qué tipo de trabajo realiza? Digamos que estoy en desarrollo de software, porque estoy asumiendo que tal vez quieras diseñar interfaces para tu software. Elige lo que quieras. También puedes elegir otro. Desarrollo de software, continuar. Cualquiera de estos describe tu trabajo en el fundador de una agencia, digamos que soy freelancer, o digamos que soy fundador. Continuar. ¿Con quién colaboras habitualmente? Los compañeros de equipo, los clientes, nadie, sólo yo. Continuar. Quiere invitar a algunos colaboradores. No. Puedes saltarte este paso, pero si quieres colaborar con personas en este proyecto en particular, puedes enviarles correos electrónicos. Puedes ingresar sus correos electrónicos aquí. Sáltate eso. ¿Qué te trae hoy a Figma? Instalarlo para mi equipo, iniciar un nuevo trabajo o proyecto. Sí. Y aquí puedes seleccionar un número de ellos. Así que solo comprobando las cosas. Continuar. ¿Has usado Figma para productos antes No, es mi primera vez. Continuar. ¿Qué plan te gustaría? A mí me gustaría este plan. Entonces voy a hablar más sobre los archivos y proyectos a los que tienes acceso con este plan gratuito en la siguiente lección. Así que sigamos adelante y hagamos clic en Continuar. ¿Qué te gustaría hacer primero? Entonces hablemos de diseñar con Figma porque no queremos usar Fig Jam Eso es todo un curso sobre sí mismo. Acabado. Y aquí estamos. Entonces, en el momento en que terminemos ese asistente de configuración, vamos a ser llevados a este rápido recorrido que nos muestra las diferentes partes del editor. No vamos a pasar por esto, sino que tómate un momento y recorre todo el recorrido para ver las distintas partes del editor. Pero te vas a acostumbrar a usarlos ya que construimos las diferentes partes de nuestro archivo. Parece porque me desconecté, no tengo el archivo abierto Lo que voy a hacer es iniciar sesión en mi otra cuenta, agregarla aquí para que también pueda ver qué vamos a estar construyendo. Básicamente, así es como crear una cuenta en FIMMA. En la siguiente lección, hablemos de archivos y proyectos en el plan gratuito. Te veré en breve. 4. Descripción general del editor de Figma: I. Y bienvenidos de nuevo. Entonces, ahora que has creado una cuenta de Figma, es momento de echar un vistazo rápido al editor Y si también has pasado por el editor que te impulsaron a pasar con esa burbuja que estaba aquí, debes haber visto esa burbuja azul. Pasaste por unos pasos y viste las diferentes partes del editor. Y el paso final fue continuar practicando aquí o abrir un nuevo expediente. Así que he hecho clic, creo un nuevo archivo, y ahora estoy en un editor en blanco Estos son lo mismo. Pero ahora, claro, esto tiene algo de contenido. Entonces aquí hay un editor en blanco. Ahora, por supuesto, lo primero que quiero señalar es que puedes cambiar el nombre de este archivo en particular, este archivo de diseño, y actualmente está dentro de borradores Entonces, lo que quiero hacer es darle un nombre, tal vez diseño de aplicaciones web de finanzas de IA, porque estamos diseñando una aplicación web, diseño de interfaz de usuario de aplicaciones web o algo por el estilo. Si ahora vuelvo a los archivos, inmediatamente nos redirigen a la carpeta de borradores bajo el equipo de Ken Koko Como puedes ver, tenemos un equipo generado automáticamente. Cuando terminamos el Asistente de Configuración, Figma creó automáticamente este equipo para nosotros, y tenemos borradores, y tenemos todos los Ahora, dentro de todos los proyectos, tenemos justamente este proyecto de equipo. Vamos a hablar de qué es un proyecto, qué es un equipo, qué es una página, qué es un archivo de diseño. Así que no te sientas abrumado por todo eso. El punto a quitar de esto aquí es que estos tres expedientes están dentro de los borradores. Estos son los expedientes de práctica que estábamos viendo, por ejemplo, este Conceptos básicos de Figma, básicos de Figma. Ahora, podemos mover este archivo desde aquí haciendo clic derecho en él, mover archivo. Y bajo el equipo de Ken Koko, este equipo, tenemos borradores Como puedes ver, actualmente estamos dentro del draft, por eso tenemos el tick, pero podemos moverlo al movimiento de Tim Project. Entonces ahora la carpeta de borradores tiene solo estos dos archivos. Ahora, si voy a Tim Project, ahora tenemos el archivo de diseño de aplicaciones web de AI Finance. Ahora, déjame hacer doble clic en él. Lo primero que debes hacer cuando quieres empezar a trabajar en un proyecto es usar un marco. Entonces voy a hacer clic en eso. Esta es la herramienta de marco. Si haces clic en el menú desplegable, tiene algunas otras herramientas que rara vez uso, pero puedes averiguar más sobre para qué se utilizan Pero un marco es lo que me gusta llamar la pantalla. Entonces por ejemplo, cuando en el momento en que seleccionas marco aquí, vemos plantillas de marcos que podemos usar. Entonces, si estás creando una aplicación para teléfono, pero ahora esta es una aplicación web, así que digamos, de escritorio. Vamos con escritorio, por ejemplo. Ahora bien, esta es una pantalla que podemos empezar a poblar con nuestro diseño Si lo borro, y tenemos el frame activo. También podemos dibujarla manualmente. Y si queremos editar el tamaño, podemos entrar aquí e introducir nuestras dimensiones manualmente. Entonces el ancho, el alto, el ancho aquí puede ser 1920. Control y rueda de desplazamiento para alejar el zoom. Rueda media del mouse presione hacia abajo la rueda del mouse central para arrastrar, y la altura puede ser 1080. Eso es Full HD. Entonces así es como crear una pantalla o un marco. Entonces claro, aquí hay otras herramientas. Esta es la herramienta de selección, y tenemos otras herramientas aquí. Entonces claro, probablemente ya sepas lo que hacen estas herramientas. Si quieres agregar algún texto, puedes usar eso. Por supuesto, sé que me estoy saltando estas herramientas, y la razón es porque a lo largo de la clase, vamos a ver cómo trabajar con la herramienta más utilizada Así que no te preocupes por eso. Sólo te estoy enseñando los alrededores. Entonces, lo siguiente que habrás notado es cuando agregamos un frame, esto se creó automáticamente como una capa. Siempre que agreguemos algo, si selecciono la herramienta rectángulo y agrego un rectángulo, se agregará dentro de aquí, pero es su propia capa. Si agrego algunos textos y empiezo a escribir, Esa es otra capa. Si agrego una línea, esa es otra capa. Todo existe como una capa, pero podemos agruparlos. Si selecciono la línea, ya está seleccionada, y ese rectángulo y los textos, notarás que también están resaltados aquí. Si le pego al control G, puedo agruparlos y ahora son el grupo uno. Puedo llamarlos elementos. Si explico los elementos, ahora puedes ver los tres elementos que tenemos aquí. Aquí dentro, también puedo elegir a estos dos y agruparlos, Control G, y grupo interno. Ahora este grupo interno está anidado dentro de elementos, que está anidado dentro del marco Si lo amplío, ahora podemos ver estos dos. Si selecciono el grupo en sí, puedo llevar a esos dos por ahí. Si selecciono esto, llevo el grupo de elementos, y si selecciono el marco, llevo todo el grupo de cuadros. Entonces espero que entiendas cómo trabajar con grupos ahora, la jerarquía de grupos. Ahora bien, si selecciono eso, controlo el turno G, eso agrupa los grupos que hayas seleccionado. Y claro, antes que nada, hemos desagrupado al grupo externo Ahora bien, si vuelvo a controlar el turno G, desagruparemos al grupo interno Puedes dejarme deshacer eso. También puedes seleccionar Ahora este es un grupo. Si hago clic con el botón derecho, puedo agrupar, así como así. Ahora, una vez que tengamos seleccionado este rectángulo, traeremos aquí algunas propiedades que podemos cambiar. Por ejemplo, el color de relleno, seleccione eso, podemos cambiarlo a rojo. También podemos agregar un trazo como podemos ver. Entonces seleccionando más aquí agrega un trazo negro. Y si me acerco, note que tenemos ese trazo negro, y seleccionándolo de nuevo, podemos ir al trazo y agregar su ancho. Seleccionando aquí y usando la flecha de la aplicación en el teclado. También podemos cambiarlo a una línea discontinua yendo a este menú y cambiar de sólido a d, y ahora es una línea discontinua Mientras está seleccionado, podemos eliminar el campo haciendo clic en este signo menos. Si bien está seleccionado, también podemos jugar con el radio del borde. Esas son las esquinas. También podemos simplemente ir directamente aquí y tirar de estos puntos. O podemos entrar aquí, hacer clic ahí e ingresar un valor específico. Quizás 20, y ahora tiene un radio fronterizo de 20. Si digo 50, así como así. Si selecciono este icono de esquinas independientes aquí, podemos cambiar la parte superior inferior izquierda, superior derecha, abajo derecha. Vamos a probar eso. Arriba a la derecha 50. Ahora, digamos arriba a la derecha cero, y abajo a la derecha, abajo a la izquierda, cero. Ahí vamos. Si seleccioné, podemos volver atrás y agregar un color de relleno una vez más y eliminar el trazo. Cuando seleccionamos el texto, traemos a colación propiedades que pertenecen al texto Podemos cambiar el grosor de la fuente, extra negrita. También podemos cambiar el tamaño viniendo aquí y escribiendo tal vez 32. Podemos cambiar de inter a una fuente diferente. Vamos a escribir tal vez Montserrat Enter. Podemos cambiar la alineación del texto. Ahora bien, si tenemos un párrafo. Por ejemplo, permítanme simplemente copiar un párrafo de uno de estos copia que. Pega eso ahí. Ahora notarán que aquí pegué un párrafo largo, pero está en una línea, y eso es por esta configuración de aquí mismo Puede ser ancho automático, pero si vuelves a hacer clic en él, puede ser ancho automático o puedes cambiarlo a tamaño fijo. Ahora, déjame seleccionar esta esquina aquí y ponerla ahí mismo. Ahora bien, si explico esto, notarán que esto ha cambiado de o ancho a tamaño fijo porque tiene que caer dentro de las dimensiones específicas de este cuadro de texto que lo sostiene. Ahora bien, si lo volvemos a cambiar de nuevo, cambia a esa línea única. Todo bien. Eso es básicamente una visión general rápida del editor. Llegaremos a conocer más sobre las diferentes partes del editor a medida que continuemos. Recuerda, mi objetivo con esta clase es mostrarte cómo usar las diferentes herramientas que usarás la mayor parte del tiempo cuando trabajas en Figma. Y con eso dicho, pasemos a la siguiente clase donde estaremos hablando de equipos, proyectos, archivos de diseño y páginas. ¿Qué quieren decir? Lo que cae dentro de lo que. Vamos a averiguarlo. 5. Equipos, proyectos, archivos y páginas: Lo que quiero hacer es ir a este menú desplegable y volver a los archivos. Entonces este es el proyecto en el que estaba. Ahora, antes de ir demasiado lejos, antes que nada quiero llegar a este menú desplegable, y como pueden ver, puedo agregar una cuenta. Así que permítanme agregar cuenta porque quiero abrir nuestro diseño de referencia, el que había diseñado antes, así que permítanme iniciar sesión. Y esto es todo. Déjame ver. Déjame hacer doble clic en eso. Sí, aquí estamos. Ahora, si vuelvo a los archivos, en esta pestaña, estoy logueado como Ken Bs. Déjame arrastrarlo para que sea el primero aquí. En esta pestaña, estoy loged in como la D. Se puede iniciar sesión como cuentas diferentes en diferentes De esa manera, si vuelvo a la cuenta de Ken Bersa, ahora puedo hacer doble clic en esta Y abrirla, y solo puedo desacoplarla de esa ventana y dejarla como ventana propia para que podamos cambiar entre las dos con alt tab, así como así Ahora, volviendo aquí, cuando terminamos de configurar nuestra cuenta Figma, cuando pasamos por ese asistente de configuración, Figma creó automáticamente un equipo para Ahora mismo, deberías estar teniendo un equipo aquí diciendo algo té. Con eso hecho, solo quiero deshacerme de eso porque eso es un traqueteo. Y ahora que estamos dentro de este equipo, el equipo Ken Pumas. Déjame hacer clic en eso. Sí. Así que asegúrate de hacer clic en el menú desplegable y hacer clic en tu equipo Ahora estás dentro de tu equipo. Aquí, tenemos un proyecto. Si queremos un proyecto extra, necesitaremos actualizar al plan pro. Si hago clic en esto para agregar un proyecto o aquí, me encontraré con este aviso para actualizar a profesional. Pero un proyecto es más que suficiente para nuestro trabajo, nuestros proyectos personales. Por supuesto, tal vez quieras cambiar este nombre del proyecto. Entonces iré a este menú desplegable, renombraré, y lo llamaré Control A. Elimine eso, finanzas de IA, y le renombraré Ese es el nombre de este equipo en particular. Déjame agregar la palabra equipo. Equipo ahí. Ahí vamos. Si hacemos clic aquí en este menú desplegable, también puedes crear otro equipo A lo mejor tienes un equipo de Fitness, un equipo de Fitness App. Así que tienes otro equipo que está trabajando en una app de fitness, y puedes optar colaborar con la gente o esquiar por ahora. Elija el motor de arranque. Y ahora tu equipo dentro de la app Fitness. Haz clic en este menú desplegable, puedes volver a AI Finance o crear otro equipo más. Entonces quiero volver a AI Finance. Ahí vamos. Y cada equipo tendrá un proyecto. Así que el equipo de AI Finance tiene un proyecto. Pero cada proyecto puede tener tres archivos de diseño. Entonces como pueden ver, tenemos este archivo original. Puedo añadir otro, otro. Pero si voy al cuarto, me pedirán que actualice. Así que déjame hacer doble clic en esto. Y llamarlo tal vez aplicación web de finanzas de IA. Así que volvamos a los archivos. Entonces estamos dentro del proyecto de equipo, podemos renombrar el proyecto. Este proyecto de equipo aquí mismo es si hago clic en el menú desplegable y solo selecciono el equipo de finanzas de IA, ¿este proyecto de equipo aquí que contiene los tres archivos de diseño que estamos a punto de crear? Si tengo razón, puedo cambiarle el nombre para financiar archivos de diseño. Perdón por eso. Archivos de diseño de AI Finance. Entonces ahí vamos. Ahora, recuerde que hemos creado un archivo llamado AI Finance Web App. A lo mejor este es el archivo donde usamos para diseñar la versión de la aplicación web del mismo. Ahora, si agrego otro, ahora, recuerda que estamos dentro del proyecto AI Design Files. Esta se puede llamar aplicación móvil AI Finance. Volviendo a los archivos. Ahora, en cuanto dejamos un archivo de diseño, cuanto salimos del editor, somos redirigidos de nuevo a un proyecto Y recuerda, solo tenemos un proyecto por cada equipo. Así que ahora mismo estamos dentro del proyecto de archivos AI Finance Design. Déjame llamar a este proyecto. Proyecto de Diseño de AI Finance. Pero también podemos ir dentro del equipo que está sosteniendo este proyecto y todos los demás proyectos en él si estamos en el plan de pago. Si entro dentro del equipo de AI Finance, Todos los proyectos que tenemos aquí se enumerarán debajo del equipo. Pero recuerda, bajo cada equipo, si estamos usando el plan gratuito, solo podemos tener un proyecto. Ahora, cuando estamos dentro de un proyecto, este proyecto que actualmente está dentro del equipo de finanzas de IA, para ver todo lo que está dentro del proyecto, simplemente podemos hacer clic en eso. Ahora estamos dentro del proyecto que está dentro del equipo. Ahora dentro de este proyecto, recuerda que tenemos dos archivos de diseño. Podemos agregar un archivo de diseño más. Ahora bien, esta es la tercera. Digamos que tal vez también tenemos una versión en el sitio web de nuestra aplicación, sitio web de I Finance. Eso es con fines informativos, y queremos contarle a la gente sobre nuestra aplicación Ahora tenemos tres archivos aquí, sitio web de AI Finance, AI Finance Mobile App, AI Finance Web app. Si tratamos de agregar un archivo de diseño, nos encontraremos con este mensaje aquí para actualizar porque solo podemos tener tres archivos de diseño dentro un proyecto que está dentro de un equipo. Ahora, creo que aquí había creado algo para ayudarnos con la jerarquía. Déjame abrir adobe Illustrator muy rápidamente. Y aquí estamos. Contamos con un equipo. Por ejemplo, tenemos este equipo de finanzas de IA, y el equipo solo puede tener un proyecto si estamos usando el plan gratuito. Un equipo puede tener un proyecto. Si queremos un proyecto extra, tenemos que estar en el plan profesional pagado. Un equipo puede tener un proyecto. Un equipo, el equipo de finanzas de IA tiene un proyecto, que es el proyecto de diseño de IA. Déjame entrar dentro del propio equipo. Tiene apenas este proyecto único llamado AI Finance Design Project. Si queremos agregar proyectos extra, tendremos que ir al plan pagado. Un equipo tiene un proyecto. Pero puedes crear múltiples equipos. Contamos con el equipo de Fitness App que tiene la misma jerarquía. Si cambiamos a eso, Este tiene un proyecto que no hemos renombrado, y el proyecto aún no tiene archivos de diseño También podemos crear un tercer equipo. A lo mejor tenemos un equipo de aplicaciones de marketplace. Crea eso. Vamos a saltar por ahora. Como puedes ver, tenemos tres equipos hasta el momento y puedes seguir creando equipos. Permítanme volver a las finanzas de IA. O Equipo de finanzas de IA El equipo tiene un proyecto, un proyecto gratuito llamado AI Finance Design Project, y cada proyecto puede tener tres archivos de diseño. Este proyecto de diseño de IA cuenta con tres archivos de diseño. Si queremos uno extra, también tenemos que pagar tres archivos Figma Design y FIJ Ahora, una vez que estamos dentro de un archivo de diseño, también tenemos acceso a tres páginas, pero por cierto nunca uso más de una página. Si por ejemplo, abro la aplicación móvil, haga doble clic en esa, el archivo de diseño de la aplicación móvil. Estamos en la página uno ahora mismo. Si queremos páginas extra, podemos venir aquí. Estamos en la página uno. Puedo agregar una página extra, página dos, entrar, página tres, entrar, Si trato de agregar una página extra, no puedo obtenerla. Así que normalmente solo uso una página. Permítanme simplemente borrar eso eso, y ahora me queda esta sola página. Déjame colapsar eso. Aquí es donde ahora puedo venir y comenzar agregar capas de elementos dentro de esta primera página. Para mí, normalmente es más que suficiente para mi proyecto, y ya lo verás. Pero ahora mismo, quería que echáramos un vistazo rápido a la jerarquía y cómo se relacionan los proyectos, archivos y páginas. No vamos a tocar Fig Jam porque ese es todo un curso por sí solo. A lo mejor voy a hacer eso más tarde. Ahora mismo, solo nos estamos enfocando en diseñar este dashboard usando el editor Figma No nos estamos enfocando en Fig Jam. Ahora bien, con eso dicho, creo que esta lección se ha vuelto mucho más larga de lo que esperaba. Pero tenía muchas ganas de conducir eso a casa. Yo quería que tuvieras esa claridad porque esta es una de las partes más confusas de Figma para los principiantes. Realmente no entienden qué es un archivo, qué es un proyecto, qué es un equipo. Ahora que entiendes todo eso, creo que estás listo para comenzar a construir nuestro tablero. En la siguiente lección, veamos cómo crear la barra lateral. Te veré en breve. 6. Agrega un fondo y un logotipo: Entonces ahora estamos listos para comenzar con el diseño real del tablero, y decimos que vamos a comenzar con la barra lateral. Entonces como puedes ver, lo primero que tenemos que hacer es importar el logo. Entonces, volviendo a nuestro espacio de trabajo, ¿dónde está? Aquí estamos. Entonces ahora, estamos trabajando en la versión de la aplicación web de nuestra aplicación. Entonces voy a hacer doble clic en eso y ahora aquí estamos. Lo primero que queremos hacer es crear la pantalla real. Para ello, seleccionaré esta herramienta y una vez que la seleccione, va a revelar aquí varias plantillas con las que podremos comenzar rápidamente. Debido a que esto es un escritorio, quiero seleccionar, déjame colapsar el teléfono y expandir el escritorio. Después elegiré el Macbook Pro de 16 pulgadas. O simplemente, vamos a elegir eso. Ahí vamos. Por supuesto, como pueden ver, si selecciono esta herramienta una vez más, si quisieras diseñar para teléfonos, puedes elegir el teléfono que quieras aquí. Con eso, lo siguiente que queremos hacer, permítame simplemente volver a nuestra referencia. Quiero agregar aquí esta tenue línea. En primer lugar, agreguemos el fondo. Volviendo, vendré aquí y seleccionaré la herramienta rectángulo. Si no puedes ver la herramienta de rectángulo, haz clic en el menú desplegable y selecciónala de la lista. Entonces solo arrastraré y cubriré toda la pantalla con ella. O marco. Con eso, quiero seleccionar un muy oscuro En primer lugar, cambiemos al azul. Digamos que azul, y luego es a tal vez ese azul oscuro así. Yo solo lo estoy haciendo freestyle, pero para ti, tienes que trabajar con códigos de color específicos Aquí está el código de color. Si quieres usar los colores que estoy seleccionando. Hagámoslo más oscuro hasta ese punto. Ese es el código de color. Ahora permítanme seleccionar este menú desplegable y elegir la línea. Seleccione para limitarlo solo a arriba e abajo y no moverse de izquierda a derecha. Puedes mantener presionado el turno. Eso significa que solo se moverá hacia arriba y hacia abajo para una línea vertical de tasa de arco. Y ahí vamos. Quiero seleccionar la línea en sí y seleccionar el color del trazo. Quiero ir a esto y arrastrarlo tal vez hasta ese punto. Sólo para asegurarse de que está oscuro. Creo que ese es un buen lugar. Ahora para importar el logotipo, voy a hacer clic en este menú desplegable archivo lugar imagen Como pueden ver, tenemos un atajo Control Shift K. Simplemente puedo hacer click en cualquier parte aquí, luego Control Shift K. Se abrirá el Explorer y podré ir directamente a donde tengo esos elementos. Tengo esta llamada de polo activos. Tenemos el logo aquí si quieres usar este logo y pinchando en cualquier lugar y arrastrando Colocará el logo aquí. Entonces mantendré presionada la tecla shift y luego seleccionaré una de las esquinas y la arrastraré para redimensionarla. Si no mantienes presionado el turno, el marco se moverá por todos los lados, pero si mantienes presionado el turno, solo se moverá proporcionalmente Recuerda, controla el turno K, haz doble clic, luego selecciona en cualquier lugar y arrastra para importar. Entonces ahí vamos. Creo que vamos a parar esta lección aquí mismo. Hemos aprendido a crear el fondo, agregar esa línea, cambiar colores e importar una imagen. Esa es también la misma manera de importar cualquier otro tipo de imagen que quieras importar. Así que paremos ahí mismo por ahora. En la siguiente lección, veamos cómo crear un botón. Entonces te veré en breve. 7. Crea los buttons de la barra lateral: Bienvenido de nuevo. Ahora que hemos creado un fondo y hemos agregado el logo, es el momento de crear los botones. Déjame acercar manteniendo pulsado el control y desplazándome con la rueda del ratón Después manteniendo presionada la rueda del ratón sola. Puedo arrastrar y colocar esto en el medio para que podamos verlo. Ahora, te darás cuenta aquí, tenemos algunos textos y un icono. Y claro, tenemos el botón de fondo. Cambiando de nuevo aquí. Mantener pulsado el control y desplazarse con la rueda del ratón Suelta el control, mantén presionada la rueda del ratón y arrastra. Quiero venir aquí y seleccionar esta herramienta de rectángulo y arrastrar y soltar y arrastrar y soltar en ese lugar. Ahora, notarás que tiene esquinas afiladas. Para darle esquinas redondeadas, podemos dar click aquí. Y darle tal vez diez enter, y creo que ese es un buen botón de esquina redondeada. Ahora, por supuesto, en nuestro diseño de referencia aquí, esto es más ligero que el fondo. Seleccionando esto, iremos aquí al campo. Seleccione el fondo. Creo que este es el color de fondo que seleccionamos. No, ese es el color de fondo porque ahora lo podemos ver, pero ahora quiero que sea más claro. Quizá hasta ese punto. Sólo estamos tratando de jugar con los colores. Pero recuerda, si es una marca real en la que estás trabajando, necesitas usar los colores de la marca. Sé creativo con ellos. Creo que eso me gusta. Lo siguiente que quiero hacer es seleccionar el texto y hacer clic en cualquier lugar, no necesariamente dentro del botón. También puedo hacer clic aquí y escribir resumen. Haga clic afuera o en cualquier lugar aquí. Después selecciona eso. Hagamos que sea el tamaño 16 y el texto 16, así como así. Puedes cambiar la fuente si quieres. Ahora mismo es ter. Podemos seleccionar tal vez Monat Enter. Podemos cambiar el peso para que pueda seleccionar negrita. Ahí vamos. Ahora lo siguiente que queremos agregar es el icono. Entonces cambiando de nuevo, notarás que ya había abierto una pestaña aquí para iconos vectoriales, y se llama icono plano o icono plano, dependiendo de cómo quieras pronunciarlo. Entonces voy a escribir lo que tenemos aquí. Analítica, por ejemplo, enter. Todo bien. Entonces aquí estamos. Tengo este análisis aquí mismo, y ya estoy conectado. Si no estás conectado, no podrás editar los iconos antes de descargarlos. Si selecciono el icono en sí, aparecerá la opción de editar el icono. Haré clic en el icono de edición. Mientras esta está seleccionada, haré clic en el color y lo cambiaré a color blanco. Después descárgala. Seleccionaré el tamaño 64 pixeles. Descarga gratuita. Ahora que lo tenemos descargado. Déjame volver a cambiar aquí. Lo tenemos descargado. Puedo arrastrarlo y soltarlo aquí. Mantenga pulsada la tecla Mayús, luego seleccione una esquina aquí y cambie su tamaño. Colócala ahí. También puedes venir aquí y hacer clic en este icono aquí mismo para mostrarlo en carpeta. Se abrirá donde se encuentra en tus descargas. Y luego puedes arrastrarlo y soltarlo ahí. Suprimir eso. También puedes controlar el turno K, recuerda. Después ve a descargas. Haga doble clic en eso y arrastre manteniendo presionada la tecla Mayús para cambiar su tamaño proporcionalmente Esas son todas formas diferentes de hacerlo. Ahí vamos. Déjame solo Posicionar eso. Ahora, una forma de posicionar los elementos dentro su obra de arte es seleccionar tal vez el texto, el icono y finalmente, el botón. Ahora cuando alineemos los ítems, habrá alineados en referencia al botón. Si vengo aquí para alinear los centros verticales y hacer clic en eso, como has visto, se han movido relación con el fondo del botón en sí. No se mueve, pero todo lo demás se ha movido porque es el último elemento que seleccioné. Entonces una vez más, si pongo eso ahí y quiero que esté verticalmente en el centro, puedo seleccionarlo, luego el botón en sí, el ítem al que quiero que el otro ítem esté alineado. Y luego haga clic en este centro de alineación vertical, y ahora está en el centro del último elemento que seleccionamos. Entonces con eso, voy a seleccionar estos tres. Controla G y agruparlos y renombrarlos al botón uno. Ahora bien, si mantengo pulsado Alt, como pueden ver el cursor del mouse parece estar duplicado, y eso es una indicación de que estamos a punto de duplicar este botón. Y arrastrando mantén presionado el turno para limitarlo que no se mueva hacia la izquierda y hacia la derecha Mantenga el turno, suéltelo ahí mismo y luego controle D para continuar duplicándolo. Control D, y ahora tenemos varios botones. Ahora voy a repetir el proceso para estos otros botones, el mismo proceso de edición de este texto, seleccionaré este texto, cambiaré estos dos órdenes. Entonces iré a icono plano o flatcon, y tal vez buscaré pedidos Déjame solo buscar órdenes. Solo busca bonitos iconos creativos. Déjame ver las ventas. Todo bien. Entonces L et me seleccionamos eso. Icono de edición. Mientras se selecciona esta, Blanca descarga PNG 64 descarga gratuita. Se ha descargado. Vuelva a cambiar aquí. Acercar. Ve aquí, arrastra y suelta eso. Mantenga presionado el turno, obtenga una esquina. Seleccione esto, quítelo. Ahora, cuando tenga un grupo y desee seleccionar un elemento dentro de ese grupo, mantenga presionado el control, puede seleccionar un solo elemento dentro de cualquier grupo. Si suelta el control, no podrá seleccionar elementos dentro del grupo a menos que haga doble clic. Ahora quiero reposicionar esto, mantén presionado turno. Y voy a dejar eso ahí mismo. Entonces voy a repetir el mismo proceso para el resto de los botones, y te veré una vez que termine. Ahora, por si acaso encuentras que un artículo no está dentro de un grupo en el que querías estar. Por ejemplo, este icono ahora no está dentro de este grupo, está afuera. Si selecciono este grupo, es el botón tres, y el icono está aquí arriba. Aquí está el grupo, y aquí está la billetera. Yo sólo puedo arrastrar la cartera al grupo tres, así como así, dejarla caer ahí. Ahora si selecciono el grupo, cada uno solo grupo. Entonces mensajes, vamos a los mensajes. Déjame arrastrar esto hasta el fondo así. Cambia eso a la configuración. Seleccione la herramienta de selección. Entonces aquí voy a. Seleccione eso. Dit el icono. Cambia el color a blanco, descarga, PNG, 64, descarga gratuita. Vuelve aquí. Arrastre, mantenga presionada la tecla Mayús. Por supuesto, está afuera, este es el botón número seis, entonces está automáticamente dentro, así que no hay problema. Mantenga presionado el control para seleccionar este icono, elimínelo , mantenga presionado el control para seleccionarlo. Vamos a colocarlo ahí. Tal vez mantenga presionado el turno y seleccione eso. Está correctamente alineado. Sólo voy a arrastrar eso. Espero que hayas seguido el proceso que hicimos con el primer botón y ahora tienes un par de botones. Creo que este es el final de esta lección. En la siguiente lección, veamos cómo crear la barra de búsqueda. Te veré en breve. 8. Crea la barra de búsqueda: Bienvenido de nuevo. Ahora es el momento de crear la barra de búsqueda. Vamos a emplear los mismos principios que empleamos aquí mismo. Volviendo a nuestro editor. Aquí estamos. Lo primero que tenemos que hacer es seleccionar esta herramienta rectangular. Sólo voy a arrastrar y a lo mejor soltar cuando llegue a ese punto. Ahora, claro, necesito darle esquinas redondeadas. Lo seleccionaré y le daré 50 para asegurarme de que esté completamente redondeado. Como puedes ver, tenemos este ícono de búsqueda. Déjame acercar, buscar. Entonces voy a ir a icono plano. Después busque Buscar Entrar. Y aquí vamos. Tenemos tantos íconos de lentes aquí. Vamos, déjame ir con éste. Voy a hacer clic en el icono de Eddie. Cambia eso a No, déjame hacerlo grisáceo. Entonces 64 descarga gratuita. Volviendo aquí. De hecho, permítanme cerrar así a todos estos otros. Ahora, volviendo aquí, iré a las descargas y arrastraré esto aquí. Ahora como se puede ver los dos colores son casi similares, así se puede ver la lente. Seleccionaré la barra de sarge y la haré quizá más oscura, un poco más oscura, así como así Ahora puedes ver la lente, y mantendré presionada la tecla Mayús para redimensionarla. Incluso podría ponerlo en este otro extremo porque la curva está en el lado izquierdo del lado derecho, así como así. Guardar. Y me olvidé de encender mi luz aquí. Entonces espero que ahora me puedan ver claramente. ¿Qué más tenemos aquí? Tenemos estos botones, notificaciones, modo oscuro y usuario. Entonces volviendo a cambiar aquí. Notificaciones. Déjame seleccionar ese cambio de color. Descargar PNG 64 Pixels, descarga gratuita. Necesitamos entrar en modo oscuro. Podemos seleccionar tal vez esto o tal vez esto, editar icono. Vamos a cambiarlo a blanco, descargar, PNG, descarga gratuita, y por último, er. Seleccionaré esto o tal vez este ese icono cambie eso a blanco. Descarga esa descarga gratuita de PNG 64. Ahora, volvamos aquí, notificación. Y haz eso. Notificación, déjala ahí, brillo y contraste y usuario. Seleccionando los tres manteniendo pulsada la tecla shift para cambiar su tamaño. Ahora los arrastraré y colocaré. De hecho, ahora que tengo los tres seleccionados, puedo alinearlos verticalmente en relación entre sí. Creo que ahora estamos empezando a tener un buen diseño. Creo que por ahora lo vamos a dejar ahí. Veamos lo que tenemos a continuación. En la siguiente lección, veamos cómo crear estas tarjetas. Vamos a comenzar con un texto aquí y luego crear una tarjeta. Te veré en breve. 9. Tarjeta de ganancias totales: Ahora es el momento de comenzar a crear las partes principales del tablero, y estas son las tarjetas. Pero antes de hacer eso, antes que nada, agreguemos este texto. Voy a mantener presionada Control para seleccionar este texto, copia triple clic. Entonces voy a cambiar de nuevo a mi editor aquí mismo. Seleccione el texto a. Haga clic en cualquier lugar de allí y luego controle V para pegar. Todo bien. Así que lo colocaré ahí mismo. Y voy a venir y triple clic aquí, copiar ese Hall abajo en aquí, y arrastrar triple clic pegar. Déjame usar los botones de flecha de mi teclado. Ahora, para ti, estarás escribiendo. Permítanme seleccionar T, y luego escribir salud financiera. Estado, escape o clic en cualquier lugar fuera. Ahora puedes ir al texto. Puedes cambiarlo a Monsat, o a cualquier otro teléfono que quieras Entonces puedes aumentar el tamaño del teléfono. mejor digamos 36, y tal vez digamos que el peso es negro. Sólo te estoy enseñando cómo hacerlo si no lo estás copiando pegándolo de alguna parte Vamos también esta es una visión general de su situación financiera este mes. Al hacer clic en cualquier lugar fuera. Ahora que tenemos eso, puedo cambiar esto tal vez a la talla 12. Digamos 14, y cambiemos esto de nuevo a lo regular. Básicamente, así es como hacer eso. Pero ahora permítanme simplemente borrar eso porque ya tengo mi texto. Ahora queremos crear esta tarjeta. Antes de hacer eso, agreguemos este botón. Simplemente seleccionaré esto, mantén pulsado y arrastraré eso. Hasta ese fin. Después mantendré pulsado el control para seleccionar este fondo en sí. Ahora que está seleccionada, puedo presionar I para que aparezca la herramienta cuentagotas y puedo pasar el cursor sobre esta naranja, y eso aplicará este color naranja al artículo que esté seleccionado actualmente Entonces haz clic en eso. Ahora nuestro botón tiene ese color. Esto decir es crear nuevos productos. Crear nuevos productos. Haga clic en cualquier lugar aquí. Mantenga pulsado Control para seleccionar el botón, quítelo, mantenga presionado Control, para seleccionarlo. Y no te preocupes por la organización. Sé que aquí todo está desorganizado, pero eso es una lección por sí solo Vamos a organizarlo todo porque tendremos que agruparlo todo en consecuencia. Lo siguiente que queremos hacer es crear esta tarjeta aquí. Sólo voy a aguantar para duplicar esto y dejarme colocarlo aquí mismo. De hecho, voy a desagruparlo por ahora, haz clic derecho en grupo, y ahora ya no está agrupado Quiero redimensionar este 2255 por De hecho, déjame hacerlo manualmente El ancho es 259, la altura es 252. Hagamos esto 260. Por 26260. Ahora está al cuadrado Quiero seleccionarlo y tocar I para que aparezca el cuentagotas y luego seleccionarlo Después haga clic afuera. Eso le dará ese mismo color que los botones. Vamos a crear la cantidad copiar eso. También puedes simplemente arrastrar esto, seleccionar esto, y tal vez dejémoslo a un lado. Digamos 43,210 afuera, haga clic. Pon eso ahí. Haga doble clic en esto. A lo mejor puedo llamar a este signo de dólar, hacer clic afuera, arrastrarlo y soltarlo en algún lugar de aquí. O necesitamos hacerlo un poco más ancho. No necesariamente tenemos que tenerlo como rectángulo. Ganancias totales. Simplemente voy a arrastrar no, seleccionar esto. Ganancias totales. Así como así. Ahora tenemos estos tres, celdas de tienda, anuncios de YouTube, anuncios de Google. Podemos seleccionar esta herramienta. Podemos seleccionar este rectángulo, crear algunos rectángulos diminutos manteniendo presionada la tecla shift, quiero o adentro por control y rueda del ratón Entonces vamos a darles una esquina redondeada de tal vez tres, así como así. Al y arrastra esto. Venta en tienda. Anuncios de YouTube Anuncios de Google. Así que haga clic en cualquier lugar afuera. Seleccione eso y aquello. Antes de hacer eso, hagamos esto regular. Hagámoslo tal vez Talla. Seleccione ese Agregar y luego controlar D para repetir el mismo movimiento. Anuncios de Google Ads en YouTube. Ese es el ingreso que hicimos de todo eso. Ahora cambiemos los colores. Puede darle a esto un gris claro. Cambiemos al azul, luego dale ese azul claro. Vamos a darle a esto tal vez algún color rojo. ¿O debería decir color naranja? Sí, vamos de hecho, vamos a sombrero yo para sacar el cuentagotas dos mientras se selecciona este, yo, y luego toque eso Y luego también tenemos un bonito verde. Entonces abriendo esto creo que es un bonito verde. Ahora bien, en el diseño de referencia aquí, si mantengo pulsado el control y selecciono esto, como pueden ver, este es el icono de gráfico Pi. Entonces cambiando de nuevo aquí, puedo ir al icono plano. Gráfico pi, gráfico Pi, enter. Ahora creo que ya está, pero quiero algo más sencillo. Déjame seleccionar eso. Editar icono, y ahora tenemos tres colores. Puedo cambiar esto a que color era este. Déjame volver a aquí, seleccionando esto, copia eso. Control C para copiar este código de color, vuelve aquí, pégalo ahí. Oh, se supone que debemos entrar aquí. S elige esta naranja. Copia eso, cámbiate aquí. Ese es el color azul. Haz doble clic en esto, pégalo ahí, y ahora es naranja. Por último, tenemos este verde, haga doble clic en eso, Control C, seleccione esto. G aquí, haga doble clic en eso, ingrese. Ahora tenemos eso. Descargar, PNG. Vamos a descargar 512. Descarga gratuita, y ahí vamos. Ahora, entrando aquí, podemos arrastrar y soltar esto aquí. Mantenga presionado el turno, redimensionarlo. Y ahora cada porción del Pi está representada por estos valores aquí. Déjame mantener presionada la tecla shift y seleccionarlas todas, mantén presionada la tecla shift para cambiar su tamaño. Arrastra y ponlos ahí. Selecciona el texto en sí, y vamos a darle tal vez tamaño diez o 11. Ahí vamos. Ahora también dejémosme mantener presionado el control y acercar, sosteniendo esto y turno, luego aquello. Alineemos eso con el cuadrado pequeño. Sostén eso, luego cambia. Alinea, selecciónalo, mantén presionada la tecla Mayús. Alinea eso. Ahora, seleccionando estos tres en y arrastrando hacia la derecha. Mantenga presionado el turno para moverse en línea recta. Ahora vamos a cambiar de alinear a la izquierda en el texto a escribir align. Déjame seleccionar esto, luego esto, luego esto, y alinearlos a la derecha en referencia a esto, luego arrastrarlos hasta tal vez ese punto. Porque queremos venir y sumar estas cifras, 12.05 3.000 dólares y Signo de dólar 3,522, signo de dólar 10,320 y signo de dólar También podemos seleccionar el texto la figura misma y controlar B para que sea negrita. Controla B o ve directamente aquí y hazlo negro. Pero eso es audaz extra audaz. Cambiando aquí. Estos son un poco débiles, así que seleccionaré a los tres, iré a sentir y los arrastraré hasta ese punto Esto también es débil. Lo arrastraré tal vez hasta ese punto. Ahora, te darás cuenta, necesitamos hacer algún arreglo aquí para que sea un poco más atractivo y organizado. Pero en general, me encanta lo que tenemos hasta ahora. Guarde eso. Ahora, empujemos esto hacia adentro junto con todos estos. Y por último, necesitamos agregar este indicador de desempeño. Entonces, claro, podemos simplemente arrastrar esto. Aguanta, arrastra eso. Entonces vamos a redimensionarlo. 3.8 arriba por 3.8 este mes. Ahora, esto está detrás de esa caja. Así que sólo puedo arrastrarlo y ponerlo encima. Quizá en algún lugar ahí. Todavía no está arriba, así que seguiré arrastrándolo hasta arriba Vamos a colocarlo ahí mismo. U en 3.5%. Haga clic afuera. Lo haré verde. Así que voy a golpear mientras se selecciona este ojo para traer el cuentagotas, así como así, luego controlar B, para que sea audaz Y claro, ahora necesitamos encontrar esta flecha. Así que voy a entrar aquí, cerrar eso, luego flecha. A mí me gusta esto, selecciona eso, edita icono. Cámbialo a ese verde. Volviendo aquí, seleccionaré. No. Volvamos a nuestra obra de arte porque queremos tener este verde preciso. Control C para copiar eso. Vuelve aquí, haz doble clic en esta pasta. Descargar PNG 64, descarga gratuita. Ahí vamos. Vuelve aquí, arrastraré y soltaré esto aquí. Mantenga presionado el turno. Luego gírelo manteniendo presionado el turno para hacer 45 incrementos de ángulo Y haz eso, mantén presionado el turno y empieza a girar. Coloquemos eso ahí. Y ahí lo tenemos. Ahora, de hecho, voy a seleccionar todo aquí. A ver. Sí, todo está seleccionado, Control G. Luego seleccionaré mientras aún esté seleccionado, el grupo, todos bajaré el turno y seleccionaré la tarjeta que se supone que los sostenga, luego ahora alinee todo al centro de eso. Ahí vamos. Entonces, tenemos nuestra primera tarjeta. 10. Assignment: el resto de las cartas: En la lección anterior, creamos esta tarjeta, y te estoy dejando con asignaciones para crear estas tres cartas, una, dos, tres, y como puedes ver, esta es una barra igual a esta, y es de color verde. Si mantengo presionado el control para seleccionar esto, tiene este color azul claro, pero aún tiene esquinas redondeadas y todo eso. Ahora, solo quería dar más aclaraciones para esto, cómo creé esto fue, si me acerco, como pueden ver, esto de aquí, es un rectángulo con esquinas redondeadas, pero en el nivel tres. Entonces por eso no se están reuniendo así en el centro. Así que volviendo al nivel tres. A esto se aplica el mismo caso. Pero ahora esto no tiene un color de campo, tiene un color de trazo. Y básicamente coloqué esto dentro esto para crear este efecto de niveles. Espero que tenga sentido. Y para esta última, lo que hice fue Lo mismo que hice aquí. Fui a inundar icono y busqué qué es esto, por cierto, Fecast Vamos a entrar aquí y ver si podemos conseguir un pronóstico. ¿Qué conseguimos? Todo bien. Ahora bien, lo que estamos obteniendo es el pronóstico del tiempo. Entonces creo que el pronóstico de ventas. Sí. Ves documentos como estos para representar pagos pendientes. Pero como puedes ver, esta sección aquí es bastante similar a esta, y eso es algo que puedes hacer muy fácilmente. Yo solo quería ayudarte con esa aclaración para que no te quedes atascado. Veamos qué se te ocurrirá. Además, siéntete libre de crear algo propio. No hace falta crear estas barras o estas aquí. Veamos si puedes ser creativo y diseñar algo diferente para las tarjetas. En la siguiente lección, veamos cómo agregar estos gráficos y gráficos de barras. Entonces te veré en breve. 11. Agregar gráficos y gráficos: Ahora es el momento de trabajar en esta tarjeta de aquí y probablemente esta. Volviendo a nuestra obra de arte. Quiero seleccionar este grupo y esta tarjeta que los sostiene, y de hecho, agruparlo todo. Control G. Ahora es una sola carta que puedo arrastrar por ahí, o hay este número aquí que también mantengo presionado la nave para seleccionar ambas, Control G. A. No puedo poner eso ahí porque está en un grupo separado. Déjame antes que nada, desagruparlo. ¿Qué hay aquí? Déjame simplemente desagruparlo. Ahora tenemos 3.5. Déjame arrastrarlo dentro del grupo tres. Ahora está dentro de ese grupo. Todo bien. Ahora déjeme mantener pulsado y arrastrar tal vez hasta un espacio de 25. Y hacer el mismo control D. Ahora el espaciado es igual a través de todo. Pero claro, voy a ampliar esto. Pero antes de hacer eso, mantén presionadas las teclas shift y shift y arrastra ese espaciado de 25 una vez más, suéltalo ahí mismo. Ahora, borra eso, luego desagrupa esto porque quiero agruparlo una vez más, y desagruparlo una vez Quiero separarlos en individuales Gracias. Elementos, Permítanme borrar todo eso. Volvamos a cambiar a esto. Todavía tiene esto, así que me quedaré con eso. Pero lo que quería hacer es cambiar el tamaño de esto para asegurarme de que está llegando a este punto Pero quiero expandirlo un poco para asegurarme de que este ritmo aquí sea lo mismo que este Eso significa que vamos a mover el botón. Selecciona el botón y mantén presionada la tecla Mayús, selecciona esto luego alinea el botón a la derecha en referencia a esto. mismo caso aplica a estos, mantenga pulsado el control g para agruparlos. Después mantén pulsada la tecla Mayús y alinéalas al botón así como así. Ahora, volviendo a esto, esto está en el lado derecho. Así que mantén presionado el control para acercar con la rueda del ratón. En primer lugar, permítanme solo agrupar esto. Selecciona eso, eso y luego lo que los sostiene y alinéalos así. Después controla G para agruparlos. Ahora este es un grupo. También mientras se selecciona esto, seleccionaré eso y ese control G para agruparlos juntos. Ahora puedo llevarlos como un solo grupo, así como así. Quiero seleccionar esto y este mantenga pulsado en. Ahora están detrás de eso. Entonces los voy a arrastrar hasta arriba. Después, mantén presionado el turno. No. Vamos a cambiar el tamaño En primer lugar, ¿qué dice? Ventas la semana pasada. Ventas la semana pasada, y esto debería ser blanco. Así es como te desempeñaste la semana pasada. Bien, así como así. Sequemos y pongamos eso ahí. Ahora, podemos hacer que este tamaño pueda usar la rueda del ratón. Es decir, puedo usar las teclas de flecha del teclado. Creo que 28 está bien. Empujarlo hacia abajo tal vez a 13. Ahora, digamos 12, y luego empujarla hacia arriba, empuja esto hacia abajo. Creo que esa es una buena posición. De hecho, empujemos esto hacia abajo, solo para alinearlo con esto. Mantenga el control para seleccionar la figura en sí. Selecciona las ganancias totales, empuja hacia arriba. Seleccione este grupo, empújelo hacia arriba más cerca del número. Ahí vamos. Guarde eso. Ahora, para agregar estas tablas y gráficas de Pi, hagamos clic derecho en cualquier lugar aquí. Hover plug-ins, administrar complementos. Eso sacará a colación los plug ins pop up. Ahí podemos buscar cualquier plug in que queramos. Vamos a escribir gráfico. Y creo que esto es lo que necesitamos gráficos. Por Sam Mason. Voy a hacer clic. Déjame decir “Corre”. Sí, y esto es todo. cambiar el número de puntos de datos. Lo dejaré a las diez. Podemos decidir si queremos que sea una dispersión o área o barra Pi D un gráfico, volveré a cambiar a línea. Podemos cambiar el rango, tal vez esto sea de 10 mil. Eso cambia a 10 mil. Podemos cambiar el rango del conjunto de datos. Digamos dos. De hecho, hablando de bar, déjame cambiar eso a bar, y puedo seguir adelante y decir agregar gráfico. Ahora, se colocará en tu obra de arte, y si me acerco, notarás que el texto es negro y estas líneas apuntando al texto. En primer lugar, y no creo que esté agrupada. Si uso la rueda del mouse, manteniendo presionada la rueda del mouse para arrastrarla no está agrupada. Voy a mantener pulsado. En primer lugar, déjame acercar con control y rueda del ratón. Después seleccionaré el texto, este otro texto. De hecho, no necesito la grilla. Déjame seleccionar la cuadrícula y eliminarla. No lo necesito. Ahora los textos, los otros textos, y la barra. Ahora bien, si los arrastro, lo único que queda son las barras de rejilla. Control G para agruparlos. Todo bien. Ahora déjeme arrastrar esto y ponerlo aquí. Mantenga presionado el turno para encogerlo. Ahora te darás cuenta porque lo hemos encogido, el texto se ha derrumbado. Mantendré pulsado el control para seleccionar textos individuales, para seleccionar varios textos juntos. Mantendré pulsado el control y el turno. Y voy a tirar de eso para ampliar el soporte del texto. A continuación, mantenga pulsada la tecla Control y Mayús para seleccionar el texto una vez más. De hecho, déjame seleccionarlo todo así. Después cambia el color a blanco. Voy a seleccionar hecho, déjame seleccionar eso. Mantenga pulsado el control. Es una tarea un poco tediosa, pero tenemos que hacerlo, mantener pulsado el control y cambiar para seleccionar los diferentes Déjame empezar por arriba, control, y este otro al final, mantenga pulsada la tecla de turno y control. Entonces seleccionemos los del medio. Y este principal. Cambia eso a blanco. Repetimos lo mismo para esto. Mantenga pulsado Control. Control de cambio. Voy a seleccionar estos. Y voy a cambiar eso a blanco. Ahora, para este color, el color azul, lo seleccionaré, luego mantendré el turno de control. Presiona la tecla del ojo en el teclado para abrir el cuentagotas y selecciona este color solo por uniformidad Creo que me gusta lo que tenemos hasta ahora. Echemos un vistazo a qué más tenemos. Consigamos este tipo de gráfico. Voy a hacer clic derecho a los enchufes. Ahora tenemos gráficos porque es uno de los recientes usados recientemente. Vamos a darle a este cinco. Vamos a darle tres puntos. Ocultar cuadrícula, y ahí vamos. Agrega gráfico, y ese es el gráfico que tenemos. Ahora voy a repetir el mismo proceso. Asegúrese de seleccionar todos los elementos del gráfico. No creo que haya dejado nada atrás. En primer lugar, permítame seleccionar esto. Si seleccioné antes de agrupar todo, ahora tengo la opción de cambiar el color diferente. Puedo cambiar el color de relleno a blanco, todo lo que tiene un color de campo es blanco. Después trazo de color a blanco, todo lo que tiene un trazo. El mismo caso aplica a este grupo. Color de relleno blanco, color trazo blanco. Ahora, quiero seleccionar esto. Es amarillo, pero quiero que sea de este color naranja. Para esta segunda, quiero que sea de ese color azulado Ahí vamos. Ahora puedo seleccionar esto. Control G para agruparlo. Entonces puedo encogerlo. Tengo que empujar esto. Déjame deshacer eso. Ahí está este recorte que está sucediendo. Creo que permítanme simplemente expandirlo hasta ese punto. No sé qué es eso. Déjame deshacer eso. Después arrástralo una vez más. Déjame poner eso ahí, luego solo redimensionarlo mientras aún estamos ahí No sé por qué está pasando esto. Pero está bien. Ahora, mantenga pulsado Control. ¿Qué es esto? No sé qué es esto. Creo que es el clip fuera del gráfico. Pero honestamente, no sé qué es, pero no va a impedir que hagamos nuestro trabajo. Sostener pulsado. Permítanme simplemente borrar eso. Suprimir eso. Mantener pulsado el control y el turno para seleccionarlos. Ahora puedo ampliar eso. Ahí vamos. Control S para guardar eso. Y ahora tenemos un bonito tablero. Ahora, claro, acabo de duplicar estos. Por supuesto, el tuyo debe ser único. Cada uno de ellos debe ser diferente. Yo habría hecho lo mismo por esta parte porque se trata de venir aquí gráficos correctos. Y esta debería ser área y repetir lo mismo. Pero no voy a hacer eso porque eso es algo que puedes hacer tú mismo. Mi objetivo aquí es darte una buena guía para que la sigas y te ocurra tu propia versión creativa o el tablero. Lo que voy a hacer es seleccionar este y este y estos textos, y esto. Entonces finalmente, este control G para agruparlo todo junto. Entonces mantén presionado para duplicarlo. Y luego con un espaciado de 25 ahí, voy a dejar caer eso ahí. Y parece que en realidad no hemos agrupado esto porque está en un grupo diferente, pero no hay problema. Vamos a hacer algo de limpieza cuando estemos organizando todo Entonces voy a arrastrar esa manteniendo presionada la Alt para colocarla ahí, y todo lo que tengo que hacer es cambiarla para decir ventas el mes pasado, pero no voy a hacer eso. En la siguiente lección, hagamos algunos toques finales ya que te expliqué cómo vas a hacer esto. Así que eso es todo por ahora, y te veré en la siguiente lección. 12. Assignment: finalización de las cartas: Entonces ahora mismo es el momento de otra tarea, y va a ser una tarea muy fácil y rápida. Ahora bien, si miras esta sección de aquí mismo, tiene estos artículos vendidos más recientemente en tu inventario, y notarás, por supuesto, estos son íconos que descargué de ícono plano. Y eso es algo que ya sabes, visita Flacon para descargarlos. La otra cosa que notarás es este rubro y este subtítulo es bastante parecido a lo que ya tenemos aquí Eso es algo que puedes crear rápidamente. Por último, tenemos estos cuadrados de línea discontinua aquí mismo. Crear un cuadrado de línea discontinua es muy fácil. Todo lo que tienes que hacer, de hecho, déjame mostrarte muy rápidamente cómo hacerlo. Volviendo a nuestro trabajo. Voy a mantener presionado el control, luego seleccionarlo, luego afuera y arrastrar para duplicar eso con ese duplicado, de hecho, está agrupado. Déjame solo agruparlo. Grupo. Una vez más, grupo, y ahora esta es una sola, y ahora esta es una tarjeta individual. Mientras esté seleccionada, iré a trazo. Y agrega y ahora tiene un trazo. Entonces restaré el campo para deshacerme del campo. Ahora bien, si acercamos el zoom, notarás que es solo el trazo. Si bien todavía está seleccionado, puedo darle al trazo este color azulado claro, así como así También puedo aumentar el ancho. Digamos que le puedo dar cuatro. Puedo elegir tener el trazo dentro afuera o en el centro. Ahora mismo está dentro. Podemos ponerlo afuera también. Ahora está afuera, y podemos ponerlo en el centro. Ahora bien, si voy a este menú de aquí mismo, podemos ir a este menú desplegable y cambiarlo a d y eso se convierte en un trazo discontinua Así es como crear esto. Vas a jugar con esos escenarios y a ver qué se nos ocurre. Habiendo descrito todo lo que debes hacer para crear esto, creo que esa va a ser una tarea fácil para ti, y debería ser muy interesante ver qué se te ocurrirá. Esto es muy fácil de crear, solo básicamente duplicar esto o crearlo desde aquí, y luego agregar algunos textos, ir al icono plano y seleccionar un botón cerrado Como puede ver, esto se elimina. Si vas al icono plano, puedes decir tal vez cerrar porque es un ícono cerrado, y aquí estamos. Tómate tu tiempo y completa esta tarjeta, esta, y esta tarjeta de mejora ahora, y te veré en la siguiente lección, donde estaremos hablando de cómo organizar todo aquí. Porque si miras lo que tenemos en mi sitio web de referencia, en mi diseño de referencia, Esta es la referencia en realidad. Si colapso eso, está muy bien organizado, así que te veré en la siguiente lección. 13. Organización de componentes: Bienvenida de nuevo. Ahora es el momento de organizar nuestro diseño o nuestro archivo. Y mirando nuestro archivo de diseño de referencia aquí mismo, cómo lo había organizado. Como puedes ver, tenemos la barra de búsqueda que está en la parte superior. Tenemos la barra lateral, y luego tenemos el contenido principal. Si amplío el contenido principal, también se subcategoriza en diferentes secciones. Al pasar el cursor sobre diferentes partes, notas que todo está muy bien organizado, y solo puedo venir y llevarlo a un lado o aquello y dejarlo a un lado Entonces hagámoslo en nuestro proyecto. Volviendo aquí. Ahora, déjame deshacerme de eso. Ahora, claro, comencemos con la barra de búsqueda. Está conformado por el icono de búsqueda, luego la propia barra de búsqueda. Voy a seleccionar a los dos, luego a Control G para agruparlos. Ahora puedo llevarlos a los dos y hacer. Esto ya está agrupado. Recuerda que seleccionamos a los tres. Ahora mientras ese grupo está seleccionado, puedo seleccionar este otro manteniendo presionado el turno. De hecho, no están alineados. Desde que he seleccionado este último, podemos alinear estos tres con esto. Así como así. Ahora si le pego a Control G, formamos un nuevo grupo llamado grupo 16 y solo puedo llevar todo. Este grupo 16 se puede llamar la barra de búsqueda enter. zoom, mantener pulsado el control y el desplazamiento de la rueda del ratón Ahora, también tenemos estos botones. Recuerda que agrupamos cada botón, así puedo llevar eso solo para confirmar que cada uno de ellos está agrupado. Todo bien. Seleccionaré este botón, mantendré pulsada la tecla Mayús para seleccionarlos todos junto con el logo y esta línea, luego controlaré G para agruparlos. Ahora, si ahora mismo no puedo agruparlos a todos. Si notas ese comportamiento donde has seleccionado todo, golpeas el control G y algunos elementos no están incluidos en el grupo. Puedes desagruparlos, así que yo los desagruparé Ahora son individuos. Ahora déjeme solo buscar al grupo. Es el grupo 16. Déjame llamarlo barra lateral. Ahora puedo llegar al logo del proyecto. Déjame llamarlo logo y arrastrarlo al grupo de barras laterales. Seleccione también esta línea, línea de barra lateral. Ingresa y arrástralo al grupo de barras laterales también. Déjalo caer ahí. Ahora bien, si colapso el grupo de barras laterales, puedo llevar toda la barra lateral así como así. Ahora, recuerden que habíamos creado esto como grupo, así que no hay problema. Este también fue un grupo. Esto no es del todo un grupo porque este texto no se estaba uniendo al grupo cuando probamos Control G. Así que déjame ver. Esto se llama ventas Grupo de la semana pasada. Si bien está seleccionado, solo haré doble clic en la tarjeta de la semana de ventas. Ahora bien, este es el título de la tarjeta de ventas del Grupo 13 la semana pasada. Y ahora puedo arrastrarlo a las ventas la semana pasada tarjeta. Ahora bien, si lo arrastre y lo muevo, se está moviendo junto con un grupo porque es parte del grupo y lo hago un hábito etiquetar cada cosa con su nombre apropiado. Si es esta cantidad aquí, eso no necesita una etiqueta. Pero ahora para esta tarjeta, podemos llamarla tarjeta de ganancias totales. Tarjeta. Oh, ocho. Nosotros etiquetamos lo incorrecto. Por ejemplo, este grupo de aquí mismo, llamémoslo Tarjeta de ganancias totales porque es la tarjeta de ganancias totales. Como puedes ver aquí mismo en nuestra referencia, si selecciono esto, se llama ganancias totales. Si selecciono esto, son ganancias netas. Selecciona estos gastos, así como así, y tiene todo lo demás dentro de él. Volviendo a nuestras tarjetas. Por supuesto, no voy a pasar tiempo etiquetando estas otras partes, pero tú consigues el taladro. Ahora, claro, esto aquí tampoco es del todo un grupo a menos que cambiemos esto. Esto es digamos que esto es ganancias el mes pasado. Mes. Haciendo clic afuera y seleccionando esto. Este grupo es el mes pasado, déjame colapsar eso. Déjame seleccionar esto. Se trata del Grupo 14. Déjame hacer doble clic en él y llamarlo tarjeta de mes de ventas. Ahora, título del mes de ventas. Y déjalo caer ahí. Tarjeta de ganancias totales, que es este botón barra lateral siete, barra de búsqueda. Todo bien. Ahora queremos crear el grupo de contenido principal. Ahora vamos a repetir lo que acabamos de hacer C G. Contenido principal. Si lo escondo, eso es co. De hecho, este texto también debería estar en el contenido principal. Así que vamos a arrastrar y ponerlo ahí y este botón también. Vamos a llamarlo botón de crear. Recuerden, chicos, esto es solo una guía. Tómese su tiempo para organizar cada elemento de la manera que tenga sentido para usted y los miembros de su equipo si tiene un equipo. Entonces, ¿qué es este rectángulo? No sé qué rectángulo es este, si golpeo, y este es el fondo. B tierra. Entonces lo voy a poner en el contenido principal también. Y ahora está por encima de todo, así que voy a arrastrar y ponerlo por debajo de la tarjeta de ganancias totales. Ahora, como puedes ver, la barra lateral no es visible y la barra de búsqueda porque el fondo está dentro del contenido principal y el contenido principal está por encima de la barra de búsqueda. De hecho, no lo hemos puesto dentro. Arrastremos la barra lateral sobre el contenido principal y la barra de búsqueda por encima del contenido principal. Ahora dentro del contenido principal, arrastra el fondo. Justo por debajo de las ganancias totales. Ahora, hagamos doble clic en Macbook Pro, que era el marco y llamémoslo dashboard. Ahora podemos colapsar el tablero, y ahí es donde empezamos si le estamos describiendo este proyecto a alguien. El tablero se compone de la barra lateral y el contenido principal. Y la barra lateral está conformada por todos estos botones, y puedo colapsar los botones. Línea de barra lateral, el logotipo. Puedes reorganizar las cosas. Se puede poner el botón uno encima del botón seis. Ya tienes el simulacro, estoy bastante seguro de que puedes seguir reordenando y organizando todo Antes de compartir este proyecto con alguien, necesitas tenerlo organizado de esa manera. Hasta el momento, creo que hemos cubierto la mayor parte de todo lo que vas a usar la mayor parte del tiempo cuando estés trabajando en Figma. Por supuesto, esta es solo la primera entrega una serie de clases, estaré publicando regularmente sobre Figma desde lo básico hasta las etapas avanzadas Antes de que te vayas, tengo algunas reflexiones finales, me gustaría compartir contigo, así te veré en la lección final. No vayas muy lejos. 14. Reflexiones finales: Solo quiero tomarme un momento para darte muchas gracias por quedarte conmigo hasta el final de esta clase. Espero que te haya resultado informativo y agradable y que ahora te sientas más seguro en tus habilidades de figma. A estas alturas, ya tienes un dashboard totalmente diseñado que podrás compartir con tus amigos o compañeros de trabajo, y estoy muy orgulloso de ti por eso. De hecho, te animo a darte palmaditas en la espalda y tomarte un momento para celebrar porque mucha gente puede iniciar un curso, pero pocas personas logran terminarlo. Y tú tienes. Entonces felicidades por ese logro Si disfrutaste esta clase y la encontraste valiosa, me gustaría pedirte un simple favor. Por favor, tómate un momento, de hecho, menos de un minuto para escribir una reseña y decirle los demás lo que pensabas de la clase. Tus comentarios son increíblemente valiosos porque me ayudan a saber si estoy haciendo un buen trabajo y ayuda a otros estudiantes a descubrir esta clase. Cuando los estudiantes se encuentran con tu revisión de la clase, les resulta fácil decidir si es una buena clase para que tomen. Entonces como mencioné, te llevará menos de un minuto, pero hará una gran diferencia. Simplemente haz clic en la estrella de revisión debajo este reproductor de video y hazme saber lo que pensabas de la clase. Y no olvides consultar mi perfil para más clases sobre UI, UX y diseño web. Tengo una variedad de cursos diseñados para ayudarte a seguir construyendo tus habilidades y avanzando en tu carrera. Porque recuerden, estamos viviendo en un mundo digital. Y tener esas habilidades es crucial. Así que echa un vistazo a mi perfil para más clases. Y una vez que termines de trabajar en tu proyecto de dashboard, no olvides compartirlo aquí mismo con la comunidad. Nos encanta compartir nuestros proyectos para obtener comentarios de compañeros y profesores. Déjame mostrarte un ejemplo de una clase reciente. Aquí hay una clase que publiqué hace un tiempo. Y debajo de la pestaña de proyectos y recursos, aquí hay algunos ejemplos de proyectos que los estudiantes han enviado para obtener algunos comentarios. Entonces todo lo que tienes que hacer es ir a la pestaña Proyectos y Recursos y hacer clic en Enviar proyecto. Y ahí mismo, puedes subir una captura de pantalla de tu completado. No olvides darle un título de proyecto y tal vez una descripción del proyecto. Así que tengo muchas ganas de ver tu proyecto final. Una vez más, quiero decir, gracias por acompañarme en esta clase, y espero verte en la siguiente. Pieza Happy Designing.