Framer Sites: Construye webs no-code desde Figma

Cuando queremos lanzar un negocio, una de las cosas más importantes que tenemos que hacer es darle visibilidad en internet, y la forma más común suele ser con la creación de una web. Hoy vamos a hablar de que es Framer Sites, la herramienta que nos permitirá diseñar y crear webs sin necesidad de programar.

¿Qué es Framer Sites?

Framer Sites (o Framer, a partir de ahora) es una herramienta online que te permite diseñar y crear páginas webs no code avanzadas. Con esta plataforma, podrás crear prototipos funcionales y añadir integraciones con terceros.

Si en un inicio esta web empezó como una plataforma de diseño de prototipos exclusivamente, con el tiempo ha ido evolucionando para permitir al usuario crear páginas complejas con su propio gestor de contenidos (CMS) e integraciones como MailerLite.

De hecho, ha sido seleccionada como la segunda mejor aplicación NoCode y la segunda mejor aplicación de diseño del mundo en los premios GoldenKittyAwards2022 creados por ProductHunt.

¿Cómo funciona Framer?

Framer funciona con un editor visual con el que trabajaremos en todo momento a través de nuestro navegador web. En este editor, podremos encontrar 4 secciones diferentes:

  • Menú superior: En la barra superior del editor, encontraremos el menú principal de la aplicación, en la cual podremos añadir un elemento de entre todos los que triene Framer por defecto, un layout, un frame, texto o colección de CMS
  • Menú de navegación de nuestro proyecto: En la parte izquierda encontraremos un menú donde podremos navegar y visualizar entre nuestra páginas, capas o elementos creados dentro de las mismas.
  • Menú contextual de estilos: Cada vez que pulsemos sobre un elemento de nuestro prototipo, se abrirá en la parte derecha de nuestra pantalla el menú donde podremos definir cada atributo del elemento en cuestión, por ejemplo la anchura o altura de una imagen.
  • Vista previa: Es la parte sección central y principal de nuestra ventana, y en ella podemos ir visualizando en tiempo real cual es el resultado de nuestro diseño. Podemos visualizar en diferentes tamaños de pantalla según tengamos configurado.
Framer, editor interno de la herramienta
Framer, editor interno de la herramienta

Integración con Figma y Sketch

Si por algo se ha hecho famoso Framer, es por su capacidad para integrarse con otras aplicaciones de diseño, permitiendo a un diseñador gráfico crear una aplicación funcional importando el diseño desde otra herramienta.

Si queremos importar desde Figma nuestro proyecto para hacerlo funcional, podremos hacerlo tan solo con instalar un plugin que tiene la propia empresa. Si quieres saber más, puedes leer en su página web

Por otro lado, también podemos convertir nuestros proyectos de Sketch en páginas con funcionalidad a través de Framer. Para ello, tendremos que instalar un plugin en Sketch que nos permitirá copiar y pegar elementos entre las herramientas.

Precios

Framer cuenta con una versión gratuita que nos permitirá crear algunas web sencillas con poca funcionalidad, ideal para una landing page sencilla o presentar un producto. Este plan solo nos permitirá publicar en un subdominio que terminará en «.framer.website», y mostrará una marca de agua con el logo de frame.

En cuanto a los planes de pago, destaca que podrás obtener una versión mini por 5€/mes donde podrás obtener hasta 1000 visitantes y publicar en un dominio personalizado. Este plan es ideal para startups y landings algo más potentes.

Precios de Framer
Listado de precios

Conclusiones

Como puedes ver, Framer se va a posicionar como uno de las herramientas referentes dentro de los constructores de webs dentro del ecosistema no-code. Sin duda, en estos próximos meses veremos como makers y diseñadores hacen cada vez más uso de esta plataforma para la creación de sus proyectos.

Si quieres conocer otras herramientas para crear webs sin código, te recomiendo leer sobre Dorik o Softr.

Deja un comentario

RSS
LinkedIn
Share