Madbax Navigation - Premium Animated Banner

Search Madbax

Find courses, tutorials, and creative resources

Enter to search
↑↓ to navigate
Esc to close
Madbax Navigation - Premium Animated Banner

Search Madbax

Find courses, tutorials, and creative resources

Enter to search
↑↓ to navigate
Esc to close
Home Courses UX/UI Build a 3D Site Without Code with Framer – Design+Code
UX/UI

Build a 3D Site Without Code with Framer – Design+Code

Share

This course is entirely free thanks to Framer’s sponsorship. We’re going to build a multi-page site with 3D assets, animations and CMS data without touching code. It’s fully responsive and everything can be easily edited to turn it into a customized site.

Layout Stack
Every container in your layout can adapt to the size of your content. Similar to Flex in CSS and Stacks in SwiftUI, you can add content and adjust the direction, distribution, alignment and gap.

Breakpoints
Like Media Queries in CSS, you can set conditions based on the screen width. For example, elements can be hidden or fonts can be smaller on mobile devices. The same useful concepts of min width, max width, fraction and percentage units work great in Framer.

Embed 3D and Animated Assets
Framer has an incredibly useful Embed feature that lets you instantly embed element from a URL, like Spline 3D assets, Rive animated assets or simply YouTube videos.

Related Articles
UX/UI

Design Patterns for AI Interfaces (10h video + live UX training)

How to design AI products that actually work for people. AI doesn’t...

UX/UI

Product Psychology Masterclass – growth.design

The step-by-step system to apply product psychology. In 5 weeks, you’ll apply...

UX/UI

The Webflow Masterclass – Learn how to build websites with Webflow

Master the art of pro-grade web design through Flux Academy’s immersive Webflow...

UX/UI

Ultimate Rive Animation Course – Interactive Animations In Depth

Master interactive animation with this comprehensive course. It doesn’t matter if you...