En el estudio nos encanta ayudar a las mentes creativas, y por eso hoy te vamos a presentar Figma.
Figma es el programa que llevamos utilizando los últimos meses para crear nuestras propuestas de diseño web. Este programa permite diseñar un proyecto ya que tiene todas las herramientas necesarias para ello. Y lo mejor de todo, tiene su versión gratuita.
Es perfecto para crear diseños colaborativos. Uno de los puntos más fuertes de Figma es que varias personas pueden trabajar en un mismo proyecto simultáneamente y a tiempo real.
Se guarda todo automáticamente (si estás conectada a Internet) y no te ocupa espacio en tu ordenador (que esto nos encanta). Igual no es el mejor programa para ilustrar, para esto preferimos Illustrator, pero sí que opinamos que es uno de los mejores programas para diseño web.
Figma también facilita el momento de pasar información al cliente ya que puedes enviar el proyecto con un enlace.
¡Ah! Y si sabes un poco de programación web otra característica muy interesante de Figma es que te genera el css de lo que has diseñado por si lo necesitas en el momento de programar la web.
¡La verdad es que estamos encantados con Figma! ¿Estás listo para probarlo tú también?
En este post te vamos a explicar cómo crear un documento para trabajar nuestro diseño web en figma, cómo crear frames y trabajar dentro de ellos.
PASO 1: Crear un archivo nuevo
Si ya tienes Figma descargado o abierto en web, en la esquina superior izquierda verás un icono de un folio que pone “Drafts”, este icono es el que te interesa, debes ponerte encima de él y te aparecerá un signo de más, en el que vas a clicar y seguidamente le das clic a “Archive file” y vualá ya tienes tu archivo nuevo abierto.
En la esquina superior derecha también te sale el símbolo de más acompañado de la palabra “new”, si clicas encima también te da la opción de crear un archivo nuevo clicando en “Archive file”.
Y por último en la barra superior también tienes el símbolo de más junto a un icono de una casita. También puedes hacer clic en él para crear un documento nuevo.
PASO 2: Crear un frame
Para crear un frame, verás en el menú superior el logo de figma, un cursor y en tercer lugar un marco.
Haz clic en el marco y te saldrán dos opciones, frame y slice. Debes hacer clic en la primera opción, frame.
Una vez seleccionado, a la derecha te aparecerán un montón de opciones de formato entre las cuales podrás escoger.
Como decía, puedes escoger el formato que más te interese o si ya tienes las dimensiones claras podrás crear el frame a medida. Clicas en la mesa de trabajo, y manteniendo pulsado deslizas el cursor hasta obtener las dimensiones que deseas.
Si quieres poner más rápidamente las dimensiones, puedes clicar y desplazar y seguidamente en el panel de trabajo de la derecha te aparecerá una sección que se llama Frame, en la que puedes poner en la “W” el ancho y en la “H” el alto y así tener los píxeles exactos.
En mi caso voy a poner un ancho de 1920px por un alto de 3000px.
Cuando ya tienes tu frame creado puedes ver en el lateral izquierdo que pone “layers” y dentro te aparece la capa de “Frame 1”, todo lo que pongas en el lienzo tendrá que estar dentro de esta capa para que se muestre al visualizar el trabajo, pero de esto hablaremos más adelante.
Si prefieres ponerle otro nombre al frame lo puedes cambiar haciendo doble clic sobre él.
PASO 3: Cambiar el nombre
Antes de que se nos olvide vamos a cambiar el nombre al proyecto. Si te fijas arriba en el centro pone “Drafts / Untitled”, para cambiar el título debes hacer clic sobre “Untitled” y directamente escribir el nombre de tu proyecto.
Puedes poner “diseño web 1”, por ejemplo.
PASO 4: Poner guías
Antes de empezar a trabajar con el diseño de la web debes poner guías en el frame para diseñar dentro de ellas.
Normalmente nosotros ponemos una a los 1400px y la otra a los 1200px. Los 1400px de máximo, porque opinamos que es una buena medida para que la web funcione en todas las pantallas.
Para poner estas guías hacemos un rectángulo seleccionando el cuarto icono del menú superior izquierdo, el cuadrado. Clicamos y deslizamos hasta obtener el ancho que deseamos o cambiamos el ancho en el panel de la derecha para ir más rápidos.
Una vez tengamos el rectángulo hecho lo centramos en el frame con la ayuda de las guías inteligentes.
Y ya podemos sacar las guías. Para esto clicamos en la regla del lateral izquierdo y manteniendo pulsado deslizamos hasta llegar al borde del rectángulo y la soltamos.
Hacemos lo mismo para el otro lado. Y repetimos el proceso con la caja de 1200px.
Una vez lo tengas así puedes seleccionar los dos rectángulos y eliminarlos con el botón de borrar del teclado.
¡Y ya tienes tu frame listo para empezar a trabajar!
Aquí el tutorial ha terminado. Pero estate atenta a nuestros siguientes posts, en los que haremos nuevos tutoriales para que puedas seguir trabajando sobre tu proyecto como diseñadora profesional.
¡Puedes comentarnos en el post si ya conocías Figma o qué te ha parecido!
Si te interesa el diseño web y quieres saber más puedes ver este post para que no caigas en errores de principiante y si te interesan las webs prediseñadas para adaptar tu diseño te dejamos las nuestras para que les eches un vistazo aquí.
