Navegar por los diseños en Dev Mode
🚧 Dev Mode ya no está en fase beta
Dev Mode de Figma ofrece a los desarrolladores todo lo que necesitan para transformar los diseños en código. A partir del 31 de enero, Dev Mode requerirá un puesto de pago para acceder a él.
Descubre lo que significa que Dev Mode ya no esté en versión beta →
Antes de empezar
Quién puede utilizar esta función
Incluido en una licencia de Design completa en los planes Profesional, Organización y Empresarial.
Cualquier persona con acceso Dev Mode puede usar sus funciones.
Al habilitar Dev Mode, se cambia la interfaz de un archivo de diseño de Figma. En Dev Mode, la barra lateral izquierda proporciona una manera fácil de navegar entre los diseños e identificar qué secciones están listas para el desarrollo.
-
A
Búsqueda
Utiliza el campo Buscar para encontrar un componente determinado. Figma busca objetos en el archivo actual, asà como en cualquier biblioteca a la que tengas acceso.
- Haz clic en la barra lateral izquierda o usa el siguiente atajo de teclado para abrir la barra de búsqueda:
- Mac:Comando f
- Windows:Ctrl f
- Introduce el texto o el nombre de la capa que desees encontrar. Los resultados de la búsqueda se rellenan automáticamente a medida que escribes.
- Puedes mostrar los resultados de tu página actual o ver los resultados de todas las páginas
- Haz clic en Configuración para agregar filtros de búsqueda para el tipo de capa, como texto, marco, forma, etc.
- Usa y para desplazarte por los resultados
- En el menú Ajustes, utiliza Otros para buscar todo lo demás, como los nombres de los widgets o los cortes
- Haz clic en un resultado para ir a la capa en el lienzo.
- Para volver al panel de navegación, haz clic o pulsa Esc.
- Haz clic en la barra lateral izquierda o usa el siguiente atajo de teclado para abrir la barra de búsqueda:
-
B
Páginas
El icono de Dev Mode indica qué páginas contienen secciones marcadas como listas para el desarrollo. Las secciones marcadas como listas aparecen bajo Ready for Dev en el panel de navegación de Dev Mode.
-
C
Secciones marcadas como listas para desarrollo
El icono de Dev Mode indica qué páginas contienen secciones marcadas como listas para el desarrollo. Las secciones marcadas como listas aparecen bajo Ready for Dev en el panel de navegación de Dev Mode.
-
D
Capas
El icono de Dev Mode indica qué páginas contienen secciones marcadas como listas para el desarrollo. Las secciones marcadas como listas aparecen bajo Ready for Dev en el panel de navegación de Dev Mode.
Si pasas el cursor por encima de las capas del lienzo, obtendrás más información sobre su diseño, como el tamaño, el relleno y el espaciado.
Cuando se selecciona un marco de nivel superior, puedes usar las teclas de flecha izquierda y derecha o hacer clic en las flechas de la pantalla para moverte entre cada marco de la página.