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 Ready for dev 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 Dev Mode, la barra lateral izquierda permite desplazarse fácilmente entre los diseños marcados como Ready for dev.

• A

  Ve qué activos recursos están Ready for dev

  El ícono de Dev Mode indica qué páginas contienen marcos, componentes, instancias y secciones marcados como Ready for dev. Los objetos del lienzo marcados como listos aparecen en Ready for dev en el panel de capas del Dev Mode.

  Para marcar un recurso como Ready for dev:

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

  Además, si tienes un puesto Dev, Full o Viewer en una organización o empresa, Dev Mode proporciona una vista de los diseños que están marcados como Ready for dev. La vista Ready for dev solo aparece cuando uno o más diseños del archivo tienen el dev status.

• 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 Ready for dev. 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 de forma predeterminada.

  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 Ready for dev, puedes aprovechar las vistas Focus y Ready for dev del Dev Mode para ayudarte a gestionar el proceso de entrega al desarrollador:

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

• La vista Focus muestra solo un diseño que está Ready for dev 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 Focus →
  

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 Ready for dev. 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 Ready for dev. Puedes establecer el estado Ready for dev en componentes, marcos y secciones para indicar que el diseño está Ready for dev. 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 puesto Dev o Full, recibirás una notificación cada vez que un diseño se marque como Ready for dev en ese archivo. Esto incluye la primera vez que un diseño se marca como Ready for dev, así como cuando el estado Ready for dev 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 →