Guía sobre Dev Mode
Este artículo está disponible tanto para la UI anterior de Figma como para la nueva. Utiliza el conmutador de la parte inferior izquierda de la página para seleccionar tu UI actual. Conoce UI3: el rediseño de Figma →
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:
- Abre un archivo de Figma Design.
- Haz clic en el botón Dev Mode o usa la combinación de teclas ShiftD.
Nota: Se entra automáticamente en Dev Mode cuando se abre un archivo de Figma Design con un enlace a Dev Mode.
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:
- En el Dev Mode, selecciona un marco, un componente, una instancia o una sección.
- 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.
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.
C
Desarrolla más rápido con fragmentos de código personalizables
Haz clic en cualquier objeto del espacio de trabajo en el Dev Mode para rellenar la sección Código del panel de inspección. Dependiendo de lo que se seleccione, se mostrará una vista previa tipográfica o un modelo de caja, seguido de fragmentos de código autogenerados para el objeto.
Puedes seleccionar el idioma y las unidades que deseas ver en el espacio de trabajo y en el código generado, así como ampliar la funcionalidad de los fragmentos de código. Para cambiar la selección de idioma y unidades:
- En la parte superior derecha de la sección Código, selecciona un idioma en el menú desplegable.
- Haz clic en Inspeccionar configuración y selecciona una unidad en la lista desplegable.
Aprende a utilizar fragmentos de código en Dev Mode→
Code Connect
Code Connect es una herramienta para que los sistemas de diseño y los equipos de Ingeniería lleven el código de los componentes al Dev Mode. Al inspeccionar un componente con fragmentos de código conectados, los desarrolladores verán código del sistema de diseño procedente de sus bibliotecas en lugar de código generado automáticamente. Utiliza Code Connect para lo siguiente:
- Facilitar el acceso al código de los componentes personalizados para impulsar la adopción de sistemas de diseño
- Mapear variantes y propiedades de un componente de diseño en código para mantener la coherencia entre los equipos de productos
- Crear ejemplos de casos de uso de componentes específicos para ayudar a los desarrolladores a comprender su uso correcto
Los fragmentos de código personalizados se basan en la API de Figma y son totalmente personalizables para admitir varios sistemas de diseño, productos e idiomas.
Nota: Code Connect está disponible en los planes Organización y Empresa.
-
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. Además, puedes ver detalles sobre las variables y obtener variables sugeridas.
-
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:
- Haz clic en Menú principal en la barra de herramientas
- Pasa el ratón por encima de Ver en el menú desplegable
- 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, podrás aprovechar las vistas Focus y Ready for dev de 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 tienes un puesto Full o Dev, 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
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes pagados
Requiere un acceso de Diseño completo o un acceso de Dev Mode
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:
- Abre un archivo de Figma Design.
- Haz clic en el botón Dev Mode o usa la combinación de teclas ShiftD.
Nota: Se entra automáticamente en Dev Mode cuando se abre un archivo de Figma Design con un enlace a Dev Mode.
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:
- En el Dev Mode, selecciona un marco, un componente, una instancia o una sección.
- 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.
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.
C
Desarrolla más rápido con fragmentos de código personalizables
Haz clic en cualquier objeto del espacio de trabajo en el Dev Mode para rellenar la sección Código del panel de inspección. Dependiendo de lo que se seleccione, se mostrará una vista previa tipográfica o un modelo de caja, seguido de fragmentos de código autogenerados para el objeto.
Puedes seleccionar el idioma y las unidades que deseas ver en el espacio de trabajo y en el código generado, así como ampliar la funcionalidad de los fragmentos de código. Para cambiar la selección de idioma y unidades:
- En la parte superior derecha de la sección Código, selecciona un idioma en el menú desplegable.
- Haz clic en Inspeccionar configuración y selecciona una unidad en la lista desplegable.
Aprende a utilizar fragmentos de código en Dev Mode→
Code Connect
Code Connect es una herramienta para que los sistemas de diseño y los equipos de Ingeniería lleven el código de los componentes al Dev Mode. Al inspeccionar un componente con fragmentos de código conectados, los desarrolladores verán código del sistema de diseño procedente de sus bibliotecas en lugar de código generado automáticamente. Utiliza Code Connect para lo siguiente:
- Facilitar el acceso al código de los componentes personalizados para impulsar la adopción de sistemas de diseño
- Mapear variantes y propiedades de un componente de diseño en código para mantener la coherencia entre los equipos de productos
- Crear ejemplos de casos de uso de componentes específicos para ayudar a los desarrolladores a comprender su uso correcto
Los fragmentos de código personalizados se basan en la API de Figma y son totalmente personalizables para admitir varios sistemas de diseño, productos e idiomas.
Nota: Code Connect está disponible en los planes Organización y Empresa, y requiere un acceso completo de diseño o deModo de Desarrollo.
-
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:
- Haz clic en Menú principal en la barra de herramientas
- Pasa el ratón por encima de Ver en el menú desplegable
- 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