El Dev Mode de Figma te ofrece todo lo que necesitas para navegar por los archivos de diseño y transformar los diseños en código. Con el Dev Mode, los diseñadores y los desarrolladores pueden estar en sintonía y asegurarse de que no se pierdan detalles importantes en el proceso de traspaso.

Los desarrolladores utilizan el Dev Mode para lo siguiente:

• Acceder a funciones avanzadas de inspección y a más lenguajes codegen
• Asegurarse de que están desarrollando con las últimas especificaciones comparando fácilmente las versiones del marco
• Revisar rápidamente los diseños que están listos para su desarrollo con estados y anotaciones
• Agilizar los flujos de trabajo con integraciones orientadas a los desarrolladores, como JIRA, Storybook y GitHub
• Explorar todas las variantes de un conjunto de componentes sin editar el archivo
• Vincular diseños a entradas, documentación y componentes de código
• Inspeccionar diseños y escribir código en paralelo utilizando la extensión Figma para VS Code

Entrar en Dev Mode

Dev Mode es una interfaz centrada en el desarrollador para inspeccionar los diseños y navegar por estos. Puedes acceder a este desde cualquier archivo de Figma Design. Para alternar entre el modo de diseño y Dev Mode:

1. Abre un archivo de Figma Design.
2. Haz clic en el botón Dev Mode o usa la combinación de teclas ShiftD.

Navega

En el Dev Mode, la barra lateral izquierda permite desplazarse fácilmente entre los diseños marcados como listos para el desarrollo.

• A

  Ver qué activos están listos para el desarrollo

  El ícono de Dev Mode indica qué páginas contienen marcos, componentes, instancias y secciones marcados como listos para el desarrollo. Los objetos del espacio de trabajo marcados como listos aparecen en Listo para el Desarrollo en el panel de capas del Dev Mode.

  Marcar un activo como listo para el desarrollo:

  1. En el Dev Mode, selecciona un marco, un componente, una instancia o una sección.
  2. Haz clic en Marcar como listo para el desarrollo en la barra de herramientas.

  Además, si tienes un acceso completo, de desarrollo o de visualización en una organización o empresa, el Dev Mode proporciona una vista de los diseños que están marcados como listos para el desarrollo. La vista Listo para el Desarrollo solo aparece cuando uno o más diseños del archivo tienen el estado de desarrollo.

• B

  Saber cuándo se editó un marco por última vez

  Puedes ver cuándo se editó un marco por última vez bajo el nombre del marco en el panel de navegación.

• C

  Navegar por marcos y capas

  En el Modo de Diseño, cualquiera puede agrupar contenidos relacionados en secciones y marcar las secciones como listas para el desarrollo. El Dev Mode dará prioridad al contenido de una sección. Cualquier contenido fuera de una sección sigue siendo visible en la barra lateral izquierda, pero se contrae por defecto.

  Haz clic en un marco de la barra lateral izquierda para centrarlo en el espacio de trabajo. Selecciona el marco en el espacio de trabajo para ver las capas anidadas en su interior. Al seleccionar un marco, el panel de navegación cambia a un panel de capas y solo muestra las capas del marco de nivel superior seleccionado en ese momento.

  Navegar por marcos y capas en Dev Mode ->

Inspeccionar

El panel de inspección muestra las especificaciones de diseño y la información de los componentes necesarios para comprender un diseño y transformarlo en código.

• A

  Comparar cambios de diseño

  Si se han realizado cambios desde la última vez que visualizaste un archivo, Comparar cambios aparecerá junto a la información de la capa en el panel de inspección. Haz clic en el enlace para abrir el modal del historial de marcos donde podrás comparar la versión actual con versiones anteriores del diseño.

  También puedes comparar un componente desvinculado con versiones anteriores y con el componente principal al que estaba vinculado. Puedes borrar su historial de desvinculación para evitar ver información sobre su componente principal original.

  Comparar cambios en el Dev Mode ->
• B

  Añadir enlaces y recursos externos para desarrolladores

  Tanto los diseñadores como los desarrolladores pueden añadir enlaces a recursos externos que pueden ayudar con la implementación de un componente. Esto puede incluir enlaces a GitHub, Jira y Storybook, así como enlaces a VS Code que pueden utilizarse con la extensión Figma para VS Code. Los recursos de desarrollo añadidos a los componentes se propagan a todas las instancias de ese componente.

  Añade enlaces de recursos a las capas en el Dev Mode →

C

Desarrolla más rápido con fragmentos de código personalizables

• D

  Ver nombres y tipos de capas

  El nombre de la capa seleccionada se muestra en la parte superior del panel de inspección, junto con su tipo de capa (componente, instancia, marco, texto, etc.). También puedes ver cuándo se actualizó la capa por última vez.

• E

  Prueba variaciones de componentes en la página de pruebas de componentes

  Al seleccionar un componente o una instancia, verás una vista previa del componente, un enlace al componente principal y enlaces a la documentación y a los recursos de desarrollo pertinentes.

  La página de pruebas de componentes aparece en el panel de inspección cuando se selecciona una instancia del componente. Utiliza la página de pruebas para experimentar con las distintas propiedades del componente sin cambiar el diseño real.

• F

  Ver estilos aplicados

  Ver los estilos y variables aplicados a la capa seleccionada.

• G

  Descargar activos

  El Dev Mode puede detectar automáticamente los íconos y presentarlos como activos descargables para los desarrolladores. Si deseas inspeccionar una capa vectorial individual contenida en un ícono, puedes desactivar la detección automática de íconos:

  1. Haz clic en Menú principal en la barra de herramientas
  2. Pasa el ratón por encima de Ver en el menú desplegable
  3. Desmarca Detectar íconos automáticamente

  Activos también te permitirá descargar nodos de imagen GIF y video MP4.

• H

  Exportar

  Puedes aplicar ajustes de exportación a las capas para definir el formato y cualquier otro ajuste de exportación. Figma admite los siguientes formatos de exportación: PNG, JPG, SVG y PDF. Obtén más información sobre lasexportaciones en Figma →

Anotar

Los diseñadores pueden utilizar anotaciones para marcar los diseños con contexto, especificaciones y medidas adicionales. Esto facilita a los desarrolladores la tarea de asegurarse de que no se les pasa por alto ningún pedido crucial durante el traspaso. Usa anotaciones y mediciones en el Dev Mode para lo siguiente:

• Propiedades importantes para que los desarrolladores no las pasen por alto
• Ayudar a los desarrolladores a visualizar rápidamente el espaciado y el tamaño
• Añadir contexto adicional con notas de texto conectadas directamente a los diseños

Aprende a añadir mediciones y a anotar diseños en el Dev Mode →

Gestionar el traspaso del desarrollo

Cuando tengas secciones, marcos y componentes marcados como listos para el desarrollo, puedes aprovechar las vista Enfoque y Listo para el Desarrollo del Dev Mode para ayudarte a gestionar el proceso de traspaso de desarrolladores:

• La Vista Ready for Dev proporciona una manera sencilla de explorar todos los diseños en un archivo que están marcados como listos para desarrollo. Puedes filtrar y ver todos tus diseños que están marcados como listos para desarrollo. Obtén más información sobre la Vista Ready for Dev y el proceso de entrega →
  

• La vista enfocada muestra solo un diseño que está listo para desarrollo a la vez. Puedes utilizar todas tus herramientas habituales de Dev Mode, explorar las capas del diseño y encontrar información importante, como un historial de versiones anotado. Obtén más información sobre la vista enfocada →
  

Estados y notificaciones de Dev Mode

Los estados y las notificaciones en Dev Mode ayudan a gestionar la entrega al desarrollador. Los estados se emplean para realizar un seguimiento de cuándo las secciones, los marcos o los componentes están listos para el desarrollo. Las notificaciones se basan en los cambios de estado para que los desarrolladores puedan reaccionar al estado de los diseños.

Estados

Todos los planes que ofrecen Dev Mode incluyen el estado Listo para desarrollo. Puedes establecer el estado Listo para desarrollo en componentes, marcos y secciones para indicar que el diseño está listo para el desarrollo. Un estado adicional, Completado, está disponible si tienes un plan de Organización o Empresa.

Para obtener más información, por ejemplo, cómo usar estados, consulta Estados y notificaciones de Dev Mode.

Notificaciones

Si has visualizado un archivo en Dev Mode y dispones de un acceso completo o de desarrollo, recibirás una notificación cada vez que un diseño se marque como listo para el desarrollo en ese archivo. Esto incluye la primera vez que un diseño se marca como listo para el desarrollo, así como cuando el estado de listo para el desarrollo se elimina y se establece de nuevo.

Para obtener más información, incluido cómo activar y desactivar las notificaciones de Dev Mode, consulta Estados y notificaciones de Dev Mode.

Utilizar plugins en Dev Mode

Los plugins del Dev Mode te ayudan a automatizar tareas y a conectar otras herramientas para la documentación y la comunicación. Por ejemplo:

• Mantente al día con las tareas de desarrollo mediante la sincronización con Jira a través de Figma, FigJam y del Dev Mode
• Conecta tu sistema de Figma Design y tu sistema de diseño en código con Storybook
• Vincula los diseños al código para que siempre estén sincronizados, incorporando GitHub a Figma.
• Personaliza la salida de código (para Tailwind o React) o para tus propios componentes de código

La pestaña Plugins en el Dev Mode muestra los plugins utilizados recientemente, así como los plugins recomendados por la comunidad Figma.

Aprende a utilizar plugins en archivos →

Echa un vistazo a los Plugins para el archivo del área de pruebas en Dev Mode para aprender sobre los plugins de Dev Mode de forma práctica.

Figma para VS Code

Figma para VS Code te permite navegar e inspeccionar archivos de diseño, colaborar con diseñadores, realizar un seguimiento de los cambios de diseño y acelerar la implementación del diseño, todo ello sin salir de tu editor de texto. Mejora la productividad de los desarrolladores eliminando el cambio de contexto y el ajetreo necesarios para convertir los diseños en código.

• Ver y responder a los comentarios y a la actividad en tiempo real
• Obtener sugerencias de código basadas en diseños
• Vincular archivos de código a componentes de diseño

Más información sobre la extensión Figma para VS Code →