Contenido de la entrada
En esta entrada vamos a explorar quรฉ es Figma, por quรฉ es tan popular y cรณmo empezar a utilizarlo. Tambiรฉn planeo agregar mรกs entradas explicando las distintas funcionalidades de Figma, como la creaciรณn de componentes, estilos, etc. El objetivo es proporcionar una guรญa en capรญtulos cortos y fรกciles de seguir.
ยฟQuรฉ es Figma?
Lo primero que debes saber es: ยฟQuรฉ es Figma? Si no has estado viviendo bajo una piedra, probablemente hayas escuchado sobre Figma, pero si necesitas una explicaciรณn, aquรญ va. Figma es una herramienta de diseรฑo de interfaces que funciona como una aplicaciรณn web, lo que significa que no necesitas instalar nada en tu ordenador. Esta caracterรญstica te permite trabajar desde cualquier lugar y en cualquier plataforma, siempre y cuando tengas acceso a Internet.
No necesitas instalar nada en tu ordenador.
ยฟPor quรฉ hacer esta entrada?
Uso Figma casi todos los dรญas y me gustarรญa tener una guรญa de referencia para consultas rรกpidas y para ayudar a cualquier persona que quiera comenzar a utilizar Figma.
Entrada no patrocinada que ya quisiera yo.
ยฟQuรฉ diferencia a Figma de otras herramientas de diseรฑo?
Figma tiene varias ventajas, pero la principal, en mi opiniรณn, es su enfoque orientado a la programaciรณn. Esto significa que tiene funcionalidades que acercan el diseรฑo al flujo de trabajo de la programaciรณn.
Introducciรณn ยฟCรณmo diablos consigue esto?
Si tienes el perfil de diseรฑo, la idea de “programaciรณn” puede intimidarte un poco , pero no te preocupes, Figma estรก diseรฑado para hacerlo accesible para todos.
No te asustes, no es tan complicado.
Figma estรก orientado al diseรฑo de componentes, tokens, variables, etc. Esto significa que puedes crear componentes y reutilizarlos en diferentes partes de tu diseรฑo, ademรกs de poder crear estilos globales que se pueden modificar en un solo lugar.
Esto agiliza el trabajo y garantiza un diseรฑo mรกs consistente y escalable. (Olvida la necesidad de copiar y pegar el mismo botรณn mil veces y tener que modificarlo en mil lugares diferentes).
Realizas un cambio y se refleja en todos los lugares.
Ademรกs, Figma cuenta con una funciรณn llamada “Auto layout” que ajusta automรกticamente los elementos al contenido que contienen.
Los elementos se ajustan automรกticamente al contenido que contienen.
Tambiรฉn puedes trabajar de forma colaborativa y en tiempo real con otras personas, dejar comentarios, controlar versiones y marcar elementos como listos para pasar a desarrollo o no.
Puedes trabajar en tiempo real con otras personas.
Por รบltimo, puedes preparar tus diseรฑos para crear presentaciones interactivas sin necesidad de escribir una sola lรญnea de cรณdigo. Puedes crear prototipos, animaciones, etc., y compartirlos con cualquier persona que tenga el enlace.
Si tu perfil es de programaciรณn, tampoco te costarรก adaptarte a Figma, ya que comparte muchas similitudes con los flujos de trabajo de desarrollo. Personalmente, encuentro que esta familiaridad facilita mucho el proceso de diseรฑo.
Puede parecer abrumador al principio, pero una vez que te acostumbras a trabajar de esta manera, no querrรกs volver atrรกs. Ademรกs, Figma se integra muy bien con otras herramientas de diseรฑo y desarrollo, como LottieFiles y VSCode, asรญ que no tienes que abandonar tus herramientas favoritas; puedes combinarlas perfectamente.
Se integra muy bien con otras herramientas de diseรฑo y desarrollo.
ยฟCรณmo empezar a utilizar Figma?
Voy a asumir que ya te has registrado en la plataforma de Figma. Si no lo has hecho, ยฟa quรฉ estรกs esperando? Dirรญgete a
Figma.com y regรญstrate.
Prefiero comenzar desde un espacio de trabajo nuevo, aunque la primera pantalla puede resultar un poco intimidante. Por lo tanto, vamos a crear un nuevo espacio de trabajo.
Vamos a crear un nuevo espacio de trabajo.
Verรกs algo como esto:
Ui del home de Figma
Podemos identificar tres secciones principales:
Barra de navegaciรณn izquierda: Aquรญ encontrarรกs tu perfil, tus espacios de trabajo, espacios favoritos, proyectos compartidos y grupos de trabajo.
En este momento, nos interesa principalmente la secciรณn “Drafts”, donde se guardan los proyectos que aรบn no has compartido con nadie.
Empezaremos a trabajar en un borrador.
Es como la unidad mรญnima, asรญ que no te preocupes por la palabra “borrador”
Barra de navegaciรณn superior: Aquรญ encontrarรกs botones para crear un nuevo proyecto, crear un nuevo Jamboard, importar un archivo y acceder a proyectos recientes.
No nos enfocaremos en Jamboard ni en la importaciรณn de archivos en esta entrada, asรญ que nos centraremos en la creaciรณn de un nuevo proyecto. Si quieres que cubra estos temas en otra entrada, dรฉjame saber en los comentarios.
Espacio de trabajo: Aquรญ verรกs todos tus proyectos, podrรกs filtrarlos, buscarlos, etc. En este momento, estarรก vacรญo, pero vamos a cambiar eso. Dirรญgete a la esquina superior derecha y haz clic en “Desing new file”, luego selecciona “Drafts”.
Un nuevo proyecto, interfaz de Figma
Ahora verรกs algo cรณmo esto:
Puede que veas algo ligeramente diferente, ya que tengo una configuraciรณn personalizada, pero no te preocupes, lo iremos explorando poco a poco.
Lo importante es que te familiarices con tres conceptos:
- Barra de herramientas superior: Aquรญ encontrarรกs el menรบ de Figma, las herramientas de diseรฑo, la opciรณn de compartir y la opciรณn de presentar.
- Barra de herramientas izquierda: Aquรญ encontrarรกs una lista de los elementos de tu diseรฑo, como frames, componentes, etc. Me gusta llamarlo el panel de HTML, porque es como si estuvieras viendo el cรณdigo HTML de tu diseรฑo.
- รrea de trabajo: Aquรญ es donde verรกs tu diseรฑo y donde trabajarรกs.
- Barra de herramientas derecha: Aquรญ encontrarรกs opciones de diseรฑo, como colores, estilos, etc. Me gusta llamarlo el panel de CSS, porque es como si estuvieras viendo el cรณdigo CSS de tu diseรฑo.
Comenzamos a trabajar en Figma
Ahora que conoces la interfaz de Figma, vamos a empezar a trabajar en un diseรฑo, veremos los diferentes elementos, los posicionaremos y les daremos estilos.
La unidad mรญnima de trabajo en Figma es el Frame. Un frame es un contenedor que puede ser un elemento de diseรฑo por sรญ solo y puede contener otros elementos, como otros frames, componentes, textos, etc.
Para crear un frame, vamos a la barra de herramientas superior y hacemos clic en el botรณn “Frame”, que tiene el icono de una almohadilla o hashtag (#).
Verรกs que la interfaz cambia, especialmente en la barra de herramientas derecha, donde verรกs las opciones para este elemento que aรบn no hemos creado, pero ya estamos viendo sus opciones.
Una de las caracterรญsticas que mรกs me gusta de Figma son los tamaรฑos predefinidos que puedes utilizar, adaptados a diferentes plataformas, fรญsicas y digitales, ademรกs de poder crear tus propios tamaรฑos.
Elige el tamaรฑo que mรกs te convenga. Personalmente, seleccionarรฉ el tamaรฑo “iPhone 13 & 14” dentro de la categorรญa “Phone”, ya que serรก mรกs fรกcil hacer una captura de pantalla y compartirlo.
Esto es muy importante, y aunque no lo utilizarรกs ahora, es รบtil familiarizarse con los atajos de teclado, especialmente para elementos como el Frame que utilizarรกs con frecuencia.
La tecla F es el atajo de teclado para crear un Frame.
Si deseas conocer mรกs atajos de teclado, puedes encontrarlos en el icono de interrogaciรณn (?) en la esquina inferior derecha de la interfaz.
Modificando Frames
Ahora que ya tienes un Frame, vamos a ver cรณmo modificarlo, es decir, cรณmo cambiarle el tamaรฑo, la posiciรณn, etc.
- Barra de Herramientas derecha | barra de propiedades
Vamos a analizar esta barra por secciones:
Alineaciรณn
La primera secciรณn es la de alineaciรณn. Aquรญ puedes alinear el elemento con respecto a los demรกs, de manera similar a como lo harรญas en un procesador de textos o en una herramienta de ediciรณn de imรกgenes.
Posiciรณn
La segunda secciรณn nos permite posicionar el elemento, cambiar sus anchos, rotarlo y aplicar un borde. Explicarรฉ los elementos de izquierda a derecha y de arriba hacia abajo.
Los primeros elementos son los de posiciรณn segรบn los ejes de coordenadas X e Y, es decir, la posiciรณn horizontal y vertical respectivamente.
Ademรกs de poder cambiar el tamaรฑo del elemento, tanto de ancho como de alto, con Width (W) y Height (H) en inglรฉs, respectivamente.
Por รบltimo, tenemos la opciรณn de rotar el elemento y aplicar un efecto de redondeo a las esquinas.
Auto layout y Grid layout
Estas dos opciones son sรบper interesantes ya que te permiten alinear automรกticamente los elementos. Las veremos en prรณximas entradas, pero por ahora no te preocupes por ellas.
Capas o layers
Si estรกs familiarizado con programas de diseรฑo como Photoshop, Illustrator, Sketch, etc., ya sabrรกs a quรฉ me refiero con capas. Si en cambio vienes de un perfil de programaciรณn, esto lo podrรกs entender como el mรฉtodo de fusiรณn de elementos z-index y backdrop-filter en CSS.
Fill, Stroke y Effects
Relleno, Borde y efectos. Aquรญ podrรกs cambiar el color de relleno, el color del borde y aรฑadir efectos como sombras, desenfoques, etc.
Export
Por รบltimo, la opciรณn de exportar. Aquรญ podrรกs exportar el elemento como imagen, SVG, PDF, etc. Esto es muy รบtil y bรกsico para poder compartir tus diseรฑos con otras personas y aรฑadirlos al proyecto de desarrollo.
Final
Con esta entrada hemos visto quรฉ es Figma, nos hemos familiarizado con la interfaz y hemos creado nuestro primer Frame. Ademรกs, hemos visto cรณmo modificarlo y las diferentes opciones de diseรฑo disponibles.
En la prรณxima entrada profundizaremos en cada opciรณn y exploraremos los distintos resultados, ademรกs de ver auto layout.
Si te ha gustado la entrada, no dudes en compartirla. Y si tienes alguna duda, sugerencia o peticiรณn, dรฉjala en los comentarios.
[fluentform id="8"]
Subscribe To Our Newsletter
Enter your email address to subscribe
