Figma: clases de principiante a profesional para crear una aplicación

1. 0000 Figma introducción: Hoy te voy a enseñar todo lo que necesitas saber sobre Figma. Empezaremos desde cero, configurando una cuenta y conociendo la estructura Figma. A lo largo de todo el curso, trabajaremos en un proyecto real para crear una aplicación de seguimiento del estado de ánimo desde el primer trazo hasta el acabado del diseño. Mientras configura un wireframe y Figma, aprenderá sobre todos los conceptos básicos como configurar marcos, agregar formas, texto y color. Luego traeremos vivo el wireframe y configuraremos nuestro diseño de interfaz de usuario. Durante el curso, te guiaré a través de todas las Figma es increíblemente potentes características como el uso de estilos Figma para el color y la topografía. Cómo agregar y usar cuadrículas. Y vamos a aprender sobre la importancia de usar componentes y la varianza es imprescindible para cualquier diseñador de interfaz de usuario de UX. Te mostraré cómo usar restricciones para probar tu diseño en diferentes tamaños de pantalla. Conoceremos la poderosa sección comunitaria Figma. Una vez que terminemos, nos aseguraremos de que nuestro diseño brille en cualquier presentación. Para terminar el curso, te mostraré cómo crear una Team Library y compartir tus archivos con otros diseñadores y desarrolladores. En menos de 2 h de tu tiempo, descubrirás todo sobre Figma que necesites para abordar cualquier proyecto. Empecemos. Esta clase es adecuada para ti. Si eres un principiante total o estás cambiando de cualquier otro software de diseño. Este es un curso de Moody Learning dot io. 2. ¡NUEVA VERSIÓN DISPONIBLE!: Muchas gracias por tomar este curso. Sólo quiero hacerles conscientes de que acabo de publicar una nueva versión de este curso. Entonces, si saltas a mi perfil, ve a Christine Valor o también puedes simplemente buscar Moon Learning Y entonces aquí puedes ver todos mis cursos. Y si pasas por el fondo, normalmente ves los nuevos cursos que acabo de lanzar. Y si haces clic en eso, entonces puedes comenzar de inmediato con el último material y las últimas actualizaciones para el nuevo curso. Tomé en cuenta todos sus excelentes comentarios y encantadores comentarios que obtuve en los últimos dos años con el antiguo curso. Así que lo cambié un poco y ahora son más conferencias de tamaño bocado. Algo que realmente te gustó en los otros cursos de deep live. Entonces eso significa que puedes saltar a los diferentes temas más rápido. Y viene con un archivo de ejercicios, para que puedas trabajar a mi lado en todo lo que veas en la pantalla. Agregué algunas profundidades más a temas como la creación de prototipos. Y por supuesto vamos a estar cubriendo todos los últimos lanzamientos del nuevo curso como variables Figma. 3. 0101 ¿Qué es Figma? ¿Quién hace la codificación?: ¿ Qué es Figma? En pocas palabras, Figma es un software de diseño de interfaz de usuario, también llamado software de diseño de interfaz de usuario. En Figma, puedes crear wireframes interactivos, configurar diseños de interfaz de usuario muy avanzados, y también crear prototipos impresionantes. Lo bueno es que Figma funciona tanto en Mac como en PC. Podrías usarlo en un navegador o a través de una app. Figma te da todas las herramientas para configurar un diseño para web o app. Cosas como componentes de trabajo, configuración de estilos y uso restricciones para el diseño receptivo. Realmente es la suma de sus increíbles características las que hacen que Figma sea tan especial y por lo tanto, el líder de la industria. Es basado en la nube, lo que la convierte en la opción ideal para colaborar con otros diseñadores o compartir su diseño con desarrolladores. Ahora, mucho de las veces escucho la pregunta, así que aguanta, si diseñé un sitio web en Figma, ¿cómo se obtiene de Figma online? ¿ Cómo se convierte en un sitio web real? ¿ Figma hace eso? Bueno, lo siento, pero no. Figma te da todas las herramientas para configurar un sitio web tal manera que los desarrolladores puedan darle vida con código. Figma sí te da grandes herramientas, por ejemplo, la herramienta Inspeccionar donde puedes ver fragmentos CSS. Pero esto no es realmente suficiente para construir un sitio web completo desde Figma. Realmente necesitas un desarrollador calificado. También podrías usar una herramienta como Webflow para un sitio web realmente simple, y usar Figma como tu base para configurar tu diseño y planificarlo. Piénsalo como en los viejos tiempos, diseñando un folleto, usarías algo como InDesign u otro software. ¿ Este software imprimió tu folleto? Por supuesto que no lo hizo. Aquí es exactamente lo mismo. 4. Proyecto de curso 0102: lo que vamos a construir: Bienvenido a tus primeros pasos en Figma. Quisiera presentarles el proyecto en el que estaremos trabajando durante este curso ya que aprenderemos todo sobre ejemplos reales. necesitas absolutamente ningún conocimiento previo ya que comenzaremos en cero e registraremos una cuenta gratuita de Figma. Durante la primera mitad del curso, reconstruiremos un Wireframe dibujado a mano, dondequiera que te presentaré todos los conceptos básicos de Figma. Durante la segunda parte, transformamos nuestro wireframe en un diseño de interfaz de usuario. Cubriremos todos los aspectos y características que Figma tiene para ofrecer. En la parte final, te enseñaré a compartir archivos con diseñadores y programadores. Permítanme darles una visión general del punto de partida de nuestro proyecto. Aquí está el Wireframe dibujado a mano que estaremos trabajando. Estaremos construyendo una aplicación de seguimiento del estado de ánimo. Vamos a pasar por esto rápidamente. Nuestras pantallas contienen un encabezado que en algunos casos, como nuestra pantalla de inicio, también tiene una visión general semanal. También tenemos una barra de pestañas en la parte inferior de la pantalla, que actúa como navegación, permitiéndonos saltar a diferentes áreas de nuestra app. Nuestra casa está fijada para hoy y contiene diferentes botones de estado de ánimo, por lo que puedo escoger y hacer clic en uno. El que elijo entonces se agregará como estado de ánimo para esa fecha en particular. También puedo ver que en mi resumen de fechas aquí, se muestran estados de ánimo pasados. Probablemente necesite algún código de color o patrón para identificarlos en mi diseño. También hay una página completa de resumen del calendario a la que puedo acceder o tenía una barra de pestañas o el encabezado. El tercer punto de navegación es un blog que contiene un conjunto de artículos. Si hago clic en uno, llego a la página de detalles del artículo. Genial, vamos a instalarlo en Figma y te prometo, aprenderás todos los elementos esenciales que necesitas saber para abordar cualquier proyecto en el futuro. Preparé un archivo Figma con todos los materiales de trabajo que puedes descargar. Una vez que instalamos Figma, te contaré más sobre cómo conseguir esos materiales y cómo subir archivos de Figma. 5. 0103 de cómo conseguir Figma: proceso de registro: Conseguir Figma es súper fácil. Todo lo que necesitas hacer es ir a figma.com y luego presionar este botón “Regístrate”, introduce tu e-mail, elige una contraseña, y haz clic en “Crear cuenta”. Te van a pedir alguna información básica, como el nombre que te gustaría usar, el área en la que estás trabajando, y si quieres unirte a la lista de correo. Haga clic en “Crear cuenta” y verifique su correo electrónico. Eso es todo, hecho. En cuanto verifiques tu e-mail, serás llevado a esta pantalla de bienvenida. Si quieres, puedes crear un equipo ahora, sólo voy a llamar a esta luna. Entonces se te preguntará si te gustaría invitar a otros, voy a saltarme esto por ahora. A continuación se te pedirá que elijas plan. No voy a hablar precios ya que esto cambia de vez en cuando, así que por favor consulte la página web de Figma para más información. Para empezar, solo tienes que ir con la versión gratuita por ahora, siempre puedes actualizarte más tarde. Figma entonces te va a preguntar si te gustaría crear un archivo de diseño o una pizarra con FigJam. Si no estás seguro, solo omita este paso, puedes crear cualquiera de esos en cualquier momento más tarde. La diferencia entre los dos es que la pizarra que usarías para planear, discutir y hacer lluvia de ideas. Si estás listo para configurar un wireframe o diseño, entonces elige el archivo de diseño. Voy a saltarme esto por ahora, y empezar por mi cuenta. 6. 0104 de estructura de trabajo en Figma: Echemos un vistazo alrededor del espacio de trabajo de Figma. Ahora estoy usando una aplicación de escritorio, pero será más o menos lo mismo si estás en el navegador. En medio de la pantalla se ven todos los archivos más recientes. Si lo diseñaste como yo, entonces Figma se establece en archivos básicos y plantillas para que juegues. En el lado izquierdo, se ve a sus Equipos. Creamos un Equipo llamado Luna cuando nos inscribimos. Permítanme darles una visión general de la jerarquía de archivos Figma. En primer lugar, tenemos Equipos. Pueden ser para su propio trabajo o para colaboración. Dentro de Teams, entonces tenemos proyectos que puedes utilizar para agrupar archivos en diferentes proyectos dentro de un equipo. En el plan gratuito, actualmente obtienes un proyecto gratis. Dentro de un proyecto, ahora puedes tener varios archivos, ya sea archivos FigJam o archivos de diseño. Estos archivos son donde harías el trabajo real. Puedes estructurarlos aún más en páginas. Volvamos a lo real. Aquí tenemos nuestro Equipo. Si desea eliminarlo, editarlo o cambiarle el nombre, puede hacerlo haciendo clic en el botón derecho del ratón. Entonces tenemos nuestro archivo de proyecto. También podrías crear más proyectos dependiendo del plan en el que te encuentres. Dentro de mi proyecto, ahora puedo agregar archivos. Puedo agregar archivos FigJam, que son más para la lluvia de ideas, o puedo agregar archivos de diseño reales, que es lo que haré ahora. Esto abre una pestaña. Puedo nombrar el archivo haciendo doble clic en el nombre. Ahora podría estructurar este archivo aún más agregando páginas. Actualmente, tengo una página. Podría añadir más haciendo clic en el botón más, y por supuesto, puedo nombrarlos haciendo doble clic. Si quieres volver a casa o a tu espacio de trabajo general, haz clic en el icono de casita en la parte superior izquierda. Ya puedes ver el nuevo archivo que creamos dentro de nuestro Equipo y proyectos. Ahora podría crear tantos archivos como necesitara aquí. Nota como tocar estado abierto para poder saltar de ida y vuelta. Por encima de tus Equipos, también ves los archivos recientes en los que acabas de trabajar, así como borradores. Si solo quieres jugar o toda la jerarquía de archivos parece un poco abrumador para empezar entonces simplemente crea tu primer archivo de diseño aquí en borradores. Posteriormente podrás arrastrar y soltar archivos entre Equipos y borradores. En el menú lateral izquierdo, también encontrarás acceso a las secciones de la comunidad donde puedes explorar miles de plantillas, widgets y plugins por parte de la comunidad Figma. Lo veremos durante nuestro proyecto con más detalle. También puedes invitar a otros en cualquier momento y darles derechos de visualización o edición. También puedes ver quién está en tu Equipo y el plan en el que estás actualmente, así como los archivos disponibles que vienen con ese plan. En caso de que quieras actualizar, también puedes hacer eso aquí. 7. 0105 Figma en la aplicación Browser vs. Figma: Puedes trabajar con Figma de dos maneras. Puedes trabajar directamente en el navegador, que es lo que estás viendo aquí, o puedes descargar la app. Para descargar la app, ve a figma.com/descargas. A continuación, puede elegir entre el Mac y la versión de Windows. Es realmente importante saber que a pesar de que trabajas en la aplicación de escritorio, Figma sigue basada en la nube. Eso significa que todos tus archivos se almacenarán en la nube y no localmente en tu computadora. Por lo tanto, siempre necesitas acceso a internet para trabajar en tus archivos de Figma. Podrías exportar y almacenar un archivo Figma localmente. Pero esto es algo que realmente solo debes hacer en una emergencia. Al igual que si necesitarías terminar un proyecto y sabes que no tendrás acceso a internet. Esto puede causar trabas a la colaboración con tu equipo. Por lo tanto, siempre es mejor dejar todo en la Nube como se pretendía ser. Además de la aplicación de escritorio, te podría interesar Espejo Figma para previsualizar tus diseños en tu móvil o tablet. En caso de que no puedas usar la aplicación de escritorio, y usaremos únicamente la versión del navegador, recomiendo encarecidamente descargar el instalador de fuentes. Esto te dará acceso a todas tus fuentes locales. Esto, sin embargo, no será necesario al usar la aplicación. 8. 0106 de configuración de primeros cuadros: Empecemos en nuestro archivo de diseño de Figma. Esta zona gris que ves aquí se llama el lienzo. Piensa en ello como la superficie de una mesa en la que estás trabajando. Encima de ella, agregarás tus diseños como hojas de papel. En Figma, esas hojas se llaman marcos. Puedes añadir imágenes, textos y formas a tus marcos para configurar tu diseño. Para crear un marco, puede elegir una herramienta de marco en la barra de herramientas, o simplemente presionar F para abrir el menú de marcos en el lado derecho. En Figma, todos los tamaños de pantalla comunes ya están configurados para ti en forma de marcos. Escogeré un iPhone X para que empiecen mis diseños móviles. En caso de que no estés detrás de un marco de tamaño de pantalla específico, entonces también podrías simplemente dibujar tu marco a mano. Una vez activada la herramienta de marco, sucedieron dos cosas. Figma agregó el marco a tu Lienzo y también puedes ver el marco en tu panel de capas laterales izquierdas. La barra lateral de la izquierda es básicamente un espejo de cada elemento que tendrás en tu lienzo. Como vamos a sumar más y más elementos a lo largo, podrás ver todos ellos representados aquí también. Puedes cambiar el nombre de tus wireframes ya sea directamente aquí en el panel de capas laterales izquierda, o haciendo doble clic en el pequeño nombre encima de tu marco en el lienzo. Vamos a renombrar a wireframe/home. Tenga en cuenta que estoy usando una barra inclinada hacia adelante. Esta es la convención de nomenclatura en Figma y básicamente crea una categoría para frames. Esto es muy útil a la hora de exportar y organizar tus marcos más adelante. A diferencia de los tableros de arte tradicionales, puedes anidar marcos unos dentro de otros en Figma. Esto le permite crear diseños más complejos. 9. 0107 atajos útiles para la bandeja y más: Quiero mostrarte algunos comandos útiles que agilizarán tu flujo de trabajo incluso si estás en el comienzo mismo de Figma. Figma tiene muchos buenos atajos y ayudantes. Los encuentras a todos si navegas a través del menú de la izquierda a accesos directos. Todo lo que ya utilizaste está marcado en azul, y los que aún no has utilizado son de color gris. Por ahora, sólo voy a mostrarles los más imprescindibles para la navegación. Para desplazar, simplemente mantenga pulsada la barra espaciadora y muévase con el ratón. Para acercar y alejar, pulse “Plus” y “Menos”. Muy importante ver tu trabajo al 100 por ciento presiona “Comando 0". Puedes cambiar entre una visión general de todos tus fotogramas y la selección específica alternando con Shift 1 o Shift 2. Para mostrar y ocultar la interfaz de usuario, simplemente presione “Command full stop” y obviamente el todopoderoso comando establecido para deshacer cualquier cosa que acabas de hacer. Conocerás más atajos a medida que avanzamos. Solo recuerda que puedes buscar todos ellos en el menú de accesos directos, que por supuesto, también tiene un atajo, Shift, Control, y signo de interrogación. Esto también será útil si estás usando una PC ya que estoy trabajando en un Mac, y solo verás los atajos de Mac con la salida automática del teclado en la pantalla, que a veces pueden diferir ligeramente. 10. 0108 de agregación de formas a un cuadro: Empecemos a transformar nuestro marco en un alambres real agregando algo de contenido. En un wireframe, nos apegamos a formas simples como rectángulos y círculos. encontramos todas en el menú de formas en la parte superior. Simplemente haz clic en el icono y selecciona el que buscas. Anote cómo al lado de la forma se puede ver el atajo. Podría simplemente presionar R para rectángulo u O para un círculo. Sostenga Mayús mientras dibuja y su forma tendrá un tamaño uniforme. Cuando se selecciona la forma, pueden ver las dimensiones en la burbuja debajo de ella. Verás las mismas dimensiones en el panel Propiedades del lado derecho. Aquí mismo en el panel Propiedades, también puedes ajustar el tamaño a mano. Simplemente escribe el número que buscas. También puedes usar este cuadro para hacer cálculos. El clip junto a las medidas, ya sea bloquea o abre las dimensiones. Puedes elegir si quieres escalar toda la forma o solo un lado, prueba. También puede rotar la forma agregando un ángulo o simplemente seleccionando la forma. Acércate con tu cursor al borde hasta que veas que aparece el pequeño símbolo de rotación. Para cambiar el radio de esquina de tu forma, selecciona la forma y luego acércate realmente hasta que veas que aparecen los puntos. Sostén el ratón y arrastra hacia adentro. O utilice el panel Propiedades. Puedes redondear todas las esquinas a la vez o seleccionar esquinas específicas temprano. 11. 0109 Duplicado: Genial. Ahora que sabemos dibujar formas, vamos a configurar nuestro primer diseño básico del wireframe. Empezaremos con nuestra pantalla de inicio. Estoy presionando R para mi atajo seleccione una herramienta de rectángulo, y dibujaremos el encabezado y el pie de página. En un wireframe, los tamaños exactos no son tan importantes como en el diseño final por lo que los ajustaré a mano a mi gusto. Ahora dibujaré los cuatro círculos que serán mis botones de humor. Golpeo O por la herramienta círculo y dibujo mi primer círculo. Como quiero que todos sean del mismo tamaño, simplemente copiaré el primer botón. Hay varias formas de hacerlo. Puede presionar Comando, o Windows, esto será Control, y C para copiar, y Comando o de nuevo Control y V para pegar. También puede arrastrar hacia fuera una copia de la forma original manteniendo presionadas la opción y la tecla Mayús, y con el ratón, presione y arrastre una copia. Podría hacer eso por todos los demás círculos o simplemente presionar Comando, o en Windows, Control y D. Esto los duplicará con exactamente la misma distancia que la primera. 12. 0110 Dibujo en Figma: Agreguemos las caras a nuestros botones de humor. Dibujaré los ojos agregando círculos. Hablaré más sobre el color más adelante. Por ahora, para hacer visibles los ojos, selecciónalos, luego ve a Rellenar el panel Propiedades del lado derecho, y donde añadirías el valor de color, simplemente escribe “gris”. Este es un pequeño truco si necesitas un color rápido. Para dibujar una nariz, necesito un trazo, así que elijo la herramienta de línea o simplemente presione L y mantenga pulsada Mayús para obtener una línea recta. Para la boca, elegiré la herramienta Pluma, también puedes usar el atajo P. Si estableces un primer y segundo punto y mantén presionada la tecla del ratón hacia abajo, puedes curvar las líneas. Además de una herramienta Pluma, también puedes usar una herramienta Lápiz. Puedes dibujar a mano alzada, lo que lleva un poco de práctica al usar un ratón. Pero si estás acostumbrado a un trackpad o bolígrafo, puedes obtener resultados sorprendentes. Una vez que hayas terminado de dibujar, simplemente presiona Escape para salir del modo de dibujo. Si selecciona alguna de las formas, ahora puede alterar su apariencia con el panel Propiedades del lado derecho. Puedes cambiar el color, el tamaño del trazo, e incluso puedes elegir otro tipo de trazo y esquinas redondas. Una vez que me gusta mi cara, simplemente la voy a duplicar a todos los demás botones y ajustar el estado de ánimo. 13. 0111 de creación de grupos: Actualmente, todas las capas se colocan una al lado de la otra en el mismo nivel de jerarquía. Puedes agrupar capas juntas para crear más estructura y facilitar el manejo de tu diseño. Simplemente seleccione las capas a las que desea pertenecer a un grupo. Puedes hacer esto manteniendo pulsada Mayús y haciendo clic en ellos uno por uno, o manteniendo la tecla Mayús y el botón del ratón hacia abajo y luego dibujas un área de selección. Luego presione Comando o en Windows, Control, G para agruparlos. También puedes anidar grupos dentro de grupos. Por ejemplo, si hago cada uno de esos botones en un grupo, entonces selecciono todos los botones, puedo agruparlos de nuevo. Ahora, tendré un grupo de botones y dentro de él, tengo cuatro grupos de botones individuales. Ahora puedo mover el grupo en su conjunto, y también puedo duplicar todo el grupo y pegarlo a otro lugar. Aún puede editar elementos dentro del grupo, ya sea haciendo doble clic hasta que llegue al elemento deseado o mantenga presionado Comando o Control y haga clic para seleccionar. Tenga en cuenta que todo lo que agregamos al marco está representado en el panel de capas. Los grupos se muestran como pequeños rectángulos punteados. Al hacer clic en ellos, se puede ver el contenido dentro y también puede mover elementos dentro y fuera de los grupos. Haga doble clic para cambiar el nombre. Nombraré a mi grupo, Grupo Círculo, y los grupos de los círculos individuales dentro, Círculo. 14. 0112 de agregación y estilo del texto: Ahora queremos agregar algún texto a nuestro wireframe. Selecciona la herramienta Texto o simplemente presiona “T” y luego haz clic en tu “Wireframe” para empezar a escribir o dibujar un cuadro de texto. En el lado derecho en el panel Propiedades, ahora verá las propiedades del texto. Manejar topografía es un tema bastante grande en el diseño de la interfaz de usuario Por ahora, solo te voy a dar una visión rápida del panel de propiedades. Vamos a explorar este tema más lejos una vez que nos sentimos cómodos en Figma. Desde el menú desplegable, puedes elegir un tipo de letra. Si estás trabajando con una aplicación de escritorio Figma, verás automáticamente todas tus fuentes locales y todas las fuentes de Google. Realmente te recomiendo que uses la app siempre que sea posible. Si estás trabajando en el navegador, asegúrate de instalar el instalador de fuentes Figma, que encuentras en figma.com/download. Entonces también sería capaz de ver todas sus fuentes locales. Si quieres fuente de Google, asegúrate de descargarla e instálala en tu máquina. Estoy trabajando en la app, así que voy a usar una de mis fuentes favoritas de Google llamada Poppins. En el desplegable a continuación, puedo elegir el peso de la fuente. A su lado encuentro un tamaño de fuente, y pondré esto a 24 ya que este es mi texto principal por ahora. Altura de línea y espaciado de letras por ahora, me iré en la configuración predeterminada. Esto es algo que retocaremos más adelante en nuestro diseño de interfaz de usuario. Más abajo, puedo optar por alinear texto a la izquierda, a la derecha o al centro y voy a enviar a mis textos por ahora. También podemos establecer el comportamiento de ancho y altura de nuestros libros de texto. Si elige ancho automático, eso significará que el cuadro de texto es exactamente el tamaño del texto. Entonces tenemos altura automática, lo que significa que tenemos un ancho establecido y a medida que agregamos texto, se ordenará a continuación en consecuencia. Vamos a utilizar esto mucho cuando se trata de nuestro diseño de interfaz de usuario ya que respeta nuestra altura de línea. Lo cual será crucial entonces. También tenemos tamaño fijo, que es para ser honesto, algo que rara vez uso. Bajo más, puedes ajustar cosas como subyacentes o mayúsculas. Pondré mi texto, para sentarme justo en el medio aquí. También agregaré los textos que tengo aquí en mi encabezado. Esto se subraya ya que se podrá hacer clic más adelante. 15. 0113 Alineación de posicionamiento y Positioning: Puede colocar elementos dentro del marco simplemente arrastrándolos. Verás que Figma crea guías para ayudarte a alinear cualquier elemento con el resto. Para añadir un poco más de detalle a tu posicionamiento selecciona un objeto o un grupo de objetos y mantén presionado viejo mientras se coloca sobre el borde de tu marco o cualquier otro objeto. Se te mostrará la distancia exacta entre esos objetos. Esto es súper práctico y realmente algo que necesitarás todo el tiempo. También puedes mover los objetos seleccionados con tu teclado, flechas izquierda, derecha, arriba y abajo mientras las distancias estén activas. Si mantienes el turno presionado, entonces salta en distancias más grandes. A esto se le llama empuje. Por defecto, tu empuje se establece en 10. Yo puse el mío a pasos de ocho. Simplemente busca la cantidad de empuje en el menú de tu espacio de trabajo, y puedes ajustarlo. También puede seleccionar varias formas alineadas mediante la herramienta de alineación en el panel de propiedades. Si seleccionas un grupo de objetos similares, Figma te ofrecerá ordenarlos. Incluso puedes establecer el espacio entre los elementos con el menú o a mano. 16. 0114 pinceles y relleno del color: Todas las formas tienen un relleno y una propiedad de trazo. Por defecto, nuestras capas están llenas de un gris claro y nuestra tipografía es negra. Esto funciona bien para wireframe. Podrías haber adaptado los colores. Seleccione una forma, y en el panel de propiedades del lado derecho, haga clic en “Relleno de color”. Ahora puedes escoger un color usando la rueda de color o puedes usar el ojo para escoger un color. Esto es realmente útil si quieres escoger un color de una imagen, por ejemplo o si ya tienes un código hexadecimal, solo puedes agregar eso. RGB también funcionaría. Además del color sólido, puedes aplicar otros rellenos como gradientes y también rellenar formas con imágenes. Puede revocar un relleno haciendo clic en el símbolo del botón menos junto a él. Puedes agregar un trazo aplicando la misma técnica con la opción de trazo. El trazo también se puede ajustar en grosor. Si hacemos click en los tres puntos, puedes obtener más opciones como trazos punteados. Las propiedades también se pueden copiar y pegar entre objetos. Haga clic con el botón derecho en el elemento, seleccione el estilo “Copiar propiedades” y pegue en otro. O utilice Alt Command C y Alt Command V. Tenga en cuenta que esto solo copia el estilo y no la forma. 17. 0115 en Figma: Los estilos te permiten guardar y volver a aplicar propiedades. De esta manera, los archivos grandes se pueden actualizar en un instante. Se pueden crear estilos para colores, texto, cuadrículas y efectos como sombras. Para nuestro wireframe, estaremos usando diferentes tonos de gris que quiero hacer en un estilo, así como un titular y un texto estándar. Primero configuremos nuestros estilos de color. Para crear los estilos de color, dibujo formas y las lleno con los colores deseados. Elige el primer color, haz clic en el menú Estilos en panel Propiedades del lado derecho, y haz clic en el icono más y da un nombre a tu color. Hagamos lo mismo con los otros colores. Tenga en cuenta cómo estoy usando pigmentos convención de nomenclatura de nuevo con una slash hacia adelante. Esto creará automáticamente una estructura alámbrica de categoría, y luego dentro de ella mis diferentes colores. Ahora puedo aplicar estos colores al texto o a la forma a través de mi diseño. Simplemente eligiendo objeto, y luego desde el menú Estilos, aplica tu estilo de color guardado. Puedes ver una visión general de tus estilos haciendo clic en el Lienzo. Siempre puedes editar tus estilos. Luego se actualizarán automáticamente a través de tu diseño. Hagamos lo mismo por nuestro texto. Escogí un texto, haga clic en el icono “Estilos” en mis propiedades de texto y guárdelo. Ahora puedo aplicarlo a través de mi diseño. Ten en cuenta cómo son estilos, no importa dónde los creas. No están atados a ningún objeto en tu Lienzo desde el que los hayas creado. Viven de forma independiente en la sección de estilo. Haré un marco separado para almacenar una visión general de mis estilos. Por ahora, lo dejaré junto a mis wireframes mientras sigo ajustándome. Me di cuenta de que cometí un error. Este es en realidad un texto subrayado que se puede hacer clic. Puedo editar el estilo en el menú Estilos de texto o haciendo clic en mi Lienzo y entrar en la visión general de estilos. Voy a cambiarle el nombre a clickable. embargo, todavía quiero entender los textos. Copiaré un texto con este estilo y luego separaré el estilo en el menú Estilos de texto. Ahora eliminaré el subrayado y lo guardaré de nuevo como mi texto estándar. Durante mi proceso de trabajo, siempre puedo añadir o alterar estilos. También hay otros estilos como cuadrículas y efectos como sombras o borrosas que puedes guardar. 18. 0116 con componentes e ideas que hacen en comp y overrides:: Los componentes son elementos de interfaz que se pueden reutilizar en todo su diseño. En mi wireframe, hay elementos que son del mismo diseño pero que solo tienen contenido diferente. Al igual que los días de mi calendario aquí arriba y en mi barra de tap, los iconos tocables. Hagámoslos en componentes. Vamos a empezar con los días del calendario. En primer lugar, dibuja un marco a la anchura completa de su marco de diseño. Recuerda, puedo usar mi panel de propiedades para calcular. Voy a dividir esto por 7 para conseguir un día, y después tener mi semana encajar perfectamente en el ancho de la pantalla. Ahora voy a añadir un texto para el día de la semana, y la fecha a continuación, así como un círculo que indicará si en el pasado ya se ingresó un estado de ánimo. Vamos a alinearlos muy bien. También nos aseguramos de asignar color y textiles. Entonces nombraré el marco. Ahora, en lugar de simplemente copiar la fecha, convertiré en un componente reutilizable. Asegúrese de que el marco esté seleccionado. En el menú superior, haz clic en “crear un componente”. Si el componente fue creado con éxito, verá el contorno púrpura así como el símbolo del diamante. En tu panel de capas, también verás el cambio de color así como el símbolo. Este componente original que hizo se llama dominio o componente maestro. Cualquier copia del mismo se llama instancia. Tenga en cuenta la diferencia en el menú de capas. El componente principal tiene una forma de diamante relleno y la instancia tiene una forma de diamante vacía. Encontrará una visión general de todos los componentes que creó en el menú del activo junto a sus Capas. Puede arrastrar desde aquí su lienzo para crear una instancia, o también puede copiar directamente el maestro o cualquier instancia para crear otra instancia. No importa de qué forma uses, siempre estará vinculado al maestro original solamente. Solo se puede tener un maestro, pero muchas instancias. Si cambio el diseño del componente maestro, todas las instancias se actualizarán también. Tenga en cuenta cómo no puedo cambiar la posición de un elemento en la instancia. Puedo, sin embargo, cambiar el contenido, por lo que puedo cambiar el nombre de las fechas. No me gusta la alineación y quiero que el texto se sienta en el medio, así que lo arreglaré en un maestro y todas las instancias seguirán. Tenga en cuenta que no he cambiado el color en ninguna de las instancias, por lo que si cambié el maestro, todos seguirán. Puedo, sin embargo, adaptar el color de una instancia. Entonces seguiría siguiendo todos los cambios de diseño del maestro pero mantendría la llamada anulación para el color. Eso está bien. Al igual que en nuestro ejemplo, quiero que la fecha actual destaque un poco. Quiero quitar los círculos para hoy y en el futuro. Hay métodos más avanzados para hacer eso, pero por ahora, solo los colorearé, en el color de fondo, que funciona muy bien para un wireframe. Para resumir, el componente es fijo y no puede anular en su instancia, tamaño, posición, rotaciones, restricciones, jerarquía de capas o cualquier dibujo que apunte en posiciones de Bezier. Puedes anular en tus instancias, sin embargo, el color y los rellenos, rellenos también pueden ser un relleno de imagen, texto en contenido y alineación, estilos, opacidad, efectos como sombras o borrosas, y puedes activar y desactivar la visibilidad. Si desea volver a la configuración maestra original, podría hacerlo usando el menú desplegable en el menú de instancias y elija “Restablecer todas las anulaciones”. También podrías separar una instancia de un maestro aquí. Si borras accidentalmente tu maestro, también puedes restaurarlo con cualquier instancia que ya hayas realizado. 19. 0118 páginas en Figma: Para editar nuestro diseño, incluyendo instancias, siempre necesitaríamos volver al componente principal. Podríamos hacerlo seleccionando una instancia y bajo menú lateral derecho, pulsa en “Ir al componente principal”. Entonces saltaríamos de nuevo al componente principal, sin importar dónde lo colocamos. No obstante, es mucho más ordenado si sacas todos tus componentes maestros del diseño y los guardas en un lugar separado. Esto también es realmente importante para mantener una visión general sobre la consistencia en su diseño. Ahora, podría mantener a mi maestro en la misma página o incluso dibujar un marco al que llamo componentes y tener una visión general aquí mismo. No obstante, es una buena práctica mantener tu diseño limpio y ordenado. Almacenaremos componentes maestros en su propia sección. Para eso, creamos una página separada a la que llamamos Componentes y Estilos. Cambiaremos el nombre de esta página que estamos trabajando en Wireframes. Ahora, seleccione el componente maestro, haga clic con el botón derecho y seleccione Mover a páginas. Ya puedes enviarlo a la página que acabas de crear. También enviaré mi marco con los estilos por ahí. Esto me dará una gran visión general de todos los elementos que estoy usando. Quiero crear algunos componentes más como los iconos para la barra de pestañas. Puedo hacer eso ya sea en el diseño y enviarlos a la página de mis componentes, o crearlos justo en la página de componentes. Dibujaré un rectángulo 24 por 24, y redondear las esquinas. A continuación, también agregaré algún texto a continuación. Esta es una etiqueta, por lo que puede ser bastante pequeña. Agregaré otro estilo para esto. También agregaré el estilo a mi visión general. Vamos a asegurarnos de que pueda en texto nuestras líneas y crear un grupo. Cambiaré el nombre del grupo, aseguraré de que esté seleccionado y lo convertiré en un componente. Ahora lo copiaré, saltaré a mi wireframe, y lo pegaré en la barra de pestañas. Alineemos las instancias y cambiemos el nombre de las etiquetas a casa, calendario y blog. Ahora, el color de mi icono es del mismo color que el fondo. Quiero volver a saltar a mis componentes y cambiar eso en el maestro. Genial. Echemos un vistazo a nuestro menú de activos por un segundo. Los componentes se ordenan automáticamente según qué página y en qué marco los pondría. En nuestro ejemplo, usamos la barra inclinada hacia adelante y esto creó una buena subcategoría también. Esto será realmente útil una vez que tengas muchos componentes en un diseño más grande. 20. 0119 en la creación de una tabla de flujo simple con los plugins: Genial, así que tenemos nuestro wireframe casero terminado. Ahora quiero sumar los otros wireframes. Vamos a crear esos cuatro por los que se seleccionará un estado de ánimo y se presentaría para ese día. Ahora puedo dibujar nuevos fotogramas y copiar todo lo que necesito y dibujar el resto o como son muy similares, simplemente duplicaré todo mi fotograma. Ahora voy a cambiar el texto y por cierto, este texto podría ser también su propio componente. Después seleccionaré todas las fases que no serían seleccionadas en la pantalla. Recuerde mantener el comando u Opción presionada cuando fue a la selección profunda dentro de un grupo. Ahora quiero cambiar la transparencia. Puedo hacer eso en el panel de propiedades o simplemente presionar cualquier número. Dos, por ejemplo, resultarían en 20 por ciento de capacidad. Haré lo mismo por el resto de las pantallas y como se puede ver, ya vale la pena que pasemos algún tiempo configurando nuestra pantalla de inicio muy bien. También voy a configurar algunos marcos para mi calendario, así como donde estará mi bloque más adelante. Por supuesto, se han asegurado de nombrarlos. Ahora quiero indicar la conexión entre esos marcos. Simplemente dibujar una línea realmente no funcionaría porque los objetos están dentro o fuera de los marcos. Voy a usar un plugin. Vuelve a casa haciendo clic en el botón de la casa en la parte superior izquierda y entra en la sección comunitaria. Quiero configurar un diagrama de flujo, así que estoy escribiendo en flow y buscando plugins. Son muchos los grandes, pero por ahora, voy a usar un conector de dibujo. Haga clic en Instalar. Ahora volvamos a saltar a la parte superior de nuestro archivo, que aún está abierto. Desde el menú y nota que es el menú del navegador, ahora elijo plugins y activaré el que acabo de instalar. Verás una ventana apareciendo que te dirá qué hacer y cómo usar el plugin. Queremos conectar el botón, a la nueva pantalla. Por lo que seleccionaré un botón en el que se hará clic, mantenga pulsada Mayús, y seleccionaré el destino. Hecho. Ahora las áreas están pegadas al marco. Si mueves el marco, se moverán con él. Este plugin en particular también te permite decidir dónde quieres conectar esto para acoplar a los marcos. Vamos a conectar todos ellos. Hay muchos plugins diferentes para flujos y wireframes listos para usar. Siéntase libre de explorar y averiguar lo que es adecuado para usted. Cada uno de los errores crea una capa en la pestaña de capas. También puedes agruparlos a todos y luego activarlos y apagarlos. 21. 0120 Sección de comunidad de Figma: Vamos a configurar nuestra pantalla de calendario. Ahora, podemos configurarlo todo a mano, o podríamos usar un pre-construido que alguien más fuera lo suficientemente amable para compartir con nosotros. Vamos a la sección comunitaria Figma. Ve al ícono de inicio y selecciona comunidad. El apartado comunitario Figma es un espacio donde los creadores pueden compartir su trabajo Figma. Puedes buscar plugins, archivos de diseño, wireframes, sistemas de wireframes, ilustración, iconos, todo. Buscaremos calendario para nuestros wireframes, y verás una variedad de archivos apareciendo. Este de Felipe Dolce solo se ve perfecto. Haga clic en él y obtendrá una vista previa. Una vez cargado, se pueden ver las diferentes páginas dentro del archivo. Vamos a duplicarlo. Después de un corto tiempo de carga, verás una copia idéntica del archivo en tu cuenta de Figma. Ahora puedo acceder a todos los elementos. Seleccionemos Calendario, presionemos Comando C para copiar, y volvamos a la cima con nuestro archivo de trabajo. Selecciona el marco derecho y pega el calendario con Comando V. El contorno morado me dice que esta es una variante y el componente principal sigue en el archivo original. Quiero cambiarlo a mis necesidades, así que lo despegaré. Ahora puedo hacer todos los cambios que quiero. Voy a quitar los rellenos de fondo, los patrones, y otros elementos que no quiero. Voy a configurar los textiles y color a mis necesidades y puedo redimensionarlo. Haré esto en un componente. Este componente más tarde estará en la página de mi componente, así que llenaré mi marco con instancias. Organizemos las instancias y cambiemos los nombres del mes. Sí, tendría que adaptar las fechas para cada mes, pero por ahora, en el wireframe, lo dejaré así. Agregaré algunos estados de ánimo más y marcaré el día con un círculo. También nos aseguramos de que tengamos algunos estados de ánimo diferentes en la semana en curso. Ya que esta es básicamente la semana que aparecerá en la parte superior en la pantalla de inicio. Ahora, sólo necesito adaptar el encabezado y sumar los diferentes días de la semana. Ahora que todo es de mi agrado, seleccionaré el componente y lo enviaré a mi página de componente. Si salto a los componentes, puedo arreglarlo con el resto. 22. Nota: antes de comenzar con el diseño automático: Ha habido una actualización del diseño automático recientemente, El menú se ve ligeramente diferente ahora sin embargo, tiene las mismas características, como un interlineado, relleno, y dirección. Sin embargo, la opción de cambio de tamaño que anteriormente se encontraba debajo del menú Diseño automático ahora se movió hacia arriba al menú de marcos. Esto sólo ha sido un cambio de posición. Todavía tiene las mismas opciones y funciona exactamente igual. Aún puedes seguir los tutoriales sobre el cambio de tamaño. Solo asegúrate de activar las opciones de cambio de tamaño desde la nueva posición aquí arriba. También agregué un video de actualización hasta el final. Causa. Esto contiene una descripción general de todas las nuevas características de diseño automático que, sin embargo se refiere más al menú avanzado. Si solo eres un principiante en Figma, entonces no te preocupes demasiado por esto ahora mismo. Una vez que esté listo para profundizar un poco más en el nuevo diseño automático y el diseño web receptivo con Figma, asegúrese de echar un vistazo a la clase de inmersión profunda para diseño receptivo con Figma que cubre estos temas en profundidad. 23. 0121 Introducción al diseño automático: El diseño automático es una propiedad que se puede agregar a marcos y componentes. Te ayuda a crear diseños que se adapten a ese contenido. El diseño automático es muy potente y se puede utilizar para diferentes escenarios. No obstante, se necesita un poco de práctica. Te mostraré lo básico hoy. El ejemplo más simple y mejor para el diseño automático es un botón. Escriba algo y luego conviértelo en un marco. Puedes hacer esto usando el atajo Comando Alt y G. También podrías simplemente dibujar un marco y escribir un texto dentro de él. Funcionará exactamente igual. Agregaré un color de fondo para que podamos verlo mejor. A continuación, seleccione el diseño automático en el panel de propiedades del lado derecho. Vamos a añadir algo de relleno. Puede utilizar el menú de relleno de diseños de automóviles para eso. Puede agregar un valor para todo el relleno o puede hacer clic en el pequeño cuadrado y seleccionar un valor para arriba, izquierda, derecha e inferior individualmente. Ahora vamos a redondear las esquinas. A medida que ahora cambiamos el contenido del patrón, todo escalará muy bien y seguirá respetando el relleno que establecemos. Puedes hacer esto en componente y tener los botones perfectos en todo tu diseño. Eso parece todo bastante sencillo la magia sucede aquí mismo en el lado derecho del panel Propiedades en el menú de re-dimensionamiento. Tenga en cuenta cómo todo para auto-diseño marco en sí, así como el contenido está configurado para hackear contenido. Si cambiáramos esto, y digamos establecer nuestro contenedor exterior a ancho fijo y el interior al contenedor completo, entonces tendríamos un comportamiento muy diferente. También tenga en cuenta que el diseño automático puede funcionar horizontal o verticalmente. Lo que parece unas pocas opciones en realidad se abre y muchas posibilidades en el comportamiento. Puede llegar a ser bastante abrumador. Te recomiendo que empieces a usar el diseño automático en elementos más pequeños, como botones o tarjetas simples. Entonces poco a poco, trabaja tu manera en ello. Las restricciones y el diseño automático probablemente sean los temas más difíciles en Figma. 24. 0122 de diseño automático en nido: crea una tarjeta nido: La última parte de nuestro wireframe que necesitamos construir es bloquear la pantalla. Esto consiste básicamente en un componente que es una tarjeta con un titular de subtítulos de imagen, así como algún texto de vista previa. Empezaré dibujando un marco como el contenedor de la tarjeta. Agregaré un poco de margen izquierda y derecha. Entonces agregaré una forma de rectángulo, que será el placeholder de la imagen, así como un subtitulo, un titular. Agregaré algún texto de placeholder que será mi vista previa. Vamos a seguros que está asignado a nuestros estilos y alineado muy bien. Ahora puedo convertir esto en un componente y reutilizarlo. Pero mi titular en el texto de vista previa podría no siempre ser de la misma longitud. Mi caja será demasiado larga o demasiado corta. No respetará las distancias. Apliquemos el diseño automático a nuestra tarjeta. Si hago toda la tarjeta en un diseño automático, mi texto ahora se adaptará, pero todo mi relleno se pierde. Si aplico relleno de diseño automático, lo usaría en todo el contenido incluyendo mi imagen, que es lo que no quiero. No obstante, puedes anidar diseño automático. Primero seleccionaré todo mi texto, lo agruparé, y me aseguraré de que esté agrupado de lo contrario no funcionará, y luego lo convertiré en un diseño automático dentro de mi diseño automático. Ahora puedo adaptar el relleno de diseño automático solo para esta caja separada. Pero tenga en cuenta cómo mi texto no se expande a lo largo de todo el ancho. Si escribo algo, no usa toda la caja, no quiero eso. Lo que necesito hacer es ajustar mi configuración de redimensionamiento, y los configuraré para llenar contenedor en este caso. Ahora usará todo el espacio disponible, y seguirá respetando el relleno que establecí. Si estás teniendo problemas con esto, asegúrate de comprobar que tu altura aún está establecida en su contenido. Siempre verifique que su texto como tal, esté configurado en altura automática en la configuración del texto. Esta suele ser la causa de cualquier error si no está funcionando. Mi tarjeta está funcionando perfectamente si cambio el contenido, pero quiero mostrarte un poco extra todavía. Establecer mi contenedor a ancho fijo, y la altura para abrazar contenido. Ahora puedes redimensionarlo más agradable. Si estás teniendo problemas para hacer que esto funcione. Asegúrese de revisar dos veces a los niños dentro de este contenedor también tienen la configuración correcta. Todavía no hemos terminado con la magia de maquetación automática. Voy a hacer esto en componente, ahora haremos instancias que distribuiré dentro de mi marco. Ahora estoy seleccionando mis instancias, agruparlas y las hago aún en otro diseño automático. Asegúrate de que todo el redimensionamiento esté configurado de la manera que quieras, y ahora puedo establecer las distancias entre ellos, y puedo cambiar todo el contenido, y todo se adaptará perfectamente. 25. 0123: Ahora lo único que tenemos que hacer es agregar la página de un solo artículo a nuestro wireframe. A partir de cualquiera de mis códigos que creé anteriormente, solo voy a seleccionar la imagen, el título, el título y un texto de vista previa y copiarlo. Ahora estoy seleccionando el marco donde quiero que se muestre el artículo individual y lo copiaremos aquí. Lo arreglaré de la manera que lo quiero y pegaré mi texto aquí. También me aseguraré de ajustar el encabezado en consecuencia. En realidad saltaré de nuevo a mi página de resumen donde quiero agregar los filtros al encabezado. En lugar de simplemente agrandar el encabezado, en realidad tiene más sentido crear una sección separada que simplemente atracaré en mi encabezado principal. Voy a crear un marco donde agrego mis filtros y luego para mostrar el activo, que es todos los artículos, solo agregaré un trazo para mi wireframe. Ahora el beneficio de tener esto separado es que el encabezado podría ser un componente, y luego solo agrego cualquier componente a continuación que quiera extender el encabezado. Por ejemplo, mis días de la semana que tengo en mi calendario también podría ser tal apego. Voy a cambiar a errores para mi flujo de nuevo encendido y asegurarme de que también tengo mis artículos enlazados. Tenga en cuenta que esta es una versión realmente simplificada sobre un wireframe en flujo aquí porque realmente nos estamos enfocando en aprender Figma en este curso. Por lo general se agregaría mucha más información, como qué interacción será, sería un clic, sería un golpe, lo que pasó en caso de error, qué otras conexiones podrían estar pasando ahí, ¿qué pasa si vuelvo en el tiempo y así sucesivamente? Podría parecer algo como esto. También nos aseguramos de que nuestro componente en la página de estilos tenga una sección propia solo para nuestros wireframes y asegúrate de poner todo en su propio marco. Si estás entonces en el panel de activos, verás cómo se ordenó muy bien para ti. 26. 0124 organiza nuestro archivo para empezar el diseño de UI: Terminamos nuestros wireframes y comenzaremos a trabajar en el diseño de la interfaz de usuario. Para eso, crearé una nueva página a la que llamaré UI Design. Puedes tener wireframe y diseño en un solo archivo, pero para proyectos más grandes, también puedes tener dos archivos separados, eso depende de ti. Si estás trabajando en el plan gratuito, entonces también ten en cuenta que tienes un límite de archivos que puedes tener, así como páginas dentro de los archivos. También puedes agregar iconos a los capítulos si lo deseas. En un Mac, simplemente presione Control Command y la barra espaciadora. Para Windows, debe habilitar el teclado táctil, haga clic derecho en la barra de tareas de Windows y haga clic en el botón Mostrar teclado táctil, luego puede seleccionar emojis. También agregaré alguna estructura a mi página de resumen de Componentes y Estilos. Nuevamente, se podría tener todo esto en archivos separados, esa en realidad sería una buena práctica. Puedes configurar esto a tu gusto. Normalmente configuro una sección para el manejo de archivos, así que tengo titulares aquí, cualquier información, cualquier cosa sobre un comportamiento y cualquier comentario que quiera hacer en el archivo. Entonces tendré mis otras secciones para wireframes y más tarde mi diseño de interfaz de usuario. También me gusta un sistema de semáforos para mostrar el estado de cada elemento. Cualquier información adicional, más tarde tendré, como enlaces o miembros del equipo, más tarde podría también poner en el sistema. Así es como se ve mi organización, pero siéntete absolutamente libre de adaptar esto a tus necesidades. 27. 0125 ¿0125 qué tamaño de cuadros debería usar?: Una pregunta común al configurar diseños en Figma es, ¿qué tamaño de marco debo estar usando? Generalmente no hay un tamaño de marco incorrecto para comenzar tu diseño en Figma. En un mundo perfecto, debes hacer que tu diseño responda y probado en diferentes tamaños de pantalla de todos modos. No obstante, debes usar el mismo tamaño maestro para todas las pantallas que estás diseñando, como un punto de partida inicial y referencia que tú y el resto del equipo acordaron. Existen varios aspectos que pueden hacerte decidir sobre el tamaño de la pantalla. Uno, tienes datos válidos, como Google Analytics de un sitio web anterior, que este es el tamaño de pantalla o dispositivo más popular entre tus usuarios. Dos, se inicia con el tamaño más pequeño, ya que es más fácil escalar que bajar la escala. Este es un enfoque muy popular y esto también mucho sentido porque mucho tiempo, tu código también se escribirá de esa manera. Se llama el primer enfoque móvil. Tres, estás usando el dispositivo o tamaño de pantalla más popular utilizado en el mercado en este momento. Por la presente, el mercado podría ser un mercado global o un mercado objetivo, como en la demografía o país. Puedes buscar esos números en línea. Hay una variedad de páginas que te dan esas estadísticas. Cuatro, estás usando el último modelo que fue lanzado. Por ejemplo, si estás diseñando una aplicación iOS, utilizarías el tamaño de pantalla del último dispositivo Apple en el mercado. Figma generalmente los proporciona automáticamente para usted dentro del menú Marcos. Esto se basa en el supuesto de que el mercado crecerá naturalmente en esto, como hemos visto, por ejemplo, con pantallas telefónicas más grandes y más grandes en los últimos años. Por supuesto, seguirías probando y asegurándote de que tu diseño funcione bien en todos los demás tamaños. Cinco, esto podría ser un poco extraño, pero a veces, sobre todo en un pequeño proyecto freelance, podría tener sentido usar el dispositivo que tienes a mano y usaría para presentación y pruebas, así que por ejemplo, el teléfono que usarías para mostrar tu prototipo encendido. Obviamente, eso debería ser un tamaño estándar de mercado y relativamente actualizado. Los cuadros siempre se pueden ajustar, pero es agradable comenzar con el pie derecho así que mejor discuta con tu equipo y tus desarrolladores para asegurarte de que estés alineado. 28. 0126 de configuración de cuadrículas en Figma: Agreguemos una rejilla a nuestro marco. Para agregar una cuadrícula, seleccione un marco y haga clic en el icono más en el panel de propiedades del lado derecho en Cuadrícula de diseño. Tu cuadrícula siempre será las mismas distancias que fijaste en tu empujón. En mi caso, esto es ocho, y por defecto, podría tener 10 aquí. La mayoría de las veces, realmente no necesitaremos una cuadrícula de fondo como esta, pero lo que buscamos es una cuadrícula de diseño. Haga clic en el icono de la cuadrícula, y en el menú desplegable, elija Columnas. Ahora, podemos configurar nuestra rejilla. Con count, puedes ajustar la cantidad de columnas. El color y la opacidad aquí no es relevante para tu diseño, ya que lo activaremos y apagaremos solo por layouting. Entonces hay que teclear sección. Centro significa que tienes un contenedor fijo que sostiene tu diseño que ha formado por columnas y canalón de ancho fijo. Cuando cambias el tamaño, tu rejilla permanece en el medio. El otro ajuste que necesitarás es estirar. Este es el que recomendaría usar para su configuración móvil en general. La cuadrícula se extenderá hasta el ancho de la pantalla, y las columnas se calculan automáticamente. Todavía puede agregar algún canalón y margen exterior. Izquierda y derecha, pueden ser ignorados con seguridad por ahora. cuadrículas son un tema importante, complejo a la hora tratar con el diseño web sensible. No obstante, para nuestro diseño de aplicaciones, solo usaremos una cuadrícula como contenedor principal y estableceremos nuestro margen auto. Aún podrías agregar más columnas como dos o cuatro para dividir aún más tu pantalla si eso es de ayuda para ti. Puedes guardar el grado como un estilo, igual que los colores y la tipografía. En las cuadrículas de diseño, haz clic en el icono de estilo, haz clic en más y da un nombre a tu cuadrícula. Ahora puedes aplicar este estilo a cualquier otro marco. Si cambias tu estilo de cuadrícula, esto se reflejará en cada fotograma en el que se utilice. Para cambiar la visibilidad de tu cuadrícula, presiona Control G. 29. 0127 estilos de colores y convenciones de nombres: Vamos a agregar los colores para nuestro diseño de interfaz de usuario. Mirando hacia atrás a mi marco de alambre, quiero que los botones sean algún sistema de semáforo extendido. Quiero que sean rojos, anaranjados, azules y verdes. También voy a añadir un poco de gris oscuro para mis textos y un color de fondo suave. Vamos a saltar de nuevo a nuestra sección de componentes y estilo y configurar algunos estilos de color. Primero voy a configurar los colores para mis estados de ánimo. Voy a dibujar cuatro círculos y llenarlos de rojo, naranja, azul y verde. Puedes elegir colores ya sea agregando un código hexadecimal, escoge de la descripción general del color, o también podrías elegirlos de una imagen con tu selgador de color. Entonces estableceré mi nueva elección de la misma manera. Tendré un gris oscuro, casi negro y uno más ligero, una base grisácea clara, eso es sólo para que mi fondo agregue algo más dinámico y un blanco simple. Ahora los guardaré como estilos y los nombraré. Nota, no les estoy nombrando rojo, naranja, azul, y así sucesivamente, pero los nombraré por su función. En algunos diseños, este podría ser un color resaltado. En este caso, este es el estado de ánimo al que me refiero, tan triste, tan fino, y genial. Para mis colores de fondo y texto, los nombraré neutrales y agregaré un color, 800,700,200, y 0. Ahora podría preguntarse por qué hice eso. Esto se debe a que si cambié el color durante el proceso de diseño, no necesito cambiar el nombre. Los números están ahí para dejar suficiente espacio. Entre 200 y 700 por ejemplo, podría agregar muchos tonos sin estropear mi nomenclatura. También podrías usar 10,20, y 30. Simplemente trata de evitar 1,2,3 ya que no te da espacio entre sí. Si hago clic en el fondo del lienzo, ahora puedo ver todos mis nuevos estilos de color. No obstante, no utilicé una convención de nomenclatura de barras inclinadas hacia adelante para crear una categoría. Todavía puedo hacer eso aquí. Si selecciono todos los colores que quiero, agruparlos, entonces esto creará una sección que pueda nombrar. Puedo agruparlos más dentro de este grupo, y también puedo mover colores entre grupos. 30. 0128 de configuración de una calcita de estilo tipo: Para nuestro diseño, la topografía tendrá que ser un poco más refinada que para el wireframe. Es realmente importante tener una escala de tipo conjunto para crear jerarquía en su diseño. Existen diferentes técnicas para acercarse y lograr esto. A medida que voy a configurar aquí una app iOS, voy a usar algunos presets que Apple me proporciona en el diseño de interfaz humana. En iOS, podemos usar algo llamado tipo dinámico. Eso significa que cada uno de nuestros textiles correspondería a un textil dinámico. Puedes imaginarlo como si tu estilo esté vinculado a esta etiqueta, básicamente. El beneficio es que posteriormente el usuario puede cambiar el tamaño predeterminado del texto, y todo se adaptará automáticamente. No necesitas preocuparte por esto en tu diseño. Escogí algunos de los estilos que quiero usar y copié sobre toda la información en mi hoja de estilo Figma. Ahora agregaré texto de muestra y lo estilizaré con los parámetros dados. Ahora podríamos usar las fuentes integradas del sistema de Apple. Puedes verlas y descargarlas desde la página web del desarrollador de Apple o puedes usar tu propia fuente personalizada, que es lo que haré. Una vez que haya configurado todos los estilos que quiero, los voy a nombrar según el nombre de tipo dinámico que elegí, y los guardaremos como Estilos en mi archivo Figma. También puedes configurar tu propia escala de tipo si tu diseño necesita más flexibilidad. En cualquier caso, asegúrate de hablar con tus desarrolladores si hay algún requisito establecido o si están utilizando un sistema específico. En caso de que estés diseñando un sitio web receptivo, entonces necesitarías configurar una escala de tipo sensible de acuerdo a tus puntos de ruptura. Empezarías con un tamaño base para tu versión móvil, y luego por cada punto de ruptura, si es necesario, adaptarías la topografía. topografía sensible para la web es un tema bastante avanzado y más complejo y hay un nuevo curso de aprendizaje completamente separado sobre esto. En este ejercicio, no estamos construyendo un sitio web sino una app. Vamos con nuestros tamaños de iOS. Por cierto, obviamente preparé todo esto de antemano. En un proyecto nuevo y en ejecución, normalmente primero pruebo diferentes tamaños de fuente, vades, colores, y así sucesivamente, en mi diseño de muestra, y una vez que me gusta, configuro todos los estilos. A menudo todavía los cambio un poco durante el proceso. No te preocupes, va a tomar un poco, y va a estar desordenado al principio. Eso es absolutamente normal. En primer lugar, la creatividad, luego la estructura. 31. 0129 imágenes en Figma: Al usar imágenes en Figma, suele ser suficiente si las usas en tu diseño. No es necesario configurar una sección de estilo propio para imágenes. No obstante, me gusta configurar una hoja que describa el estilo de imagen general así como las dimensiones que estoy usando generalmente. Existen varias formas de agregar una imagen a tu archivo. Puede importar una imagen a través del menú o puede utilizar el atajo Shift Command o Windows Control y K. También puede importar múltiples imágenes. Selecciona las imágenes, y verás las imágenes adjuntas a tu cursor con una pequeña burbuja roja que te muestra la cantidad de la importación, así como una vista previa de la primera imagen a colocar. Puedes dejarlos caer en el Lienzo. Puedes hacer clic y dibujar para agregarlos en un tamaño específico o puedes dejarlos caer a la derecha en cualquier forma dada. También puedes simplemente arrastrar y soltar imágenes en tu diseño o copiarlas y pegarlas. Figma soporta imágenes estáticas como JPEG y PNGs, así como GIF animados. No verás la animación de tu GIF en tu modo de diseño, pero posteriormente se mostrará en el modo de presentación. Una vez que tengas tus imágenes dentro de Figma, puedes alterarlas con una herramienta de edición fotográfica. Es sin embargo, más de una edición rápida como la exposición y el contraste. No es una herramienta de edición fotográfica como Photoshop. También puedes elegir la forma en que la imagen se comporta dentro de la forma dada. Por defecto, las fotos llenan cualquier forma dada. Eso significa que se expandirá a través del ancho completo. Elegir ajuste se asegurará de que veas toda la imagen. Sin embargo, esto puede causar espacios en blanco. Con el recorte, puedes cortar el área visible a tus necesidades y también elegir qué parte de la imagen se muestra. Azulejo creará lo que lo adivinaste, un azulejo. Esto es más para los patrones. Por cierto, también puedes guardar imágenes como un relleno o un estilo de trazo, como tus colores. 32. 0130 diseños responsivos con restricciones: Queremos que nuestro diseño sea flexible y receptivo para adaptarse a diferentes tamaños de pantalla. Aquí es donde entran las limitaciones. Veamos cómo funcionan. Quiero configurar el diseño de la interfaz de usuario para mi pantalla de inicio y copié sobre el wireframe como referencia. Cuando lo redimensiono, no pasa mucho. Vamos a configurar nuestro diseño de interfaz de usuario y empecemos con una barra de estado ya que queremos que esto se vea lo más realista posible. Saltaré a la sección de comunidad y buscaré la barra de estado de iOS. Voy a agarrar uno y copiarlo a mi expediente. Ahora nota cómo cuando cambio el tamaño de esta barra, todo se queda en su lugar. Cuando hago click en la hora, se puede ver que pequeños trazos azules unidos a la izquierda y a la parte superior y en el panel Propiedades, podemos ver las restricciones establecidas a arriba y a la izquierda. Si hacemos click en los otros elementos del otro lado, podemos ver que lo mismo se establece a la derecha. Puede cambiar esta configuración haciendo clic en un diagrama o a través del menú desplegable. Si tomara la batería, mueva al centro y la pondría al centro, se quedaría justo en el medio. Si yo lo pusiera a escala, se estiraría con el marco. No obstante, queremos que esto esté respondiendo a nuestro marco padre, el marco que representa nuestra pantalla. Eso no está sucediendo todavía. Lo que tenemos que hacer es tomar el propio marco de la barra de Estado y establecer esto a escala. Si ahora lo colocamos en el marco y redimensionamos el marco, podemos ver que escala muy bien. Hay otro ajuste llamado izquierda y derecha, que resulta útil. La diferencia entre izquierda y derecha y escala es la siguiente. Si establezco un elemento para escalar, cambiará el tamaño como porcentaje de las dimensiones de los marcos. Si configuro el mismo elemento ahora a izquierda y derecha, mantiene el tamaño de capa en posición con respecto a ambos lados del marco. Esto es mucho más práctico si quieres tener un margen fijo o atar un elemento a un ancho de columna de tu cuadrícula. Dibujaré otro marco para el encabezado, y copiaré en mis enlaces y los cambiaré a mis nuevos textos y estilos de color. Permítanme también darle al fondo un ligero tinte. Ahora pondré o restricciones para el niño, así como elementos aparentes. Simplemente agregaré un contenedor simple como mi pie de página también. Este quiero pegarme al fondo. Voy a usar un pequeño truco ahora. Desde el panel Propiedades debajo de los marcos, un poco oculto, puedo escoger cualquier otro tamaño de marco así que saltaré al iPhone más pequeño disponible en este momento, que es el SE y cambiaré el tamaño de todo el marco. De esta manera puedo comprobar de manera realista cualquier otro tamaño de dispositivo. Ahora los haré todos en componentes y los guardaré en mi página de componentes. Cuando los copio, podría necesitar reajustar la configuración del contenedor padre ya que está configurada en un marco nuevo. Tenga en cuenta que para que el panel de restricciones se muestre, necesita un marco padre. diseño automático también necesitaría ser puesto en un grupo de padres para estar trabajando. 33. 0131 operaciones booleanas en Figma: Ahora voy a crear un estado de ánimo botones de nuestro diseño. Haré eso desde cero ya que quiero enfrentarme a esto un poco diferente. Empiezo con un círculo y desde mis estilos en mi menú de Rellenar, elegí un color para triste. Ahora quiero un poco más de profundidad. Duplicaré el círculo justo en la parte superior del círculo, y llamaré a esa sombra de capa. Cambiaré el color a uno oscuro, y cambiaré la opacidad a 10. Recuerda que solo puedes usar los números en tu teclado. Ahora lo duplicaré nuevo y lo moveré un poco, así que tengo una superposición. Ahora, seleccionaré ambas capas de sombra y en el menú Superior, seleccionaré Restar selección. Estas operaciones se denominan operaciones booleanas. Puedes elegir entre unión para unir formas, restando formas unas de otras, intersecando, que te dejaría solo con las partes superpuestas, y excluir, que sería el reverso de se cruzan. Ahora sólo necesito dibujar la cara. Dibujaré el ojo izquierdo con dos círculos. agruparé y lo llamaré ojo-izquierda. Ahora lo duplicaré y crearé un segundo ojo, y lo llamaré ojo-derecho. Ahora agregaré una boca. En lugar de dibujarlo, solo agregaré un círculo, lo llenaré de un color oscuro para mis estilos, y luego presionaré “Shift X”, que es el atajo para invertir colores. Ahora hago doble clic en él, lo que me lleva al modo de edición, y eliminaré uno de los puntos de anclaje para crear mi triste boca. Ahora puedo redondear los bordes, ajustar el trazo, y lo nombraré boca. Nuestra cara está lista. Ahora selecciona toda la cara y agruérela y nombrela. Ahora lo duplicaré otras tres veces y cambiaré el nombre de las copias. Ahora me adaptaré al color y a las caras de los diferentes botones. Mi amarillo, sólo voy a cambiar la boca en un trazo y mover los ojos un poco alrededor. El azul, torciendo la boca, luego otra vez reordenando el rostro. Mi verde, en realidad estoy, conectando los caminos para poder crear una boca risa y luego ajustándome. Una vez terminado, selecciono todos los botones y los convierto en grupo. Ahora sólo voy a copiar sobre mi texto y ajustarlo con mis nuevos colores y estilos. Voy a hacer otro grupo más con mi grupo de botones y mi texto y llamarlo contenido. Ahora solo necesito agregar mis restricciones y asegurarme de que funcione bien en otros tamaños. 34. 0132 componentes y variantes anidados: Ahora crearé una barra de pestañas y te presentaré un gran concepto llamado varianza. Esta vez, saltaré directamente a mi sección Componente. Ya creé un marco para mi pie de página y ahora quiero agregar los iconos. Copié sobre una casa, un calendario, y un libro de un conjunto de iconos. Para conseguir iconos, puedes dibujarlos tú mismo, como acabamos de hacer con nuestros botones faciales, o puedes usar iconos ya hechos. Si saltas a la sección Comunidad Figma, encontrarás abundancia. Intenta buscar algo así como el icono de Diseño de Materiales, que es bibliotecas ya hechas o adelante y compra un buen conjunto de iconos, realmente vale la pena tu dinero. Personalmente me gusta usar éste. Ten en cuenta que los iconos son vectores, lo que significa que se pueden escalar tanto como quieras sin perder calidad. Es realmente importante que tus iconos estén en formato vectorial y no en imágenes. Nombré mis iconos Icono/Inicio/Inactivo entonces Icono/Calendario/Inactivo en el mismo para el Blog. Ahora seleccionaré esos iconos, haré una copia y ajustaré el color a una versión activa. Entonces me aseguraré de cambiar el inactivo a activo en el nombre. Ahora seleccionaré todos ellos y los convertiré en componentes. Asegúrate de que cada icono sea su propio componente. Esto es realmente importante, lo contrario no funcionará. Ahora selecciona todas ellas y elige combinarlas como varianza desde el panel Propiedades. Ahora verás una pequeña línea púrpura a su alrededor indicando que son parte de un conjunto de componentes. Si vamos al panel Activos, podemos ver que sólo se almacenó un icono. Vamos a sacarlo como instancia y colocarlo en nuestra barra de pestañas. Ahora vamos a duplicarlo y posicionarlo de la manera que queríamos. En los lados derecho del panel Propiedad, ahora puedes ver algunos desplegable para tu varianza llamados Propiedad 1 y Propiedad 2. Con la Propiedad 1, puedo cambiar el tipo de icono. Propiedad 2, déjame elegir entre inactivo y activo. Tenga en cuenta cómo se creó esto debido a la convención de nomenclatura de barra inclinada que utilizamos. El primer nombre crea el nombre del grupo. Entonces tenemos que la Propiedad 1 que es donde anotamos abajo el tipo de ícono. Entonces el tercero es el estado, en nuestro caso, activo e inactivo. Al usar la convención de nomenclatura de barra inclinada, puede crear tantas propiedades como necesite. Si selecciono el grupo de variantes, puedo obtener una visión general sobre los nombres y distribución y también puedo alterar los nombres aquí. También puede agregar variantes y propiedades a un grupo existente desde aquí. También podrías alterar todas estas cosas en el panel de capas. Pero echa un vistazo, el nomenclatura de tu capa se ha adaptado automáticamente y se cambió. No vuelvas a cambiar esto porque esto es realmente importante para que funcione. Sin embargo, es mucho más tedioso adaptar aquí tu varianza que en tu panel de varianza. Ahora sólo voy a sumar mis restricciones izquierda, derecha, y centro en este caso, y voy a saltar de nuevo a mi diseño. Lo grandioso es ahora que tengo un cono de componente con componentes anidados dentro de él que son varianza. Puedo copiar la misma variante a través de todas mis diferentes pantallas. No obstante, simplemente puedo cambiar a botones activos para cada pantalla según lo necesitara. Esto también será una gran ventaja cuando empieces a animar tus diseños más adelante. 35. 0133 más información sobre las variantes crea la barra de calendario: Vamos a traer el calendario más vivo en nuestro diseño y usar nuestros nuevos estilos de humor como un color de fondo completo. Te daré un pequeño adelanto de lo que busco. Primero configuraré los días de la semana, así que dibujo un cuadro de texto del ancho completo y agrego algún texto. Lo voy a dar estilo y dividirlo por 7 para conseguir un día de la semana. Haré esto en un componente y lo guardaré al lado de mi marco por ahora mientras estoy trabajando en esto. Ahora, copiaré las instancias y pondré toda la semana. Vamos a copiarlo y renombrarlo. Ahora dibujaré un marco para las fechas, y lo dividiré por 7 y le daré una altura de 45. Añadamos nuestra fecha. No voy a convertir esto en un componente todavía porque primero quiero crear mi varianza. Voy a configurar lo siguiente. Primero, voy a configurar una versión predeterminada. Entonces agrego uno con el círculo. Esto es si sólo se selecciona un día. Colorearé en el círculo con el color de mi estado de ánimo, y ahora, crearé tres variantes más. Esto es si se seleccionan varios datos. El primero, el principio mantiene el círculo y tendrá un pequeño rectángulo para el fondo. El segundo solo sostendrá ese rectángulo, y el último, volverá a tener un círculo y un rectángulo, pero ahora apuntando a la otra dirección como extremo de cierre. Ahora tenemos que nombrarlos, y esto es importante porque aquí necesitamos usar la convención de nomenclatura correcta para poder crear nuestro conjunto de varianza. vamos a nombrar, fecha, esto es lo mismo para todos ellos ya que este es el nombre del grupo. Entonces vamos a tener una barra, poner humor, aquí vamos a decir genial, triste o así sucesivamente, sean cuales sean los colores. Entonces vamos a tener una barra y poner la posición, así que eso va a ser ninguno, solo día, inicio, medio o final. Nombrémoslos a todos. Una vez que haya terminado con el naming, voy a copiar solo el set con los colores y voy a hacer uno para cada estado de ánimo. Voy a seleccionar todos ellos y de componentes, ahora elegiré Crear conjunto de componentes. Esto es exactamente lo mismo que crear varianza desde el panel Propiedades del lado derecho. Ahora no cambié el nombre del estado de ánimo, que es mi propiedad 1. Lo que voy a hacer es que voy a seleccionar la varianza para cada estado de ánimo y cambiar al lado derecho del panel Propiedades para mi varianza y cualquier año, voy a ajustar nombres y estados de ánimo más antiguos. Vamos a probarlo. Ahora, desde mi panel de activos, voy a sacar mi componente de fecha y voy a configurar mi semana. Si ahora escojo alguna de esas variantes, puedo darles un estilo muy bien con la ayuda de mi panel Componentes. Para mi día actual, solo quiero agregar un círculo con un contorno. Lo que voy a hacer es volver a saltar mi variante predeterminada, y voy a añadir un círculo, pero voy a hacerlo invisible. Ahora en mi variante, puedo sobrescribirlo y simplemente agregar un esquema. 36. 0134 más restricciones crea un calendario responsivo: En este momento nuestra pantalla es genial, pero si cambio el tamaño, el calendario está pegado a la parte superior izquierda, ya que esta es la configuración predeterminada. Agreguemos algunas restricciones y hagamos que responda. Nuestros días de la semana son fáciles. Simplemente elegimos todo el grupo y lo configuramos para escalar horizontalmente. Pero si hacemos lo mismo a nuestras fechas, eso no va a quedar bien. Ahora, queremos que nuestros números y los círculos se establezcan al centro en altura y anchura. Son fijos, y sólo el fondo de color es lo que queremos escalar. Estaré seleccionando todas mis variantes y las pondré a centrar en ambas direcciones. Entonces escojo el color de fondo solamente. Mantén presionada “Shift” para que puedas unirte a múltiples selecciones, y yo las pondré a escala. Ahora vamos a saltar de nuevo a nuestro marco y al grupo sosteniendo las variantes y asegurarnos de que esté configurado para escalar. Ahora es exactamente lo que buscamos. Vamos a crear ahora nuestro marco de calendario. Copiaré sobre mi wireframe como referencia. Duplicaré el marco home, y cambiaré un fondo para mis días laborables, ya que se quedarán pegados al encabezado. Me desharé de mis botones Mood y aseguraré de ajustar el icono de Barra de pestañas. Utilizaré mi semana calendario para crear un mes, simplemente duplicándolo. Al usar variantes, puedo configurar una visión general de los estados de ánimo pasados y cambiar todo a mi gusto en poco tiempo. Entiendes la idea. Voy a avanzar un poco rápido. Agregué el nombre del mes y agrupé todo. Ahora tengo un calendario personalizable totalmente receptivo. Hice un poco extra aquí y puse mi calendario en su propio marco, y este marco me puse a escalar y lo fijé a la parte inferior. De esta manera, el mes actual y el último mes de agosto siempre será visible cuando cambie el tamaño. Si salto a la pantalla más pequeña, se puede ver que los círculos simplemente encajan perfectamente en una fila. Esto se debe a que establecí el tamaño fijo en 45, que calculé a partir del tamaño de pantalla más pequeño de antemano. Esta es la forma en que elegí configurar mi calendario. Podrías ir por un comportamiento diferente. Por ejemplo, podría sentarse fijo en el medio. O incluso podrías crear un resultado similar con el diseño automático. Ahora solo enviemos nuestras variantes a nuestra página de componentes y estilos, y ya hemos terminado. 37. 0135 Escalado en Figma Construye las páginas de estado de ánimo: Queremos mostrar lo que pasa cuando presiono cada uno de los botones de humor por lo que necesitamos una página para cada acción. Entonces voy a duplicar mi pantalla de inicio cuatro veces y quiero hacer esto un poco más divertido que en mis wireframes. Quiero que solo uno de los botones sea realmente grande y escalarlo. Puedo desagrupar contenido con Shift, Command, y G. Así que voy a deshacerme de los botones que ya no necesito. Ahora tomamos el botón de humor que queda y queremos hacerlo realmente grande. Si solo lo agrandara, eso no escalaría los trazos y el contenido. Entonces usaré la herramienta de báscula que solo puedo seleccionar del menú o simplemente presionar K. Ahora puedo agrandar el botón a mi tamaño deseado y reposicionarlo. Para mantener el menú visible frente al botón de cara, puede moverlo encima en el panel de capas o simplemente copiarlo, eliminarlo y pegarlo de nuevo en el marco. Solo asegúrate de que esté en el marco. Para salir del modo de escala, simplemente presione Escape. Genial. Hagamos lo mismo con nuestros otros botones y escalarlos y verás que nuestro diseño realmente empieza a cobrarse vida sin mucho esfuerzo. Ahora sólo voy a editar un texto a cada uno de mis marcos de acuerdo al estado de ánimo y luego creo que sólo voy a hacer algunos últimos ajustes en posicionamiento. Déjame ver. Sí, creo que así es como me gusta y esto es mis botones de humor hechos. 38. 0136 de edición de contenido de 0136 crea las páginas de revistas: Ahora, todo lo que falta es mi bloque en resumen de la revista y mi página de detalles. Como ya configuré mi diseño automático de contenido para mi wireframe, simplemente los copiaré y luego volveré a mi página de diseño. Aquí, voy a crear un nuevo marco y adaptaré un encabezado. Por ahora, solo agregaré bloque como titular y me libraré de hoy. También nos aseguramos de configurar el ícono del calendario para que se active en nuestra barra de pestañas. Ahora, pegaré en la tarjeta que copié antes de mi wireframe en mi nuevo marco de diseño. Al tratarse de un componente de estructura alámbrica, asegura de despegarlo. Ahora haré mis cambios. Cambiaré el título, el titular y el texto del cuerpo mis estilos preestablecidos en topografía y color. También me desharé del trazo alrededor de mi tarjeta. Todo el relleno me parece bien. Ahora, tomaré esta tarjeta y la convertiré en un nuevo componente de diseño. Mantendré aquí una instancia y enviaré el componente maestro a mi página de estilos y componentes. Genial. Ahora puedo duplicarla instancia, y volveré a convertir esto en un diseño automático de nuevo, anidando a tarjetas de maquetación automática en el interior. Ahora sólo puedo copiar y pegar las tarjetas pero no las veré ya que empiezan a estar fuera del marco. Desactivaré el campo de contenido del clip en el menú de fotogramas en el lado derecho. Ahora puedo editarlas más. Ahora puedo adaptar los titulares de mis tarjetas. Debido a que tengo conjunto de auto-layout, todo se ordenará muy bien. Ahora lo único que falta son nuestras imágenes. Voy a importar múltiples imágenes presionando Shift Command y K. Ahora solo para dejarlas caer en el campo. También podrías seleccionar Shape y a través del menú de películas, subir imágenes una por una. Desconectaré el contenido del clip y me aseguraré que la barra de pestañas esté encima de mis tarjetas. Una pequeña nota al margen, recuerda que colocamos algunas imágenes en nuestros estilos para trabajar. Si te gustaría usar esos, entonces primero necesitarías exportarlos y luego puedes volver a introducirlos como acabo de hacer. Para exportar, simplemente seleccione todas las imágenes, presione Exportar en el panel Propiedades del lado derecho, y exportarlas como JPEG o si tiene transparencias, PNGs. Para asegurarse de que se vean bien, en pantallas de alta resolución, asegúrate de elegir 2X o incluso 3X. Esto significa que se van a exportar en doble o triple el tamaño que estás viendo aquí en este momento. Esto es posible porque el original que subí también es más grande, y Figma almacena eso. Ahora sólo voy a hacer lo mismo con mi detallada página de artículo. Voy a configurar un marco, copiar sobre el contenido de mi wireframe, y simplemente pegarlo aquí y ajustar el estilo así como la imagen. Vamos a asegurarnos como de costumbre usar nuestros estilos preestablecidos, y luego para las imágenes, solo estoy subiendo una de mis imágenes desde antes y agregando el menú, y ya he terminado. 39. Modo de presentación 0137 con elementos desplazables y fijos: La vista de presentación nos permitirá previsualizar nuestros diseños. Aquí, también verás gifs animados, una acción. Seleccione un marco y presione el botón de reproducción en la esquina superior derecha. Observe cómo esto abre una pestaña separada. Puedes saltar de un lado a otro entre tu diseño y al modo de vista previa. También puede agregar un marco de dispositivo. Simplemente abre una pestaña Prototipo y elige idear el tamaño de pantalla en el que estás trabajando. Asegúrese de que el tamaño del dispositivo y el tamaño del marco establecidos sean iguales. Esto es realmente importante. Puedes saltar a través de los marcos con los botones de flecha en tu teclado. Ahora bien, esto se ve genial para todos mis marcos que encajan exactamente dentro de un tamaño de pantalla dado. Pero algunos de ellos tienen contenido desplazable, como mi descripción general del artículo en la página de detalles. Y este contenido ahora está oculto. Volvamos a saltar de nuevo en nuestros diseños y seleccionar un marco con el contenido que necesita ser desplazable. Desde el lado derecho, menú del panel de propiedades. Ahora elegimos entre desplazamiento de desbordamiento, la opción de desplazamiento vertical. Saltando de nuevo a nuestro prototipo, podemos ver que esto funciona simplemente genial. Sin embargo, ahora todo se arrastra. En su archivo de diseño. Selecciona los elementos que quieres que permanezcan falsificaciones. Y mi caso, esta es la barra superior así como la barra de pestañas inferior. Y luego saltar al prototipo. Y en Posición, elija fijo, permanezca en su lugar. Se puede ver que ahora todo está arreglado excepto mi contenido desplazable. A través del mismo menú. También podrías elegir que los elementos solo se vuelvan pegajosos una vez que lleguen a la parte superior en el scroll. Entonces si lo haríamos, entonces puedes ver eso ahora si desplazamos la barra inferior, qué scroll y luego quedaremos fijos a la parte superior. Entonces nada que queramos en este caso, sino una muy útil para otras configuraciones. 40. 0138 espejo Figma: vista previa en tu dispositivo: También puedes previsualizar tus prototipos móviles en tu teléfono físico que es algo que recomiendo encarecidamente. Ve a la Apple o Google Play Store y busca Figma Mirror, luego instala la aplicación gratuita en tu dispositivo. Ahora simplemente abre la app e inicia sesión con un nombre de usuario y contraseña. En la app, verás una visión general de todos tus diseños. Esto también podría estar vacío si acabas de empezar. Haga click en “Espejo” y le pedirá que seleccione marco o componentes. En tu archivo Figma real, simplemente haz clic en cualquier marco. A continuación, el marco seleccionado se mostrará en su dispositivo. Esto funciona en tiempo real para que puedas saltar por diferentes marcos, pero también si harías cambios en tu diseño, eso se reflejaría directamente en tu pantalla. Mirror siempre usa el 100 por ciento del ancho por lo que es tan importante que compruebe el tamaño del marco corresponde con el dispositivo real. De lo contrario, su diseño escalará y no será confiable. 41. 0139 con diseñadores y desarrolladores: Figma es especialmente increíble cuando se trata de compartir archivos y trabajar con varios miembros del equipo. Puedes invitar a personas a todo tu proyecto, o bien puedes compartir un solo archivo con otros. Al compartir, puedes elegir entre invitar por correo electrónico o a través de un enlace. Puedes dar derechos de visualización o edición. Editar derechos básicamente le dará a la persona que invite el mismo acceso y vista del archivo que usted tiene. Si quieres invitar a un compañero diseñador o redactor a trabajar en un diseño, entonces necesitarías elegir Editar. Los derechos de visualización son más limitados. No obstante, esto no es algo malo. En realidad es ideal para el desarrollo de traspaso o compartir diseños con no diseñadores para evitar cambios abrumadores y accidentales. Puedes otorgar tantos permisos de vista a tus archivos como desees sin ningún costo adicional. Vamos a crear un enlace de vista y vamos a entrar solo con derechos de visualización. Sólo vemos herramientas para comentar y podemos movernos pero no trabajar en el expediente. Los usuarios invitados con el modo de vista aún pueden ver todas las páginas y capas. Pueden cambiar la vista de presentación. Si configuras un prototipo, también podrían acceder a esto. En el modo de vista, también puede ver cuadrículas y reglas que podría haber establecido y también puede presionar la tecla Alt para ver cualquier distancia a un objeto dado. En lugar del panel de propiedades, se le mostrará el panel inspeccionar que también incluye la función de exportación. Esto es esencial para los desarrolladores. También un resumen de tus estilos seguirá apareciendo al hacer clic en el fondo gris del Lienzo. Si estás trabajando simultáneamente en un archivo, verás el cursor del otro usuario y en la esquina superior derecha de tu pantalla, podrás ver a todos los que actualmente acceden a este archivo. Si hace clic en el icono, puede seguir su movimiento y visualización de pantalla. 42. 0140 Figma Panel inspeccionado: Echemos un vistazo más de cerca al panel Inspeccionar. El panel Inspeccionar nos muestra todos los detalles de un elemento y es esencial para la comunicación con el desarrollo. Los desarrolladores pueden elegir si quieren dar salida en decisión CSS si iban a desarrollar un sitio web o para aplicaciones en iOS o Android, no es necesario que te preocupes por esto. Pueden elegir esto por sí mismos. Al hacer clic en cualquier elemento, toda la información se muestra en el panel Inspeccionar. También tenga en cuenta cómo se anotan todos los estilos como comentarios, así como los nombres de sus grupos y capas. En el modo de vista, todas las distancias se mostrarán automáticamente sin siquiera tener que presionar Alt. Y también puedes activar tus cuadrículas. Por cierto, la pestaña Inspeccionar también está siempre disponible en tu modo de edición, por lo que podrías echar un vistazo a eso en cualquier momento. 43. 0141 recursos exportados: Cualquier persona con acceso a su archivo con permiso de visualización o edición también puede exportar activos. Esto es realmente importante para garantizar imágenes de buena calidad a través diferentes resoluciones de pantalla al programar. Haz click en una imagen y ve a tu panel Exportar. En el modo de vista, esta será una pestaña propia. En modo edición, esto será al final de tu panel Propiedades. Haga clic en el letrero Plus y obtendrá su primera exportación en 1x, que es el tamaño actual en el que estamos diseñando. Por defecto, obtienes un PNG, pero puedes cambiarlo a un JPEG o un SVG. JPEG siempre sería tu prioridad. Esto es para una imagen estándar. Si tu imagen tiene transparencia, entonces ve por un PNG. Si está exportando un icono, un logotipo o un dibujo similar a un vector , utilice SVG. También está la opción para PDF, pero esto es más si querías exportar, digamos una pantalla para una presentación o algo así, no es nada que necesites en la programación. Ahora, haga clic en el signo Plus nuevo para agregar una segunda exportación. Tenga en cuenta cómo lo establecerá correctamente 2x y luego agregue un sufijo de a 2x. Esto significa que es el doble del tamaño de tu diseño actual, y esto es realmente importante para garantizar una imagen nítida en las pantallas de retina. Es posible que necesites otra resolución superior o diferente. Consulta con tus desarrolladores. Una vez que los tengas todos configurados, presiona “Exportar”. Un pequeño consejo de antemano. Si nombra tus imágenes con una slash hacia como aquí imágenes, hacia adelante slash sunset, entonces la primera sería una carpeta que se crea y la última será el nombre de la imagen dentro de este carpeta. También puedes crear subcarpetas como esta. Esto es realmente genial y te ahorrará mucho arrastrar y soltar. Ya sea que exporte todas las imágenes o si esto lo hace su equipo de desarrollo, que puede discutir directamente dentro de su equipo. 44. 0142 Biblioteca del equipo de Figma: Al trabajar en equipo, queremos que todos los miembros del equipo tengan acceso a los mismos estilos y componentes para mantener nuestro diseño consistente. Podemos publicar nuestros estilos y componentes a la llamada Biblioteca de Equipos. Actualmente, los estilos de publicación están disponibles para planes gratuitos, pero para publicar componentes, necesitaría un plan de página. Aquí tengo algunos estilos y componentes, vamos a publicarlos en la biblioteca. Navega a la pestaña Activos y debajo del lado derecho, verás un ícono de libro, que abrirá la ventana Biblioteca de equipos. Si ya tienes otras bibliotecas compartidas en tu cuenta, las verás aquí y podrás activarlas con un tockle. En la parte superior verás el archivo actual en el que estás, y verás el botón Publicar. Si no ves el botón Publicar, asegúrate de crear primero algunos estilos de componentes. Presiona Publicar y se abrirá una nueva ventana, solicitándole que añada una descripción. Esto es realmente útil si más adelante haces cambios, entonces deberías anotar qué y por qué estás publicando. Figma, te guardará una versión después del archivo que publicaste, que se llama control de versiones y significa que podrías retroceder en caso de un error. Se aconseja publicar más a menudo en trozos más pequeños y agregar siempre una descripción realmente sólida. A continuación, verá un resumen del componente y estilos que son nuevos o han cambiado y serán publicados. Puedes seleccionar todos ellos o simplemente algunos. Cuando estés listo, presiona Publicar. Bien hecho. Acabas de crear tu primera Biblioteca de Equipos. Vamos a abrir un nuevo archivo vacío y nombrarlo Sitio Web. No hay estilos, y no hay componentes aquí hasta ahora. Ahora vuelve a la pestaña Activos y vuelve a abrir la Biblioteca. Verás una lista de todos los proyectos y archivos que tienen bibliotecas publicadas. Activa el archivo que acabas de crear y verás todos los estilos y componentes disponibles. También podrías activar múltiples bibliotecas. A algunas personas les gusta mantener por ejemplo, su tipografía en una biblioteca, sus colores en una biblioteca. Pero esto realmente depende de ti y tu equipo cómo quieres organizar esto. Tan pronto como cree un nuevo estilo o componente, se le pedirá que actualice la biblioteca. Una vez que hagas eso, el resto del equipo también obtendrá un aviso para actualizar su biblioteca y tirar de los nuevos cambios. Una vez que hicieron clic en Actualizar, verán el cambio de ejecuciones realizado y podrán decidir actualizarse a la versión más reciente o no. 45. 0143 de configuración de una miniatura: Al compartir archivos, es genial tener una orientación a primera vista de lo que contienen los archivos. Las miniaturas son geniales para eso. Piensa en ellos como una portada de libro. Por defecto, Figma hará que la primera página de tu diseño en una miniatura, pero también puedes configurar la tuya propia. Las dimensiones de las miniaturas son de 1,920 por 960. Configuré un marco con esas dimensiones y agregué algo de información sobre mi app. También hice una bonita maqueta. Por la presente, simplemente obtuve un iPhone de la sección comunitaria. Asegúrate de elegir una que viene en capas, y luego normalmente encontrarás una de las capas sostienen una imagen que puedes reemplazar por la tuya. No se puede reemplazar por un marco real. Tiene que ser una imagen. Simplemente exporté mis fotogramas como JPEG, y luego los subí de nuevo como una imagen dentro de la pantalla de mi iPhone. Como se puede ver, también hice una llamada pantalla de presentación simplemente armando mis fases de humor, y agregué un logotipo para dar vida a la aplicación. Puedes más o menos incluir lo que quieras en tu miniatura. También es un gran lugar para agregar algo más información como enlaces a fuentes o bibliotecas externas. Establecer esta aplicación como una miniatura es realmente fácil. Simplemente haga clic derecho en el marco, y elija “Establecer una miniatura”. Ahora a medida que saltamos de nuevo a Home, podemos ver que nuestra miniatura se establece como un título, y esto también será visible para cualquiera que trabaje en su archivo. 46. ACTUALIZACIÓN: diseño automático: El nuevo diseño automático de Figma fue actualizado y anunciado durante el conflicto en mayo de 2022. Algunas cosas permanecen igual, algunas fetos y flamantes y emocionantes, y algunas cosas simplemente se movieron y vienen con pequeños detalles dulces que no debes perderte. Dame cinco minutos de tu tiempo y te pondré al día con todo lo relacionado con el nuevo diseño automático. Así que te mantienes a la vanguardia del juego y puedes saltar de nuevo al trabajo. Empecemos por el principio, aplicando el diseño automático, presione la misma vieja Mayús a, o use el menú. Nada cambió. Sin embargo, observe cómo las capas ahora se apilan en el orden que se muestra en el Canvas tiene mucho más sentido. Gracias por eso Figma, ese viejo orden inverso realmente solía molestarme. Sin embargo, el aspecto del menú Diseño automático ha cambiado. Investiguemos. La dirección funciona igual que antes, y también el espacio entre ellos. También puedes establecer el relleno horizontal y vertical tal como solíamos hacer antes. Si quieres relleno individual, simplemente haz clic para abrir las opciones para todos los sitios. Bastante estándar. Sugerencia, mantenga presionado Comando y haga clic en cualquier campo de relleno. Ahora puedes usar las notaciones comunes como lo harías en CSS, o simplemente escribir un número para todos. La herramienta de alineación tiene simplemente cambiar de posición desde el submenú al menú principal. De lo contrario, sigue siendo exactamente lo mismo. Y tiene algunos atajos nuevos y agradables, que voy a mostrarles en breve. Lo nuevo en Canvas control. Además del menú Auto Layout, ahora también tienes un control Canvas propio. Y esto es bastante asombroso. Entonces, si pasas el cursor sobre cualquier marco de diseño automático, verás que aparecen los pequeños tiradores rosados y puedes simplemente arrastrarlos para ajustarlos. Esto funciona para el espacio entre y también para el acolchado. Esto viene con algunos atajos realmente agradables. Entonces déjame mostrarte algunos consejos y trucos. Si mantiene presionada la tecla Mayús mientras arrastra, entonces aumenta o disminuye un conjunto de valor de nudging. Muy bonito. También puede hacer doble clic para manejar para atar el valor específico. Mantenga pulsado todo al ajustar el relleno y obtendrá los mismos valores para horizontal o vertical. Si mantienes presionadas Mayús y Alt mientras arrastras, luego todo el relleno, cambiaremos el tamaño por igual. Nuevo espaciado negativo. Bien, este me entusiasma mucho. Ahora puede tener un espaciado negativo entre los hijos de diseño automático, lo que significa que puede apilar elementos. Finalmente, si haces clic en los tres pequeños puntos, cualquier menú Auto Layout, accedes a las opciones avanzadas del menú de diseño. Y hay algunas cosas nuevas y algunas viejas mejoradas. El modo de espaciado es el mismo viejo pero agradable atajos nuevos. Así que al igual que un diseño automático antes, por defecto, todo está configurado en empaquetado. Empacado significa que el espacio entre los elementos de su hijo se establece en un número fijo. Si cambias eso a espacio entre, por otro lado, usará todo el espacio disponible y creará espacios iguales entre los elementos hijos directos. Ahora me encanta esa característica y la uso mucho, pero es un poco molesto ir siempre por estos submenús. Hay nuevos atajos geniales para alternar entre lleno y espacio entre en el nuevo diseño automático. Simplemente seleccione la caja de alineación y presione X para alternar entre el espacio entre el impacto. O haga clic en el asa de control on Canvas y simplemente escriba auto para configurarlo en un espacio entre o cualquier valor fijo para embalado. Otra característica completamente nueva que encuentras en el menú de diseño avanzado es incluir excluir trazo. Esto va a ser de gran ayuda para que los trazos formen parte de tus componentes. También encontrará en el orden de apilamiento de cambio de diseño automático avanzado. Entonces aquí puedes cambiar el orden si tienes elementos apilados vía espaciado negativo. Observe cómo esto no cambia el orden en el menú Capas. Además de apilar, también puedes usar siempre buenas flechas de teclado antiguas si quieres cambiar la posición real de un niño de diseño automático. Y un último, nuevo y un gran ayudante es la alineación de línea base del texto. Se necesita al menos un elemento de texto para que esto funcione. Luego puede elegir alinear el centro o a través de la línea base del texto. Otro gran atajo, seleccione el cuadro de alineación y presione B para alternar la alineación de línea base del texto. Nuevo y sorprendente posicionamiento absoluto. Este es un salvavidas total. Arrastre primero un elemento a su marco de diseño automático y luego obtendrá la opción en el menú de marcos para establecerlo en absoluto. Ahora puede arrastrarlo y colocarlo en cualquier lugar dentro de su marco de diseño automático. Y realmente está dentro de tu marco de diseño automático. Esto también significa que puede establecer restricciones para cambiar el tamaño. Cambiar el tamaño del menú. Esto es lo mismo de siempre, pero se movió y viene con grandes atajos nuevos. Me quedé un poco sorprendido cuando abrí por primera vez un nuevo diseño automático ya que el menú Cambiar tamaño desapareció. No lo es, solo se movió aquí mismo, dos cuadros. Se ve un poco diferente, pero funciona exactamente igual que antes. Ya no tenemos la representación visual. Pero Figma agregó algunos grandes atajos. Haga clic en la línea superior o inferior de un marco de diseño automático para establecer, para abrazar verticalmente. Haga clic en el lado izquierdo o derecho de un marco de diseño automático para colocarlo horizontalmente. Y lo mismo funciona si mantienes presionado viejo mientras haces clic para cambiar a llenar contenedor. Entonces eso es todo. Todo lo que necesitas saber sobre un nuevo diseño automático para ponerte en marcha. 47. Gracias: Bien hecho por terminar este curso. Siéntase libre de comunicarse con nosotros en moonlearning.io, siempre estamos interesados en escuchar sus comentarios. También nos harías un gran favor, si solo pudieras tomarte un minuto y dejar una reseña aquí mismo. Si te gusta este curso, entonces también asegúrate de echar un vistazo a nuestros cursos adicionales. En moonlearning.io, cubrimos todos los temas desde los mismos fundamentos de UX/UI Design hasta Figma e incluso algunos conceptos básicos del código. Asegúrate de visitar nuestra página web en moonlearning.io, donde también puedes suscribirte a nuestro boletín.