Transcripciones
1. Introducción: Hola, gracias por asistir en Coursera badness durante actualmente diseñador de productos líder en una empresa de software con sede en Portland, Oregon. Y estoy realmente emocionado hoy en esta clase, vamos a aprender algunos consejos y trucos de productividad y ahorro de tiempo en Figma. Esto te ahorrará muchos dolores de cabeza y el futuro. Te ahorrará tiempo y demostrará el equilibrio de tu vida laboral y solo te hará un mejor diseñador a la larga. Si trabajas como diseñador, sabemos que a veces tienes otros a los que tienes que entregar tu archivo. Ya sea que sea otro diseñador o desarrollo. Figma tiene una herramienta increíblemente colaborativa. Por lo que otros compañeros de equipo con los que trabajas podrían estar entrando
directamente en tu archivo e interactuando con tu trabajo de diseño. Esa es la belleza de sigma. En realidad puedes ver a tus compañeros cursores trabajando codo a codo rendimiento. Es realmente fácil dejar comentarios y llamó a la gente
y se le pide comentarios directamente en Figma, Es gratis, está basado en navegador, pero sigue siendo una herramienta de diseño increíblemente poderosa y muchos diseñadores la usan en su flujo de trabajo diario. Pero si haces algo donde sabes que si no tienes
un archivo organizado y escribir no funcionaba con productividad a mi tipo de principio, entonces es mucho más difícil volver atrás, arreglar esos problemas en lugar de si acabas de empezar pensando en cómo puedes ser el diseñador más productivo y rápido y eficiente. Podrías ser desde el principio cuando inicies tu archivo por primera vez. Y hablaremos de eso en este curso. Hablaremos de cómo crear tu sistema de diseño, cómo crear una biblioteca de diseño, color, bibliotecas de texto. También hablaremos de algunas de las impresionantes funcionalidades de sigmas que se integran en torno a la productividad, como la función de diseño automático. Y luego hablaremos de algunos comandos de teclado y atajos que te
harán un diseñador tan grande, rápido y eficiente. Y te va a poner, hasta
ahora, tuve de muchos en los juegos. Y si eso suena como un bien, es un buen ajuste para ti. Te recomiendo que te quedes y podemos empezar.
2. Sistemas de diseño de construcción: De acuerdo, entonces primero vamos a hablar de negociar un sistema de diseño. Un sistema de diseño te permite escalar tus diseños rápidamente con la menor cantidad de esfuerzo posible. Entonces si vamos a Pinterest, puedes empezar a tener una idea de cómo se ven los sistemas de diseño. Incluso puedes empezar a guardar estos. Si eres fan de Pinterest. Puedes hacer una colección de estos si un poco quieres empezar a lluvia de ideas
aquí poseo ideas de cómo quieres organizar tu sistema de diseño. Si no sabes lo que es un sistema de diseño o vivienda, o no has trabajado con uno antes. Son realmente importantes porque te permiten trabajar con componentes y mantenerte,
mantienen tus archivos de diseño lo más limpios posible y lo más eficientes posible mientras estás trabajando. No se quiere trabajar con piezas rotas de un diseño. Porque di que si tienes una actualización de branding y tienes que cambiar el color, digamos, Oh, en este ejemplo en Pinterest, la guía de estilo de UI pobre huevo, dicen que hubo un cambio de marca donde tuvieron que cambiar este color morado a un azul o simplemente un color totalmente diferente al que se muestra aquí a lo largo de la app. Utilizan este color en su sistema de color como se muestra aquí. Un color muy común en todo. Y hay muchas veces en las que una empresa pasará por un cambio de marca y tendrás que cambiar los componentes de color primarios. No se quiere trabajar con componentes rotos individuales donde se tendría que pasar y cambiar cada componente a mano, no lo que lleva meses potencialmente. Por lo que es increíblemente importante trabajar en sistemas de diseño con una biblioteca de diseño. De esa forma, puedes hacer esos cambios en segundos en lugar de horas y horas. Y hace que sea más fácil para cualquier diseñador que entre en su archivo en el futuro y necesite hacer actualizaciones también. Metodología popular del diseño, biología
del sistema como Atomic Design by Brad Frost. Y en realidad voy a vincular este e-book gratuito que puedes leer u ordenar el libro físico. Se puede leer más sobre esta metodología. Y esto, voy a vincular este artículo de Adobe XD también que va en un poco de profundidad sobre el diseño atómico también. Y la forma en que esto funciona es que tenemos átomos, moléculas, organismos, plantillas y páginas, y sin contextos que pudieran parecer un poco confusos, pero esencialmente, este es un buen ejemplo que encontré en Google del sistema diseñado de una empresa. Yo también he construido las mías, pero muchas de las empresas con las que trabajo, realmente no
puedo compartir el trabajo públicamente, así que estoy usando ejemplos públicos en los que me he encontrado. Podrás seguir encontrando tus propios ejemplos también para conseguir ideas. Pero por lo que vemos aquí a la izquierda, y a medida que avanzamos más allá y complejidad, tenemos los átomos, las moléculas, los organismos, las plantillas y las páginas a medida que avanzamos. Además de que parece un tipo,
una guía de estilo de texto, y algunos ejemplos de su uso de la visualización de datos en todo. Por lo que es realmente bueno encontrar estos ejemplos en línea y te ayudará a darte ideas. En realidad podemos empezar a buscar en Figma. Si no has creado una cuenta en Figma, solo
irás a figma.com. Puedes iniciar sesión o registrarte y realmente puedes trabajar en el navegador, o puedes trabajar directamente en Figma. Y esto es lo que verán aquí. Verás si descargas la app física en tu computadora, puedes ir a la sección de comunidad aquí y buscar solo teclear en sistema de diseño. Y en realidad verás una gran cantidad de kits de sistema de diseño de arranque. Y literalmente puedes empezar a descargar estos. Este primero, el sistema de diseño de amplificador por fragmento a 0.03 demo. Por lo que parece que en realidad podrías comprar esto. Podrás duplicar todos estos impresionantes recursos en la comunidad de Figma. Entonces esta es una gran manera si es tan abrumador, si no conoces muy bien una herramienta de diseño. Pero si vas a la izquierda aquí en las páginas de Figma, y puedes hacer Command, contrasta y ocultar la interfaz de usuario en páginas de la izquierda puedes ver todos estos componentes y empezar a jugar con eso.
3. Herramienta de diseño automático de Figma: De acuerdo, Entonces a continuación vamos a hablar de Figma auto layout. Esta es una herramienta impresionante que puedes usar para hacer componentes dinámicos súper receptivos. En Figma, te ahorrará una tonelada de tiempo y dolores de cabeza, y es increíble y todo diseñador definitivamente debería estar utilizándolo. Será un ahorrador de tiempo. Y solo uno de los mejores componentes y características como el figma tiene para ofrecer. Por lo que en realidad, si vas a la sección de la comunidad
y, y si vas a la primera página en este momento, puedes encontrar que en los archivos de tendencia, figma realmente ha creado esta guía realmente útil llamada el Figma auto diseño de parque infantil. Si por alguna razón no puedes encontrar en la portada, podrías buscar ese título y localizarlo. Entonces si no conocemos a Sigma y duplicamos esto y se
abrirá automáticamente y se guardará en tus borradores en tu área de proyecto. Si alguna vez quieres volver a él y jugar con
él, te dará algunos caminos para que o bien podamos elegir el ELL principiante, si nunca has usado el auto-layout, lo nuevo y el auto-layout si solo quieres ver las nuevas características, algunos ejemplos. Sólo para que usted haga referencia. Para que puedas empezar a construir tus propios marcos de diseño automático una vez que te pongas cómodo. Y luego algunos recursos también. Vincularé este artículo. Si quieres leer más sobre el auto-layout, Vamos a ir con las opciones de principiante. Entonces esto será una buena visión general de lo que es el diseño automático y por qué deberías usarlo. Y es un tutorial bastante divertido con el que jugar también. El diseño automático es esencialmente una característica en Figma que te permite crear marcos dinámicos que respondan a su contenido. Entonces si alguna vez has hecho botón en Sketch o Figma o Adobe XD, y solo tienes que crear un botón estático. Sabes que tienes que cambiar el ancho
del botón para ajustarte manualmente a los textos que estás introduciendo. Entonces, por ejemplo, tenemos aquí un botón estático. Si solo escribimos, oops, soy un botón y me encanta el auto-layout. Oh no. Entonces no queremos eso. Queremos que este botón use, responda dinámicamente, redimensione dinámicamente a lo que escribimos. Por lo que nuestro primer paso es aplicar manualmente el diseño automático. Llegarás al panel lateral derecho, haz clic en Diseño automático. Y entonces automáticamente, podemos agregar, me encanta laico. Y mira eso ahora tenemos un botón de cambio de tamaño dinámicamente. Mantiene el relleno consistente. Y si creamos un componente maestro de esto, entonces podremos reutilizar este componente a lo largo de la app o página web que estamos diseñando. Y todos tus botones se adaptarán automáticamente al tipo, el texto que necesitas usar dependiendo cada flujo de usuario y pantalla para la que estés diseñando. Otro ejemplo de cómo alinear múltiples elementos. Si seleccionamos y arrastramos estos tres componentes aquí. Y en realidad podemos presionar Shift a, y eso automáticamente teclado comando auto-layout. Y creo que los Atajos de Teclado
son muy, muy útiles y te ayudan a ser muy eficientes. Pero esto sólo muestra que se re-alinearon un poco. También podemos seleccionar estos, cambiar un poco realineados cómo podemos alinearlos verticalmente. Esta herramienta del lado derecho aquí te permite elegir tu alineación. Entonces para la alineación vertical, queremos, si queríamos tenerlo centrado, también
podemos seleccionar uno de estos componentes y en realidad realmente cambiar
fácilmente el diseño y todo
el tamaño del marco se adapta a los cambios que realizas aquí. Y es tan fácil agregar otros componentes, como simplemente podemos agregar ese pero y podemos llevarlo de nuevo a esta alineación. Si queremos alinear horizontalmente, también
podemos hacerlo aquí. Entonces espera un minuto. Ah, hay que seleccionar todo el marco. Y luego ahí vamos. Por lo que hay mucho que puedes hacer con el diseño, y simplemente es mucho más rápido realinear las cosas con el diseño automático aplicado. Esto muestra el ajuste del relleno para un botón. Esta segunda herramienta. Entonces aquí mismo, en realidad puedes pasar el cursor sobre estas piezas y arrastrar para ajustar el relleno automáticamente. Y esto, esto adopta todo el relleno. También puedes aplicar relleno individual. Entonces si quisiera como Toneladas de relleno en la parte superior y luego un poco de relleno a la derecha, que si quieres ser realmente nerviosa y diseñar patrones como seguro, pero eso es solo un ejemplo de cómo podrías tener algunas instancias son algunos elementos a los que te gustaría algún relleno específico. Otro ejemplo de relleno individual. Entonces si vas a este espaciado entre artículos, puedes cambiar. Si tienes una lista, puedes cambiar fácilmente la cantidad de espacio entre cada una. Esta es herramienta realmente útil también. Esto muestra cómo diferentes elementos que se establecen para cambiar el tamaño con las opciones de cambio de tamaño. Entonces si hacemos clic en cada uno de estos, realidad
podemos ver cómo se ajusta el cambio de tamaño para establecer dos. Por lo que para estos verticales, estos rellenan vertical. Llenarán todo el contenedor verticalmente. Este horizontal. Abrazo el contenedor horizontalmente, pero mantendrá esta cantidad de espacio. Por lo que 32 pixeles de relleno es mucho, se va a mantener año consistente. Y cómo se ve eso como podemos cambiar el tamaño. Y esto sólo sigue adaptándose a su redimensionamiento horizontal. Y luego si redimensionamos verticalmente, esos componentes verticales también adoptarán. Entonces eso es realmente útil si estás trabajando con marcos que están sosteniendo. Por ejemplo, aquí, este es un gran ejemplo. Estas publicaciones en redes sociales, estoy sosteniendo opción y en realidad puedes redimensionar al mismo tiempo ambos extremos del marco en el que estás trabajando. En lugar de que si solo mantienes presionada la opción de mi ratón, puedes hacer dos al mismo tiempo. Entonces ese es un gran ejemplo de donde entra en juego el cambio de tamaño. Porque como digamos si apago Auto despido, auto-layout off esto, ya no responde. No está redimensionándolo dinámicamente. Esta es una característica más reciente que es realmente genial si estás trabajando con componentes que quieres ser receptivos pero que tengan múltiples elementos dentro de ella. Y te refieres a esas piezas para responder dinámicamente al ancho del contenedor. Aquí te mostramos un ejemplo del diseño de distribución del pacto. Entonces básicamente irías aquí y está mostrando empacado o espacio
entre empaquetados significa que permanecen empacados juntos a medida que amplías el ancho. O queríamos ese espacio verticalmente entre si cambiáramos. Entonces si viste esto adoptar este cambio cuando cambiamos eso para empacar, espacio entre básicamente significa que no tienes que
preocuparte por el espacio entre siempre y cuando tengas tu juego de relleno. Por lo que tenemos 16 píxeles de relleno en todo. Y luego a medida que estiramos esto, esos elementos responderán. Los gatos gatitos súper lindos responderán. Y entonces mantendrán la distancia igual y limpia. Y los 16 píxeles de relleno en los lados. El elemento de alineación
le permitirá ajustar dónde están los elementos dentro de un contenedor o flotante. Una impresionante pieza de magma que permite una entrega realmente fácil a los desarrolladores. De hecho, así es como interactúo con mis compañeros de equipo de desarrollo. Mi mano fuera directamente en Figma. Esta Herramienta Inspect permite a los desarrolladores agarrar
realmente las especificaciones de sus elementos de diseño muy fácilmente. Y esto muestra un ejemplo realmente grande de eso. En el panel Inspect puedes ver aquí todas
las diferentes especificaciones y propiedades de este tablero de arte. Por lo que al hacer clic en diferentes elementos, realidad se
puede ver. Entonces, por ejemplo, solo hacer clic aquí como se muestra el código de este fondo, por ejemplo. Pero si hacemos click aquí, podemos ver todas las propiedades en este marco. Y es realmente fácil para tus desarrolladores entrar y agarrar esas especificaciones. Pero estamos al final aquí y tenemos este pequeño reto divertido con más gas vertiginoso. Si nosotros nuestras habilidades. Básicamente lo que estoy pidiendo es interactuar con este diseño aquí. Por lo que nuestra primera tarea es, si hace clic en una imagen en Figma, realidad
puede seleccionar directamente imágenes, conjunto de
silicio de clic y un montón de componentes anidados. Si estoy pasando el cursor sobre esto y hago clic o mantengo pulsado Comando C, la imagen acaba de resaltar. Entonces puedo seleccionarlo automáticamente sin tener que hacer clic. Se desea lanzar un componentes anidados. Entonces si hacemos Comando D que en realidad sólo duplicó nuestra imagen. Podemos auto layout habilitado. Podemos agregarla a los terceros puestos y ver dónde se presenta y añadirla ahí. Después nos pide mover el cuarto poste a la cima. Por lo que sólo vemos tres, pero con el auto-layout habilitado, podemos ampliar cómo vemos el cuarto. Hacemos click en ese componente entero. Por lo que esta pieza de tarjeta de grupos aquí, nos movemos de nuevo a la parte superior. Ahora podemos redimensionar nuestra disposición otra vez, retrocede. Ahora nos está pidiendo que cambiemos el ancho del marco del iPhone 11 a 750 píxeles. Entonces si hacemos clic y luego volvemos a hacer clic, hemos seleccionado todo el marco. Entonces si cambiamos el ancho a 700150 píxeles, todo se extendió. Entonces ahora nos está pidiendo que cambiemos la distribución de las filas de estadísticas. Por lo que estas estadísticas de redes sociales aquí, queremos seleccionar esas. Y luego si cambiamos eso para empacar, ahora podemos ver toda la lista de personal. Entonces sí, dale una oportunidad a esto. Es realmente fácil, guía directa. Y luego pasaremos a hablar de algunos otros comandos y atajos de palabras clave impresionantes.
4. Atajos básicos esenciales: Por lo que ahora vamos a hablar de atajos de teclado en Figma. Si vas a una isla de diseño, Figma, voy a estar cubriendo los atajos de teclado de Mac porque eso es lo que uso. Puedes usar Figma en un PC con Windows. Pero si vas a Figma y a un archivo y haces clic en Ayuda y Recursos en la esquina inferior derecha, realidad
puedes ir al menú de atajos de teclado. Y todos estos estarán disponibles para ti y deben actualizarse a irrelevantes para tu sistema. Por lo que los atajos de teclado esenciales que tenemos que realmente
agilizarán tu flujo de trabajo y serán realmente útiles en una variedad de situaciones que este uso todo el tiempo como barra invertida de comando y que te permite ocultar los paneles de UI . Yo uso mucho esto cuando estoy caminando por diseños con mis compañeros de equipo sólo
porque permite que la pantalla no esté tan abarrotada cuando no estoy trabajando. Pick color. Entonces esto es el control C. Y lo que eso hace es ahora tenemos la herramienta cuentagotas. Y si selecciono otro elemento, este cuadro gris aquí, y hago Control C, puedo cambiar eso mucho más rápido que tener que ir y manualmente y seleccionar el icono hexadecimal y cambiar eso lo que la barra lateral, es mucho más rápido. Y el, si hay algo que quieras buscar, un menú o un comando que ya plugin, que hablaremos de plugins. plugins también son geniales para ahorrar tiempo. Puedes presionar el comando barra inclinada hacia adelante, y eso te permitirá ver diferentes elementos del sistema o plugins que has descargado a los que puedes acceder más fácilmente.
5. Aen el atajo de la base de la: Estas herramientas son bastante simples, delineadas en muchos de estos elementos aquí. Entonces si juegas con estos elementos, las principales herramientas de diseño en la parte superior, en la barra lateral superior. Puedes empezar fácilmente a conseguir un ahorcamiento para estos atajos más desconocidos que realmente pueden ayudar a acelerar tu flujo de trabajo. Si alguna vez quieres cambiar entre los paneles aquí que ves, puede llevar tiempo
averiguar a dónde estás tratando de ir con los botones dispuestos aquí. Existen atajos de teclado que permiten cambiar rápidamente entre esos. Entonces si quieres si estamos en activos,
si estás en un diferente, digamos el panel Activos o componentes de
tu sistema de diseño en vivo y quieres navegar al panel Capas, presionarías la Opción 1. Y luego puedes volver fácilmente al panel Activos con la opción dos y el panel de diseño en el lado derecho. Aquí, esa es la opción a. Y luego el panel de prototipos, que es donde utilizarías para hacer prototipos interactivos. En realidad puede
unir piezas en Figma y tener prototipos de vida junto con los diseños, especificaciones, los componentes también. El panel prototipo es la opción nueve. Y si fueras a inspeccionar como desarrollador y quieres Cloud perspectiva opción 0. Por lo que esas pueden ser herramientas realmente útiles si estás tratando de navegar entre paneles rápidamente. Por lo que tenemos algunos textos realmente útiles, atajos de teclado. Este me encanta porque desde hace mucho tiempo no sabía que podías hacer listas y Figma. Y pensé que era imposible. Y yo estaba como, ¿Qué me estás bromeando, pero no puedes. Por lo que si seleccionas tus elementos de lista, solo estas filas de texto, puedes presionar Comando Mayús 7, 8, y tienes una lista con fichas. Y también puedes cambiar rápidamente la alineación de estos elementos también con los comandos del teclado de alineación. Entonces si una vez más Comando opción Noticias y el, supongo las letras correspondientes para cada alineación. Por lo que Opción Comando T los alinea con el centro. Opción Comando L líneas desde la izquierda, opción comando derecho o nuestras líneas mem escribir una opción Comando J las alinea como justificado. También puede ajustar el tamaño de la fuente, el peso de la fuente, el espaciado de la fuente y la altura de la línea. Y puedes hacerlo usando los corchetes angulosos. Por lo que para el tamaño de fuente para estos ítems de la lista, si presiona el comando shift y luego el corchete de ángulo izquierdo, encogerlos, el corchete de ángulo recto aumentará su tamaño. Y se puede ver cuál es ese dimensionamiento aquí. Y también podemos ajustar el peso de la fuente haciendo Option Command, corchete angular. Antes, espere la carpeta izquierda para la derecha, hasta que tenga la cantidad máxima para esa fuente específica. El espaciado entre letras es solo la tecla de comando y los corchetes angulares dependiendo de cuál utilices. Y entonces la altura de línea es Opción Mayús. Y luego los corchetes angulosos. Una vez más, ajustaremos la altura de la línea. Por lo que hay momentos en que podrías trabajar con imágenes y Figma. Y hay alguna transformación impresionante como atajos que podemos usar al trabajar con imágenes. O estos se aplican también a otros elementos. Pero si quieres voltear la alineación o la dirección de esta imagen, por ejemplo, si usamos Shift H, podemos cambiar la dirección horizontal. turno B lo volteará verticalmente. La herramienta de recorte, en realidad tienes algunas capacidades para editar una imagen en Figma. Si pulsa Enter esa opción, subiremos aquí. Y en realidad puedes recortar y cambiar la vista de esta imagen aquí. Entonces si juegas con estos, puedes aprender y ver cómo cambian esos. Ver. Pero la herramienta de cultivo, puedes cambiar. Cuánto de esto no te muestran. Si mantienes pulsada Mayús eso mantendrá las dimensiones como última palabra. Y también puedes fácilmente, si presionas Play, también
tienes todas estas características para cambiar el aspecto real de la imagen con estas palancas de ajuste, puedes reemplazar muy fácilmente la imagen haciendo clic en Elegir. Imagínese. Podrás seleccionar y subir una nueva imagen desde tu dispositivo. Si presionas Escape y luego solo ves la emergencia como normal, en realidad
puedes cambiar realmente fácilmente la opacidad de cualquier elemento gráfico. Al igual, vamos a seleccionar estos artículos también. Si presionamos uno, cambia la opacidad a 10. Si presionamos F5, cambia a 250, y si presionamos 100, lo cambia a 100. Por lo que aquí hay algunas opciones si estás queriendo cambiar la opacidad. Entonces digamos que estábamos trabajando con esto. Imagina que lo queríamos para mí como una imagen de héroe de un sitio web que estamos construyendo. Y entonces queríamos crear como una superposición. Y si quisiéramos hacer clic en la superposición superior ahí, presionas F5 y luego recurriste. Y sobre o algo por ejemplo. Y si consigues lo que estoy diciendo, pero si solo con el uso de las teclas numéricas, puedes cambiar fácilmente esta opacidad. Entonces si estuvieras trabajando con superposiciones, esa es una herramienta realmente útil en esas instancias. Los atajos de teclado dispuestos son realmente útiles porque de lo contrario, si quieres reorganizar tus capas, tienes que ir manualmente al elemento del menú Objeto aquí, y luego desplázate hacia abajo hasta estas, esta lista de comandos. Y es mucho más rápido a la palabra clave del usuario. Entonces si acercamos y seleccionamos aquí a este tipo morado, y luego queremos mandar la capa detrás de esta forma rosada más grande aquí. Podemos presionar Command corchete izquierdo, y eso enviará, ahora, está escondido detrás de esta plaza rosa. Y luego si queríamos traerlo de vuelta, podemos presionar Comando, corchete
derecho si eso trae. Por lo que eso trae la capa, sólo una capa hacia adelante o hacia atrás. Y matiz. Ver más en este panel aquí, en el panel de capas, realidad se
puede ver como si lo mande hacia atrás, se
puede ver, sólo navegar por las capas una a una. Y luego si queremos traerlo de vuelta, tendríamos que presionar todas esas veces si quisiéramos
enviar la capa a la parte trasera lo más posible, en un solo clic simplemente presionaríamos los soportes laterales. Por lo que acabo de hacer clic en la tecla del corchete cuadrado izquierdo. Si quería traerlo de vuelta a la cima, escuché presionar a la derecha. Ahora bien, si muevo esta capa fuera de este marco, entonces desaparece y en realidad no es visible a pesar de que está en la parte superior, ahora
está en la parte superior de otro fotograma. Por lo que no podré verlo porque a pesar de que estoy presionando para llevar al mando superior el corchete de la mano derecha. Está en el marco equivocado. Entonces una vez yo, si hago clic en Comando Z, que es deshacer, es visible Otra vez porque está en el fotograma correcto. Entonces eso es algo a tener en cuenta. Algunos encuentran que las capas de oído están desapareciendo. Ahora algunos atajos de alineación que puedes usar. Si utilizas la opción a y D, puedes alinear a la izquierda o a la derecha muy fácilmente con esas. Y si tienes opción W o S, puedes cambiar fácilmente la alineación superior e inferior. Alinear centros es la alineación vertical u horizontal. Entonces si optas H, alineará horizontalmente la capa en el centro. Si optas B, se alineará verticalmente en el centro del marco o de la mesa de trabajo o en el marco en el que se encuentra. Y el Distribuir Espaciado, si duplicamos este rectángulo aquí, podemos distribuir espaciado. En realidad, lo necesitamos. ¿ Qué más? Se desea distribuir el espaciado uniformemente entre una serie de elementos. Tendrías control de la opción H o Opción de Control B. Y eso alineará esos artículos cer, una característica ordenada arriba. También puedes encontrar eso. Aquí, y tienes algunas opciones ahí. Pero si querías utilizar el atajo de teclado para eso, es solo la tecla Opción de Control y puedes ver como tomó varios elementos y simplemente limpió la forma en que
se alinearon y lo convirtieron en una lista organizada o un arreglo organizado de elementos en
lugar de tenerlos un poco fuera de su organización. Y volver a la disposición automática si queremos agregar auto-layout,
una vez más, ese comando del teclado es Shift a. Y entonces eso acaba de agregar automáticamente el auto-layout a estos componentes. Y si quisiéramos quitarlo por la razón que sea sería Option Shift a. Ahora, ya no es un diseño automático. lo último que pasaremos como crear componentes con atajos de teclado, los componentes van a conformar la mayor parte de tu biblioteca de diseño en tu sistema de diseño. Y la forma en que estos se presentan en este momento, estos no son componentes excepto la ONU. Ves estos muestran morado, los contornos que sí indican que estos son un componente. Y se puede ver aquí que se trata de un hijo directo de un componente maestro. Entonces si vamos dando click en el componente maestro de campo de formulario, realidad
podemos ver nuestra lista de componentes de diseño y básicamente la biblioteca de muchos diseños que compone este archivo de diseño. Entonces, por ejemplo, si nosotros, si cambiamos uno de estos componentes, como Vamos a cambiar el color de la etiqueta a leer. Veremos que la actualización se lleva a cabo a lo largo de todo en cualquier lugar en que se utilice el componente de entrada de texto de etiqueta in place holder. Veremos ese cambio a lo largo. Entonces eso es solo para enfatizar lo importante que es usar componentes en tu sistema dieline porque odiarías
tener que cambiar cada componente de entrada de forma manual y crear un componente. Entonces si quisiéramos hacer todo este top, estos tres primeros elementos o componentes,
o simplemente pulsar Option Command K. Y ahora esto está demostrando que es un componente. Y sólo quisiéramos tomar ese componente maestro y colocarlo dentro de nuestro sistema de diseño aquí en la página de componentes, para que eso esté organizado. Y luego podemos tomar una copia. Podemos tomar una copia de ella desde aquí presionando el Comando C, el atajo de teclado. O en realidad podemos entrar en nuestro panel de activos y luego podemos ver ese nuevo componente. Es el mismo. Entonces si retrocedemos y encontramos ese componente, podemos arrastrarlo y utilizarlo aquí. Y entonces ahora vemos que este es un componente hijo del componente maestro que acabamos de crear. Si quisieras desprender esto como un componente para que puedas convertirlo en un componente diferente que podría ser un estilo similar, pero tal vez necesites crear un nuevo componente que utilice esto, algunos elementos de diseño diferentes. Puedes pulsar Opción Comando B, y eso volverá a convertir esto en un contorno azul, lo
que indica que ya no forma parte
del sistema de componentes que acabamos de usar. Otra cosa, si no quieres tener que ir manualmente a tu panel de activos. Puedes presionar el comando de teclado Shift I y puedes tirar hacia arriba solo una lista realmente útil de tus componentes que son que estás usando dentro de tu biblioteca de activos y agarrarlos fácilmente de esa manera.
6. Componentes de renombres a la masa: Otro atajo que uso a menudo como la característica de cambio de nombre masivo. Entonces si quieres, Digamos que tenemos cuatro cuadros, o marco 2, 3, 4, 5. Y seleccionamos todos los marcos. Podemos, podemos presionar el Comando R, el comando RT, atajo, y luego podemos renombrar estos a, digamos, señor redondeado, goles. Y podemos sumar incluso un número, ascendente o descendiente. Por lo que ahora tenemos círculos redondeados, 1, 2, 3, 4. Por lo que simplemente renombramos fácilmente todos esos componentes sin tener que hacerlo uno por uno. También puedes, si alguna vez
quieres seleccionar un cierto número de componentes dentro de un área general, puedes mantener presionada la tecla Comando, Mayús y arrastrar. Y entonces eso seleccionará todos estos o simplemente, puedes hacer clic en ellos también. Entonces si solo quisiéramos cambiar el nombre de los que acabo de hacer clic, entonces puedes hacer eso y luego presionar la tecla Command R otra vez. Y luego podemos agregar la secuencia numérica. Y luego sólo se llevó todos esos. Está fuera de línea porque acabamos de seleccionar aleatoriamente los elementos. Pero ahora tenemos abc 1, 2, 3, 4, 5, 6. Por lo que es realmente fácil cambiar rápidamente el nombre de los componentes superan, lugar de intentar hacerlo manualmente y número de secuencia o triste o algo así, es mucho más rápido de hacerlo de esa manera.
7. Consejo de herramientas Nudge: Voy a hablar de la herramienta Cudge muy rápido. Entonces si has trabajado en Figma y
tú, usas tus teclas de flecha, puedes empujar un elemento por un píxel. Y si sostienes Shift, puedes moverlo por 10. Pero si entras en el elemento del menú superior izquierdo aquí y con el logotipo, puedes ir a Preferencias. Y luego en el fondo de las preferencias, puedes configurar tu empujar hacia fuera. Entonces si quisieras mover tu, tu gran empuje en lugar de diez, podrías actualizar eso. Y ahora se está moviendo unos 120 píxeles con el atajo de teclado correspondiente que estoy presionando. Y mientras sostenía turno en una dirección que me gustaría que fuera. Entonces creo que 10 funciona bastante bien en su mayor parte. Pero si hubiera alguna razón por la que querrías cambiar
eso, así es como puedes hacerlo.
8. Plugins de Figma: De acuerdo, Ahora vamos a hablar de plugins que son increíbles. Hay tantos plugins increíbles y Figma, si vas a la sección de la comunidad y realmente vas a encontrar tantos recursos. Para que puedas encontrar lo que es tendencia. Podrás encontrar plugins. La mermelada espesa es una herramienta de pizarra en línea más nueva, que es realmente divertida si trabajas en ese entorno remoto virtual, que muchos de nosotros hacemos ahora, puedes usar estas plantillas para intercambiar ideas juntas para hacer compras de trabajo con clientes. Es increíble. Tienes acceso a sistemas de diseño de mejores prácticas. Figma proporciona wireframes, ilustraciones, iconos, tipografía, diseño móvil, kits de interfaz de usuario de diseño
web, solo cualquier cosa que se pueda pensar como una especie de Starter Kit o plantilla. Tienes acceso a tantas plantillas diseñadas profesionalmente para
jugar o construir a partir de o por supuesto, ya
sabes, no estamos copiando o robando el trabajo de nadie, pero estos son algunos recursos útiles. Y muchas veces,
si son libres de regalías o libres usar o licencias Creative Commons y no tienes que preocuparte por los derechos de autor, entonces lo listarán y lo dirán. Muchas de estas son herramientas de marketing, por lo que podrían apagarse, tener un enlace que te llevará a cabo efedra para comprar un kit de wireframe completo, por ejemplo. Pero de cualquier manera, súper genial para obtener inspiración. Y con los plugins, solo hay tantos miles de plug-ins que están hechos para Figma que acelerarán tu flujo de trabajo y te harán la vida más fácil. Una que uso mucho es crear muchos flujos de usuario y mi trabajo. Por lo que si hace clic en una de estas pruebas, estas son palabras y hace clic en Mayús o mantenga presionado el turno y haga clic en el elemento Siguiente. Simplemente ves que la flecha se llena automáticamente para conectarse a este flujo. Y puedes seleccionar los elementos individuales, los
vincularé también. Entonces si estás vinculando wireframes o elementos para mostrar cómo es un flujo de usuario. Esto es tan fácil. Se puede cambiar fácilmente el color. Se pueden cambiar los terminales de las flechas para que sean un estilo diferente. Y también puedes, esto es dinámico, por lo que si lo arrastras, cambiará automáticamente la longitud de las flechas por ti. Otro plug-in que uso muy a menudo es el plugin Unsplash. Esto es tan útil si creas, sobre todo si estás recibiendo los maquetas de alta fidelidad. Si crea, si necesita crear un perfil de usuario, por ejemplo, y tiene este círculo, tenga una imagen de usuario en el círculo. Si escribimos adultos jóvenes, podemos conseguir esta lista impresionante o esta impresionante selección de imágenes de Unsplash, que son todas gratis de usar, imágenes libres de
regalías que los fotógrafos suben a sabiendas para permitir a la gente utilizar su trabajo sin derechos comerciales. Por lo que son capaces de utilizar estos para derechos comerciales sin preocuparse por el tema de redacción de textos. Entonces si seleccionamos esta imagen de la forma en que esta se programa, sabe escalar esto para detectar cuál es el punto focal de la imagen. Por lo que aún puedes cambiar el punto focal sin embargo, si sí quieres ajustarlo haciendo clic en la sección de relleno y haciendo clic en la imagen y luego eligiendo recortar. Eso se puede ajustar aquí. Para que puedas, si quieres que esté más enfocada en su rostro, puedes hacerlo también con esa herramienta. Otro plugin que es realmente útil
si utilizas mucho la visualización de datos en tu trabajo. Después hay herramientas o puedes ingresar tus datos. Y automáticamente puedes tener un gráfico de líneas, un gráfico dispersión, un pi de área de barras, o un gráfico de donut creado para ti sin tener que
construir manualmente uno o por un kit de interfaz de usuario con visualización de datos, si solo buscas un sencillo tipo de gráfico, puedes introducir tus datos y automáticamente en él. Y puedes ajustar esto según sea necesario para que se ajuste a tus diseños. Por lo que a esa última se le llamó cartas. Este plug-in para gráficos se llama gráfico. Pero puedes ver todas las diferentes opciones aquí. Este es en realidad ofrece una versión pro, pero puedes usar datos aleatorios. Se puede importar una tabla, o bien se puede utilizar un archivo JSON. Entonces eso es realmente impresionante si tienes esos recursos disponibles para ingresar los datos. Y entonces dibujará automáticamente un gráfico para ti. Entonces si seleccionamos este elemento aquí, y luego vamos a nuestros plugins y hacemos clic en gradientes de UI. Tenemos acceso a una tonelada de gradientes precreados. Y los buenos gradientes son en realidad una especie de habilidad. No quieres que sea demasiado duro ni la transición para mí. No es natural. Entonces esta es una opción realmente buena si solo quieres una buena selección de. Realmente hermosas yemas de los dedos de sidra gradiente sin tener que
pensar demasiado en ello o pasar demasiado tiempo recreándolas. Un plugin más que voy a ir sobre opción para plugins es plugins de biblioteca de iconos. Así que los iconos de Diseño de Material. Material Design es el sistema de diseño de Google y la guía de mejores prácticas. Y solo tienen un enorme conjunto de iconos prefabricados. Se puede utilizar. A mucha gente le gusta diseñar sus propios iconos. Hago mucho trabajo donde la UI realmente no necesita ser creativa. Necesita tener una interfaz más profesional o familiar. Por lo que me gusta usar iconos prefabricados porque ahorra tanto tiempo y diseño de materiales. Si utiliza una biblioteca de componentes para su desarrollo que utilice las mejores prácticas de diseño de materiales y sus pautas de diseño. Entonces es realmente fácil nombrar los componentes en su sistema de diseño para que coincidan con esos. En las especificaciones de desarrollador en tus desarrolladores sabrán exactamente qué iconos usar y pueden agarrar las especificaciones para conocer el color, el tamaño, y luego el nombre. Siempre y cuando sea consistente con el bibliotecario, los iconos de Material Design, entonces será muy fácil de entregar, pero simplemente puedes seleccionar todos estos fácilmente. Y Material. El diseño es de código abierto. Oh, eso es genial, y no tienes que preocuparte por ello. En cuanto a los derechos de autor y cosas así. Estamos teniendo licencia comercial. Y luego también hay otras opciones. Hay iconos de racionalización es una enorme biblioteca de iconos. Y en realidad tienen una opción pro para obtener acceso al archivo SVG. Entonces si se carga, pero tienen una enorme cantidad de categorías y su biblioteca de iconos. Por lo que tienes todas estas opciones diferentes y es realmente fácil de navegar y ordenar. Al igual que si tú, quiero decir, tienen categoría de decoración de muebles, tienen una categoría para todo. Entonces y son realmente elegantes y simplemente realmente geniales y hay tantas opciones para elegir. Pero si sí quieres un poco más de una tendencia cercana o actualizada, supongo. Tipo de conjunto único de iconos que creo que la racionalización tiene una muy buena variedad. Es posible que tengas que hacerlo, vale la pena si vas a usarlo mucho, Definitivamente vale la pena, pero tendrás que pagar para obtener ese acceso como usuario premium. Y también necesitas mirar qué licencia comercial estás usando y el número de usuarios que puedes tener una orden para usarla comercialmente. Entonces eso es algo en lo que pensar también. Pero utilizar una biblioteca de iconos como esta te ahorrará una tonelada de tiempo y es divertido pasar y escoger estos iconos. Y entonces en realidad puedes empezar a tomar esos iconos aquí y crear esos componentes. Y pesos aquí para empezar a construir encima de tu ícono Bibliotecario, tu sistema de diseño. Y realmente fácilmente cambiar de ida y vuelta entre los componentes de filas. Y la forma en que cambias entre componentes. Un atajo más rápido es si creamos un componente maestro de esto. Y entonces si lo hicimos por éste, éste, si duplicamos todos estos, ahora
tenemos estos componentes infantiles. Y podemos cambiar fácilmente entre la instancia de estos componentes. Entonces aquí dice la instancia de icono porque home solid, en realidad
vemos nuestra lista de iconos que acabamos de crear, estos componentes secundarios apareciendo en este selector de instancias. Y podemos cambiar fácilmente qué instancia hemos seleccionado. Por lo que eso es extremadamente útil. Es bueno asegurarse de que las convenciones de nomenclatura sean consistentes porque está nombrando convenciones mientras determina cómo se mostrarán en este selector de instancias de intercambio. Entonces eso es algo a tener en cuenta también.
9. Tu proyecto: comunidad de Figma: Está bien. Hemos pasado por muchos atajos hoy y muchos hacks de productividad ahora podemos empezar en tu proyecto de clase. Me gustaría que navegaras a la sección de la comunidad y a Figma y encontraras una plantilla de kit de UI con la que te gustaría jugar y seguir adelante y descargar una. Entonces fui y duplicé el kit de mesa de diseño automático. Por lo que este es un layout get que te
permite crear tablas dinámicas responsive realmente rápidamente. Hay muchos de estos disponibles en sección de comunidad de
Figma y descarga o duplet kit de recursos. Entonces si hacemos clic
duplicar, creará un nuevo proyecto para mí que es mi propia copia y puedo editar y cambiar como quiera. Y así tienen la página de consejos y trucos aquí que te muestra cómo usar el kit. Se puede intercambiar varianza, se
puede personalizar todo con componentes para adaptarse a las necesidades de la mesa que está diseñando. Y aquí tienes tus textiles, tu, tu sistema de color. Entonces todos estos, en realidad
puedes encontrar ese sistema de color aquí también en los estilos de color. Por lo que esto permite cambiar dinámicamente esos. Si sigues adelante y haces clic en un color, realidad
puedes editar ese color en tu sistema de color y cambiará a lo largo. Y luego tienen sus componentes básicos de IU los cuales puedes cambiar el estilo de. Estos son menos en él también. Y selecciona un botón. Y ahora todos los botones de texto están en este color azulado en lugar del azul real. Por lo que hay tanto que puedes hacer en los recursos disponibles en la comunidad para Figma, me encantaría que descargaras un kit de interfaz de usuario que te hable. Hay un montón de divertidos. Y si acabas de empezar a jugar con estos y crear algo, solo crea algo y yo leo, intenta utilizar todos los atajos que aprendimos. Si desea utilizar un kit de sistema de diseño y solo tratar de crear su primera página de aterrizaje. Y lo estás, si tienes un proyecto en el que estás trabajando, pero quieres intentar aplicar algunos de los atajos o hacks de productividad. Subes una captura de pantalla y comparte qué hackeo de productividad o un atajo que aprendes de este set
te va a ayudar de verdad y estás avanzando como diseñador.
10. ¡Gracias!: Oye, buen trabajo completando este curso sobre consejos y trucos de productividad de Figma. Estoy muy feliz de que estés invirtiendo en tu crecimiento profesional y tu crecimiento personal y mejorando tu flujo de trabajo diario e invirtiendo en tu educación, educación
continua, o simplemente aprendiendo una nueva habilidad que has sido interesado en. Y espero verte en mis próximos cursos. Por favor suscríbete y sígueme y estarás al día del próximo contenido que libere. Y si tienes alguna entrada o retroalimentación sobre los tipos de contenido alrededor del diseño y la industria del diseño que te gustaría conocer más. Por favor házmelo saber, dame algunos comentarios y puedo tratar de atender algunos cursos a lo que se está solicitando. Gracias otra vez.
Sarah Bannister, UX/UI Designer | Dog Enthusiast
