¿Qué novedades hay en Dev Mode?
Desde que anunciamos Dev Mode en Config 2023, hemos estado trabajando junto a nuestros clientes para crear una herramienta que mejore la entrega. Dev Mode está entrando en su siguiente capítulo y ahora requiere un usuario de pago para acceder. Con este cambio, introdujimos nuevas funciones y mejoras para ayudarte a trabajar más rápido, mejorar la colaboración y personalizar los flujos de trabajo.
Presentación de nuevas funciones en Dev Mode
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 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.
También lanzamos algunas nuevas funciones y mejoras de Dev Mode:
- Acelera la preparación de la entrega con anotaciones en Dev Mode que se mantienen actualizadas con los diseños
- Navegación mejorada y la capacidad de ejecutar plugins de Figma para VS Code
- Un nuevo modal para comparar cambios, a fin de que puedas ver diferencias en código y entre dos marcos
- Ejecuta plugins automáticamente para ti. O para toda tu organización (solo plan Empresa)
Obtén más información sobre lo que hay en Dev Mode →
Obtén información sobre cómo obtener Dev Mode
La fase beta gratuita de Dev Mode finalizó el 31 de enero y ahora requiere un puesto de pago dentro de un equipo u organización. El acceso a Dev Mode depende del plan de tu equipo u organización, de si tu equipo u organización es el propietario del archivo y del puesto que tengas. El acceso a Dev Mode, al igual que nuestros otros tipos de puestos, se concede a un equipo u organización en lugar de a una cuenta.
- Plan Inicial: No disponible
- Plan Profesional: Disponible solo con un usuario de diseño full
- Plan Organización: Disponible con un usuario de diseño full o como usuario independiente por $25/mes
- Plan Empresa: disponible con un puesto de diseño completo o como un puesto independiente por $35 por mes
Los usuarios del plan Inicial y los espectadores de archivos pueden seguir viendo propiedades y medidas, copiar código y exportar activos desde el modo de diseño.
Nota: Si eres un trabajador independiente o una agencia y estás trabajando en un archivo en el equipo u organización de tu cliente, necesitarás solicitar un puesto de diseño completo o un puesto de Dev Mode en su equipo u organización. Obtén más información sobre nuestras recomendaciones para trabajar con clientes en Figma →
Actualiza a un puesto de pago
Para actualizar a un puesto de pago y seguir usando Dev Mode, haz clic en Get Dev Mode (Obtener Dev Mode) en el banner que aparece 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 pagos requerirán la aprobación del admin. Para minimizar cualquier interrupción inmediata de tu flujo de trabajo, puedes seguir usando Dev Mode mientras esperas la aprobación.
Obtén más información sobre la gestión de puestos de Dev Mode como admin →
Elegir el puesto adecuado para ti
Si no deseas pasar a Dev Mode, puedes seguir inspeccionando los diseños y colaborando en ellos. Como espectador en el modo de diseño, puedes inspeccionar los valores de propiedad y los detalles del marco, exportar activos, copiar fragmentos de código CSS, iOS y Android, así como diseños de líneas rojas y medidas utilizando una tecla modificadora.
Dev Mode
-
A
Capacidades de inspección avanzadas y plugins personalizados
-
B
Compara los cambios entre versiones y vincula los recursos para desarrolladores para una mejor entrega
-
C
Lenguajes de generación de código adicionales
Ver acceso en modo de diseño
-
A
Inspecciona los valores de las propiedades y los detalles del marco
-
B
Exportar activos
-
C
Copia la generación de código de 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 obtener en Dev Mode versus como espectador en un archivo de diseño:
Qué puedes hacer |
Disponible en Dev Mode | Disponible para los espectadores en el modo de diseño |
---|---|---|
Ver el espaciado y las medidas |
Al pasar el mouse por encima |
A través de la tecla modificadora |
Ver los valores de las propiedades y los detalles del marco |
✓ |
✓ |
Exportar activos |
✓ |
✓ |
Ver generación de código CSS, iOS y Android |
✓ |
✓ |
✓ |
|
|
Usar anotaciones para agregar información y medidas a los archivos |
✓ |
|
✓ |
|
|
✓ |
|
|
Usar integraciones orientadas a los desarrolladores, como Jira, Storybook y GitHub |
✓ |
|
Explorar los componentes del sistema de diseño en un área de pruebas |
✓ |
|
Conectar diseños con enlaces a tickets, documentación y componentes en código |
✓ |
|
✓ |
|