Guía de Figma para principiantes

En Figma puedes diseñar elementos de interfaz, crear sitios web interactivos y prototipos de aplicaciones, crear ilustraciones y trabajar con gráficos vectoriales. Muchos diseñadores también lo utilizan para crear diseños de sitios web para Tilda.

• Interfaz para aplicaciones móviles-FigmaiOS UI kit.
• Prototipo del panel de control del Tesla Model 3 y sus elementos de interfaz.

Por ejemplo, los gestores de proyectos y los empresarios pueden utilizar plantillas de diagramas de Gantt para planificar, o crear anuncios para redes sociales utilizando preajustes para Facebook y otras plataformas.

• Multiplataforma

• En la nube

• Retroalimentación integrada

Cualquiera con acceso puede comentar un diseño y recibir comentarios directamente en el diseño. Esto acelera el proceso de aprobación y garantiza que las notas importantes no queden enterradas en hilos de correo electrónico.

Tras registrarte, verás dos espacios de trabajo principales:

1. El gestor de archivos, donde puedes crear proyectos y ajustar la configuración de tu perfil.
2. El propio editor gráfico.

Figma Community es una característica relativamente nueva que funciona como una plataforma de medios sociales de marca dentro de la herramienta principal. Permite a los usuarios compartir y descubrir recursos de diseño como plantillas, kits de interfaz de usuario y plugins. Para acceder a ella, haz clic en el icono del globo terráqueo.

Los plugins son esencialmente herramientas y extensiones de terceros que amplían la funcionalidad de Figma. Ayudan a acelerar los flujos de trabajo, mejoran la eficiencia y proporcionan funciones adicionales como bibliotecas de imágenes de archivo, iconos, etc.

Por ejemplo, si instalas el complemento Unsplash, podrás insertar imágenes de archivo sin salir de Figma, mientras que Iconify te da acceso a más de 40 000 iconos vectoriales.

Los usuarios pueden desarrollar y añadir plugins ellos mismos, adaptando la funcionalidad de Figma a sus necesidades específicas.

Desde que Figma introdujo Figma Community, los plugins han pasado a formar parte de esa interfaz. Allí puedes encontrar y explorar todos los plugins disponibles.

Una vez que hayas conectado los plugins deseados, podrás acceder a ellos a través de la barra de herramientas inferior, en la pestaña Plugins y widgets.

Una nueva pantalla de archivo contiene tres áreas principales: El lienzo, la barra de herramientas y dos barras laterales. La barra lateral izquierda contiene el panel Capas. Estos son algunos elementos clave de la interfaz:

Por defecto, todas las formas recién añadidas son de color gris. Para cambiar el color, seleccione "Elegir color" en el menú desplegable Editar. Esto abrirá el selector de color, que le permite elegir un nuevo color mediante la identificación de cualquier color ya utilizado en el lienzo.

"Seleccionar todo con..." resalta todos los elementos que comparten las mismas propiedades, relleno, fuentes o efectos, lo que facilita la edición por lotes.

Este menú le ayuda a configurar el lienzo, facilitando la navegación por el diseño. Puede activar la cuadrícula de píxeles, mostrar reglas, acercar o alejar la imagen, etc.

Para maximizar el espacio de trabajo, puede ocultar el panel Capas y la interfaz mediante las opciones correspondientes.

Los objetos colocados en el marco aparecen como "capas" a la izquierda. También puede agrupar objetos (por ejemplo, colocar un número de teléfono y un correo electrónico en el pie de página). Alinee los elementos dentro del marco utilizando el panel de la derecha, o agrúpelos con Objeto → Agrupar selección(Ctrl/Cmd + G).

Defina el número de columnas, ajuste su transparencia cromática y personalice la anchura del medianil. También puedes elegir el tipo de cuadrícula: cuadrícula, columnas o filas.

• Utilice los ajustes que se encuentran en la parte superior del panel Propiedades para mover y escalar objetos en los ejes X e Y.
• Utilice el radio de las esquinas en "Apariencia" para redondear las esquinas de una forma, por ejemplo, para que los bordes superiores de un rectángulo parezcan un marcapáginas. Por defecto, el radio se aplica a todas las esquinas. Para redondear sólo esquinas específicas, haga clic en la opción Esquinas individuales junto a los campos de valor.

• Para ajustar el grosor del trazo, utilice el ajuste "Trazo": introduzca un valor o arrastre el control deslizante. Para ocultar el relleno, haga clic en el icono del ojo o del signo menos bajo "Relleno".

• Para que el rectángulo parezca una bandera, extienda su borde inferior. Haga doble clic en la forma para editar sus puntos.

• La herramienta "Doblar" te permite suavizar esquinas o curvas.
• "Cubo de pintura" permite rellenar un recorrido cerrado.

• Relleno: La imagen se escala para cubrir completamente el marco, asegurando que no quede ningún espacio vacío. Si la relación de aspecto de la imagen difiere de la del fotograma, es posible que se recorten partes de la imagen para mantener la cobertura total.

• Ajustar: Muestra la imagen completa dentro del marco, conservando su relación de aspecto original. Esto puede dar lugar a un espacio vacío (relleno) si la imagen y el marco tienen proporciones diferentes.

• Recortar: Permite ajustar manualmente qué parte de la imagen es visible dentro del encuadre. Puede reposicionar y redimensionar la imagen para centrarse en un área específica, recortando el resto. Las áreas recortadas se ocultan pero no se borran, lo que permite una edición no destructiva.

• Mosaico: Repite la imagen como un patrón.

Los ajustes disponibles también te permiten realizar correcciones fotográficas en la imagen: ajustar el brillo, el contraste, la saturación, etc., o incluso editar una parte específica de la foto.

1. Coloque una capa de forma debajo de la capa de foto.
2. Seleccione ambas capas.
3. Ve a Objeto → Usar como máscara (atajo: Ctrl + Alt + M en Windows, o Cmd + Opc + M en macOS).

Figma admite la importación de archivos SVG. Puede arrastrarlos desde su ordenador o copiarlos y pegarlos directamente desde Illustrator o Fresco. Estos archivos suelen mostrarse como marcos. En el panel Capas, puede agrupar objetos vectoriales pulsando Ctrl + G (Windows) o Cmd + G (macOS) y moverlos por encima de la capa del marco.

• Sólido: El tipo de relleno por defecto, aplicando un único color al objeto.
• Lineal: Crea un degradado a lo largo de una línea recta entre dos puntos.
• Radial: Genera un gradiente circular que irradia desde un punto central.
• Angular: Aplica un degradado que gira alrededor de un punto central, creando un efecto de tarta.
• Diamante: Produce un degradado en forma de diamante, que irradia desde el centro.
• Imagen: Rellena el objeto con una imagen (o vídeo).

Al modificar las posiciones de los puntos finales del degradado, puede controlar la dirección y la intensidad de la transición de color.

Si quieres opciones más creativas, prueba a superponer formas y aplicar varios degradados. Puedes usar modos de fusión para apilar formas o imágenes de formas únicas.

Si se rompe el vínculo entre un componente principal y uno secundario, puede restablecer la conexión seleccionando el componente secundario y haciendo clic en el icono Restablecer o Volver. Esta acción revierte cualquier parámetro modificado manualmente, restableciendo el vínculo con el componente padre.

Guarde todas las variaciones en un marco específico y, a continuación, aplíquelas a las capas de texto según sea necesario.

• Separe la instancia hija de su padre utilizando la opción "Separar instancia".
• Aplicar diseño automático.

• Fijo: Mantiene estática la anchura/altura según los parámetros introducidos manualmente.
• Abrazo: El marco se redimensiona automáticamente para ajustarse al contenido.
• Relleno: El elemento rellena la anchura o altura del contenedor padre.

• Envolver: Organiza los elementos en varias filas o columnas dentro de un marco. Los objetos fluyen horizontalmente y se envuelven en la línea siguiente cuando el espacio es limitado.
• Mín/Máx: Establece las dimensiones mínimas y máximas de los marcos y elementos hijos, evitando que sean demasiado grandes o demasiado pequeños.

Este plugin te permite explorar más de 40 000 iconos vectoriales de Iconify, incluidas colecciones como Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, etc., e insertarlos rápidamente en tu diseño.

• Windows: Ctrl + Mayús + E
• macOS: Cmd + Mayús + E

• SVG: Ideal para objetos vectoriales como iconos y gráficos sencillos debido a su escalabilidad y nitidez a cualquier tamaño.
• JPEG: el más adecuado para fotografías e imágenes con degradados, ya que ofrece una buena compresión y un buen equilibrio de calidad.
• PNG: preferido para imágenes que requieren transparencia o imágenes con texto y bordes nítidos, ya que admite la compresión sin pérdidas.
• PDF: Útil para documentos y maquetaciones que necesitan conservar elementos vectoriales y ser escalables sin pérdida de calidad.

• Discute tus proyectos: Colabora en tiempo real con chats de voz y comentarios, e incluso incrusta música. FigJam ofrece funciones de inteligencia artificial (actualmente en fase beta) como "Ordenar", que organiza automáticamente las notas adhesivas por temas, y "Resumir", que ofrece una visión general rápida de todas las notas.
• Tome notas y analice las entrevistas con los clientes: Los diseñadores pueden utilizar una plantilla integrada para registrar las entrevistas con los usuarios y, a continuación, crear personas usuarias basadas en los datos recopilados.
• Construya mapas de viaje del cliente: Visualice los recorridos de los usuarios: describa las acciones que realizan, sus expectativas, emociones y puntos débiles. Mejora cada etapa del recorrido del usuario con herramientas como notas adhesivas, emojis y otros widgets.

• Requiere reiniciar para añadir fuentes locales: Instalar una fuente en tu ordenador no es suficiente. Tendrás que reiniciar Figma para cargarla.
• Posibles imprecisiones en la exportación: A veces Figma añade aleatoriamente algunos píxeles de trazo o distorsiona ilustraciones lineales al exportar archivos PNG, JPG o SVG.
• No incorpora protección de derechos de autor: En el plan gratuito Starter, no hay forma de evitar que alguien duplique tu archivo y edite su propia copia.
• Requiere una conexión estable a Internet: Al igual que Google Docs o cualquier otro servicio basado en la nube, Figma no permite la edición sin conexión. Si pierdes la conexión, los cambios no se guardarán hasta que vuelvas a conectarte.
• No hay atajos de teclado personalizados: Los atajos disponibles en Figma son fijos, pero puedes utilizar herramientas de terceros como AutoHotkey para reasignar teclas.
• No hay versiones multilingües: Figma sólo está disponible actualmente en inglés y japonés. Si lo necesitas en otro idioma, la única forma es utilizar la extensión Google Translate para Chrome. Si tienes experiencia con editores gráficos como Photoshop o has seguido esta guía, te será más fácil desenvolverte con Figma.

• Editor gráfico en línea: todo tu equipo puede trabajar simultáneamente en el mismo archivo, con todas las actualizaciones guardadas en la nube.
• Historial de versiones: Figma almacena cada cambio de versión, por lo que puede volver atrás fácilmente si es necesario.
• Sin limitaciones de sistema operativo: Figma se ejecuta directamente en un navegador, por lo que no requiere ninguna configuración compleja y funciona incluso en portátiles modestos. No obstante, si lo prefieres, también puedes instalar la aplicación de escritorio.
• Modelo freemium: El plan gratuito Starter admite hasta dos editores, perfecto para muchos autónomos o equipos pequeños.
• Ideal para prototipos sencillos: El concepto general y la interfaz están diseñados para construir interfaces web y de aplicaciones. Sin embargo, para ilustraciones o edición de fotos más avanzadas, puede que necesites otra herramienta.
• Ecosistema de plugins: Con cientos de plugins disponibles (y la posibilidad de crear los tuyos propios), Figma puede adaptarse a la mayoría de los flujos de trabajo.