Code Components en Framer: cuándo usar código
Un Code Component es un componente React que amplía Framer. Conviene para lógica, datos, cálculos e interacciones que las herramientas visuales no resuelven bien. Para layout, contenido y animaciones comunes, las funciones nativas suelen ser más fáciles de mantener.
Respuesta directa
Usa código cuando necesitas reglas, cálculos, APIs, estados complejos o integración visual personalizada. Usa Framer nativo cuando el problema se resuelve con stacks, componentes, variantes, CMS o animaciones estándar.
Qué es un Code Component
Framer lo define como un componente React que se renderiza en el canvas, preview y sitio publicado. Puede exponer Property Controls para editar textos, colores, números, enlaces, imágenes y otras opciones desde la interfaz visual.
Esa combinación es poderosa: la lógica vive en código y la configuración útil sigue disponible para quien diseña o mantiene el sitio.
Cuándo sí usarlo
Calculadoras de precio, ROI o configuración.
Formularios con lógica condicional.
Visualizaciones, mapas o dashboards.
Datos obtenidos desde una API.
Generación de documentos o resultados descargables.
Animaciones o gestos que no existen en la plataforma.
Integraciones cuyo aspecto debe personalizarse.
El código debe resolver una limitación concreta, no funcionar como un impuesto de complejidad sobre cada botón.
Cuándo no hace falta
Stacks, grids, variables, componentes, variantes, breakpoints y CMS cubren una parte enorme de un sitio de marketing. Si un equipo puede editar el resultado sin abrir código y la función es equivalente, la solución nativa suele ganar.
Regla práctica
Si el componente solo reproduce una sección que Framer ya puede construir visualmente, probablemente estás cambiando autonomía editorial por mantenimiento técnico.
Property Controls que sí ayudan
Expón contenido y decisiones que una persona probablemente cambiará: títulos, datos iniciales, límites, moneda, CTA, colores de marca y enlaces. Organiza controles en un orden lógico, utiliza nombres claros y configura valores predeterminados que produzcan un resultado usable.
No expongas treinta parámetros internos de animación solo porque existen. Un panel lleno de controles sin explicación es código, pero con peor tipografía.
Precaución con el CMS
Framer advierte que acceder a colecciones mediante internals, imports privados o recorridos de props no está soportado. Si el sitio necesita sincronización o cambios masivos, usa las superficies oficiales disponibles y mantén el CMS desacoplado de trucos que puedan romperse con una actualización.
Rendimiento y responsive
Prueba mobile, tablet y desktop.
Evita mediciones y actualizaciones de estado durante cada evento de scroll.
Monta contenido pesado cuando sea necesario.
Respeta
prefers-reduced-motion.Reserva dimensiones para evitar saltos.
Elimina assets, ramas y dependencias sin uso.
La guía de buenas prácticas de Framer insiste en que el código sea conciso, mantenible y que las animaciones no provoquen layout shifts innecesarios.
Checklist antes de construir
¿La función existe de forma nativa?
¿El código añade valor visible o lógico?
¿Quién actualizará el contenido?
¿Qué controles necesita realmente?
¿Funciona sin ratón y con movimiento reducido?
¿Se probó en dispositivos y tamaños reales?
¿Existe una forma clara de mantenerlo?