Configuración básica del proyecto | Figma para principiantes #3

En este artículo discutiremos la configuración básica del proyecto en Figma, que es todo lo que necesitas saber antes de comenzar a diseñar. Explicaremos qué son los Marcos, la cuadrícula de diseño y las reglas. Sigue leyendo para descubrir más.

Configuración básica del proyecto en Figma – tabla de contenido:

1. Marcos
2. Cuadrícula de diseño
3. Reglas

Configuración básica del proyecto en Figma

Primero, necesitas elegir un área del Lienzo para crear tus diseños. Para eso es la herramienta de Marco. La encontrarás en la Barra de herramientas. Después de activar la herramienta de Marco, tienes algunas opciones para crear un marco.

• haz clic en el Lienzo para crear un marco predeterminado con dimensiones de 100×100

• haz clic y arrastra en el Lienzo para crear un marco con dimensiones personalizadas

• usa el menú desplegable en la barra lateral derecha para seleccionar un preset de marco

Después de agregar y seleccionar un marco, tienes acceso a él en el panel de Propiedades.

a) Posición del Lienzo (X e Y) – aquí puedes especificar la posición del marco en el Lienzo en el eje horizontal (X) y vertical (Y).

b) Dimensiones del Objeto (Ancho y Alto) – aquí puedes cambiar el tamaño del marco

c) Restringir proporciones – Te permite mantener las proporciones del marco al redimensionar. De esta manera, puedes cambiar la altura o el ancho del marco, y el segundo parámetro se ajustará automáticamente.

d) Ajustar al contenido – esta función te permite redimensionar el marco para que se ajuste a su contenido.

Consejo útil: También puedes cambiar el tamaño del marco manualmente: agarra el borde o la esquina del marco (el cursor se convertirá en una flecha doble negra), luego arrastra para obtener el tamaño preferido.

e) Vertical y Horizontal – aquí puedes cambiar la orientación de tu marco a vertical u horizontal

f) Rotación – te permite ajustar el ángulo de un marco

g) Radio de esquina – gracias a esta función puedes redondear la esquina de un marco para crear bordes más suaves

h) Esquinas independientes – la configuración de esquina independiente te permite ajustar el radio de esquina para cada esquina.

i) Recortar contenido – te permitirá ocultar cualquier objeto que se extienda más allá de los límites del marco

j) Auto diseño – te permite crear marcos responsivos

k) Cuadrículas de diseño – esta función ayuda a crear una interfaz de usuario estructurada

l) Relleno – usar esta opción te permitirá rellenar tu marco con color, degradado o foto

m) Trazo – ayuda a agregar trazos a un marco. También puedes usar configuraciones avanzadas de trazo que se pueden encontrar bajo el ícono de elipsis.

n) Efectos – aquí puedes agregar una sombra o desenfoques a un Marco. Haz clic en el ícono de configuración de Efecto para ajustar la configuración de la sombra.

o) Exportar – aquí puedes exportar tu marco a los siguientes formatos: PNG, JPG, SVG y PDF.

Sobre cada marco en el Lienzo, se muestra su nombre. Para cambiarlo, haz clic en él dos veces. Puedes copiar marcos junto con su contenido y pegarlos en el Lienzo tantas veces como desees.

Tarea.3.1

Comienza a trabajar en el proyecto eligiendo el tamaño adecuado de un marco. Consejo útil: Si no sabes qué tamaño debe tener tu marco, una buena opción sería usar uno de los tamaños de pantalla más populares. Ve a https://gs.statcounter.com/screen-resolution-stats para más información.

En este tutorial diseñaremos una aplicación móvil de comercio electrónico, así que seleccionemos una de las resoluciones más utilizadas para smartphones – 360×640 px.

Prepararemos 3 proyectos juntos

• pantalla de inicio de sesión (Login)
• página de inicio (Home)
• página de aterrizaje de producto (Product)

Después de agregar un marco, duplica inmediatamente, y nombra cada pantalla adecuadamente, para mantener el archivo organizado.

Cuadrícula de diseño

La cuadrícula de diseño es un sistema de líneas horizontales y verticales (columnas o filas) que te ayudan a mantener los elementos alineados con precisión en tus marcos. Una cuadrícula bien configurada sin duda hará que tu trabajo sea más fácil y acelerará todo el proceso de diseño. Hay dos formas de establecer la cuadrícula de diseño en tu diseño:

1. puedes habilitar la vista de cuadrícula incluso antes de comenzar a diseñar y usar diseños de cuadrícula predefinidos (si hay alguno en tu biblioteca) o crear el tuyo propio,
2. también puedes comenzar a crear el diseño primero y establecer la cuadrícula más tarde en función de los elementos diseñados.

Consejo útil: Si eres un diseñador novato, te recomendamos aplicar una cuadrícula de diseño a cualquier proyecto. No hay nada peor que un espacio de trabajo completamente vacío.

Puedes agregar una cuadrícula de diseño a un marco activo en el panel de Propiedades. Tienes 3 opciones: cuadrícula, columnas, fila. Puedes elegir varias opciones al mismo tiempo.

Puedes ajustar la configuración de cada cuadrícula en el panel de configuración de cuadrícula de diseño. Puedes activar o desactivar la visibilidad de la cuadrícula en cualquier momento haciendo clic en el ícono de Ojo.

Consejo útil: Si no sabes qué cuadrícula de diseño elegir en tu proyecto, puedes usar el plugin del Sistema de Cuadrícula, que lo hará por ti.

Tarea 3.2. Establece la cuadrícula de diseño en tu proyecto. Para los propósitos de este proyecto, seleccionamos Columnas y establecimos los siguientes valores:

• Conteo 2 (número de columnas)
• Margen 20 (distancia de las columnas desde el borde de la pantalla)
• Gutter 30 (distancia entre columnas)

Reglas

Las reglas son otra función útil que te ayudará a alinear los elementos en el archivo y mantenerlo en orden. Para activar la vista de Reglas, haz clic en el menú Principal, luego en Ver y Reglas.

Las reglas se pueden ver en la parte superior y a la izquierda del Lienzo. Con esta función, puedes crear líneas verticales y horizontales (guías) – haz clic y mantén presionada la regla elegida, luego mueve el cursor al área del Lienzo. Aparecerá una línea roja delgada, que puedes mover. Puedes crear tantas guías como desees. Puedes eliminar fácilmente las líneas innecesarias: simplemente selecciona la línea (la línea seleccionada se volverá azul), y luego haz clic en Eliminar.

Tarea 3.3. Experimenta con la adición de reglas. Te serán útiles al alinear los elementos.

Acabas de aprender sobre la configuración básica del proyecto en Figma. Lee también: Bots de chat asistidos por IA.

Si te gusta nuestro contenido, únete a nuestra comunidad de abejas trabajadoras en Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.