FIGMA PARA ENTREGA DE DISEÑOS
Simplifica la entrega de diseños
Figma posibilita una experiencia de entrega de diseños que mantiene a los diseñadores y desarrolladores en la misma página. Comunícate mejor, brinda consistencia y desarrolla excelentes productos.
![Formas y símbolos que representan Dev Mode de Figma, incluido el botón de alternancia de Dev Mode, un modelo de cuadro de CSS, chat con cursor, dimensiones de altura y un cuadro delimitador.](https://cdn.sanity.io/images/599r6htc/regionalized/6fc5dbcdb91b4c56b1a1ffb2af7b7e0d5f36d09d-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Contamos con la confianza de los equipos de
Acaba con las brechas entre diseño y desarrollo
Mejora la comunicación y colaboración entre diseñadores y desarrolladores para que se desarrolle lo que realmente se diseñó.
![Dos cursores de compañeros de equipo que utilizan anotaciones para documentar notas de diseño de ingeniería en una página de un producto de comercio electrónico.](https://cdn.sanity.io/images/599r6htc/regionalized/ec829ed4e31550b087b55e0869f75ae382c9bcd6-1560x1249.png?rect=1,0,1559,1249&w=780&h=625&q=75&fit=max&auto=format)
Minimiza las malinterpretaciones
Deja notas fácilmente en archivos de diseño con información y medidas adicionales para aumentar la claridad y acelerar el desarrollo.
![Un desarrollador comparando la versión actual con la anterior de un componente del botón “Agregar al carrito” en la página de inicio de un producto de comercio electrónico.](https://cdn.sanity.io/images/599r6htc/regionalized/a2106da9cb52e0d9da9c348f4baee3926503d293-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Reduce las idas y vueltas
Los desarrolladores pueden comparar fácilmente un marco con su versión anterior para ver exactamente qué cambió.
![Una pantalla en la que se muestran secciones listas para el desarrollo en Dev Mode.](https://cdn.sanity.io/images/599r6htc/regionalized/7ace83429446da553d16eddb3d6900eb142bb205-1080x864.png?w=780&h=624&q=75&fit=max&auto=format)
Informa lo que está listo para el desarrollo
Utiliza los estados de las secciones para indicar claramente qué pantallas están listas para que trabajen tus socios de desarrollo.
Explora funciones diseñadas para ofrecer una mejor entrega de diseños
Una vista para los desarrolladores
Invita a los desarrolladores a colaborar desde el principio y a opinar sobre las decisiones de diseño. Ofréceles una vista dedicada (Dev Mode) para inspeccionar, comparar e implementar diseños.
![El cursor de un desarrollador cerca de los estilos de colores de un sistema de diseño de sitios web de comercio electrónico.](https://cdn.sanity.io/images/599r6htc/regionalized/87a21162ebf76abd4de9c6f624aad67590bca9d7-1080x864.png?w=540&h=432&q=75&fit=max&auto=format)
Alinea los sistemas de diseño con el código
Crea, mantén y comparte componentes y estilos con facilidad. También podrás usar el mismo lenguaje en archivos de diseño y código con tokens, así como ver otros recursos para desarrolladores directamente en tu archivo de diseño.
Inspecciona y obtén fragmentos de código
Obtén detalles como medidas, especificaciones y estilos. Genera fragmentos de código CSS, iOS o Android listos para la producción a partir de tu diseño o exporta activos con un solo clic.
![Un espacio de trabajo de proyecto en Visual Studio Code.](https://cdn.sanity.io/images/599r6htc/regionalized/dd9455290499b002fbd265cad9fd0158ba8bb319-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
Integración de VS Code
Nuestra extensión de VS Code lleva el archivo de diseño al editor de texto. Inspecciona archivos de Figma, colabora con diseñadores, recibe notificaciones y obtén sugerencias de código desde VS Code.
Anteriormente, los desarrolladores tenían que inspeccionar cada elemento. Ahora podemos generar automáticamente el código a partir de los diseños.
Saurabh Soni, jefe de diseño de Razorpay
Obtén más información sobre las prácticas recomendadas para la entrega de diseños
![Un fondo de color coral con formas superpuestas de color verde, amarillo y negro relacionadas con el desarrollo, como el botón de alternancia de Dev Mode.](https://cdn.sanity.io/images/599r6htc/regionalized/8244c56cf528cb567ce0b673c04470084968ea11-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Conoce Dev Mode en detalle
Obtén más información sobre Dev Mode y cómo facilita la entrega del diseño al desarrollador.
![Un cursor de desarrollador que selecciona un círculo verde y visualiza códigos hexadecimales de colores de una marca en una biblioteca de sistemas de diseño.](https://cdn.sanity.io/images/599r6htc/regionalized/5552ea22fc3ac3b07f7dbac6c96f6fe5b53c6d8c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Conoce las prácticas recomendadas de entrega
Lee una recopilación de las prácticas recomendadas de los expertos.
![Selección del logotipo de Figma mediante un cursor verde.](https://cdn.sanity.io/images/599r6htc/regionalized/3fd439980ffa346a4ffd308a95d0c6c699ed6f0b-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Cómo Figma usa Dev Mode
Descubre cómo los equipos de ingeniería y diseño de Figma utilizan Dev Mode para las entregas.