xiry.

Design · Tip

Embedding Interactive 3D Models in Framer with Spline

Workflow to embed interactive Spline 3D assets into Framer websites without code

From the Xiry library · Updated 3 October 2026

This workflow guides designers through taking a layout from Figma into Framer and embedding interactive 3D assets from Spline. By exporting a public URL with hover and orbit controls from Spline, you can display reactive 3D graphics inside Framer using a standard Embed component. It allows teams to build visually rich, interactive landing pages without custom WebGL development.

How it works

  1. Open Figma and create your webpage layout, then copy the frame to Framer (using Figma to Framer plugin/copy).
  2. Open Framer and paste your layout onto the desktop breakpoint.
  3. Open Spline (spline.design) and select or create your 3D asset (e.g., 'NEXBOT - robot character concept').
  4. Under Export > Play Settings, configure viewer settings:
  5. Set Orbit to 'Yes' and enable 'On Hover'.
  6. Adjust Orbit Limits and Zoom Limits as desired.
  7. Hide page scroll and logo if needed.
  8. Click 'Update Public URL', switch to the 'Overview' tab, and copy the public URL link.
  9. Return to Framer, click 'Insert' > 'Utility' / 'Elements' > 'Embed'.
  10. Set Embed Type to 'URL' and paste the copied Spline link.
  11. Position and resize the embed frame within your page layout and click 'Publish'.

What it's for

  • Add interactive 3D hero elements to a Framer website
  • Transfer Figma page layouts into Framer for quick publishing
  • Configure hover-responsive 3D scene interactions using Spline's viewer settings

Key points

  • Design initial page layout in Figma and copy directly into Framer breakpoints
  • Create or customize 3D assets directly in Spline
  • Configure Play Settings in Spline for orbit, zoom limits, and hover triggers
  • Generate and copy a public viewer URL from Spline's export panel
  • Insert Framer's native Embed component and select URL type
  • Resize and position the responsive 3D frame within the Framer canvas

Pricing

Freemium. Both Framer and Spline offer free tiers with paid plans for advanced features and custom domains.

Details

Type
Tip
Category
Design
Topic
3D Web Design
Open source
No
Platforms
Web
For
Web designers, UI/UX designers, and no-code builders.
Alternative to
Three.js, Webflow 3D, Lottie
Tags
framer, spline, figma, 3d, no code, web design

Why it was saved

  • @bxcmuse, 26 September 2024: Enables designers to easily incorporate responsive, cursor-following 3D characters and models onto a live webpage without writing code.

Compare

Related

Updated