Volver al blog

De Figma a producción: desarrollo frontend con diseño de terceros

Cómo codificar sitios desde diseños en Figma sin reinterpretar la visión del diseñador — lecciones de proyectos con Idris Agüero e Idea2Form.

En proyectos recientes con Idris Agüero e Idea2Form — sitios como EPA Community Archive, Self-eSTEM y Decolonizing Wealth Project — el flujo fue claro: Idris diseñó en Figma, yo codifiqué.

No es lo mismo que diseñar y desarrollar. Aquí comparto lo que aprendí llevando diseños de terceros a producción.

1. El Figma es la fuente de verdad

Cuando recibes un diseño terminado, tu trabajo no es reinterpretar — es traducir fielmente a HTML, CSS y JS. Eso significa respetar espaciados, tipografías, breakpoints y estados interactivos definidos en el archivo.

Si algo no funciona en código, la conversación es con el diseñador — no improvisar por tu cuenta.

2. Pregunta los estados antes de codificar

Hover, focus, mobile, menú abierto, formularios con error, modales — muchas veces el Figma solo muestra el estado feliz. Antes de escribir una línea, confirma qué variantes existen o pide que las agreguen.

3. Responsive no es “encoger el desktop”

Los diseños de Idris suelen incluir breakpoints pensados. Si no, define acuerdos claros: ¿qué pasa con el menú overlay en móvil? ¿las ilustraciones geométricas escalan o se simplifican?

4. Separar diseño y código en el portafolio

Es honesto y profesional: diseño por Idris Agüero, codificación por Danny Cen. Eso no resta mérito a nadie — cada rol tiene su expertise.

5. Performance y accesibilidad son tu responsabilidad

El diseñador define la experiencia visual; el desarrollador asegura que cargue rápido, sea accesible y funcione en Safari iOS, Chrome Android y Firefox. Eso incluye alt en imágenes, contraste, tamaños táctiles y lazy loading.

En Ignia Studio

En Tecnología desarrollamos sitios, apps y MVPs — incluyendo la codificación desde Figma de equipos de diseño externos. Si tienes diseños listos y necesitas llevarlos a producción, conversemos.

Agenda una llamada

Hablemos de tu proyecto

30 min · Videollamada o teléfono

Elige el día y horario que más te acomode. Te confirmaremos la cita por correo o WhatsApp.

DLMMJVS