Cómo usar, personalizar y cambiar una plantilla de Framer

Perry Vance
10 min de lectura
Cómo usar, personalizar y cambiar una plantilla de Framer

Una plantilla de Framer se ve terminada en cuanto la remixas, y ahí está precisamente la trampa. Esta guía cubre la secuencia completa: cómo llevar una plantilla a tu cuenta, personalizarla sin desarmar el sistema de diseño, adaptarla para un portafolio y cambiar de plantilla cuando la primera elección fue equivocada.

Una plantilla de Framer llega a tu espacio de trabajo viéndose terminada, y ahí está precisamente la trampa. El contenido de demostración encaja perfectamente porque el diseño se creó alrededor de él, y el trabajo real comienza cuando tu titular más largo rompe el hero, tus fotos tienen proporciones diferentes y no puedes encontrar dónde vive el footer. Nada de eso es difícil una vez que entiendes cómo están estructurados los proyectos de Framer. La mayoría solo comienza en el lugar equivocado.

Esta guía cubre la secuencia completa: llevar una plantilla a tu cuenta, personalizarla sin desarmar el sistema de diseño, adaptarla para un portafolio y cambiar de plantilla cuando la primera elección fue equivocada. Los consejos se basan en nuestras reseñas de 361 plantillas de Framer, cada una evaluada en calidad de diseño y desarrollo por diseñadores y desarrolladores profesionales con 10 años o más de experiencia. Si todavía no has elegido una plantilla, empieza con nuestra comparación de dónde encontrar plantillas de Framer gratuitas y premium.

¿Cómo usas una plantilla de Framer?

Las plantillas gratuitas se instalan con un clic: encuentra la plantilla en el Framer Marketplace y haz clic en "Use for Free", y Framer copia el proyecto completo en tu espacio de trabajo. Las plantillas de pago pasan por el checkout del creador, después del cual recibes un enlace remix por correo electrónico. Al abrir ese enlace mientras estás conectado a Framer, se duplica el proyecto en tu cuenta. De cualquier manera, editas la copia en el editor de Framer y publicas desde el botón en la esquina superior derecha.

El enlace remix es la pieza que vale la pena entender, porque toda la economía de plantillas funciona con él. Un enlace remix es una URL que crea un duplicado exacto de un proyecto en la cuenta de quien lo abre. No expira y funciona múltiples veces, así que guarda el correo de compra: es tu acceso permanente a una copia limpia de la plantilla. Si una plantilla comprada no aparece en tu tablero, actualiza o haz clic en el enlace nuevamente mientras estás conectado. Eso cubre casi todos los casos de "plantilla perdida".

La publicación está separada del pago. El plan gratuito de Framer te permite editar y publicar cualquier plantilla en un subdominio framer.website, así que puedes construir el sitio completo antes de gastar nada en hosting. Conectar un dominio personalizado es lo que requiere un plan de sitio de pago. Una plantilla de $59 más el plan de hosting es el costo real del proyecto, que nuestra comparación de plataformas desglosa frente a Webflow y Shopify.

¿Cómo descargas una plantilla de Framer?

No lo haces, y eso es por diseño. Las plantillas de Framer nunca se descargan como archivos: no hay ZIP, no hay paquete de tema y nada que importar. "Descargar" una plantilla de Framer significa remixarla, lo que copia el proyecto directamente en tu cuenta de Framer en la nube. Las plantillas gratuitas se remixan mediante el botón "Use for Free", las de pago se remixan mediante el enlace que el creador envía por correo después del checkout.

Esto confunde a los compradores que vienen de mercados de plantillas de WordPress o HTML, donde una compra te entrega un archivo comprimido. Pero también tiene ventajas reales. No hay nada que instalar o versionar, la plantilla no se puede perder en una laptop muerta, y el mismo enlace remix produce una copia fresca y sin modificar cada vez que la necesitas, lo que es efectivamente un deshacer ilimitado para experimentos catastróficos.

Lo único que debes verificar antes de comprar en una tienda de terceros es que el producto realmente sea un enlace remix. Los vendedores legítimos lo entregan automáticamente después del checkout. Un listado que promete una "descarga de archivo Framer" no entiende la plataforma en el mejor de los casos. Si quieres verificar que una plantilla existe como un proyecto real de Framer primero, la URL de vista previa en vivo en cualquier listado honesto funciona en la infraestructura propia de Framer.

¿Cómo personalizas un diseño preconstruido en Framer?

Personaliza en este orden: estilos globales primero, componentes compartidos segundo, contenido de página tercero. Abre el panel de Assets y actualiza los estilos de texto, tokens de color y estilos de enlace antes de tocar cualquier página. Esos tokens se propagan por todo el sitio, así que una edición reestiliza cada elemento a la vez. Luego edita el header y footer, que son componentes compartidos que se actualizan en cada página. Solo entonces reemplaza el contenido página por página.

Trabajar en ese orden es la diferencia entre una tarde y una semana perdida. Las plantillas de Framer bien construidas enrutan casi todo mediante tokens globales y componentes. Cuando cambias el token de color de acento a tu color de marca, los botones, enlaces, estados hover y fondos de secciones siguen todos. Empieza editando elementos individuales primero y los dejarás fuera del sistema de tokens, luego perseguirás inconsistencias a través de cada breakpoint más tarde.

La calidad de la estructura varía de plantilla a plantilla, y es la mayor parte de lo que mide nuestro Dev Score en archivos de Framer: reutilización disciplinada de componentes, comportamiento sensato de breakpoints, colecciones CMS conectadas a tipos de contenido reales. Un archivo como Elian (gratuito, Dev: 9.7/10) enruta todo mediante sus tokens de diseño, por eso absorbe un cambio de marca con gracia. Nuestra biblioteca de Framer publica ambos puntajes para las 361 plantillas que hemos revisado, así que puedes verificar qué tan seguro es personalizar un archivo antes de comprometerte con él.

¿Cómo personalizas una plantilla de Framer para un sitio web de portafolio?

Empieza con el contenido de tus proyectos, no con los visuales. Lista tus mejores 6 a 10 proyectos, escribe sus títulos y resúmenes de una línea, y reúne imágenes en proporciones consistentes. Luego abre la colección CMS de la plantilla para proyectos y reemplaza las entradas de demostración con las tuyas. El diseño del portafolio, grids, revelaciones hover y páginas de casos de estudio ya están conectados a esa colección, así que el contenido real fluye en su lugar antes de que reestilices nada.

Contenido primero importa doblemente para portafolios porque el trabajo es el producto. Una demostración de plantilla llena de fotografía placeholder llamativa puede verse vacía con tres proyectos reales, o apretada con quince. Cargar tu contenido real inmediatamente muestra si la estructura de la plantilla encaja con tu cuerpo de trabajo, mientras que una compra sin reembolso todavía está lo suficientemente fresca como para importar en la siguiente elección. Revisa especialmente la plantilla de página de caso de estudio: algunas plantillas de portafolio asumen proyectos con muchas imágenes, otras asumen casos de estudio escritos largos, y el tuyo se inclinará de una manera.

El banco de portafolios de Framer es el más profundo de cualquier plataforma que cubrimos: 344 de nuestras 361 plantillas de Framer evaluadas llevan la etiqueta Portfolio & Agency, así que ser exigente no cuesta nada. Nuestro roundup de las 20 mejores plantillas de portafolio para Framer clasifica las más fuertes, con opciones gratuitas como Gordian (Design: 9.5/10, Dev: 9.6/10) sentadas cómodamente junto a líderes de pago como TITARVL ($49, Design: 9.7/10).

gordian - Framer Portfolio & Agency Website Template

¿Cómo cambias una plantilla de Framer en un sitio existente?

Framer no tiene una mecánica de cambio de plantilla. Una plantilla no es un tema aplicado sobre tu contenido: la plantilla es el proyecto. Cambiar plantillas significa remixar la nueva plantilla en tu espacio de trabajo como un proyecto separado, mover tu contenido a él y redirigir tu dominio personalizado del proyecto antiguo al nuevo cuando esté listo. Tu proyecto antiguo permanece intacto durante todo el proceso, lo que hace que el cambio sea de bajo riesgo aunque no glamoroso.

La migración es mayormente mecánica. Texto e imágenes se mueven por copiar y pegar. El contenido CMS es la parte que vale la pena planear: recrea tus colecciones en el nuevo proyecto con campos coincidentes, luego mueve los elementos, usando importación CSV donde la colección es grande. Copiar secciones pegadas entre proyectos trae sus estilos, pero llegan fuera del sistema de tokens de la nueva plantilla, así que espera reenlazar fuentes y colores a los tokens del nuevo proyecto en lugar de asumir que se mezclarán.

Decide honestamente si estás cambiando o solo reestilizando. Porque las plantillas de Framer enrutan su apariencia mediante tokens globales, un número sorprendente de casos de "odio esta plantilla" se resuelven en una hora cambiando los estilos de texto y tokens de color en lugar de migrar proyectos. Si necesitas un reemplazo, nuestro roundup de las 30 mejores plantillas de Framer es el camino más corto a una lista corta evaluada. Cambia cuando la estructura está mal: tipos de páginas faltantes, un CMS que no coincide con tu contenido, diseños que pelean con tu material. Reestiliza cuando los huesos están bien y la ropa está mal.

FAQ

¿Necesito un plan de pago de Framer para usar una plantilla?

No para empezar. Remixar plantillas, editar y publicar en un subdominio framer.website gratuito funciona en el plan gratuito de Framer. Necesitas un plan de sitio de pago para conectar un dominio personalizado, elevar los límites de CMS y eliminar el branding de Framer. La compra de la plantilla y el plan de hosting son costos separados.

¿Puedo usar una plantilla de Framer comprada para múltiples sitios?

El enlace remix técnicamente producirá múltiples copias, pero casi todos los creadores licencian por proyecto o por sitio. Verifica los términos de licencia en el listado de la plantilla antes de reutilizar una compra en proyectos de clientes. Las plantillas gratuitas tienen sus propios términos, que van desde sin restricciones hasta solo uso personal.

¿Necesito saber programar para personalizar una plantilla de Framer?

No. El editor de Framer es completamente visual, más cercano a una herramienta de diseño que a un constructor de sitios, y todo lo que una plantilla incluye se puede editar en el canvas. El código solo entra si agregas componentes personalizados o overrides, lo que la mayoría de los proyectos de plantillas nunca necesitan.

¿Cuánto tiempo lleva lanzar un sitio desde una plantilla de Framer?

Un portafolio en una plantilla bien construida es un fin de semana de trabajo real: estilos globales y header en la primera sesión, contenido de proyectos en la segunda, QA en anchos de teléfono y tableta en la tercera. Los sitios de marketing con más tipos de páginas toman de una a dos semanas a tiempo parcial. La calidad de construcción de la plantilla mueve estos números significativamente, por eso publicamos un Dev Score para cada archivo que revisamos.

¿Qué pasa si la plantilla que compré resulta estar mal construida?

Las ventas de plantillas generalmente son finales, así que la evaluación tiene que ocurrir antes del checkout. Prueba la vista previa en vivo a 375px de ancho, haz clic en cada tipo de página y verifica puntajes independientes donde existan. Cada plantilla de Framer en nuestra biblioteca tiene un Design Score y un Dev Score promediados de múltiples revisores profesionales, publicados antes de que gastes nada.