En este artículo discutiremos los elementos de la interfaz de Figma. Familiarizarse con la interfaz al principio hará que su trabajo posterior sea mucho más fácil. Discutiremos el explorador de archivos y la interfaz de la aplicación al editar un archivo. Siga leyendo para saber más.
Lo primero que verá después de iniciar sesión en Figma será el Explorador de archivos, que le permitirá navegar por su cuenta. Desde aquí, puede acceder a sus proyectos, equipos y recursos. La interfaz del explorador de archivos consta de 3 secciones: Barra de navegación, Barra lateral y Archivos.
1. La barra de navegación se encuentra en la parte superior de la pantalla y le permite realizar ciertas acciones a nivel de cuenta.
A) Nombre de usuario – aquí se muestra el nombre del usuario activo. Al hacer clic, puede cambiar entre las cuentas en las que ha iniciado sesión en un dispositivo en particular.
B) Barra de búsqueda – en esta sección, puede buscar rápidamente proyectos, compañeros de trabajo y archivos por nombre.
C) Notificaciones – aquí aparecerán las notificaciones sobre todo lo que suceda en su cuenta.
D) Menú de cuenta – aquí puede gestionar la configuración de su cuenta y los complementos instalados.
Consejo útil: Si está utilizando la aplicación de escritorio de Figma, puede cambiar fácilmente entre proyectos y el explorador de archivos. Los proyectos se abren como nuevas pestañas, y el explorador de archivos está marcado con el ícono de Inicio.
2. Barra lateral – esta es el área de la interfaz ubicada en el lado izquierdo de la pantalla. Le permite navegar a través de archivos y prototipos.
Recientes – en esta pestaña se muestran primero los archivos y prototipos que ha visto o editado recientemente.
Borradores – aquí verá todas las versiones de borradores que ha creado. Además, encontrará la pestaña Eliminados donde puede ver archivos archivados.
Puede restaurar o eliminar permanentemente archivos ya eliminados: haga clic derecho en el archivo para ver estas opciones.
Comunidad – este es un espacio donde puede explorar archivos y complementos compartidos por otros usuarios de Figma. Volveremos a esta sección en nuestra próxima publicación del blog.
Equipos – aquí verá todos los equipos a los que pertenece.
3. Archivos – en esta sección se mostrarán todos sus archivos.
Para cada página en el explorador de archivos, puede elegir cómo mostrar los archivos: Mostrar como cuadrícula o Mostrar como lista. Por defecto, se establece la vista de cuadrícula.
Los archivos pueden ser filtrados y ordenados según sus necesidades.
Sobre la lista de archivos en las pestañas Recientes y Borradores, hay botones para agregar archivos: Nuevo archivo de diseño o Nuevo archivo de FigJam. Cada tipo de archivo tiene su propio conjunto de características y herramientas.
Los archivos de diseño le permitirán crear sus diseños de interfaz.
Los archivos de FigJam son pizarras digitales utilizadas para, entre otras cosas, reuniones y talleres en línea.
Tarea 2.1. Familiarícese con la interfaz del explorador de archivos en Figma y abra su primer proyecto. Utilice el botón Nuevo archivo de diseño.
Su interfaz de usuario al editar un archivo en Figma consta de cuatro secciones: Canvas, Barra de herramientas, Panel de capas, Panel de propiedades.
1. Canvas es el área principal, ubicada en el centro de la pantalla. Este es el espacio donde trabajará.
2. Barra de herramientas es la barra ubicada en la parte superior de la pantalla. Aquí encontrará las herramientas y funciones necesarias para diseñar interfaces.
a) Menú principal – en este lugar tiene acceso a la lista de todas las funciones en Figma. También se muestran los atajos de teclado en la lista.
Consejo útil: Puede ver todos los atajos de teclado en un panel especial. Para activarlo, haga clic en Menú principal > Ayuda y cuenta > Atajos de teclado.
El menú principal contiene las siguientes opciones:
b) Herramientas de mover y escalar
c) Herramientas de marco y corte
d) Herramientas de forma – aquí encontrará formas geométricas básicas y la función Colocar imagen.
e) Herramientas de pluma y lápiz
f) Herramienta de texto – crea capas de texto.
g) Herramienta de mano – le permite moverse por el proyecto y hacer clic dentro del archivo sin seleccionar y mover objetos accidentalmente.
h) Herramienta de comentario – le permite intercambiar ideas rápidamente con los miembros del equipo.
i) Nombre del archivo – aquí puede ver y cambiar la ubicación del archivo o su nombre.
j) Usuarios – aquí verá a las personas que están viendo o editando un archivo actualmente.
Consejo útil: Cuando trabaja en equipo, puede hacer clic en el avatar de otro usuario para habilitar el modo de observación y seguir sus acciones en tiempo real. El lienzo y el avatar del usuario rastreado estarán marcados con un marco de color cuando el modo de observación esté activado.
También puede hacerse más visible para que otros miembros del equipo puedan seguir fácilmente sus acciones. Haga clic en su avatar y seleccione Spotlight me.
k) Configuración de compartir – aquí puede gestionar el acceso de otros usuarios al archivo.
l) Presentar – esta opción le permite previsualizar el archivo e interactuar con los prototipos creados.
m) Opciones de zoom/ver – aquí puede ajustar rápidamente las opciones de vista del archivo.
3. El panel de capas es el área en el lado izquierdo de la pantalla. Aquí se mostrarán todos los componentes y capas del archivo.
a) Capas – aquí verá todos los objetos añadidos al Canvas. Cada objeto es una capa separada. Junto a cada capa verá un ícono que indica su tipo.
Puede cambiar el nombre de la capa haciendo doble clic en la capa seleccionada en el panel de capas.
Consejo útil: No es fácil recordar cambiar los nombres de las capas predeterminadas, pero intente tenerlo en cuenta. Esto mantendrá su archivo en orden y facilitará encontrar un elemento específico cuando desee editarlo. Sin embargo, si aún olvida hacerlo, no hay problema. Hay complementos como “Limpiar documento” que le ayudarán a limpiar el desorden.
Las nuevas capas de objeto se colocan en el marco o grupo padre. Esto hace posible colapsar y expandir la vista de las capas de marco y grupo.
Puede bloquear y desbloquear cada capa. Para hacerlo, haga clic en el ícono de candado que aparece junto al nombre de la capa cuando pasa el mouse sobre la capa. Podrá distinguir fácilmente las capas bloqueadas o invisibles de otras capas, ya que estarán marcadas con un ícono adecuado.
Consejo útil: La posibilidad de bloquear capas es muy útil, especialmente cuando algunas de ellas están en el fondo. Esto le ayudará a evitar mover elementos accidentalmente.
Aquí también puede activar y desactivar la visibilidad de las capas seleccionadas. Para hacerlo, haga clic en el ícono de ojo. Puede diferenciar muy fácilmente entre capas bloqueadas y deshabilitadas en la lista de capas: están marcadas con íconos adecuados.
b) Activos – En esta pestaña verá los componentes que puede usar en su archivo. Estos pueden ser íconos, botones u otros elementos de interfaz de usuario más complejos. Para encontrar un componente específico, use el cuadro de búsqueda. Los componentes se pueden buscar en el archivo actual y en las bibliotecas a las que tiene acceso.
c) Página – Puede agregar un número ilimitado de páginas en cada archivo. Cada página tiene su fondo de Canvas, por lo que puede crear prototipos separados en un solo archivo.
Consejo útil: Puede ajustar el ancho del panel de capas. Para hacerlo, agarre el borde derecho de este panel: su cursor se convertirá en una flecha doble blanca. Luego, arrastre el borde hasta que obtenga el ancho que prefiera.
4.Panel de propiedades es el área en el lado derecho de la pantalla, que consta de tres pestañas: Diseño, Prototipo, Inspeccionar.
a) Diseño – aquí puede ver y ajustar las propiedades de todas las capas: marcos, formas y textos.
b) Prototipo – aquí encontrará la configuración del prototipo y las conexiones entre elementos en el archivo.
c) Inspeccionar – en esta pestaña puede ver cómo poner los objetos individuales de su proyecto en código. Los formatos disponibles son: CSS, Android e iOS.
Tarea 2.2. Familiarícese con la interfaz de archivo en Figma. Asegúrese de conocer ya los nombres de los elementos principales de la interfaz para que le resulte más fácil navegar por el archivo al realizar tareas prácticas.
Eso es todo lo que necesita saber sobre la interfaz de Figma. Consulte nuestros otros artículos: Escalando scrum.
Si le gusta nuestro contenido, únase a nuestra comunidad de abejas ocupadas en Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.
Un diseñador gráfico y de UX que transmite en el diseño lo que no se puede expresar con palabras. Para él, cada color, línea o fuente utilizada tiene un significado. Apasionado por el diseño gráfico y web.
¿Sabes cómo crear un ebook? ¿Conoces todos los aspectos esenciales del proceso de producción de…
El marketing sostenible ya no es solo una de las estrategias de marketing que puedes…
Recientemente, han surgido dos fenómenos en el mercado laboral relacionados con las actitudes de los…
¿Cómo vender en Pinterest y por qué deberías hacerlo? Vender en Pinterest es otra forma…
¿Eres un freelancer que busca formas de promocionar su portafolio? Hoy en día, no solo…
La gestión financiera digital y la contabilidad en línea se han vuelto cada vez más…