Framer Tutorial (Create Websites, Animations & Prototypes In Framer)

Design standout websites and prototypes with Framer. Our Framer tutorial offers a complete guide to getting started.

Framer Tutorial (Create Websites, Animations & Prototypes In Framer)

Picture this: you're in the middle of a design project when you realize that a creative tool you've never used could help you tackle your project in a new way. You open the app, only to be met with a confusing interface and endless options that feel impossible to untangle. We've all been there before. Framer is a powerful tool for web design, animations, and prototypes, but getting started can feel overwhelming. This Framer Design tutorial can help you get past the initial confusion and start creating in no time.

NUMI uses Framer to create websites and prototypes for our design projects. Framer web design lets us create stunning websites that look exactly like our design mockups. It also helps us easily create animations and interactive prototypes that impress our clients and improve our workflow.

What is Framer?

woman on a laptop - Framer Tutorial

Framer is a popular no-code platform for designing and prototyping. This tool has been hyped for its easy-to-use function and clean interface. Framer allows designers to create reciprocal interfaces for websites, mobile apps, and other digital products. You want to make high-fidelity prototypes. Guess what? This tool is also very easy to use. 

These prototypes can simulate the look and feel of the final product. It becomes easier for users to get a hint of the final product in advance. This advanced tool also comes with a lot of cool features. It has become popular among user experience (UX) and interface (UI) designers. Suppose you’ve been a designer for a while. In that case, you might remember it being called Framer X. 

From Prototyping Tool to All-in-One Solution for Web Design and Publishing

Framer originally started as a prototyping tool but has now become a comprehensive solution for designing, building, and publishing websites. Because of its familiar interface and easy-to-use features, Framer is quickly gaining traction as a go-to tool for creatives who want to build websites without thinking about code. The tool garners positive framer reviews for its design systems that facilitate web development, and its framer sites ensure that stakeholders maintain a consistent brand presence across all social media and search engine platforms. 

Users appreciate the custom domain support and the streamlined mini-editor for quick edits, tackling common pain points such as the need for an all-in-one solution and stakeholder collaboration. The competitive pricing plans are noteworthy, with a pro plan catering to those who demand. 

Related Reading

Framer Tutorial: 7 Steps to Get Started With Framer

man on a laptop - Framer Tutorial

1. Create a Free Framer Account

Sign up for a free account on Framer's platform. Framer allows you to design and publish websites without coding skills, so it's perfect for beginners and experienced designers. Once your account is set up, you can create your website using its visual canvas.

2. Learn with Tutorials

One of the quickest ways to get started with Framer is to watch tutorials that guide you through the process. Plenty of tutorials are available, covering topics like turning designs created in Figma into fully functional websites. This can help you understand Framer’s interface and workflows while getting a project off the ground.

3. Join the Framer Community

Framer has an active community of over 5,000 members. By joining the community, you’ll gain access to a support network of designers working on projects with Framer. It’s a great place to ask questions, get advice, and find inspiration for your work.

4. Explore Pre-Built Elements and Components

Framer comes with various pre-built elements and components that you can use in your designs. You can learn how different features work without building everything from scratch by exploring these. This makes it easy to prototype quickly and learn Framer’s capabilities as you go.

5. Start with Templates

Framer offers free and paid templates, which can be a faster way to get started. Instead of designing a website from scratch, you can choose a template that matches your needs and customize it to fit your style. Templates are handy for learning the platform and speeding up the design process.

6. Check Out Framer’s Learn Page

Framer has a dedicated Learn page filled with articles and guides to help you familiarize yourself with the tool. Whether you're a beginner or an experienced designer, these resources cover everything from basic functionality to advanced techniques. Reading through the Learn page is a great way to expand your knowledge.

7. Follow Framer University for Tips

Framer University, available on social media platforms, regularly posts tips and tricks for mastering Framer. Following them can keep you updated with new features, design ideas, and best practices for using the platform. 

NUMI: Your One-Stop Solution for Startup Design and Framer Development Needs

NUMI is a Framer web design agency powered by world-class developers and product designers. Backed by Y Combinator, NUMI handles all of your startups: 

  • Sourcing
  • Vetting
  • Hiring needs for design

We have a fabulous design team that ensures that all of your design work is being done well. 

NUMI helps with: 

  • Product design
  • Web design
  • Framer development
  • Webflow development
  • Mobile design
  • Prototyping
  • UX design
  • All of your startup's design needs! 

Subscribe to a guild of world-class designers ready to embed on your team today. Schedule a call with us today to learn more!

Framer Tutorial: How to Create a Framer Website

man on a laptop - Framer Tutorial

Creating a website using Framer is relatively easy, even for beginners. Here’s a step-by-step guide to help you create a basic Framer website.

Start by browsing through Framer’s template library. You can filter the templates by industry, design style, or features. Choose the template that best suits your needs and click to add it to your Framer dashboard.

Customizing Your Template with Framer’s Drag-and-Drop Editor

Once you’ve selected a template, the next step is to customize it. Framer’s drag-and-drop interface makes adding, removing, and editing elements on your website easy. You can change the layout, add new sections, and modify the design to suit your brand.

Add Content to Your Framer Website

Once you’ve customized your template, it’s time to add content to your website. You can add:

  • Text
  • Images
  • Videos
  • Other media 

You can also import content from other sources, such as Google Drive or Dropbox.

Customize Your Framer Website’s Design

Framer allows you to customize the design of your website without any coding skills. You can change the colors, fonts, and other design elements to match your brand. You can also add animations and transitions to create a more engaging user experience.

Test and Publish Your Framer Website

Once you’ve finished customizing your website, test it thoroughly to ensure everything works as it should. Framer allows you to test your website on different devices and browsers to see how it looks and functions on other platforms.

After you’ve tested your website, you’re ready to publish it. Click the "Publish" button at the top right corner of your Framer project. This action will make your website live and accessible.

Default Hosting and Custom Domain Setup in Framer

Your website will default be hosted on a Framer subdomain (e.g., your site.framer.app). This is a quick way to start without setting up a custom domain. 

  • Go to the Domains page in your Site Settings to use a custom domain. Select Connect a domain you own and enter your custom domain. 
  • You must update your DNS records using the Framer DNS settings provided. This typically involves adding A and CNAME records through your domain registrar (like GoDaddy, NameCheap, etc.). 
  • After updating your DNS settings can take up to 48 hours for the changes to propagate fully. 
  • During this time, your site may not be immediately accessible via the new domain. 
  • Once the DNS changes have propagated, your Framer website will be live and accessible through your custom domain. 
  • You can share this link with others.

Additional Features

Framer offers some additional features to help you manage your website. For example, you can stage changes before publishing them live, which helps prevent unapproved content from going live. If you need to revert to a previous version of your site, Framer provides versioning and rollback features to manage deployments easily.

Understanding Framer CMS

Using Framer CMS is a straightforward process that allows you to create dynamic 

content-driven sites efficiently. Here’s a step-by-step guide to getting started: 

Creating Your CMS Collection

To begin, you need to create a CMS collection. In the Framer designer, click on CMS in the top-right corner, then select Add Blog. Framer automatically generates a sample blog, providing a base to work. 

Familiarizing Yourself with the Interface

Once your collection is created, take a moment to explore the interface: 

  • Left Sidebar: Displays all the collections available in your project. Each collection is a set of related items with the same design and properties.
  • Top Bar Buttons: some text
    • New Item: Create a new entry in your collection (e.g., a new blog post).
    • Select: Allows for bulk actions, including deleting multiple CMS items.
    • Edit Fields: Modify the fields that define each article. 
    • Import: Import a CSV file into the Framer CMS.

Understanding CMS Fields

Each article in your collection is composed of various fields: 

  • Title (plain text): The title of your article. 
  • Slug: The end part of the URL that identifies the specific page (automatically generated based on the title). 
  • Date: The publication date. 
  • Image: A featured image displayed on the article page. 
  • Content (formatted text): This is the blog post's body, where you can add formatted elements like links and images. The key difference between plain and formatted text is that formatted text allows for styling, similar to Word documents.

Adding, Editing, and Deleting CMS Elements

  • Adding an Element: Click the New Item button, fill out the necessary fields, and save your article. Your article won’t appear on the live site until published. 
  • Editing or Deleting an Element: Right-click on an item to choose to edit or delete it. 

Creating Index and Detail Pages

Index Page: This is where users can browse your articles. To add it: 

  • In the Framer Designer, click the CMS + button in the left sidebar and choose Blog > Detail Page to create a default detail layout for your articles. 

Adding to a Normal Page: 

  • Select the desired page, click Insert, then Collection Lists, and drag your blog collection to the desired location. 
  • After styling, you'll have a functional index on your homepage. 
  • Simply add a link to the homepage to enable navigation back to the index from detail pages.

Applying Filters to CMS Elements

To filter your displayed items (e.g., only showing articles published before a specific date): Select the Collection List, go to the CMS Content area, add a filter based on the publication date, and set your desired conditions. 

Setting Up Limits and Offsets

If you want to limit the number of items shown: 

  • Select the collection list
  • Navigate to CMS Content
  • Specify your limit

Offsets can also be set to skip a specific number of items.

Linking Frames to Fields

To display additional fields (like a description) on your detail pages, Add a text container for the description and link it to the CMS field by selecting the frame, going to Text > Content, and setting the variable to Description.

Editing Page Settings

Before publishing, adjust the page settings: 

  • Go to your page settings under Blog Pages. 
  • Ensure the title is correct and set the description by typing the CMS variable in double curly brackets (e.g., {{Description}}).

Framer Tutorial: How to Create Animations in Framer

person adding animations - framer tutorial

Framer provides a visual, drag-and-drop environment for designing interfaces and adding interactions directly. You can start by signing up for an account on Framer and opening a new project. Once inside, you'll see the design canvas, where you can create your interface elements.

Design Your Elements

Before adding animations, you'll need some elements to work with. Use the built-in design tools to create shapes, text, and buttons or import images. The built-in component library allows you to add components like sliders or video players.

  • Create Shapes: Click on the Shape tool to draw rectangles, circles, or other shapes. 
  • Add Text: Use the text tool to add headings, buttons, or descriptions. Once your design is ready, you can add interactions and animations.

Apply Simple Animations with the Magic Motion Tool

Framer's Magic Motion feature makes animating elements easy, allowing you to create fluid transitions between different states. 

  • Create Two Frames: Create two frames (screens or states) on your canvas. For example, Frame 1 might contain a small circle, and Frame 2 could enlarge the circle. 
  • Link the Frames: Select the element (in this case, the circle) and drag a connector from Frame 1 to Frame 2. The framer will automatically detect the circle in both frames and animate the changes between them. 
  • Adjust Animation Properties: You can adjust the duration, easing, and type of animation (e.g., scale, position, opacity). Simply click on the connector between the frames to customize the transition.

Trigger-Based Animations

In Framer, you can create animations based on triggers like clicks, hovers, or scroll actions.

  • Add a Trigger: Select an element and open the Interactions panel. Choose an event like "Click" or "Hover" to set the trigger for your animation. 
  • Define the Animation: Once the trigger is set, you can define what should happen, whether moving an element, changing opacity, or scaling it up. 

Framer allows you to control these actions visually without needing code. If you want a button to grow when hovered over, select the button, set the "Hover" trigger, and specify the animation (e.g., scale to 1.2x).

Create More Complex Animations

For more dynamic effects, Framer offers more advanced animation options, such as keyframes and spring physics. These can also be added visually. 

Keyframe Animations

Keyframes allow you to define multiple steps in an animation. In the timeline editor, you can control specific properties (like position or opacity) at different points in time. For example, you can animate an element to fade in, move, and rotate all in one sequence.

Spring Animations

You can simulate more natural movement with spring physics. Select the object you want to animate, choose "Spring" from the animation options, and adjust stiffness or damping to control how the element moves. This is ideal for creating bouncy or elastic animations.

Related Reading

Framer Tutorial: How To Use Framer For Prototyping

woman on a laptop - Framer Tutorial

Creating a prototype in Framer is a smooth and dynamic process, especially with its new Design Mode, which operates similarly to tools like Sketch and Figma. You can design vector layers, import images, and style text all within the app. No third-party tools are required. Let’s walk through building a basic prototype. 

Start by Designing an App Layout 

To begin, use the Design Mode tab to create an artboard. Choose an iPhone 7 preset, add a background color, and create a button using the rectangle tool. Framer's flexibility lets you quickly design UI elements like buttons, images, and text without leaving the app.

Adding Layers 

You can drag and drop images directly onto the artboard and style them with Framer’s sidebar tools. Want to add text? Framer allows text layers to be styled like any graphic design software, including font, alignment, and letter spacing. Once your layers are set, it’s time to tell Framer which of these layers will be interactive. You do this by selecting the layer’s name and enabling interaction with a click. 

Making the Prototype Interactive 

The magic of prototyping in Framer comes with interaction design. Say you want to create feedback when someone taps a button. It’s simple: Framer writes the code for you once you specify the event, like a tap. You can even animate layers with scaling, rotating, or other effects using the Animation Editor.

For example, when tapped, you can make a button animate its border radius or color and then reset these properties once the animation ends. This way, the interaction feels complete and smooth. Framer takes care of these details while giving you easy control over timing and curves. 

Advanced Interactions: Layer States 

If your prototype has multiple states, such as a card that changes size or position, Framer allows you to seamlessly design and switch between states. Just define each state’s parameters, such as:

  • Position
  • Size
  • Opacity 

And set up an event (like a button tap) to cycle through these states. 

Speeding Up Work with Components 

Framer offers built-in components to save time, such as Scrolling and Page Swiping. To implement a scrollable section, for example, you create a taller layer than your screen, name it, and set up Framer’s ScrollComponent. For page swiping, you can create a layout with multiple layers and use the PageComponent to allow horizontal swiping between them.

Framer’s balance of design, interaction, and animation features lets you quickly prototype interactive, responsive app designs without ever touching third-party tools. Once you grasp the basics, you can dive deeper into states, components, and animations to create prototypes that feel like real apps.

Subscribe To a Guild of World Class Framer Developers with Our Framer Web Design Agency Today

NUMI is a Framer web design agency that specializes in working with startups. We are backed by Y Combinator and powered by world-class Framer developers and product designers. Our talented team handles all your startup's design needs, including: 

  • Product design
  • UX/UI
  • Prototyping
  • Web design
  • Mobile design
  • Framer development
  • Webflow development and more

NUMI helps your startup by sourcing, vetting, and hiring top Framer design experts and embedding them into your team. 

Schedule a call with us today to learn more about how we can help your startup succeed.

Related Reading

‍

Tap into the most driven engineers and designers on the planet

Hire Designer 　
© NUMI
All Rights Reserved