← Back to Index

Framer.

Motion-First Design · 设计师优先

3.2M+
Designers
0ms
Latency Feel
Animations

Design Philosophy

Framer 的设计哲学围绕"设计师优先"(Designer-First)展开。核心理念是将复杂的动画和交互简化为直观的可视化操作,让设计师无需编写代码即可实现专业级的动态效果。紫色作为品牌主色,象征创造力和无限可能。

Design Tokens

Primary Colors

#6B4EFF
#9D8AFF
#4A35B3

Neutral Colors

#101012
#1E1E24
#2A2A35
#8E8E99
#F7F7F8

Typography

Inter — The Working Font

Weights: 400, 500, 600, 700

Spacing Scale

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96

Animation Tokens

scale
fade
slide
/* Framer Motion Presets */ --framer-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --framer-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --framer-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --framer-duration-fast: 150ms; --framer-duration-normal: 300ms; --framer-duration-slow: 500ms;

CSS Implementation

/* Framer-style Button */ .framer-btn { background: var(--framer-purple); color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; transition: all 0.2s ease; border: none; cursor: pointer; } .framer-btn:hover { background: var(--framer-purple-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(107, 78, 255, 0.3); }

Key Insights