惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
Vulnerabilities – Threatpost
Google DeepMind News
Google DeepMind News
T
Threatpost
AWS News Blog
AWS News Blog
NISL@THU
NISL@THU
Security Latest
Security Latest
C
Cisco Blogs
Spread Privacy
Spread Privacy
Simon Willison's Weblog
Simon Willison's Weblog
L
LINUX DO - 热门话题
Know Your Adversary
Know Your Adversary
L
LINUX DO - 最新话题
P
Privacy & Cybersecurity Law Blog
SecWiki News
SecWiki News
O
OpenAI News
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
H
Hacker News: Front Page
Scott Helme
Scott Helme
C
Check Point Blog
WordPress大学
WordPress大学
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
爱范儿
爱范儿
博客园 - 【当耐特】
H
Heimdal Security Blog
The Hacker News
The Hacker News
罗磊的独立博客
C
CERT Recently Published Vulnerability Notes
美团技术团队
Application and Cybersecurity Blog
Application and Cybersecurity Blog
S
SegmentFault 最新的问题
Last Week in AI
Last Week in AI
Project Zero
Project Zero
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
宝玉的分享
宝玉的分享
The Register - Security
The Register - Security
A
Arctic Wolf
酷 壳 – CoolShell
酷 壳 – CoolShell
G
GRAHAM CLULEY
L
Lohrmann on Cybersecurity
T
The Blog of Author Tim Ferriss
G
Google Developers Blog
Attack and Defense Labs
Attack and Defense Labs
博客园 - 叶小钗
大猫的无限游戏
大猫的无限游戏
Latest news
Latest news
I
InfoQ
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Y
Y Combinator Blog
J
Java Code Geeks
S
Security @ Cisco Blogs

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant Common SOC 2 Failures (Real World) Stop Vibe-Checking Your AI App: A Practical Guide to Evals How to Use SonarQube and SonarScanner Locally to Level Up Your Code Quality Your Next To-Do App Is Dead — I Replaced Mine with an OpenClaw AI Sign a Nostr event in 60 lines of Python using coincurve — no nostr-sdk, no nbxplorer, no rust toolchain ITGC Audit Explained Like You’re in Big 4 Patch Tuesday abril 2026: Microsoft parcha 163 vulnerabilidades y un zero-day en SharePoint Stop scraping everything: a better way to track competitor price changes Listing on MCPize + the Official MCP Registry while routing payments OUTSIDE the marketplace — how I kept 100% of my x402 revenue Building an AI-Powered Risk Intelligence System Using Serverless Architecture Why We Ripped Function Overloading Out of Our AI Toolchain Testing AI-Generated Code: How to Actually Know If It Works SaaS Churn Is Killing Your Business. Here Is What to Do About It (Without a Support Team) The Speed of AI Is No Longer Linear - And Self-Improving Models Are Why How to Implement RBAC for MCP Tools: A Practical Guide for Engineering Teams From Standard Quote to Persuasive Proposal: AI Automation for Arborists I built a CLI that scaffolds complete multi-tenant SaaS apps Axios CVE-2025–62718: The Silent SSRF Bug That Could Be Hiding in Your Node.js App Right Now The dashboard that ended our friendship Data Pipelines Explained Simply (and How to Build Them with Python) The Hidden Cost of AI Systems Nobody Talks About. undefined vs undeclared, and how typeof behaves Switching from file-based jobs to NATS/Kafka in Rust without changing code io_uring Adventures: Rust Servers That Love Syscalls Why Agentic AI is Killing the Traditional Database The POUR principles of web accessibility for developers and designers Quantum Neural Network 3D — A Deep Dive into Interactive WebGL Visualization How To Install Caveman In Codex On macOS And Windows Automation Pipeline Reliability: Why Your Workflow Breaks When Nobody Is Watching I Built an 'Open World' AI Coding Agent — It Works From ANY Folder From Freelancing to Product: A Tech Service Company's SaaS Transformation China's AI Giants: Adding Tencent Hunyuan & ByteDance Doubao to AI University (74 Providers) On the Vibe Coders and Their Lies clerk: Auto-Summarize Your Claude Code Sessions AI Weekly — 2026/04/10–04/17 | The Model Lockdown Is Here, but the Toolchain Is the Real Battleground AI 週報 — 2026/04/10–2026/04/17 模型封鎖潮來了,但工具鏈才是真戰場 Maybe this is how Open-Source apps are born... 🚀 Fine-Tune LLMs with LoRA and QLoRA: 2026 Guide tRPC v11 + Next.js App Router: End-to-End Type Safety Without the Boilerplate ShadCN UI in 2026: Why I Stopped Installing Component Libraries and Started Owning My Components SaaS Billing in React Server Components: Stripe + Supabase Without a Single `useEffect` Join our DEV Weekend Challenge — $1,000 in Prizes Across TEN winners! Submissions Due April 20 at 6:59 AM UTC. Implementing FSRS Spaced Repetition in Flutter + Supabase — Adding Memory Science to an AI Learning App "I Texted My Localhost From the Train — Claude Code Fixed the Bug Before I Got Home" I Built a Sales Prep AI and It Went Deeper Than Expected Design to Code #2: One JSON, Eleven Outputs Solving the 100M-Row Problem: A Summary Table Pattern for High-Volume Push Notification Logs Flutter Web With Wasm: What Actually Changes For Developers I Built 50 Royalty-Free Soundtracks for My Side Project in a Weekend Using AI Music Generation The Vibe Coding Security Checklist: 7 Things to Check Before You Ship Stop Letting Googlebot Guess Fix Your React App's SEO Right Desconstruindo o Streaming do LinkedIn: Como Criar um Engine de Extração de Vídeo de Alta Performance com HLS e FFmpeg (EDA Part-1) EDA (Exploratory Data Analysis) Explained With Real Life — Why Looking at Your Data Is the Most Important Step in Machine Learning Brand Relationship Management at Scale: Our 4-Touch Outreach System for 200+ Brands Why String.fromEnvironment() Might Return an Empty String in Dart JGuardrails 1.0.0 — Hardening Java LLM Apps Against Jailbreaks, Toxicity, and Prompt Injection Plan and Schedule a Full Week of Threads Content From One Claude Conversation Coding Cat Oran Ep3, Five Tables Changed Everything Updated: BFF Pattern I'm done watching freelancers get buried by 200 proposals. So I'm building the alternative. This is my first post BFS Algorithm in Java Step by Step Tutorial with Examples Tracking LLM Pricing Monthly: An Open Dataset for 22 AI Models How We Measure Content ROI on a Comparison Site: Revenue Attribution Without Perfect Data Introducing Nova AI Ops: The AI-Native Operating System for SRE Teams I built a free desktop video downloader for Windows — Grabbit How Talkie OCR Helps Vision-Impaired & Dyslexic Users Read the World Around Them VRCFaceTracking安装和iPhone面捕配置教程,有bug Even CrowdStrike Can't See Your Agents The Automation Gold Rush: What n8n Workflows and Claude Are Opening Up for Developers Right Now
MotionKit Figma Motion: import, sync, and push native animation (yes, even baked physics)
Shayan · 2026-06-28 · via DEV Community

Figma shipped native Motion. A real animation timeline, right inside the file.

When that landed, a lot of people emailed me some version of the same question: "is MotionKit dead now?"

Fair question. My honest first reaction was a quiet "...maybe." But the more I used native Motion, the clearer it got — it's genuinely good, and it's not trying to be everything. No physics. No frame-by-frame. No Lottie export. No morphing. So the move was never to compete with it. The move was to bridge to it — let the two tools hand work back and forth, and let MotionKit be the power layer that does the stuff native Motion can't.

So that's what this update is. A two-way bridge between MotionKit and Figma's native Motion.

Here's everything it does, and exactly how to use it.

The short version

Four moves, one little control in the header:

  • Import native Motion into MotionKit as real, editable keyframes
  • Live sync (read-only by default) so changes in Figma Motion flow into MotionKit as you work
  • Link for export so your native Motion renders inside a Lottie without duplicating anything
  • Push MotionKit keyframes back into native Motion — including motion you baked from the physics engine

And the headline trick: bake a real physics drop in MotionKit, then push it into Figma Motion as native keyframes. Native Motion has no physics engine. Now it kind of does.

First, find the bridge

Look at the top-right of the toolbar, next to the Pro star. There's a small badge: the MotionKit diamond, an arrow, and the Figma logo.

That little arrow is the status. You don't have to open anything to read it:

  • faint dotted line → not connected
  • arrow pointing into MotionKit → reading from Figma, live, read-only
  • arrows on both ends → two-way, MotionKit also writes back

If there's native Motion sitting on the current frame but you haven't connected, you'll see a small purple dot on the Figma side — that's "hey, there's something here to import." Click the badge to open the bridge.

That's the whole mental model. Direction of the arrow = direction of the data. I rebuilt this specifically so you never have to remember what some toggle does.

Import: pull native Motion in as editable keyframes

This is the one most people want first. You (or a teammate) animated something in Figma Motion, and you want it as proper MotionKit keyframes — to refine the curves, add morphs, export to Lottie, whatever.

  1. select the animated frame
  2. open the bridge and hit Import from Figma Motion
  3. pick how conflicts resolve — Figma wins (native overwrites) or Keep mine (native only fills gaps)
  4. done. you get a little report of what came across, what got an approximated easing, and what was skipped

It pulls transforms, opacity, size, corner radius, stroke weight, auto-layout spacing, solid fills and strokes, drop and inner shadows, and blur — as real keyframes you can grab and move. Position and scale come in as proper X/Y so you can edit each axis on its own.

One honest note: once MotionKit owns a transform, MotionKit drives it during preview. That's the trade for editability. If you'd rather native Motion stay in charge of movement, keep reading — Link is for exactly that.

Live sync: read-only by default, on purpose

Turn the direction control to Read and MotionKit keeps pulling changes from Figma Motion as you work. Tweak a curve natively, it shows up here.

The important part: read-only is the default, and it will never touch your Figma file unless you explicitly switch to Two-way. Sync turning on used to scare people because an early version could write back when you didn't expect it. Not anymore — Off, Read, and Two-way are one clear three-way switch, and Read is a one-way street into MotionKit.

Link for export: native Motion in your Lottie, zero duplication

This is the cleanest option and honestly the one I'd reach for most.

When you Link Figma Motion for export, MotionKit references the native animation instead of copying it. Nothing gets added to your timeline. Nothing moves on the canvas. No duplicate rows, no two engines fighting over the same layer and sending it twice as far as it should go.

Then when you export to Lottie, MotionKit folds the native Motion in at render time and ships one animation — your MotionKit layers and the native Motion together. Your MotionKit keyframes always win on any property you actually animated; native just fills the rest.

  1. open the bridge
  2. hit Link Figma Motion for export
  3. animate the rest in MotionKit like normal
  4. export to Lottie — the native motion is baked into the file

If you go back and edit the Figma path afterward, just hit Link again to refresh the snapshot.

The fun one: bake physics in MotionKit, push it into Figma Motion

Native Motion can't simulate physics. MotionKit can — and it bakes the result into normal keyframes. So you can author a real physical bounce in MotionKit and then hand those keyframes to native Motion.

Here's the full loop:

  1. drop in the layer you want to throw or bounce
  2. add a Physics modifier — set gravity, bounce, mass, and mark whatever's the floor or a wall as a collider
  3. hit Bake. MotionKit runs an actual rigid-body simulation and writes it back as real position/rotation keyframes (re-bake as much as you want — it always replays from the top)
  4. happy with the drop? open the Figma Motion bridge
  5. expand Advanced → Push to Figma Motion
  6. confirm (back up your file first — every push is backed up and revertable, but still), and the baked bounce now lives as native Figma Motion keyframes

Now the motion is native. It plays with Figma's own Motion engine, lives in the file, and anyone can open it without the plugin. You used MotionKit purely as the physics authoring tool. That's the whole idea of the bridge — each tool doing the part it's best at.

Push writes the round-trip-safe subset (transforms, opacity, size, color, shadows, blur, and friends), so a tumbling, bouncing object's position and rotation transfer cleanly. Easings without an exact native match get approximated, and the report tells you which.

Bonus: nested frames animated in Figma Motion

If a child frame inside your frame is animated natively, MotionKit can pull it in as a previewable clip — so it actually plays inside your timeline, with its own loop mode you control per clip. When MotionKit spots one, you'll get a one-click "import as clips" prompt. Handy for building a scene out of pieces other people animated natively.

What survives the trip (the honest table)

Trust matters more than hype, so here's the real list.

Round-trips both ways: position, scale, rotation, opacity, size, corner radius, stroke weight, auto-layout spacing, solid fill & stroke color, drop & inner shadow, layer & background blur.

MotionKit-only (stays here, reported as skipped on push): text animation, shape morphing, frame-by-frame, gradient-stop animation, the beta noise/texture/glass effects, and expression-driven properties. These are the things native Motion has no slot for — so MotionKit keeps them, and uses Link-for-export when you need them in a final render.

No silent data loss. The bridge always hands you a report of what mapped, what got an approximated easing, and what it couldn't translate.

The one real limitation

Figma's plugin API lets me read and write Motion keyframes, but it can't move native Motion's playhead or evaluate it at an arbitrary time. So I can't show you Figma's native render and MotionKit's preview playing in perfect lockstep on the same canvas — that part isn't possible yet.

That's why Link-for-export is a snapshot you re-link after edits, instead of a live mirror. The day Figma adds a "give me the value at time t" call, that seam flips to live and most of this gets even better. I've already filed it as the number one thing I want from the Motion API.

Where this is going

The direction is simple: MotionKit as the Pro power layer that sits on top of native Motion. Native Motion handles the clean, file-native basics. MotionKit handles physics, frame-by-frame, morphing, expressions, and Lottie — and the bridge moves work between them without you redoing anything.

And as always — if something feels off or breaks, tell me. Half of every release is just people telling me what annoyed them.

happy animating.