Skip to content

Design canvas to web prototype

← Learning Atlas · Path 14 of 28 · For designers moving into the web: go from a Figma or Spline canvas to Framer and Webflow sites, then Bubble and Retool apps with real logic behind them.

This is the Learning Atlas from Orbit. Get your invite

Design and creative toolsNo-code / low-code platforms

  1. Step 1: Figma

    Why this matters here

    Figma starts the path because most collaborative product design begins with shared screens, components, and visual decisions.

    In short

    The industry-standard, browser-based collaborative interface design tool used by teams to create wireframes, UI/UX designs, and interactive prototypes.

    Full definition of Figma →

    Next: Spline ↓

  2. Step 2: Spline

    Why this matters here

    Spline adds 3D and interactive visual work, expanding the learner's idea of what can move from design into a web experience.

    In short

    A browser-based, collaborative 3D design tool that makes it easy to create and embed interactive 3D web experiences without writing complex WebGL code.

    Full definition of Spline →

    Next: Framer ↓

  3. Step 3: Framer

    Why this matters here

    Framer matters after Spline because it turns design assets and interactions into a publishable prototype surface.

    In short

    A visual web building platform that allows designers to design, animate, and publish high-performance websites directly from a freeform canvas, without writing code.

    Full definition of Framer →

    Next: Webflow ↓

  4. Step 4: Webflow

    Why this matters here

    Webflow shifts the journey from prototype feel toward production-like visual site building without hand coding every page.

    In short

    A professional visual web development platform used to design, build, and launch custom, responsive websites and CMS-driven content without writing code.

    Full definition of Webflow →

    Next: Bubble ↓

  5. Step 5: Bubble

    Why this matters here

    Bubble comes next because it adds application logic and data workflows beyond Webflow's site-first strengths.

    In short

    A highly advanced no-code platform that enables the visual development of complex, fully functional web applications, complete with customized databases and backend workflows.

    Full definition of Bubble →

    Next: Retool ↓

  6. Step 6: Retool

    Why this matters here

    Retool closes the path by showing a more operations-focused low-code endpoint for internal tools rather than public marketing pages.

    In short

    A low-code platform specifically designed for developers to rapidly build robust internal tools, admin panels, and dashboards by connecting visual UI components to any database or API.

    Full definition of Retool →

    Continue with Automating internal operations →