De Figma a sitio web, construido exactamente como se diseñó
Gjethe convierte diseños de Figma en sitios web de producción en Next.js, Webflow o WordPress. Traducimos sus estilos a design tokens, construimos componentes reutilizables, completamos los estados responsive y de interacción que falten, cumplimos los estándares de accesibilidad y conectamos un CMS, ajustándonos fielmente al diseño y manteniendo el código limpio.
- Primera consulta gratuita
- Presupuesto por escrito para su proyecto
- Pagos fraccionados por hitos, con flexibilidad
De un vistazo
- Desarrollado en
- Next.js, Webflow o WordPress
- Enfoque
- Tokens y componentes
- Accesibilidad
- WCAG 2.2 AA
- Trabaja con
- Diseñadores y agencias
Definition
Qué es Figma to website?
De Figma a sitio web (también llamado Figma to code) es el desarrollo front-end de un sitio web a partir de un archivo de diseño de Figma, que convierte maquetaciones, componentes y estilos en código responsive y accesible o en un desarrollo no-code.
A los diseñadores les quita el sueño la entrega: espaciados que se desvían, fuentes que se muestran de otro modo, estados hover que nunca aparecen. Un buen desarrollo respeta la intención del diseño, no solo sus píxeles, y hace las preguntas adecuadas cuando el archivo no dice nada: cómo se ve esto en un móvil pequeño, qué pasa con un título largo, adónde va el foco.
¿Para quién es?
Diseñadores freelance
Usted diseña; necesita un desarrollador que respete su trabajo y se encargue de todo lo que viene después del archivo de Figma.
Agencias de diseño
Un sitio web que muestra su trabajo, con casos prácticos que puede actualizar usted mismo.
Equipos de diseño internos
Su equipo diseña el sitio de marketing pero no tiene un desarrollador front-end que lo construya.
Startups con un diseño terminado
Encargó un diseño y ahora lo necesita publicado, rápido y fácil de mantener.
Qué está incluido y qué se queda usted
Qué incluye
- Revisión del archivo de diseño con preguntas por escrito
- Design tokens para color, tipografía, espaciado y radio
- Biblioteca de componentes reutilizables
- Diseños responsive para cada breakpoint
- Estados hover, foco, activo y vacío
- Accesibilidad según WCAG 2.2 AA
- Animación e interacción tal como se diseñaron
- Integración con un CMS para contenido editable
- Optimización de imágenes y fuentes
- Pruebas en distintos navegadores y dispositivos
Lo que recibe
Se entrega al final. Suyo para siempre.
- El sitio web en producción o un enlace de staging
- Código fuente o proyecto de Webflow de su propiedad
- Documentación de los componentes
- Notas sobre las decisiones de diseño tomadas durante el desarrollo
- Acceso al CMS
Lo que necesita un archivo de Figma para un desarrollo sin fricciones
Que falten piezas no es un problema, preguntaremos, pero tener esto listo ahorra rondas de preguntas.
- Versiones para móvil y ordenador de cada plantilla
- Estilos de texto y estilos o variables de color
- Auto layout en los frames, para que el espaciado sea inequívoco
- Estados hover, foco y activo para los elementos interactivos
- Contenido real o realista, incluidos títulos largos
- Iconos e imágenes exportados o exportables
¿Cómo nos mantenemos fieles al diseño?
Empezamos traduciendo los estilos del diseño a tokens (valores con nombre para colores, tamaños de texto, espaciados y radios) para que el código hable el mismo idioma que el archivo de Figma. Cuando el diseñador cambia un token, todo el sitio lo sigue.
Los elementos repetidos se convierten en componentes con variantes y estados definidos. Ahí se esconden la mayoría de los problemas de entrega: un botón con estilo hover en Figma pero sin estilo deshabilitado, una tarjeta que funciona con un título corto pero no con uno largo. Enumeramos estas carencias, proponemos una solución acorde con el espíritu del diseño y la confirmamos con usted.
Antes del lanzamiento, el diseñador revisa el desarrollo en el navegador y deja comentarios directamente en la página. Las correcciones se hacen según esos comentarios, de modo que la aprobación se basa en el sitio real y no en capturas de pantalla.
¿En qué plataforma debería convertirse su diseño de Figma?
| Platform | Elíjala cuando |
|---|---|
| Next.js | importen el rendimiento, las funciones a medida o una futura aplicación web; un desarrollador se encargará de los cambios estructurales |
| Webflow | Sus diseñadores y profesionales de marketing quieran seguir editando de forma visual tras el lanzamiento |
| WordPress | Sus editores ya conozcan WordPress o necesiten su ecosistema de plugins |
Qué ocurre con cada parte de su diseño
Estilos y variables
Se convierten en design tokens en el código o en clases globales en Webflow, para que el sistema se mantenga coherente.
Components
Se convierten en componentes de código reutilizables o en componentes de Webflow con las mismas variantes y propiedades.
Frames de página
Se convierten en plantillas conectadas a un CMS, para que las páginas nuevas no necesiten un desarrollador.
Interacciones del prototipo
Se convierten en animaciones reales, ajustadas para el rendimiento y para las preferencias de movimiento reducido.
Cómo funciona el paso de Figma a sitio web, paso a paso
Cada paso tiene un resultado claro que puede revisar. Los plazos se acuerdan en su presupuesto.
- 1
Revisión del archivo
Revisamos el archivo de Figma y enviamos una breve lista de preguntas sobre estados, breakpoints y comportamiento.
- 2
Tokens y componentes
Los estilos se convierten en tokens; los elementos repetidos, en componentes, antes de construir las páginas.
- 3
Construcción de páginas
Plantillas montadas a partir de componentes y conectadas al contenido.
- 4
Revisión del diseño
Usted o su diseñador comparan el desarrollo con Figma y dejan comentarios.
- 5
Acabado y control de calidad
Comprobaciones de accesibilidad, rendimiento y compatibilidad entre navegadores.
- 6
Lanzamiento o entrega
Despliegue en su alojamiento o entrega del repositorio o del proyecto de Webflow.
Herramientas y qué determina su presupuesto
El precio depende de su proyecto y se acuerda en su presupuesto. Esto es lo que lo hace variar.
| Factor | Por qué importa |
|---|---|
| Número de plantillas únicas | Las páginas que comparten componentes se construyen más rápido que los diseños puntuales. |
| Grado de acabado del archivo | Los breakpoints y estados que falten hay que diseñarlos durante el desarrollo. |
| Animation | Los efectos complejos de scroll e interacción requieren desarrollo y pruebas adicionales. |
| Necesidades de CMS | El contenido editable requiere un modelo de contenido y la configuración del editor. |
| Platform | Los desarrollos en Webflow, los temas de WordPress y las aplicaciones Next.js implican trabajos distintos. |
| Área | Tools |
|---|---|
| Aportación del diseño | Figma, Dev Mode, variables y estilos |
| Construir | Next.js, React, TailwindCSS, Webflow, WordPress |
| CMS | Sanity, Webflow CMS, WordPress |
| Calidad | axe, Lighthouse, Playwright, BrowserStack |
Errores habituales que evitar
Lo que vemos fallar con más frecuencia y cómo lo evita un buen proyecto.
Construir píxel a píxel sin componentes
Las páginas codificadas a mano parecen correctas el primer día y se van desalineando con cada cambio. Los componentes las mantienen coherentes.
Diseños solo para escritorio
Dejar el móvil a la imaginación del desarrollador produce diseños que el diseñador nunca aprobó.
Ignorar el contenido real
Los diseños con títulos de relleno cortos se rompen cuando llega el texto real, más largo.
La accesibilidad como ocurrencia tardía
El contraste, el orden del foco y las etiquetas salen más baratos si se hacen bien durante el desarrollo que después.
Preguntas frecuentes
¿Cuánto se parecerá el desarrollo al diseño?
Muy fielmente. Respetamos el espaciado, la tipografía y la maquetación, y señalamos cualquier punto en el que el diseño no pueda funcionar tal como está dibujado, por ejemplo en pantallas muy pequeñas, antes de decidir juntos.
¿Y si mi archivo de Figma no tiene versión móvil?
Podemos diseñar las maquetaciones móviles siguiendo su diseño de escritorio y enviárselas para su aprobación antes de construir.
¿En qué plataforma debería desarrollarse?
Webflow si su equipo quiere edición visual, WordPress si los editores ya lo conocen, Next.js para rendimiento y funciones a medida. Le recomendaremos una según cómo vaya a usarse el sitio.
¿Trabajan en marca blanca para agencias?
No. Trabajamos directamente con las empresas para las que desarrollamos, con nuestro propio nombre. Consulte desarrollo web para agencias.
¿Pueden construir nuestro sistema de diseño en código?
Sí. Podemos convertir sus componentes y variables de Figma en una biblioteca de componentes en código que compartan sus sitios de producto y de marketing.
¿Será accesible el sitio?
Desarrollamos conforme a WCAG 2.2 AA: HTML semántico, navegación con teclado, estados de foco, etiquetas y contraste suficiente, y señalamos los colores del diseño que no superan el contraste.
¿Pueden trabajar también a partir de archivos de Adobe XD o Sketch?
Sí, aunque Figma es nuestra herramienta principal. Podemos trabajar con exportaciones de XD o Sketch, o importar antes los archivos a Figma.
¿Diseñan las partes que le faltan al archivo de Figma?
Sí. Diseñamos los estados, breakpoints y casos límite que falten, en el espíritu de su diseño, y se los enviamos para su aprobación antes de construir, para que no se improvise nada sin su visto bueno.
¿Podemos seguir actualizando el diseño después del lanzamiento?
Sí. Como el desarrollo usa tokens y componentes, los cambios de diseño en Figma pueden aplicarse de forma coherente. También podemos establecer un flujo de trabajo en el que las actualizaciones de su diseñador se implementen cada mes.
¿Cómo gestionan las fuentes y las licencias?
Usamos las fuentes de su diseño y comprobamos sus licencias web. Las fuentes con licencia se compran a su nombre o las aporta usted; las Google Fonts se alojan en local para mejorar la velocidad y la privacidad.
¿Pueden desarrollar solo una parte de un sitio, como nuevas landing pages?
Sí. Con regularidad desarrollamos desde Figma plantillas individuales o landing pages para un sitio existente en Next.js, Webflow o WordPress, adaptándonos a lo que ya hay.
Servicios relacionados
Desarrollo con Webflow
Sitios Webflow pensados para diseñadores, con un CMS estructurado.
Desarrollo con Next.js
Sitios y aplicaciones React renderizados en el servidor.
Diseño UI/UX
Investigación, wireframes, prototipos e interfaces.
Diseño en Figma y sistemas de diseño
Componentes, variables y bibliotecas que su equipo puede escalar.
Desarrollo de sitios web
Sitios web corporativos a medida con Next.js, React o WordPress.
De Figma a sitio web por sector
Envíenos su archivo de Figma.
Cuéntenos qué necesita. Recibirá una valoración honesta, un plan claro y un presupuesto por escrito. La primera consulta es siempre gratuita.
- Qué ocurre después
- 1Usted nos cuenta qué necesita
- 2Nos proponemos responder en 24 horas con preguntas
- 3Recibe un presupuesto por escrito para su proyecto