cómo diseñar con figma: guía básica para principiantes
LA MEJOR PLATAFORMA PARA DISEÑO WEB
Si estás dando tus primeros pasos en diseño web o simplemente buscas una herramienta que te facilite el proceso creativo, diseñar con Figma puede convertirse en tu nueva obsesión
Este programa de diseño colaborativo basado en la nube ha ganado popularidad en los últimos años gracias a su versatilidad y su facilidad de uso, tanto para profesionales como para quienes están empezando.
En esta guía, te llevaremos de la mano por las herramientas esenciales y funcionalidades clave de Figma, adaptadas específicamente para quienes quieren aprender desde cero.
¿Quieres empezar a diseñar webs en Figma pero no sabes ni cómo se abre el programa? Estás en el sitio correcto 😉 Let’s go!
vale pero... ¿qué es figma?
Figma es como esa navaja suiza del diseño, pero más guay. Es una herramienta basada en la nube que permite a diseñadores trabajar juntxs en tiempo real.
No más «envío de archivos por email» ni «oye, ¿tienes la última versión del diseño?». Aquí todo es colaborativo, y eso es una bendición si trabajas en equipo o quieres feedback en directo.
A diferencia de otros programas como Adobe XD o Sketch, Figma no necesita instalación. Solo necesitas internet y ganas de crear. Además, es multiplataforma, lo que significa que da igual si usas Mac, Windows o estás en el móvil; Figma funciona en cualquier parte.
Diseñar con Figma es mucho más fácil de lo que parece. Si ya has tenido contacto con programas de Adobe, es pan comido, y si no... ¡a ponerse al día!
lo más "difícil" siempre es empezar
¿Cómo empiezo a diseñar con Figma? Primero, regístrate en figma.com y crea tu cuenta gratuita. Sí, has leído bien, gratuita (¡para siempre!)
Una vez dentro, te encontrarás con un dashboard limpio y simple. Aquí es donde crearás tus primeros proyectos. ¡A diseñar con Figma!
1. entrando en el escritorio
Al abrir Figma, lo primero que verás será tu escritorio, donde podrás encontrar todos los proyectos que vayas realizando.
A la izquierda tienes una barra en la que encontrarás un buscador, y diferentes secciones que te llevarán a tus proyectos. También podrás crear equipos para mantener todos tus proyectos ordenados.
La interfaz funciona por pestañas: arriba a la izquierda siempre tendrás tu casita, que lleva al escritorio, y los proyectos que vayas abriendo se irán colocando en pestañas, como en el navegador.
2. conoce la interfaz
Haz clic en «Create new: design file» para abrir un lienzo en blanco (las otras dos opciones ya las investigarás más adelante). Aquí es donde ocurre la magia.
Lo primero que verás es la interfaz dividida en tres partes:
Panel de capas (izquierda)
Aquí organizas todos los elementos de tu diseño, como imágenes, texto y formas, en capas, para mantenerlo todo ordenado. A su vez, puedes ir creando páginas para agrupar contenido.
Herramientas (inferior)
Aquí están las herramientas básicas como selección, rectángulos, círculos y texto, y también las herramientas de Figma específicas, como son las secciones, los comentarios y los assets & plugins.
Ajustes y propiedades (derecha)
Este panel cambia según el elemento seleccionado en el área de trabajo, mostrando las propiedades y opciones relevantes para modificar dicho objeto o capa.
área de trabajo
Aquí es donde sucede la magia. Es el lienzo donde harás tus diseños. Puedes acercar, alejar y mover el lienzo como quieras.
3. las herramientas
Ahora que ya conoces la interfaz, es hora de empezar a crear. En el panel inferior encontrarás todas las herramientas que puedes usar:
mover
Es la flechita de toda la vida. Aquí solo tenemos una que funciona como la flecha V de Adobe, y como la A si hacemos doble clic sobre cualquier figura, para editar los nodos.
Además, en el desplegable podemos encontrar la mano para movernos (presionando la barra espaciadora también), y la escala (K).
frame
Esta es una de las herramientas más importantes, puesto que con ella creamos los frames (F) que sustentarán nuestro diseño.
En el desplegable también podemos encontrar las secciones (shift+S) y los cortes (S), que funcionan como en Adobe.
formas
En esta sección encontramos todas las formas necesarias: rectángulo (R), círculo (O), línea (L), flecha (shift+L), polígono y estrella.
También encontramos la herramienta imagen, aunque realmente cualquier forma puede ser rellena con una imagen tocando los ajustes.
pluma
Súper conocida también, con la pluma (P) podremos tanto hacer nuevos elementos como editar otros, añadiendo y suprimiendo nodos como cualquier diseñador sabe.
Y si queremos hacer una forma más orgánica, disponemos en el desplegable de la herramienta lápiz (shift+P).
texto
Con la herramienta texto (T) podremos crear cajas de texto para nuestros diseños. Eso sí, hay que tener en cuenta una gran diferencia con Illustrator, y es que al ampliar una caja, el tamaño del texto sigue igual, por lo que solo ampliamos la caja en sí.
Estas cajas de texto funcionan de manera similar a InDesign. Y para ampliar la caja modificando además el tamaño de texto, podemos simplemente usar la herramienta escala, y ¡listo!
comentarios
Una de las grandes ventajas de Figma es que , al ser una herramienta colaborativa en la nube, cualquier persona puede editar y ver el diseño a la vez en tiempo real.
Por ello, usar los comentarios es algo muy útil, rápido y cómodo para cualquier equipo de trabajo. Además, se pueden responder y resolver, lo que los hace súper interesantes.
assets & plugins
Esta herramienta es más avanzada. En ella podremos encontrar los componentes que creemos en nuestro diseño (elementos globales que pueden llevar interacciones) para tenerlos siempre a mano.
También encontramos la pestaña de plugins, algo muy útil para encontrar herramientas que nos ayuden en el diseño. Hay muchísimos y para todas las ocasiones. Tendrás que explorarlo ; )
dev mode
Y por último, encontramos el conmutador para pasar a modo desarrollo. Es algo que te servirá si trabajas con un desarrollador, ya que podrá ver fácilmente todas las características para llevar a cabo la web.
4. diseñar con figma
Aprender Figma es mucho más fácil haciendo que leyendo. Te recomiendo que te pongas a toquetear todas las opciones, probar todos los botones, e ir conociendo poquito a poco la herramienta.
Vas a ver que Figma es una herramienta muy intuitiva, y si estás familiarizadx con la Suite de Adobe, te va a resultar muy similar. Pero lo dicho, es mejor probar y toquetear para ir acostumbrándote a Figma.
5. exportar en Figma
Diseño terminado… ¿y ahora qué?
Pues lo primero es decidir qué y cómo lo quieres exportar. Para ello, selecciónalo (ya sea un elemento o un frame) y busca en la parte inferior de la barra lateral derecha la sección export.
En esta sección podrás determinar el formato de aquello que quieres exportar: jpg, png, svg o pdf. Y ya solo queda elegir la carpeta y guardar tu diseño. También puedes ampliar la escala de aquello que exportas.
Ten en cuenta que todos los elementos que no estén en un frame ni agrupados, se exportarán en archivos diferentes, así que asegúrate de que todo está correcto antes de exportar.
bibliotecas de Figma
Algo muy guay de Figma es que tiene una comunidad donde los diseñadores pueden publicar sus archivos para ayudar a otros. ¡Así es!
Hay algunos que son de pago, pero la mayoría son archivos gratuitos con iconos, interfaces, botones y un sin fin de recursos que puedes usar de forma gratuita en tus diseños.
Te recomiendo que explores la comunidad de Figma para encontrar todo lo que buscas. ¡Es inmensa! Puedes encontrarla en las pestañas superiores, al lado de la casita, con un icono de un planeta.
figma avanzado
Si te has quedado con ganas de saber más de la plataforma, es porque necesitas unos pasos más avanzados para diseñar con Figma.
Aprende sobre los estilos locales, los prototipos, los autolayouts y los componentes para volverte un auténticx experto en Figma. ¡Te cuento pronto en mi blog!
diseñar con figma es fácil y seguro
Figma es una de las plataformas más fáciles de utilizar, además de seguras, ya que todo se guarda en la nube.
¿Te ha picado el gusanillo del diseño web? Pues estás en el lugar adecuado. Si necesitas una mano o quieres llevar tus ideas al siguiente nivel, ¡contacta conmigo!
