[VIP] DesignCode: Build a 3D Site Without Code with Framer

Design and publish a responsive site with 3D animation without writing a single line of code.

Nov 28, 2024 - 10:43

Nov 28, 2024 - 10:41

0 19

[VIP] DesignCode: Build a 3D Site Without Code with Framer

Imagine being able to create a fully functional site from a design tool without writing a single line of code. Framer offers the power of CSS layouts and animations with the familiar and quick editing capabilities of Figma. You can deploy and iterate almost instantly without having to wait for builds and you have essential features like search engine optimizations and a content management system.

Downloads

To follow this course, you need to download the Assets file which includes the images. You can also Remix from my template in Framer: Projects

Build a 3D Site Without Code with Framer image 2

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.

Build a 3D Site Without Code with Framer image 3

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.

Build a 3D Site Without Code with Framer image 4

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.

Build a 3D Site Without Code with Framer image 5

Components and Variables

Components are useful for repeated elements. Create one and all instances will synchronize and you can customize the data as you wish. In Framer, they can also be used for interactions and transitions.

Build a 3D Site Without Code with Framer image 6

Component Variants

You can create multiple styles (called variants) of the same component and quickly switch between them.

Build a 3D Site Without Code with Framer image 7

Build a 3D Site Without Code with Framer image 8

Hamburger Menu

It is very common to create a hamburger menu for mobile web resolution. In Framer, you can create a variant for the phone resolution and set the animation for it.

Build a 3D Site Without Code with Framer image 9

Appear Animation

Creating a sequence animation when your site loads is effortless in Framer. You can configure the positions and delays to make the animation even more intriguing.

Build a 3D Site Without Code with Framer image 10

Scroll Parallax

Parallax effects during scroll events are typically a hassle to set up for sites, requiring third-part libraries and many steps to get right. Luckily in Framer, this is a breeze to achieve.

Build a 3D Site Without Code with Framer image 11

Sign Up Form

While this isn’t a full solution for creating a membership, it can connect to services like MailChimp and Formspark to collect submissions dynamically.

Build a 3D Site Without Code with Framer image 12

Pages

Your default template comes with multiple sample pages that you can customize. For many that start from scratch, you need to learn how to create new pages and how to link them using interactions, links and component variables.

Build a 3D Site Without Code with Framer image 13

Build a 3D Site Without Code with Framer image 14

CMS

A content management system (CMS) allows you to store the data elsewhere and easily apply to a large number of items at once. It’s also great for collaboration and non-technical teammates can edit the content without breaking the layout.

Build a 3D Site Without Code with Framer image 15