Framer X es un software para realizar diseños y prototipar pero que además tiene la peculiaridad de poder vitaminar nuestros diseños con código basado en React.js.
Índice
Introducción
Llevo varias semanas indagando con otras herramientas de diseño para prototipar que sean diferentes a las que suelo usar para trabajar. Vengo de Sketch y hasta ahora era la herramienta por excelencia, pero desde los últimos años la competencia se ha puesto las pilas y no veo muy lejano el destrono de Sketch de la cúspide de herramientas para diseño y prototipado de interfaces.
Recientemente me he topado con Framer X, ¿qué es Framer X?.
Bien, Framer X es un software para realizar diseños y prototipar, pero que además tiene la peculiaridad de poder vitaminar nuestros diseños con código basado en React.js.
Framer X es la evolución mejorada de Framer Studio. Al principio Framer Studio nació para traer a los diseñadores la oportunidad de poder crear interacciones y animaciones avanzadas. Ahora Framer X va mucho más allá, no hace falta saber código, puedes prototipar sin necesidad de programar. Se ha añadido un editor gráfico más potente, nada que envidiar a las herramientas ya conocidas (Sketch, Adobe XD, etc), pudiendo crear ilustraciones en formato SVG y exportarlas.También dispone de una pestaña llamada «Components», lo que vienen a ser los «Símbolos» de Sketch, un conjunto de bloques creados para ahorrarnos trabajo.
Han añadido una tienda de paquetes en los que la comunidad de Frame sube componentes que pueden ser reutilizados ahorrándonos muchísimo trabajo.
Como podéis ver, en cuanto a herramienta de diseño es similar a sus competidores, pero lo que le hace distinto es la posibilidad de interactuar con el código y crear componentes muy avanzados gracias a React.js.
Interfaz
La interfaz de Frame X:
- Menú
- Selector de propiedades del Menú
- Canvas
- Panel de propiedades o Inspector
Dentro del Menú encontramos:
Tools
Aquí encontramos todo lo relacionado con las herramientas para crear la interfaz.
Podemos diferenciar entre Layout, Interactive, Drawing y Canvas.
- Layout
- Frame: Son Artboards con tamaños preestablecidos ( Watch, Phone, Computer, TV), también puedes crear formas rectangulares y cuadradas.
- Round: Puedes crear círculos.
- Text: Puedes añadir Texto.
- Stack: Los stacks son pilas de elementos cuya distribución puedes alinear de manera sencilla, muy útil cuando tienes que cambiar de orden el diseño de tus cajas. Para que funcione los elementos tienen que ser hijos de un stack padre.
Funcionamiento del stack
- Interactive:
Las interacciones son justo eso mismo, interacciones que puedes realizar dentro de tu diseño sin necesidad de código. Dentro de ellas distinguimos entre, link scroll y page.
- Drawing:
Nos proporciona herramientas como la pluma, rectángulo, círculo, polígono y estrella para realizar figuras y formas. Estas formas luego pueden ser exportados en SVG.
- Canvas:
Accesos visuales para la navegación por la interfaz. Si no hemos utilizado nunca una herramienta de prototipado, antes nos vendrá bien para saber manejar los comandos.
Layers
Aquí encontramos las capas de las formas y frames que estamos creando.
Components:
En la pestaña Components encontraremos los componentes de diseño creados por nosotros, muy útiles para ahorrarnos trabajo a nivel visual. También encontraremos componentes de código, que son componentes que obtenemos de la tienda de paquetes, creados con react.js, que poseen diferentes tipos de configuraciones que son modificables desde el panel de inspector.
Code
Aquí viene la parte interesante gracias a React.js hay un gran abanico en cuanto a posibilidades de animación.
Voy a aprovechar este post para explicaros cómo funciona un poco la parte de código.
En el Canvas, creamos una forma ( cuadrado, círculo, pentágono…). Yo he creado un pentágono.
Tools > Drawing > Pentagono
Como el pentágono entra dentro de la pestaña Drawing en el Menú de herramientas, necesitamos de un Frame para que podamos hacer de nexo con el código.
Botón derecho sobre la capa del pentágono y le damos a Add Frame.
Con el Frame que hemos creado seleccionado, nos vamos al Inspector y pinchamos sobre Override y en File le damos a New File. Se nos creará un archivo llamado App.tsx. Este archivo se encuentra en la pestaña Code.
Os dejo el código que he creado yo. Aquí cada uno puede investigar por su cuenta y cacharrear. (En este paso he cambiado el nombre de App por Framer)
import * as React from "react"
import { Override, Data, animate, motionValue } from "framer"
// Learn more: https://framer.com/docs/overrides/
const data = Data({
PentagonoRotation: motionValue(0),
})
export const Pentagono: Override = () => {
return {
rotate: data.PentagonoRotation,
onHoverStart() {
animate(data.PentagonoRotation, 160)
},
onHoverEnd() {
animate(data.PentagonoRotation, 0)
},
}
}
Vamos a Layers y tenemos que conectar el código con la parte visual, muy sencillo.
En file el nombre del archivo frame.tsx y en Override el nombre de la variable creada
Con todo ya enlazado pinchamos sobre el frame y le damos al botón de play que está situado arriba a la izquierda. Nos saldrá el reproductor y podremos interactuar.
Hemos creado un pentágono que cuando hacer HOVER se mueve sobre sí mismo.
Como comento esto puede dar un sin fin de posibilidades.
Package:
Por último tenemos la pestaña de packages, donde podemos encontrar muchos componentes ya creados por otros usuarios de Frame para agilizar nuestro trabajo.
Precio
Algo más caro que Sketch, y también ofrece otras posibilidades, dependiendo para qué proyecto o qué papel desarrollas en tu empresa te interesara en mayor o menor medida esta herramienta.
Recordad que disponemos de la versión de 14 días gratuita para probar la herramienta.
Enlaces y Referencias
- Documentacion oficial: https://www.framer.com/learn/
- Tutoriales de iniciacion en Youtube : https://www.youtube.com/channel/UC3kUSgoGfzc9y1EcSy4nH1A
- React JS: https://es.reactjs.org
Conclusiones:
A falta de poder testarlo más, ya que he dispuesto de la versión trial de 14 días que Framer X ofrece gratis, pienso que Frame X ha venido para quedarse, es una herramienta muy potente que puede acortar la fisura que existe entre los desarrolladores y diseñadores.
