DEV Community: Shayan

MotionKit Figma Motion: import, sync, and push native animation (yes, even baked physics)

Shayan — Sun, 28 Jun 2026 00:19:07 +0000

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.

select the animated frame
open the bridge and hit Import from Figma Motion
pick how conflicts resolve — Figma wins (native overwrites) or Keep mine (native only fills gaps)
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.

open the bridge
hit Link Figma Motion for export
animate the rest in MotionKit like normal
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:

drop in the layer you want to throw or bounce
add a Physics modifier — set gravity, bounce, mass, and mark whatever's the floor or a wall as a collider
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)
happy with the drop? open the Figma Motion bridge
expand Advanced → Push to Figma Motion
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.

Figma's New Motion vs MotionKit — timeline is here, but is it enough?

Shayan — Fri, 26 Jun 2026 20:52:11 +0000

Figma finally added a real timeline-based motion system.

That changed the game a bit.

But once you actually use it in real animation workflows… you notice something quickly:

It’s powerful — but still incomplete.

That’s where MotionKit still sits in a very different category.

This isn’t “which is better”.

It’s more like:

what Figma gives you vs what you actually need once animation gets serious.

What Figma Native Motion actually does now

Figma’s motion system now includes:

real timeline editing
keyframe-based animation
basic easing control
physics-like behavior (limited / experimental level depending on setup)
improved Smart Animate pipeline

So yes — it’s no longer just prototype transitions.

You can now:

animate objects across time
scrub animations
control timing visually

That alone is a big shift.

But here’s the catch:

It still focuses on flat motion inside a single layer context, not structured animation systems.

Where Figma Motion still falls short

Even with the timeline, a few big gaps remain:

1. No real text content animation system

You can animate text transforms, but not true content-level animation logic (like structured text transitions, sequencing, or per-character systems).

2. Frame-by-frame (FBF) is still not a real mode

You can fake it with frames, but:

no true FBF workflow
no synced editing across frames
no onion-skin style consistency system

You still end up manually managing duplication.

3. Nested animations are not first-class

Figma doesn’t properly support:

nested frame animation trees
reusable animation blocks inside components
hierarchical animation timelines

Everything still lives mostly at a flat level.

4. Physics is not truly baked

Even when physics-like behavior exists:

it’s not fully controllable
it’s not always exportable as keyframes
it doesn’t behave like a reusable system

So it’s more “effect” than “simulation pipeline”.

What MotionKit actually brings to the table

This is where the gap becomes obvious.

MotionKit is not trying to compete with Figma’s timeline.

It’s extending it in the directions where real motion work breaks down.

1. True Frame-by-Frame (FBF) system

MotionKit supports proper FBF workflows:

synced frame structure
mirror selection across frames
layer consistency enforcement
editing one layer across all frames at once

This turns FBF from “manual duplication” into an actual workflow.

2. Nested animation support

MotionKit introduces structured animation layers:

animations inside frames
reusable nested motion blocks
hierarchy-aware timelines

So instead of flat motion, you get:

animation systems inside animation systems

3. Physics baked into keyframes

This is a big one.

Instead of just simulating motion visually:

you define physics (gravity, bounce, mass)
MotionKit simulates it
then bakes it into real keyframes

So everything becomes editable afterward.

No black box.

4. Full timeline control + modifiers

Beyond keyframes, MotionKit adds:

Offset modifiers
Wiggle procedural motion
curve-level editing
editable baked simulations

So motion becomes programmable, not just draggable.

5. Two-way sync with Figma Motion

This is probably the most important difference.

MotionKit doesn’t replace Figma Motion — it connects to it.

You get bidirectional sync:

Figma Motion → MotionKit import
MotionKit edits → back into Figma system

So you can:

prototype quickly in Figma Motion
refine deeply in MotionKit
move back and forth without losing structure

That’s the real workflow upgrade.

Simple comparison

Feature	Figma Native Motion	MotionKit
Timeline	Yes	Yes (advanced)
Frame-by-frame	Limited / manual	Native system
Nested animations	No	Yes
Physics	Basic / experimental	Fully baked keyframes
Text content animation	Limited	Structured support
Sync with Figma	Native only	Two-way sync
Workflow depth	Prototype level	Production level

When Figma Motion is enough

Use Figma Motion if:

you’re building UI prototypes
you just need simple transitions
you don’t care about animation systems
speed matters more than control

When MotionKit becomes necessary

Use MotionKit if:

you’re doing real motion design work in Figma
you need frame-by-frame animation control
you care about reusable animation systems
you want physics + keyframes together
you need structured workflows, not hacks

The real takeaway

Figma Motion is finally becoming a real animation layer inside design tools.

But MotionKit exists in a different layer entirely:

turning Figma into a motion design system, not just a prototyping tool.

That gap is still very real.

And for anyone doing serious animation work inside Figma — it shows up immediately.

Figma Motion Feels Like It Was Vibe-Coded

Shayan — Thu, 25 Jun 2026 03:11:03 +0000

When Figma announced Motion at Config, I got excited.

Finally.

A native animation tool inside Figma.

No plugins. No weird workflows. No jumping between tools.

Then I actually used it.

And honestly... what happened here?

It Feels Weirdly Unfinished

This isn't a "beta has bugs" complaint.

I expect bugs.

What surprised me was how many basic UX decisions felt wrong.

The timeline feels awkward.

Interactions feel inconsistent.

Simple actions somehow take more clicks than they should.

Why Is It So Slow?

The biggest problem isn't missing features.

It's the feeling.

Everything feels heavy.

Dragging through the timeline feels heavy.

Selecting things feels heavy.

Working on larger files feels heavy.

It's hard to explain, but the whole experience lacks that polished "Figma feeling" we're used to.

The best Figma products usually disappear and let you focus on your work.

Motion constantly reminds you that you're using Motion.

Missing Things You'd Expect To Exist

After a few hours I kept running into walls.

Want to do advanced text animation?

Good luck.

Want to animate gradients?

Limited.

Want more sophisticated motion workflows?

You'll hit restrictions quickly.

Want nested animation systems?

Not really.

For a company with Figma's resources, I expected much more from version one.

The Strange Part

There are already plugins solving many of these problems.

Whether it's MotionKit, Figmotion, or other animation tools in the ecosystem, users have been doing advanced motion work inside Figma for years.

So naturally I expected Figma to study what works and build something better.

Instead it feels like they reinvented the wheel and somehow made it square.

It Doesn't Feel Like Figma

This is probably my biggest criticism.

The best Figma features feel obvious.

You open them and immediately understand the workflow.

Motion feels like the opposite.

It feels like a separate product that got dropped into Figma.

The UX feels disconnected from the rest of the platform.

The performance feels off.

The workflow feels overcomplicated.

At times it genuinely felt like somebody shipped the first prototype and called it a beta.

Final Thoughts

I really want Motion to succeed.

A first-party animation tool inside Figma would be amazing for designers.

But right now?

I'm not frustrated because it's missing features.

I'm frustrated because it doesn't feel finished.

The whole thing feels surprisingly rough, surprisingly slow, and surprisingly difficult to enjoy.

Maybe it'll become great in a year.

Today, it feels less like a polished Figma product and more like a proof of concept that escaped into production.

MotionKit Review: The Most Powerful Animation Plugin for Figma?

Shayan — Tue, 16 Jun 2026 11:55:24 +0000

Figma has become the default design tool for millions of designers, product teams, and developers.

But when it comes to animation, many designers still leave Figma and jump to tools like After Effects, Jitter, or Rive.

For years, that workflow felt normal.

Design in Figma.

Export assets.

Import them somewhere else.

Animate.

Export again.

Repeat.

Recently, I tried MotionKit, and it made me question whether leaving Figma is still necessary for many animation workflows.

Why Animation in Figma Still Feels Limited

Figma's built-in prototyping tools are great for showing interactions and user flows.

But the moment you want more advanced motion design, you quickly hit limitations.

Common challenges include:

No professional animation timeline
Limited control over keyframes
No frame-by-frame animation workflow
Limited export options
Difficult vector morphing workflows
No dedicated motion design environment

As a result, many designers end up maintaining multiple tools just to create animations.

That adds complexity, cost, and context switching.

What Is MotionKit?

MotionKit is an animation plugin built specifically for Figma.

Instead of focusing on a single animation technique, it combines several animation workflows inside one environment.

The goal is simple:

Allow designers to create professional animations without leaving Figma.

At first glance, that sounds ambitious.

After spending time with it, I realized that's exactly what makes MotionKit interesting.

What Makes MotionKit Different?

Most Figma animation plugins solve one problem.

MotionKit solves several.

1. Timeline Animation

For UI animations, onboarding flows, product showcases, and marketing videos, timeline-based animation is often the fastest approach.

MotionKit includes a dedicated timeline system that feels familiar to anyone who has used professional animation software.

You can:

Create keyframes
Control timing
Adjust easing
Sequence animations visually

This alone covers a huge percentage of common design animations.

2. Frame-by-Frame Animation

This is where things get interesting.

Most Figma animation tools focus exclusively on keyframes.

MotionKit also supports frame-by-frame animation.

That means designers can create:

Character animations
Hand-drawn effects
Custom illustration motion
Traditional animation sequences

without switching to another application.

Very few Figma animation tools support both approaches.

3. SVG Morphing

Morphing is one of those features that instantly makes animations feel more professional.

Instead of abruptly changing one shape into another, MotionKit can smoothly transition between vector paths.

This is particularly useful for:

Logo animations
Icon transitions
Loading states
Interactive UI effects
Brand motion systems

Good morphing can dramatically improve the perceived quality of an animation.

4. Advanced Text Animation

Text animation is often overlooked.

Yet it appears everywhere:

Landing pages
Product videos
Social media content
SaaS marketing sites
App onboarding screens

MotionKit provides animation controls specifically designed for text, making it easier to create engaging typography effects directly inside Figma.

5. Export Options That Matter

Creating animations is only half the workflow.

Exporting them is equally important.

MotionKit supports exporting animations into formats commonly used by modern teams, making it practical for real-world projects instead of just prototypes.

Why This Matters for Product Designers

Most designers are not trying to become motion graphics artists.

They simply want a fast way to create:

Product demos
Feature showcases
Landing page animations
Marketing content
Interactive prototypes

without constantly switching tools.

The fewer tools involved, the faster the workflow becomes.

That is where MotionKit provides the most value.

MotionKit vs Other Figma Animation Tools

Many animation plugins do a great job solving specific problems.

However, MotionKit stands out because of its breadth.

Instead of specializing in only timeline animation or only prototyping, it combines multiple animation systems into a single workflow.

The result feels less like a simple plugin and more like a dedicated animation studio built inside Figma.

Who Should Use MotionKit?

MotionKit is especially useful for:

Product Designers

Create polished onboarding experiences, micro-interactions, and feature walkthroughs.

Marketing Teams

Build promotional animations and product videos directly from existing Figma designs.

Startups

Reduce the need for multiple animation tools and simplify workflows.

Design Systems Teams

Create reusable motion patterns and animated components.

Content Creators

Produce engaging visual content without leaving the design environment.

Final Thoughts

Most animation plugins help Figma do one extra thing.

MotionKit feels different.

It expands what Figma is capable of.

The combination of timeline animation, frame-by-frame animation, SVG morphing, text animation, and export capabilities creates a workflow that simply doesn't exist in most Figma plugins.

If you've ever searched for:

Best Figma animation plugin
How to animate in Figma
Figma alternative to After Effects
Motion design in Figma

MotionKit is worth exploring.

The future of animation inside Figma may not be about adding one more feature.

It may be about bringing an entire motion design workflow into the tool designers already use every day.

Best Figma Motion Design Tools in 2026, [Compared]

Shayan — Sun, 07 Jun 2026 02:45:01 +0000

Figma has quietly become a much more serious place for motion work. For a long time, Smart Animate was the main answer. Now, there is a real mix of plugins and workflows that cover everything from quick prototype transitions to proper animation timelines, exports, and banner builds. This article compares the main options without the hype, so you can pick the one that actually fits the job.

The short version

If you only need simple screen-to-screen transitions, Figma’s native Smart Animate is enough. If you want a real motion workflow inside Figma, MotionKit and Figmotion are the strongest “stay inside the canvas” options. If you want fast polished motion with templates and collaboration, Jitter is very hard to ignore. If your output is banners, HTML, GIF, or video, Bannerify is the most purpose-built. If your goal is Lottie export and Lottie-based delivery, LottieFiles is the obvious pick.

1. Figma Smart Animate

This is the native baseline. Smart Animate looks for matching layers across frames and animates the differences between them. It is built into Figma, available on any plan, and it is still the fastest way to make simple motion without installing anything. The catch is obvious. It is great for prototypes, but it is not a full motion design tool.

Use it for loading states, simple transitions, toggles, expands, and quick product demos. Skip it when you need timeline control, frame-by-frame work, morphing, or export-focused motion.

2. MotionKit

MotionKit is the most complete “motion design inside Figma” tool in this group. Its official docs and site describe a full timeline, keyframes, frame-by-frame animation, vector morphing, text animation, easing presets, recording mode, nested compositing, and direct export to MP4, GIF, PNG sequence, and Lottie JSON. That makes it much closer to a real motion studio than a prototype helper.

The big reason it stands out is depth. It is not just a neat plugin. It is trying to replace the “design in Figma, then rebuild the motion elsewhere” loop. That matters a lot if your motion work lives inside product design, social clips, explainers, or UI demo assets.

3. Figmotion

Figmotion is another serious Figma animation plugin. Its site says the free tier includes animation features and export options, including code export and render output such as WEBM, MP4, GIF, and WEBP, with paid tiers adding things like versioning, support, and more advanced properties.

Figmotion feels strong when you want classic motion control without leaving Figma, and it has been around long enough that a lot of designers already know the workflow. It is not the flashiest option, but it is one of the more established ones.

4. Jitter

Jitter is not just a plugin, it is also a collaborative motion design tool with a Figma workflow. Its site positions it as a way to animate Figma designs with an intuitive timeline, presets, text animation, reusable animations, templates, and export to formats like video, GIF, and Lottie. It also leans hard into collaboration and speed.

This is probably the best option if your top priority is making polished motion quickly, especially when templates and teamwork matter more than staying purely inside Figma.

5. Bannerify

Bannerify is the banner export specialist. Its docs and product pages describe it as a Figma plugin for animated HTML banners, GIFs, and videos. It is aimed at production-ready ad work and banner workflows, not general motion design.

That makes it very useful, but also very specific. If you need marketing banners, ad creatives, or HTML-based outputs, it is one of the best tools in the list. If you want general motion design, it is probably too narrow.

6. LottieFiles for Figma

LottieFiles for Figma is built around Lottie export and lightweight motion delivery. The official pages describe creating, animating, and exporting Lottie animations from Figma without leaving the app. That makes it strong when your end goal is web or app implementation, not just a pretty preview.

It is less about being a full motion studio and more about connecting design to a runtime-friendly animation format. If your team already uses Lottie, this one belongs on the shortlist.

So, which one is best?

For pure motion design inside Figma, MotionKit is the strongest overall choice in this list because it goes furthest toward a real animation workflow, not just prototyping. For speed and collaboration, Jitter is the easiest recommendation. For simple product motion, Smart Animate still wins on convenience. For banner ads, Bannerify. For Lottie delivery, LottieFiles. That is the honest answer.

Comparison table

Tool	Best for	What it does best
Smart Animate	Quick prototypes	Native, fast, built in, good for simple transitions.
MotionKit	Full motion inside Figma	Timeline, frame-by-frame, morphing, text animation, exports.
Figmotion	Classic Figma animation	Keyframe-style motion and export-focused workflow.
Jitter	Fast polished motion	Templates, collaboration, easy animation, multiple exports.
Bannerify	Banner and ad exports	Animated HTML banners, GIFs, and video.
LottieFiles	Lottie workflow	Create and export Lottie animations from Figma.

Link to each one in Figma

Smart Animate: built into Figma prototypes
MotionKit: https://www.figma.com/community/plugin/1602896408819057835/motionkit
Figmotion: https://www.figma.com/community/plugin/733025261168520714/figmotion
Jitter: https://www.figma.com/community/plugin/961270034818256057/jitter-animation-for-figma
Bannerify: https://www.figma.com/community/plugin/796124491692147799/bannerify-banner-studio
LottieFiles: https://www.figma.com/community/plugin/809860933081065308/lottiefiles

What do you think?

I can't select the winner here, you should ( Write inside comments )
But I definitely suggest you try MotionKit ( because it's newer and you don't usually hear about it ).

OpenFields can be the new go-to ACF Plugin for WP ( 2026 )

Shayan — Wed, 13 May 2026 06:12:14 +0000

The short version

Advanced Custom Fields (ACF) is great. But the free tier lacks repeaters, and the Pro license costs real money.

OpenFields (GitHub: novincode/openfields) does everything ACF Pro does, uses the exact same get_field() API, and is 100% GPL.

I tested it on a production site. It works. No catch.

Technical compatibility – it’s not a rewrite

OpenFields mirrors the ACF Pro API exactly. These functions work out of the box:

get_field() / the_field()
have_rows() / the_row() / get_sub_field()
get_fields() / update_field() / delete_field()
get_field_object()

That means your existing templates keep working. No refactoring.

Repeater example

<?php if( have_rows('team_members') ) : ?>
    <?php while( have_rows('team_members') ) : the_row(); ?>
        <h3><?php the_sub_field('name'); ?></h3>
        <p><?php the_sub_field('role'); ?></p>
    <?php endwhile; ?>
<?php endif; ?>

Same syntax. Same output.

Admin interface – React + TypeScript + Vite

Most free alternatives have a jQuery mess. OpenFields doesn’t.

React 18 for the field builder
TypeScript throughout
Vite for builds (not Webpack – faster HMR)
Tailwind CSS for the UI

The drag‑and‑drop builder is responsive, conditional logic renders without full‑page reloads, and the JavaScript payload is small (they split chunks aggressively).

Build from source:

pnpm install
pnpm build   # Vite + TypeScript -> admin/dist/

No encrypted or minified backdoors. Everything is readable.

No “Pro” version – actually free

Check the GitHub repo. There is no premium code. No feature flags. No “unlock repeater” prompts.

All field types are included:

Text, textarea, number, email, URL
Select, checkbox, radio, switch
Date, time, datetime, color picker
Image, file, gallery
WYSIWYG
Post object, taxonomy, user
Repeater and group (the ones ACF hides behind Pro)

Location rules: post types, page templates, taxonomies, user roles.

Running alongside ACF – safe migration

If ACF is active, OpenFields does not load its own get_field() wrapper. No function collisions.

Instead, you get prefixed versions that always work:

cofld_get_field('field_name', $post_id);

Both plugins write to standard wp_postmeta. You can install OpenFields, test on a staging site, then deactivate ACF. Your data stays.

REST API – headless ready

All fields are exposed via WordPress REST API. No extra configuration.

Fetching a post with custom fields:

GET /wp-json/wp/v2/posts/{id}?_fields=id,title,acf

Returns the same meta structure as ACF. If you’re using Next.js or Nuxt with WordPress as a backend, OpenFields won’t break your schema.

Performance notes (quick)

Stores data as native post meta – no custom tables (unless you extend it)
No admin bloat on the frontend – styles/scripts only load on field group admin screens
PHP 7.4+ (tested to 8.3)
WordPress 6.0+ (tested to 6.9.4)

I ran a simple benchmark with 20 repeater rows and 10 fields per row. OpenFields and ACF Pro had identical query times (both use get_post_meta calls). No surprises.

What’s missing compared to ACF?

Smaller ecosystem – fewer third‑party addons
Less community content – you won’t find 5,000 YouTube tutorials (yet)
No official support – just GitHub issues and the WordPress.org forum

But if you’re a developer who reads docs, that’s fine.

Should you switch?

New project: Yes. Start with OpenFields. Don’t pay for a license you don’t need.
Existing ACF site: Test on staging. The drop‑in compatibility is real. I’d wait a few months for edge cases, but it’s already stable.

I Built a Free ACF Alternative (Wordpress Custom Fields 2026)

Shayan — Thu, 30 Apr 2026 05:10:07 +0000

You know that moment when you’re building a WordPress site and think, “Man, I really don’t want to pay for another premium plugin”?

Yeah, me too.

So I built OpenFields.

It’s a 100% free, open-source custom fields plugin for WordPress. Think of it like ACF — but without the premium tiers, locked features, or vendor lock-in.

And honestly? It’s been way more fun than I expected.

Why I Made This (The Long Version)

Custom fields are basically essential for WordPress development. But if you want repeaters, conditional logic, or anything beyond the basics, you’re looking at ACF’s pricing model. Nothing wrong with ACF — their product is solid. But I wanted something that:

✅ Is actually 100% free (no premium tiers hiding behind paywalls)

✅ Is open source (you own your tools, not the other way around)

✅ Uses a familiar API so you don’t have to relearn everything

✅ Actually feels modern to build with

So yeah. I decided to build it myself.

So What Is OpenFields?

It’s a custom fields plugin that lets you add fields to posts, pages, custom post types, taxonomies, and users. The admin interface is built with React and TypeScript — fast, responsive, and actually pleasant to use.

The Visual Builder

Drag and drop fieldsets together. No code needed. Add fields, organize them, set rules — all in a clean UI.

All the Field Types (Yes, Including Repeater)

Text, textarea, number, email, URL, WYSIWYG, image, gallery, file, select, radio, checkbox, switch, date picker, datetime, time, color picker, link, post object, taxonomy, user, repeater, group. Everything you actually need.

Conditional Logic That Works

Show or hide fields based on other field values. Set it up in the UI, it just works. No “I configured this but it’s acting weird” nonsense.

Location Rules

Display your fieldsets exactly where you need them — specific post types, user roles, taxonomies, you name it.

The API (Yes, It’s Familiar)

If you’ve used ACF, you already know how to use OpenFields. Same functions, same logic:

$price = get_field(‘price’);

For repeaters:

if (have_rows(’team_members‘)) {  
    while (have_rows(’team_members‘)) {  
        the_row();  
        echo get_sub_field(’name‘);  
    }  
}

No learning curve. Just works.

Getting Started (Right Now)

Download from GitHub Releases or search “Codeideal Open Fields” on WordPress.org
Upload to WordPress (Plugins → Add New → Upload)
Activate and go to OpenFields in your admin menu
Build your first fieldset

Seriously, you’ll be up and running in like 5 minutes.

Important links:

GitHub repo: github.com/novincode/openfields
Report issues: github.com/novincode/openfields/issues
Documentation: openfields.codeideal.com/docs

A Real Talk About Community Support

Here’s the thing.

Building and maintaining a free, open-source plugin takes time. A LOT of time. And I genuinely love working on OpenFields — there’s so much more I want to build, new features, better UX, more field types.

But tools like this only survive with community support. If everyone just uses it and nobody helps, it eventually falls behind. No updates, no fixes, no new features. And that would honestly suck.

So if OpenFields has helped you save time or money, please consider:

⭐ Starring the repo on GitHub — it literally helps more people discover it

☕ Sponsoring the project — even a small amount helps me dedicate more time to development

💬 Reporting bugs or suggesting features — every issue helps me make it better

GitHub Sponsors: github.com/sponsors/novincode

(The “sponsor” link is right there on the repo page)

I really mean it — every bit of support makes a difference. The WordPress community is better when we build things together.

Join In

This is an open source project. If you:

Find bugs → report them
Have ideas → share them
Want to contribute → pull requests welcome

The WordPress community is better when we build things together.

Quick Links

GitHub: github.com/novincode/openfields
Report issues: github.com/novincode/openfields/issues
WordPress.org: wordpress.org/plugins/codeideal-open-fields
Documentation: openfields.codeideal.com/docs

That’s it. OpenFields is free, open source, and ready to use. No credit card required, no lock-in, no nonsense.

Give it a shot. I think you’ll like it.

For those who want to support this mission:

⭐ Star on GitHub | ☕ Sponsor on GitHub

Auto Lip Sync inside Blender 5 ( 2026 ) for 3D & 2D

Shayan — Thu, 30 Apr 2026 04:55:15 +0000

Automate Lip Sync in Blender (2D & 3D) with LipKit

Lip syncing animated characters by hand is tedious. You listen to a few milliseconds of audio, pause, insert a keyframe for the mouth shape, move forward, repeat. For a 30-second dialogue, that’s hundreds of clicks.

LipKit solves this. It’s a Blender add‑on that analyzes your audio and automatically generates lip sync keyframes – for both 2D (Grease Pencil) and 3D (shape keys) characters.

Under the hood, it uses the powerful Rhubarb phoneme engine. You don’t need to install anything extra.

Why LipKit?

Use audio from the Video Sequence Editor or external WAV files
Works with multiple characters in the same scene
Generates a controller object for easy tweaking (shape key values or Grease Pencil layer opacity)
Fully mappable – link any phoneme to any mouth shape
Clean, non‑destructive workflow: one click to remove all generated keyframes

How It Works (The 30‑Second Version)

Activate the add‑on – you’ll see a LipKit tab in the 3D Viewport N‑panel.
Select your audio (WAV file or a strip in the VSE).
Click Analyze – LipKit runs Rhubarb to detect phonemes.
Choose your target:
- 3D – map your shape keys (A, B, C, D, E, F, G, H, X)
- 2D – each mouth shape on a separate Grease Pencil layer
Click Create Controller, then Generate Lip Sync.

That’s it. Your character starts talking.

Mapping Phonemes to Mouth Shapes

Rhubarb uses 9 standard visemes (mouth positions). You don’t have to use all of them, but the more you map, the better the result.

Viseme	Typical sounds	Mouth shape
A	(rest / closed)	Neutral / closed
B	"P", "B", "M"	Closed lips
C	"F", "V"	Lower lip to upper teeth
D	"TH", "DH"	Tongue between teeth
E	"EH", "AE"	Open, wide mouth
F	"AH", "AA", "AW"	Open, jaw dropped
G	"AO", "OW", "OY"	Round, open mouth
H	"W", "UW", "ER"	Pursed lips
X	(rest / pause)	Any neutral shape

In LipKit’s interface, you simply select the target shape key or Grease Pencil layer for each of these nine sounds.

Example: 3D Character Setup

Let’s say you have Suzanne with 8 shape keys named mouth_A, mouth_B, … mouth_H.

You open the LipKit panel, go to Select Target for Each Sound, and assign:

mouth_A → Phoneme A
mouth_B → Phoneme B
… and so on.

LipKit then generates keyframes on the controller object. You can later adjust the weight of any shape key if a pose looks too extreme.

Example: 2D Grease Pencil Character

For a 2D cutout style, create a Grease Pencil object with layers: viseme_A, viseme_B, … viseme_H.

Map each layer to the corresponding phoneme. During generation, LipKit animates the opacity of those layers (1.0 = visible, 0.0 = hidden).

Multi‑Character Workflow

Need two characters talking to each other?

Create a separate controller for each character. Assign different audio sources (or the same audio, split by timing). Generate each independently. LipKit keeps everything organized – no keyframe clash.

Removing or Tweaking Lip Sync

Clear Controller – removes all LipKit‑generated keyframes from the selected controller.
Manual tweaking – the controller object’s keyframes are regular Blender keyframes. You can move, scale, or edit them directly in the Dope Sheet.

The interpolation is set to Linear by default, but you can change it to Bezier or Constant after generation.

Try LipKit

You can get LipKit on Gumroad:

👉 LipKit on Gumroad 👈

MotionKit just got better! The goto animation tool in 2026

Shayan — Fri, 20 Feb 2026 12:33:24 +0000

MotionKit is great, not just because of its great features,
Also because it's generously 100% free, allows you to render & export any animation to Mp4/Gif/Png & even lottie. No hidden paywalls! This makes the whole motion design process FREE and even brings non-figma users into Figma, because Figma is also mostly Free and you can even create social media or product videos using MotionKit without spending a penny!

Previously it already had great features:

Timeline with strong record, allowing to animiate and interpolate everything inside figma.
Frame By Frame animation with Onion Skinning
Nested Animations via nested artboards
Free forever

But now it just updated to the new version, version 2+ and it got even better. The new stuff added:

Modifiers

Now it's truly a mini blender inside Figma, using modifiers you can now:

Stroke Path tracing, animate any element on another vector path
Type writer Effect for texts!
Loop modifier for any Layer
Copy Animations from other layers and ...

Modifiers open so many opportunities and architecture, allows to headlessly build and plug-in more modifiers in future.

Timeline Markers

Now by default if you hit "M" in the timeline ( You can customize the shortcut from settings, just like any other shortcut key ), it places a Marker on that time, and you can label them or give them any color as you wish.

Bug fixes, UX Improvements

Transform system refactored so properties like Morphing, Rotation, transform and ... perform together much better.
Layer List now supports drag drop sorting, and reparenting.
Animation Can happen now for any fill property ( Solid Colors, Gradients, Pattern, and Image properties like contras, brightness and ... )

Download the plugin

Download from Figma Community || Download From Github

if you found MotionKit helpful, you can always donate & sponsor the dev team to keep this tool alive & free for everyone.

Let me know in the comments how you think :)

Animation & Motion Design INSIDE FIGMA 2026

Shayan — Sun, 15 Feb 2026 07:11:04 +0000

I always enjoyed designing inside Figma, But when it comes to animation, then we have to either go with After Effects or Davinci Resolve which they're not as comfortable as Figma.

That's why I started making one of my most ambitious projects, MotionKit.

MotionKit Super Powers

You can turn ANY Figma frame ( artboard ) into:

1. Timeline Animation

Powerful Record Mode ( Morphing, Text Animation, Colors, Everything! )
Blender Inspired Timeline
Presets Manager ( Default presets + Define your own custom presets )
Modifiers ( GAME CHANGER ) - can be anything! like stroke path tracing or Type writer effect or maybe even particle effects!

2. Frame By Frame Animation

Onion Skinning ( Customizable )
Compatible with Figma Draw mode
NEW: Mirror selection to select that layer from all FBF frames

Nested Animations!

have multiple nested frames with different animations
They can have different frame rates, and duration and looping mode

Render without paywalls!

Render as Mp4 - Gif - PNG Sequence
Export as Lottie animation

This plugin is TOTALLY Free. I didn't wanna make it a SaaS and lock some features, I wanted to help more designers.

But if you end up using it and found it helpful, You can always support me:
BuyMeACoffee
Sponsor in Github

Links to this project:
Figma Community page (INSTALL HERE)
MotionKit Official Website
Github

I built a FREE animation plugin for Figma: MotionKit

Shayan — Sat, 14 Feb 2026 16:58:13 +0000

So here's the thing — I've been building stuff in Figma for years, and the one thing that always bugged me was animation. You'd design something beautiful, then have to export frames, jump into After Effects or some other tool, and basically rebuild everything from scratch.

It felt... broken? Like we had all this power for design but then hit a wall when we wanted things to move.

What is MotionKit?

MotionKit is a completely free Figma plugin that brings real animation tools directly into Figma. Not prototypes. Not fake transitions. Actual keyframe animation, frame-by-frame workflows, morphing, text animation, and direct MP4/GIF export.

No subscriptions, no premium tiers, no "upgrade to unlock" nonsense. Just free.

Try it on Figma Community →

The stuff that actually matters

Timeline Mode – Record Everything

You know how in After Effects you can just move stuff and keyframes appear? That's what Record mode does. Enable it, scrub the playhead, modify your layers in Figma, and boom — keyframes appear automatically. No clicking through menus, no manual keyframe placement for every single property.

It records position, scale, rotation, opacity, blur, shadows, corner radius, fills, strokes... basically everything.

Frame-by-Frame Mode – Classic Animation

For those who like drawing things frame by frame (or just prefer that level of control), there's a full cel animation workflow with onion skinning. You can scrub through frames, reference previous frames as translucent overlays, and time each frame individually.

Nested Frames (this one's wild)

Here's where it gets interesting — you can nest animations inside each other. Timeline inside frame-by-frame. Frame-by-frame inside timeline. Each with its own FPS. They all render correctly.

This unlocks so many possibilities for complex animations that I'm still discovering new ways to use it myself.

Morphing & Text Animation

Real SVG path morphing between different shapes. And text animation isn't just "fade in" — you can animate per-character, per-segment, with control over font size, color, spacing, line height, all independently keyframed.

Export to MP4, GIF, PNG

No external tools. Render directly to MP4 (H.264), GIF, or PNG sequence at 1x–4x scale. Just hit render and you're done.

Blender-Inspired Shortcuts

All keyboard shortcuts are customizable. Default shortcuts feel a bit like Blender — select keyframes and hit G to grab/move them or S to scale. If you've used Blender, you'll feel right at home.

Why free? (aka the awkward money talk)

Look, I could've gone the SaaS route. Monthly subscriptions, freemium tiers, all that. But honestly? I just wanted this to exist. I wanted designers to have proper animation tools without hitting paywalls or dealing with export workflows that waste hours.

That said... this takes a lot of time to build and maintain. So if you use it and it saves you time (or you just think it's neat), any support helps:

GitHub Sponsors – ongoing support
Buy Me a Coffee – one-time thing

Can't donate? That's totally fine. Just tell someone about it. Tweet, post, share, whatever. The more people know about it, the more likely it keeps existing.

What's next?

The plan is to eventually open-source this once it's mature enough. Right now it's free to use, but I want to clean up the code, add better docs, and make sure it's solid before opening it up fully.

Also working on more features, fixing bugs, and generally making it better based on feedback.

Try it yourself

Website: motionkit.codeideal.com
Figma Plugin: Install here
GitHub: novincode/motionkit
Docs: motionkit.codeideal.com/docs

If you build something cool with it, I'd love to see it. Or if you find bugs (and there probably are some), open an issue or just email me at ideyenovin@gmail.com.

Thanks for reading ✌️

DLMan :: the download manager I always wanted

Shayan — Thu, 08 Jan 2026 12:30:57 +0000

As a Mac user, I always felt this gap.
Windows users have IDM and a bunch of other solid download managers, but most of them are ancient, paid, or both. Meanwhile on Mac? Not much to choose from.

So I did what any frustrated developer would do; I built my own.

Introducing DLMan

DLMan is a modern, open source download manager, built with Rust (Tauri) and React.
It’s fast, lightweight, and actually works the same on:

Windows
macOS
Linux

Why is it great?

Multi-segment downloads with stable pause / resume
Queues, schedules, and post actions (yes, including shut down my computer when finished)
Batch import + drag & drop (single or multiple links)
Super lightweight (~5MB)
Modern architecture, fully cross-platform
Browser extensions
100% open source

Download

You can grab it from GitHub:

👉 GitHub Repo
👉 Latest Release

Final words from the creator

I genuinely love what I’m doing.
I love building open source tools and sharing them with the world.

But yeah — making a living this way isn’t easy.
Open source survives because of the community behind it ❤️

How you can support DLMan

Use it and report issues (right here)
Share it with friends
Star the repo ⭐
Feeling generous? ☕ Buy me a coffee || sponsor the project

I really want to put more time into DLMan and make it even better.
I do read issues, and I do try to fix them.

Thanks for being part of this...