FIGMA PARA DESARROLLO WEB
Pasa rápidamente de la idea al sitio web
Figma ayuda a los equipos de desarrollo web a generar ideas, diseñar y desarrollar en conjunto más rápidamente.
![Una representación gráfica de la alternancia de Dev Mode, un modelo de cuadro de CSS y conexiones de creación de prototipos. También hay una cara sonriente.](https://cdn.sanity.io/images/599r6htc/regionalized/ed9594ace473af842a0a7515419b8c01557ff757-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Con la confianza de los equipos de
![logotipo de vercel](https://cdn.sanity.io/images/599r6htc/regionalized/926e3cc5c12733ada700593e419dc2c5b522a95f-292x66.png?rect=0,1,292,64&w=137&h=30&q=75&fit=max&auto=format)
Crear excelentes experiencias web es difícil, pero Figma lo pone fácil.
Figma reúne a los equipos de diseño y desarrollo web en una sola plataforma.
Entrega el sitio que imaginaste
Con la creación de prototipos, los diseñadores pueden comunicar la visión completa del diseño, incluidas animaciones e interacciones, a sus socios de desarrollo, lo que reduce las interrupciones y la falta de comunicación.
![Paneles en los que se describen iconos y estilos de colores, tipografías y diseños de una pantalla móvil en un sitio de comercio electrónico.](https://cdn.sanity.io/images/599r6htc/regionalized/ab3268938592549a5a2de059c1610bfbb080091e-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Alinea el diseño y el código
Utiliza un sistema de diseño compartido con componentes y estilos alineados con el código para reducir las incoherencias y acelerar el desarrollo.
![Una vista en modo claro y modo oscuro de tomas de productos de aplicaciones para su exportación.](https://cdn.sanity.io/images/599r6htc/regionalized/8aba504f624298af854a8e5a4ce2b4c1d4a25746-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Haz que las entregas sean eficientes
Con Dev Mode, los desarrolladores obtienen un espacio dedicado en Figma en el que pueden ver lo que está listo para el desarrollo, comparar cambios entre versiones y ver anotaciones de los diseñadores.
Explora funciones de desarrollo web
![Una vista de panel de propiedades booleanas de un componente del botón «Añadir a la cesta».](https://cdn.sanity.io/images/599r6htc/regionalized/b9cff110ea99245b350325ed17628a2594d54422-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Conecta componentes al código
Utiliza las propiedades de los componentes para personalizarlos más y asignarlos a las propiedades de Reacción.
![Una representación del widget de Asana en FigJam sobre un fondo morado.](https://cdn.sanity.io/images/599r6htc/regionalized/21e1a20b163e2e8b16397715b0df778fec42ce62-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Integra en tu pila tecnológica
Conecta tus archivos de Figma a otras herramientas, como Asana y Microsoft Teams, con integraciones útiles que ayudan a mantener la organización y la eficiencia.
![Un diagrama que conecta un icono morado de FigJam, un icono azul de Figma y un icono verde de alternancia de Dev Mode.](https://cdn.sanity.io/images/599r6htc/regionalized/41f228a7719550ec384841e0ad7735244132856a-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Crea flujos de trabajo personalizados
Automatiza tareas, incorpora datos a tus diseños e impulsa la colaboración con una amplia gama de plugins y widgets creados por y para la comunidad.
No importa la disciplina; todos tienen una ubicación centralizada para ver, comprender y contribuir al trabajo.
Levon Sharrow, director de Diseño de Experiencia de Patagonia
Obtén más información sobre las prácticas recomendadas en materia de desarrollo web
![El logotipo de Figma sobre un fondo multicolor con un chat de cursor amarillo donde se lee: «¡Molaaaa!».](https://cdn.sanity.io/images/599r6htc/regionalized/6f9cdd24ac0f698c60d972961280426b972d9d7c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Cómo Figma desarrolló nuestro sistema de diseño de sitios web
Un vistazo a cómo el equipo de marketing de Figma desarrolló y sigue desarrollando el sistema de diseño de figma.com.
![Resultados de búsqueda de «web» en la Comunidad de Figma.](https://cdn.sanity.io/images/599r6htc/regionalized/292a176971797f12180ba6bedddfea3f92adc28e-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Recursos de desarrollo web
Busca inspiración, herramientas y plantillas para desarrollo web; todo creado y seleccionado por la Comunidad de Figma.
![Un cursor de desarrollador que selecciona un círculo verde y visualiza códigos hexadecimales de colores de marca en una biblioteca de sistemas de diseño.](https://cdn.sanity.io/images/599r6htc/regionalized/339a85a7edb268c4ae323eb8038b25f351e8d676-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Guía para realizar una mejor entrega a los desarrolladores
Lee una recopilación de las prácticas recomendadas de los expertos.