Navegar por los diseños en Dev Mode
🚧 Dev Mode ya no se encuentra 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.
Obtén información sobre lo que significa para Dev Mode salir de la versión beta →
Antes de empezar
Quién puede utilizar esta función
Se incluye en un puesto de diseño completo en los planes Profesional, Organización y Empresa.
Cualquier persona con acceso a Dev Mode puede usar las funciones de Dev Mode.
Habilitar Dev Mode cambia la interfaz de un archivo de diseño de Figma. En Dev Mode, la barra lateral izquierda permite navegar fácilmente entre los diseños e identificar qué secciones están listas para el desarrollo.
-
A
Buscar
Emplea el campo Búsqueda para encontrar un componente específico. Figma busca objetos en el archivo actual, así como cualquier biblioteca a la que tenga acceso.
- Haz clic en la barra lateral izquierda o usa el siguiente atajo de teclado para abrir la barra de búsqueda:
- Mac:Command f
- Windows:Ctrl f
- Introduce el texto o el nombre de la capa que deseas buscar. 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étera.
- Usa y para moverte por tus resultados.
- En el menú Configuración, usa Otros para buscar todo lo demás, como los nombres de widgets o sectores.
- Haz clic en un resultado para ir a la capa en el lienzo.
- Para volver al panel de navegación, haz clic en o presiona 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 ícono de Dev Mode indica qué páginas contienen secciones marcadas como Ready for Dev. Las secciones marcadas como listas aparecen bajo Listo para el desarrollo en el panel de navegación de Dev Mode.
-
C
Secciones marcadas como Listas para el desarrollo
El ícono de Dev Mode indica qué páginas contienen secciones marcadas como Ready for Dev. Las secciones marcadas como listas aparecen bajo Listo para el desarrollo en el panel de navegación de Dev Mode.
-
D
Capas
El ícono de Dev Mode indica qué páginas contienen secciones marcadas como Ready for Dev. Las secciones marcadas como listas aparecen bajo Listo para el desarrollo en el panel de navegación de Dev Mode.
Si pasas el cursor sobre las capas del lienzo, obtendrás más detalles sobre su disposición, como el tamaño, el margen interior y el espaciado.
Cuando se selecciona un marco de nivel superior, puedes emplear las teclas de flecha izquierda y derecha o hacer clic en las flechas de la pantalla para desplazarte entre cada marco de la página.