# Framer Training | Traf

**URL:** <https://onehack.st/t/framer-training-traf/281431>\
**Category:** Tutorials & Methods\
**Tags:** learning, programming, freebies, design\
**Created:** [April 17, 2024, 7:52pm UTC](https://onehack.st/t/framer-training-traf/281431 "2024-04-17T19:52:17Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheStrength](https://onehack.st/user_avatar/onehack.st/thestrength/32/46753_2.png) [@TheStrength](https://onehack.st/u/TheStrength)\
**Post date:** [April 17, 2024, 7:52pm UTC](https://onehack.st/t/framer-training-traf/281431/1 "2024-04-17T19:52:17Z")

</div>

![image](https://onehack.st/uploads/default/original/3X/9/5/9518826a57bef24147e3d57c4edb602725befa01.jpeg)

Traf – Framer Training

# **What You Get** :

- Lifetime Updates
- 8 + Video Modules
- 4 + Hours of video
- Instant access

## **Modules to level up your Framer game:**

### **INTRODUCTION:**

Course ovherview

Meet your teacher

Fremer vs. other tools

Ïnterface walkthrough

Pre-design checklist

### **CORECONCEPTS:**

Type, graphics, and images

Stack and grind-based layouts

Positioning (relative, absolute, fixed)

Element sizing (fixed, fill, auto)

Reusable text and color styles

### **COMPONENTS:**

Components overview

Creating variants and variables

Interactive states (hover, presssed)

Utilizing code components

Utilizing built-in plugins

### **CONTENT SYSTEM:**

CMS overview

Cresting a CMS collection

Sorting and filtering content

CMS-generated site pages

Use cases, tactics, and more

### **EFFECTS AND MOTION:**

Effects overview

Effect options (appear, hover, atc.)

Scroll transforms and variants

Motion-base components

Best practices/do´s and don´ts

**EXTRAS AND DETAILS:**

Responsive design

Overlays and embeds

Custom code overrides

Settings and SEO metatags

Tips, tactics, and shortcuts

[Download Link](https://mega.nz/folder/9uNnDLQR#B9nwkmIgoOY5sHvhzrfrEA)

**Happy learning!**