¿Cuáles son las novedades en Dev Mode?
Desde que anunciamos Dev Mode en Config 2023, hemos estado trabajando con nuestros clientes para crear una herramienta que mejore las entregas. Dev Mode está avanzando hacia un nuevo capítulo y ahora es necesario un puesto de pago para acceder a él. Con este cambio, hemos introducido nuevas funciones y mejoras para ayudarte a trabajar más rápido, mejorar la colaboración y personalizar los flujos de trabajo.
Introducción de nuevas funciones en Dev Mode
Dev Mode en Figma ofrece a los desarrolladores todo lo que necesitan para navegar por los archivos de diseño y transformar los diseños en código. Con Dev Mode, los diseñadores y los desarrolladores pueden estar en sintonía y asegurarse de que no se pierden detalles importantes en el proceso de entrega.
También hemos lanzado algunas nuevas funciones y mejoras de Dev Mode:
- Acelera la preparación de la entrega con anotaciones en Dev Mode en sincronía con los diseños
- Navegación mejorada y la capacidad de ejecutar plugins en Figma para VS Code
- Un nuevo modal para comparar los cambios que te permite ver las diferencias en el código y entre dos marcos
- Ejecuta plugins automáticamente para ti. O para toda la organización (solo en el plan Empresarial)
Más información sobre lo que incluye Dev Mode →
Descubre cómo acceder a Dev Mode
La versión beta gratuita de Dev Mode finalizó el 31 de enero y ahora requiere un puesto de pago dentro de un equipo u organización. Tu acceso a Dev Mode depende del plan de tu equipo u organización, de si tu equipo u organización tienen la propiedad del archivo y del tipo de puesto que tengas. El acceso a Dev Mode, al igual que a nuestros otros tipos de puestos, se otorga a un equipo u organización en lugar de a una cuenta.
- Plan inicial: No disponible
- Plan profesional: disponible solo con una Licencia de Design completa
- Plan de organización: disponible con una Licencia de Design completa o como puesto de pago independiente por $25/mes
- Plan empresarial: disponible con una Licencia de Design completa o como puesto de pago independiente por $35 al mes
Los usuarios del Plan inicial y los espectadores de archivos pueden seguir viendo las propiedades y medidas, copiar el código y exportar los recursos desde el Modo de diseño.
Nota: si eres autónomo o una agencia y estás trabajando en un archivo en el equipo u organización de tu cliente, tendrás que solicitar una licencia de Design completa o un puesto de Dev Mode en su equipo u organización. Obtén más información sobre nuestras recomendaciones acerca del trabajo con clientes en Figma →
Actualizar a un puesto de pago
Para actualizar a un puesto de pago y seguir utilizando Dev Mode, haz clic en Obtener Dev Mode en el banner situado en la parte superior de tu archivo en Dev Mode y sigue las instrucciones para actualizar tu plan o solicitar un puesto.
Nota: todas las actualizaciones a Dev Mode en los planes de pago requieren la aprobación del administrador. A fin de minimizar cualquier interrupción inmediata de tu flujo de trabajo, puedes seguir usando Dev Mode mientras esperas la aprobación.
Más información sobre cómo gestionar los puestos de Dev Mode como administrador →
Cómo elegir el puesto adecuado para ti
Si no quieres actualizar a Dev Mode, puedes inspeccionar los diseños y colaborar en ellos. Como espectador en el modo de diseño, puedes inspeccionar los valores de las propiedades y los detalles de los marcos, exportar recursos, copiar fragmentos de código CSS, iOS y Android, así como marcar en rojo y medir diseños con una tecla modificadora.
Modo de desarrollo
-
A
Funciones de inspección avanzadas y plugins personalizados
-
B
Compara los cambios entre versiones y enlaza los recursos para desarrolladores para una mejor entrega
-
C
Otros lenguajes de generación de código
Ver acceso en Modo de diseño
-
A
Inspeccionar los valores de las propiedades y los detalles del marco
-
B
Exportar activos
-
C
Copia el código generado para CSS, iOS y Android como código desde el menú copiar/pegar al hacer clic con el botón derecho en una capa
Estas son algunas de las otras diferencias clave entre lo que puedes hacer con Dev Mode frente a lo que puedes ver como espectador en un archivo de diseño:
Qué puedes hacer |
Disponible en Dev Mode | Disponible para los espectadores en Modo de diseño |
---|---|---|
Ver espaciado y medidas |
Al pasar el ratón |
A través de la tecla modificadora |
Ver los valores de las propiedades y los detalles del marco |
✓ |
✓ |
Exportar activos |
✓ |
✓ |
Ver la generación de código CSS, iOS y Android |
✓ |
✓ |
Acceder a la inspección avanzada, como la comparación de cambios y el área de pruebas de componentes |
✓ |
|
Utilizar anotaciones para agregar información y medidas a los archivos |
✓ |
|
✓ |
|
|
✓ |
|
|
Utiliza integraciones centradas en el desarrollador, como Jira, Storybook y GitHub |
✓ |
|
Explorar los componentes del sistema de diseño en un área de pruebas |
✓ |
|
Conectar diseños con enlaces a incidencias, documentación y componentes de código |
✓ |
|
✓ |
|