El modo de desarrollo de Figma ofrece todo lo que necesitas para trabajar con archivos de diseño y transformar el diseño en código. De esta forma, los equipos de diseño y desarrollo pueden trabajar al unísono para garantizar que los detalles importantes no pasen desapercibidos en el proceso de entrega.

El equipo de desarrollo utiliza este modo para:

• Acceder a funciones de inspección avanzadas y más lenguajes de CodeGen.
• Comparar fácilmente las versiones de un marco para asegurarse de que siguen las especificaciones más recientes durante el proceso de creación.
• Revisar rápidamente los diseños que están listos para su desarrollo y añadir estados y anotaciones.
• Mejorar los flujos de trabajo con integraciones dirigidas al equipo de desarrollo, como Jira, Storybook y GitHub.
• Consultar todas las variantes de un conjunto de componentes sin necesidad de editar el archivo.
• Relacionar los diseños con incidencias, documentación y componentes de código.
• Analizar los diseños y escribir de manera conjunta con la extensión Figma para VS Code.

Acerca del modo de desarrollo

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

1. Abre un archivo de Figma Design.
2. Haz clic en la opción de alternancia del modo de desarrollo o utiliza el atajo de teclado Shift + D.

Aprender a utilizarlo

La barra lateral izquierda de este modo te permite alternar fácilmente entre los diseños que están listos para su desarrollo.

• A

  Consultar los activos que estén listos para su desarrollo

  El icono del modo de desarrollo indica qué páginas contienen instancias, secciones, marcos y componentes listos para su desarrollo. Los objetos del lienzo que estén preparados aparecerán en Listo para su desarrollo en el panel de capas del modo de desarrollo.

  Para marcar un activo como listo para su desarrollo:

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

  Además, si dispones de una licencia completa, de desarrollo o de visualización, el modo de desarrollo ofrece una vista de diseños marcados para su desarrollo. Esta vista solo aparece cuando son uno o más los diseños de un archivo que están en estado de desarrollo.

• B

  Comprobar cuándo ha sido la última vez que se ha editado un marco

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

• C

  Trabajar con marcos y capas

  En el modo de diseño, cualquier persona puede agrupar el contenido relacionado en secciones y marcarlas como listas para su desarrollo El modo de desarrollo da prioridad al contenido de las secciones. El contenido que no esté organizado en secciones se podrá ver en la barra lateral izquierda, pero aparecerá contraído de forma predeterminada.

  Haz clic en un marco de la barra lateral izquierda para centrarlo en el lienzo y selecciónalo para ver las capas anidadas que contiene. Al seleccionar un marco, pasarás del panel de navegación al panel de capas y solo se mostrarán las capas del marco de nivel superior que tengas seleccionado.

  Trabaja con marcos y capas en el modo de desarrollo ->

Inspeccionar

En el panel de inspección encontrarás los requisitos de diseño e información relevante sobre los componentes, algo que te resultará muy útil para comprender los diseños y transformarlos en código.

• A

  Comparar cambios en los diseños

  Si se han realizado cambios desde la última vez que consultaste un archivo, aparecerá la opción Comparar cambios en el panel de inspección, al lado de la información de la capa. Haz clic en el enlace para abrir el modal del historial de marcos. Ahí podrás comparar la versión actual del diseño con las anteriores.

  También puedes comparar un componente desvinculado con sus versiones anteriores, así como con el componente principal al que estuvo enlazado. Puedes borrar el historial de desvinculación para evitar ver información sobre su componente principal original.

  Compara cambios en el modo de desarrollo ->
• B

  Añadir recursos y enlaces externos para el equipo de desarrollo

  Tanto los diseñadores como los desarrolladores pueden añadir enlaces a recursos externos que sean útiles para implementar un componente. Entre estos enlaces se incluyen los de GitHub, Jira y Storybook, así como los de VS Code que puedan utilizarse con la extensión Figma para VS Code. Los recursos de desarrollo enlazados a un componente se propagan a todas las instancias del mismo.

  Añade enlaces a recursos a las capas del modo de desarrollo →

C

Crear de forma más dinámica con fragmentos de código personalizables

• D

  Consultar nombres y tipos de capas

  El nombre de la capa seleccionada aparece en la parte superior del panel de inspección, junto al tipo de capa (componente, instancia, marco, texto, etc.). También puedes consultar cuándo fue la última vez que se actualizó la capa.

• E

  Utiliza el área de pruebas para analizar las variaciones de los componentes

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

  El área de pruebas para componentes aparece en el panel de inspección al seleccionar una instancia de componente. Aprovéchalo para experimentar con las diferentes propiedades del componente sin necesidad de cambiar el diseño.

• F

  Consultar los estilos aplicados

  Consulta las variables y los estilos aplicados en la capa seleccionada.

• G

  Descargar activos

  El modo de desarrollo detecta automáticamente los iconos y los muestra como activos descargables. Puedes desactivar la detección automática de iconos si quieres inspeccionar una capa vectorial individual que está dentro de un icono.

  1. Haz clic en Menú principal en la barra de herramientas.
  2. Pon el cursor encima de Ver en el menú desplegable.
  3. Desactiva la opción Detectar iconos automáticamente.

  Desde Activos, podrás descargar imágenes GIF y nodos de vídeo en formato MP4.

• H

  Exportar

  Puedes aplicar la configuración de exportación a las capas para definir ajustes como el formato. Figma es compatible con los siguientes formatos de exportación: PNG, JPG, SVG y PDF.Obtén más información sobre las exportaciones en Figma →

Anotar

Los equipos de diseño pueden dejar anotaciones en los diseños para aclarar el contexto e incluir requisitos y medidas. Así, será más fácil que los equipos de desarrollo se aseguren de no dejarse información importante por el camino. Las anotaciones y medidas en el modo de desarrollo son útiles para:

• Incluir propiedades importantes para garantizar que el equipo de desarrollo las tenga en cuenta.
• Ayudar al equipo de desarrollo a visualizar más rápidamente el espacio y el tamaño.
• Añadir más contexto a través de notas enlazadas directamente a los diseños.

Aprende a añadir medidas y anotaciones a los diseños en el modo de desarrollo →

Gestionar las entregas tras el proceso de desarrollo

Si tienes secciones, marcos y componentes listos para su desarrollo, aprovecha las vistas del modo de desarrollo Listo para su desarrollo y Enfoque para facilitarle al equipo el proceso de entrega:

• La Vista Ready for Dev proporciona una forma sencilla de explorar todos los diseños de un archivo que están marcados como listos para su 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 de enfoque muestra solo un diseño que está listo para desarrollo a la vez. Puedes usar todas tus herramientas habituales del Dev Mode, explorar las capas del diseño y encontrar información importante, como un historial de versiones anotadas. Obtén más información sobre la vista de enfoque →

Estados y notificaciones de Dev Mode

Los estados y las notificaciones en Dev Mode ayudan a administrar la entrega al desarrollador. Los estados se utilizan para hacer 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 Ready for Dev. Puede establecer el estado Ready for Dev en componentes, marcos y secciones para indicar que el diseño está listo para el desarrollo. Un estado adicional, Completado, está disponible si estás en un plan Organización o un plan Empresarial.

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

Notificaciones

Si has consultado un archivo en el modo de desarrollo y tienes una licencia completa o de desarrollo, recibirás una notificación cada vez que un diseño se marque como listo para su desarrollo en ese archivo, cuando se marque por primera vez y también cuando se modifique el estado.

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 los complementos del modo de desarrollo

Los complementos del modo de desarrollo son útiles para automatizar tareas y conectar otras herramientas para la documentación y la comunicación. Por ejemplo:

• Lleva al día las tareas de desarrollo al sincronizar Jira con Figma, FigJam y el modo de desarrollo.
• Conecta tu sistema de Figma Design y el sistema de diseño con código con Storybook
• Vincula los diseños al código para que siempre estén sincronizados al incorporar GitHub a Figma.
• Personaliza el código resultante para Tailwind o React, o para tus propios componentes de código.

La pestaña Complementos del modo de desarrollo muestra los complementos que has usado recientemente, así como los que se recomiendan en la comunidad de Figma.

Aprende a utilizar los complementos en los archivos →

Echa un vistazo al archivo Complementos para el área de pruebas del modo de desarrollo y aprende a utilizarlos.

Figma para VS Code

Con Figma para VS Code podrás inspeccionar los archivos de diseño y trabajar con ellos, colaborar con otros equipos de diseño, hacer un seguimiento de los cambios realizados y agilizar el proceso de implementación del diseño, todo esto sin tener que abandonar el editor de texto. Mejora la productividad del equipo de desarrollo al acabar con el trabajo tedioso y la necesidad de ir cambiando de contexto para crear código a partir de diseños.

• Ver y responder a 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

Obtén más información sobre la extensión Figma para VS Code →