Tutorial Spline.design: Lo bueno y lo malo
En el mundo del diseño digital, las herramientas de prototipado son esenciales para crear experiencias de usuario fluidas y atractivas.
Una de estas herramientas es Spline.design, que ha ganado popularidad en los últimos tiempos.
En este blog, exploraremos las ventajas y desventajas de esta plataforma, así como un tutorial para aprovechar al máximo su versión gratuita.
1. Lo Bueno de Spline.Design
- Interfaz Intuitiva: Una de las mayores fortalezas de Spline.design es su interfaz intuitiva y fácil de usar. Con una curva de aprendizaje suave, los diseñadores pueden comenzar a crear prototipos sin tener que pasar horas aprendiendo la herramienta.
- Flexibilidad Creativa: Spline.design ofrece una amplia gama de herramientas y funciones que permiten a los diseñadores expresar su creatividad sin limitaciones. Desde la creación de formas complejas hasta la animación de objetos, la plataforma ofrece muchas posibilidades para dar vida a las ideas.
- Colaboración en Tiempo Real: Otra ventaja importante es la capacidad de colaborar en tiempo real con otros miembros del equipo. Esto facilita el trabajo en equipo y la revisión de los prototipos, lo que resulta en un proceso de diseño más eficiente.
- Compatibilidad con Figma: Spline.design se integra fácilmente con Figma, una de las herramientas de diseño líderes en la industria. Esto permite a los diseñadores importar fácilmente sus diseños de Figma a Spline.design para crear prototipos interactivos.
2. Lo Malo de Spline.Design
- Limitaciones de la Versión Gratuita: Aunque Spline.design ofrece una versión gratuita, esta tiene algunas limitaciones significativas en comparación con la versión de pago. Por ejemplo, el número de proyectos y la cantidad de almacenamiento son limitados, lo que puede ser restrictivo para equipos o proyectos grandes.
- Curva de Aprendizaje para Funciones Avanzadas: A pesar de su interfaz intuitiva, algunas funciones más avanzadas pueden tener una curva de aprendizaje pronunciada. Esto puede resultar desafiante para los usuarios nuevos que desean aprovechar al máximo todas las características de la plataforma.
- Compatibilidad Limitada con Otras Herramientas: Aunque Spline.design se integra bien con Figma, su compatibilidad con otras herramientas de diseño puede ser limitada. Esto puede ser un inconveniente para los equipos que utilizan una variedad de herramientas en su flujo de trabajo.
3 Tutorial: Cómo Funciona la Versión Gratuita de Spline.design
Ahora que hemos explorado las ventajas y desventajas de Spline.design, veamos cómo puedes empezar a utilizar su versión gratuita:
Paso 1: Registro y Acceso: Visita el sitio web de Spline.design y crea una cuenta gratuita. Una vez que hayas confirmado tu correo electrónico y hayas iniciado sesión, estarás listo para empezar.
Paso 2: Crear un Nuevo Proyecto: Haz clic en el botón “Nuevo Proyecto” para comenzar a crear tu primer prototipo. Asigna un nombre a tu proyecto y selecciona la opción de crear un lienzo en blanco o importar un diseño desde Figma.
Paso 3: Diseñar tu Prototipo: Utiliza las herramientas de Spline.design para diseñar tu prototipo. Arrastra y suelta formas, aplica colores y añade animaciones para dar vida a tu diseño.
Paso 4: Colaborar y Compartir: Una vez que hayas terminado tu prototipo, puedes compartirlo con otros miembros del equipo para obtener feedback. También puedes invitar a colaboradores para trabajar en el prototipo en tiempo real.
Paso 5: Exportar y Descargar: Cuando estés satisfecho con tu prototipo, puedes exportarlo en diferentes formatos, como GIF, video o código. Esto te permitirá compartir tu trabajo con desarrolladores o clientes.
4 Tutorial: Cómo crear un diseño simple de una bola moviendose en Spline.design
Ya que has pasado el tutorial basico y seguramente tambien el tutorial de la web.
Vamos a crear algo simple, la tipica bola que aparece en las páginas webs con la que puedes interactuar.
Paso 1: Crear esfera: Vamos a las opciones de arriba y creamos una bola. Suele ser el septimo icono, el de la esfera, no el del circulo que aparece antes. Damos click y ahora hacemos click nuevamente en nuestro espacio. Ya tenemos la esfera.
Paso 2: Material: Cuando haces click en la esfera veras que a su derecha aparece un cuadrado, estas son las propiedades del elemento.
Entramos en material, click en + para crear nuevo material, luego click en la flecha hacia abajo al lado del cuadro vacio que acabas de crear, te aparecerá un listado y vamos al último, Displace.
Pincha en el material y abajo se abrira las propiedades del material. Por último, Scale igual a 3 y Movement a 20.
Paso 3: Color: Creamos otro material encima, pero esta vez va a ser Depth, es como un exagono.
Abrimos las propiedades de Depth y en Ramp añadimos un color, podeis bajarle el % de opasidad que esta al lado del color. Si vais a la esfera vereis algo transparente con un circulo, ese es el Depth podeis crear muchos Depth de colores diferentes e ir añadiendolo sobre la esfera, para que se vea una esfera multicolor. Una idea, es añadir colores muy parecidos con el fondo así parecerá que la esfera va desapareciendo, entrando y saliendo del fondo.
Paso 4: Animación: En la propiedad de la esfera sobre la parte de arriba hay algo llamado Event.
Creamos un event igual que con el material y buscamos Transition, entramos en Transition y cambiamos 1 – Current por 1 – Base State y dentro de su linea, esta debajo de Base State añadimos Linear.
Paso 5: Exportar y Descargar: Ya tienes una esfera en movimiento! Cuando estés satisfecho con tu prototipo, puedes exportarlo a código y añadirlo como el inicio de tu Web.
Es verdad que no he entrado mucho en detalle, era un tutorial simple y rapido. Era para que pudieses comprobar que en 5 pasos puedes hacer cualquier diseño con Spline.design, ya que es una poderosa herramienta de prototipado con muchas ventajas, como su interfaz intuitiva, flexibilidad creativa y capacidad de colaboración en tiempo real.
Sin embargo, también tiene algunas limitaciones, como las restricciones de la versión gratuita y la curva de aprendizaje para funciones avanzadas, pero dejanos en los comentarios si quereis aprender con nosotros e iremos creando tutoriales mucho más completos, explicativos, con videos y ejemplos usando esta herramienta.
PREMIO: Compras en Amazón, conoces BigDigitalFox, ¿y aun así pierdes dinero? Envíanos un mensaje a nuestro chat con la compra que vayas a hacer en Amazon y te daremos el producto con el link de afiliado de BDF, si compras desde ese link obtendrás entre el 1% y el 10% de tu compra en puntos que podrás usar en nuestra web, convertir en tarjetas de Amazon o retirar como bizum.
Ademas tus puntos no caen en saco roto, incluso si dejaras tus puntos en nuestra web sin usar, al año puedes obtener un 40% de esos puntos… Imagina tener 1000 euros en puntos y al año poder conseguir hasta 1400 euros solo por ser usuario de Big Digital Fox.