Si no conoces Figma, es el momento de que te contemos un poco más sobre este programa. Se trata de un software con el que puedes desarrollar un proyecto web con todas las herramientas que imagines, ideal para trabajos colaborativos. Hoy te explicamos los pasos básicos para realizar un diseño web con Figma desde cero.
Diseña una web con Figma paso a paso
1. Crea un nuevo proyecto
Lo primero que tienes que hacer es crear un archivo nuevo a través del botón Drafts y darle un nombre a tu proyecto. Podrás modificar algunos parámetros, que te permitirán adecuar la mesa de trabajo según las necesidades que vayas a tener más adelante.
2. Prepara un frame sobre el que trabajar
En los botones superiores encontrarás un marco (con una forma parecida a la almohadilla #) y ahí podrás crear un frame. Podrás elegir entre diferentes formatos adaptados a las pantallas y formas de visualización de una página web, desde teléfonos móviles hasta el propio ordenador.
De igual forma, podrás crear un marco a tu medida eligiendo las dimensiones que prefieras, sin necesidad de atarte a estos modelos predeterminados. Antes de ponerte a trabajar, te recomendamos que marques con unas guías que delimiten la zona de seguridad de tu proyecto, el espacio en el que sabes que se verá perfectamente lo que incluyas sin importar el dispositivo que lo reproduzca.
3. Introduce diferentes elementos funcionales
Una de las grandes ventajas que tiene Figma es que resulta muy intuitivo y visual para trabajar con él, por lo que te será sencillo diseñar una página web en pocos pasos. Verás cómo, poco a poco, logras conformar un site que va cobrando vida a la vez que trabajas sobre él.
Por supuesto, la organización debe ser un must en tu proyecto. Mantén todos los elementos que utilices bajo control, y organiza correctamente las capas y objetos que aparezcan en la interfaz para que se muestren correctamente cuando llegue el momento.
4. Aprovecha los recursos de la comunidad Figma
Por último, no te olvides de que Figma es una plataforma colaborativa, y que puedes encontrar innumerables paquetes y kits con elementos y diseños que otros usuarios han realizado. Rellena tu biblioteca con tu estilo favorito y siempre lo tendrás a mano para añadirlo a tu proyecto.
6 pequeños trucos para hacer más eficaz el diseño web con Figma
1. Cambia rápidamente al Modo de contornos
Empezamos con un truco que te ayudará a visualizar mejor toda la mesa de trabajo, haciendo más sencillo el diseño web o cualquier otro proyecto.
Con el atajo de teclas CTRL (o CMD) + Y o CTRL (o CMD) + SHIFT + 3 podrás pasar al Modo de contornos para que puedas trabajar de manera más precisa.
2. Revela todos los objetos del proyecto
A veces nos cuesta encontrar todo lo que tenemos “sobre la mesa”, o realizar una acción concreta sobre todos los elementos.
Figma nos facilita esto a través del comando CTRL + / o CMD + /, que nos presentará un cuadro de texto en el que podremos escribir el comando que nos gustaría aplicar sobre todos los objetos.
3. Diseña y espacia las columnas fácilmente
Hacer uso del snapping y la distribución de elementos te ayudará a crear un diseño más organizado y visualmente atractivo.
Selecciona todos los objetos que quieras incluir en esta función y ve a Main menu (Menú principal) > Arrange (Organizar) > Distribute Horizontal Spacing (Distribuir espacio horizontal); ¡ya lo tienes!
4. Borra los grupos de capas que estén vacíos
Una de las pequeñas funcionalidades de Figma que hacen la vida más sencilla es la eliminación de las capas y grupos de capas cuando ya no hay elementos en su interior. Siempre que borres todas las subcapas o capas hijo dentro de un proyecto, también se eliminará la capa grupal. Esto, sin duda, ayuda a que todo quede más limpio y localizable.
5. Elimina el espacio entre los elementos
Si antes hablábamos del espaciado entre objetos para crear columnas bien alineadas, ahora nos toca volver a juntar todos los elementos. De nuevo, selecciona todo lo que quieras agrupar y ve a Main menu (Menú principal) > Arrange (Organizar) > Pack Horizontal (Agrupación horizontal) o Arrange (Organizar) > Pack Vertical (Agrupación vertical).
6. Visualiza todos los atajos disponibles
Por si todavía necesitas conocer algunos trucos más de Figma, lo mejor es aprenderte los atajos de teclado que pueden ayudarte a ser más rápido y eficiente en tu trabajo. Con el signo de interrogación de la esquina inferior derecha de la pantalla puedes desplegar todos los atajos, ¡pero también haciendo uso de uno de ellos!: CTRL + SHIFT + / o CMD + SHIFT + /
Como ves, no es difícil hacer un diseño web con Figma. Solo tienes que empezar poco a poco e ir haciendo evolucionar tu proyecto, hasta que consigas lo que estás buscando. Y, si te sientes perdido en algún momento, recuerda que puedes hacer uso de la comunidad de Doowebs para resolver cualquier duda.Ponte en contacto con Doowebs, empresa de diseño web en Valencia, para aprovechar todo el potencial de un diseño web con Figma.