Spline, 3D software for web designers & front end devs

Spline.design is a new 3D must-have tool in addition to a web designer's arsenal.

Spline, 3D software for web designers & front end devs
spline design

Spline, 3D software for web designers & front end devs

While we are on a current trend of flat and minimal web designs ( that are boring & lazy when not executed correctly ) the 3D trend’s steadily creeping up. Spline.design is a new web-based 3D design tool that works with a 2D approach in creating 3D web-based designs in real-time. It enables the creation of interactive 3D/2D content (not mockups or prototypes) compatible for production.

Founded in 2020, while in its early stage it has been gathering quite the following because of its straightforward UI, no-code platform, 2D approach that designers are already familiar with and use daily through platforms such as adobe XD and figma.

Working with Spline

3d for the web in real-time. Use text, create basic geometric shapes, edit materials, import 3d models, and more. Control the outcome of your design work.

Getting started on spline you immediately recognize all the familiar tools that you are accustomed to, layers panel, tool tab, layer options. It’s a bit of a mix of photoshop, illustrator, xd, and blender experience. Interacting with the 3d elements like panning, zoom, and rotation may take some time getting used to since it’s not your conventional way (blender, after effects) of doing things.

Getting started on Spline you immediately recognize all the familiar tools that you are accustomed to, layers panel, tool tab, layer options, even the trusty pen tool. It’s a bit of a mix of photoshop, illustrator, xd, and blender experience.

[ alt + left mouse ] rotates the 3d object along with the canvas

[ ctrl + mouse wheel ] zooms it in & out

[ space bar + left mouse ] lets you pan on the canvas.

States and Events

States (base state & state 1 ..)  just like in Adobe XD states refers to the current position, scale, rotation of a certain shape/shapes on Spline a shape can have multiple states added to it.

Events are triggers the change of a state of an object in spline, an event can either be a :

  • mouse down
  • mouse up
  • mouse hover
  • key down/up
  • start
  • look at
  • follow

Urgency Web logo created on spline

UW Spline 3d

With its current alpha release spline is still in its early stage, it may show promise but it's still a long and exciting way to go.

“3D design has been historically complex and inaccessible for designers.  Spline aims to fix that.  But there is much more than making things simpler, the entire design process can change if you think and design in 3D by default.” 

- Alejandro León, founder, and CEO of Spline.