¿Qué es un archivo de diseño de Figma?
Un archivo de diseño de Figma es un tipo de archivo de Figma que puede almacenar todos los activos y elementos de diseño de un proyecto en un solo lugar. Los archivos de diseño se pueden utilizar para crear diseños de sitios web, aplicaciones móviles y otros tipos de interfaces de usuario.
Los archivos de diseño de Figma son una excelente manera para que los diseñadores colaboren en proyectos. Los diseñadores pueden compartir archivos de diseño con otros diseñadores y desarrolladores, y pueden trabajar juntos en un proyecto al mismo tiempo. Los archivos de diseño también hacen que sea fácil para los desarrolladores tomar los activos de diseño y convertirlos en código.
Características de los archivos de diseño de Figma
- Los archivos tienen historial de versiones, en el caso de los planes gratuitos es de 30 días, en planes de pago no hay límite de días.
- Colaboración en tiempo real. Los archivos pueden ser editados por varios colaboradores al mismo tiempo en la nube.
- Los archivos siempre están actualizados. Por lo que no es necesario guardar, descargar o pasarse documentos.
Cómo crear un archivo de diseño de Figma
Para crear un archivo de diseño de Figma, puede seguir estos pasos:
- Inicia Figma y presiona «+Design File» para crear un nuevo documento
- Selecciona el nombre de la parte superior para asignar un nombre
Cómo usar archivos de diseño de Figma para colaborar en proyectos
Una vez que haya creado un archivo de diseño, puede compartirlo con otros diseñadores y desarrolladores. Para compartir un archivo de diseño, puede seguir estos pasos:
- Seleccione el menú Archivo y haga clic en «Compartir».
- Ingrese las direcciones de correo electrónico de las personas con las que desea compartir el archivo de diseño.
- Seleccione los permisos que desea otorgar a las personas con las que comparte el archivo de diseño.
- Haga clic en «Compartir».
Las personas con las que ha compartido el archivo de diseño podrán verlo y editarlo en Figma. Pueden comentar sus cambios y también pueden proponer cambios a su archivo de diseño.
Las 4 regiones de los archivos de Figma
Los archivos de figma cuentan con cuatro regiones diferentes:
La barra de herramientas, la barra lateral izquierda, la barra lateral derecha y el lienzo o canvas.
La barra de herramientas
La barra de herramientas está dividida en herramientas, acciones o comportamiento, colaboración y opciones de vista.
La barra lateral izquierda
Esta da acceso a capas, páginas y recursos. Aquí puedes seleccionar las páginas y las capas del lienzo.
También puedes utilizar el panel Activos (Assets) para ver los componentes o buscar en la biblioteca.
La barra lateral derecha
En esta barra puedes acceder a información sobre tu diseño. La información cambia dependiendo de qué selecciones.
El lienzo o canvas
Es el área de trabajo donde organizas las capas de tus archivos de diseño. Es aquí en donde colocarás tus ideas.
Las páginas
Las páginas son útiles para organizar los archivos de diseño y sirven para gestionar diseños, organizar componentes, tener un bloc de notas o bocetaje, para archivas diseños anteriores.
Las Capas
Figma interpreta cada objeto como una capa. Esto permite cambiar o editar propiedades de cada una, por ejemplo formas, texto y otros elementos.
Las capas tienen una jerarquía determinada por cómo están superpuestas, esto también afecta su visibilidad, a su vez las capas pueden estar dentro de otras capas, lo que las convierte en contenedores.
De esta forma se pueden tener capas principales y secundarias dependiendo de su posición y jerarquía, de manera que una capa principal actúa como contenedor y una secundaria es aquella que está dentro de la capa principal.
En figma se tienen los siguientes tipos de capa:
- Marco
- Grupo
- Componente
- Instancia
- Texto
- Forma
- Imagen
- Diseño automático
- Sección
- GIF o Video
Propiedades de capa
Cuando seleccionas una capa ésta se resalta, en la barra lateral izquierda verás el nombre de capa y su organización, en cambio del lado derecho verás sus propiedades, las cuales incluyen información básica como dimensiones y ubicación, así como estilos, colores, propiedades y efectos.
Los contenedores
Algunas capas funcionan como contenedores, estas son los grupos, marcos y secciones.
Grupos
Los grupos son colecciones de capas, al aplicar cambios a un grupo se aplica a cada capa del grupo
Marcos
Los marcos o Frames combinan capas pero sirven para contener los elementos en dimensiones específicas, por ejemplo para cuando necesitas diseñar para una pantalla de dispositivo móvil específica.
Secciones
Permiten designar y nombrar una región específica del lienzo o canvas para agrupar elementos de manera conceptual. Esto es útil para cuando necesitas mostrar de manera ordenada tus ideas.
Coordenadas en el lienzo
Las capas pueden ubicarse por medio de los ejes X y Y, vertical y horizontal respectivamente. También se maneja el índice Z que indica la profundidad de la capa. Este toma como base el z-index de CSS que controla la posición de un elemento en el navegador.
Los permisos de los archivos de diseño de Figma
Estos sirven para asignar la capacidad de edición o participación que tienen los colaboradores en el archivo. Puedes asignar editores o espectadores, los primeros pueden realizar cambios y los espectadores no, aunque éstos sí tienen permitido dar su opinión.