Big Announcement 📣
MagicForm’s latest update introduces Workflow Boosters — starting with 15, we’ll eventually support 250+ tools you can connect your MagicForms in
@framer
with.
Incredible feeling to finally share what Joris and I worked on the last few weeks 🎉
Hope you
Launching Workflow Boosters for MagicForm
I often receive requests about connecting MagicForm to Hubspot, Mailchimp, Loops, Slack, Google Sheets, and many other tools. That's why we're excited to announce our latest update, which now allows you to connect to over 250 tools. Even
Figma clone made in
@framer
? 🤯
Drag and drop on a canvas and export as an image!
The export and save button work with any Framer page. Kind of a canvas editor inception 😂
Obviously just a really basic prototype, but fun to explore!
Should I share the remix link? 🤔
🧭 Roadmap guide to make your own first
@framer
code overrides:
+ (Semantic) HTML
+ CSS (box model, flexbox, grid)
+ JavaScript
+ Basic React (JSX, hooks)
+ Understand cross-browser compatibility
+ Understand basic TypeScript
In that order.
Now, avoid tutorial hell (!) and
Thoughts on the
@framer
live event:
— Event was really polished
— 3D transforms quite random
— Benjamins tutorial weirdly long for a keynote
— Plugins got announced
too much hype, but glad plugins are official now
Big update on games made in
@framer
!🕹️
I integrated a game library called Kaboom.js. Now it’s easier than ever to create more complex games for Framer. 👾
It offers features like:
— Sounds and music
— Controller support
— Sprite atlases
— Physics
— Enemies
— Particles and
Crazy how simple it is to add animations and interactivity using
@framer
🤯
Took me only a couple of seconds from idea to execution:
(Grab the remix below 👇 )
Over 240 followers?! 🤯
I started this account at the end of February.
Not overthinking it (a first for sure) and just doing what I enjoy in a niche I care about.
Now I get incredible support and made a lot of connections I’m really thankful for.
Thank you all so much 🙏💙
Loads of speculations about the
@framer
event today. Most anticipated rumors:
— Plugins announcement
— Updates to the CMS
— Unknown feature beta users keep teasing
Let’s see where this goes 👀
300 followers celebration already?! 🥳
Not really able to write anything profound right now, but omg thank you all so much! 💙
Never expected this account to grow so quickly.
Remember all the buzz around comment sections in
@Framer
?
Building a prototype with Next.js, shadcn/ui, and Supabase currently. Customizable and, most importantly, spam-safe.
Should I make it a reality in Framer, too?
Wanting to improve your Framer site’s PageSpeed Insights? 🚀
I’ve been cooking something together with
@LucaDaCorte
here on X that you can’t do natively with Framer yet: preloading images. Wanna grab it?
Get the override with the remix link below 👇
Curious how I make advanced
@framer
projects like the Figma clone? 🚀
I plan to launch a newsletter where I share my full process in detail this year! 🔥
Topics I'll write about:
— How I created the Figma clone
— Making mobile apps with Framer
— How to securely connect backends
Free backend and database for your
@framer
website? 💰
Code components like comment sections, like-buttons and more need to be externally hosted. Some recommendations:
Easy to use:
— Firebase (good free plan)
— Render (small free plan)
— Supabase (offline after 1 week of
Client: “Oh, that was you?”
Had a first call with a client I connected with on Twitter this week.
The vibe was great and I got asked if I worked on
@Framer
code components before.
I answered yes, quite a few actually. I integrated a game library, for example.
Client
How I use npm packages to add more functionality to
@framer
⚡️
import package from "package"
In theory, you can import any package just like this in a Framer code override or component.
Framer will handle the rest.
Doesn't work every time, though.
Sometimes you’ll need the
Iv’e been working on something for MagicForm that will completely change the form game in
@framer
, once again.
Problem is.
I can’t code,
And I hardly have any time to experiment.
That’s why I’m very excited that I have teamed up with
@noven_tsx
for MagicForm.
Expect cool
Flappy Framer or Framer Bird? 🐦
Integrating games in
@framer
was never easier!
@kyetbedford
asked about Flappy Bird for Framer. Just integrate an existing example with the starter template and it’s ready to play! 🚀
Up next: adding some cool sprites
Full remix link below!👇
Thinking about creating my first
@framer
template — I have so many questions.
1) How do you price your template?
2) How and where to distribute it?
3) Everyone seems to use
@lmsqueezy
, even if the template is free. Why?
4) How is the new review process going for everyone?
Button micro interactions with
@framer
🔥
I'm experimenting with different designs for my newsletter signup button.
Not quite there yet, but sharing the process anyways!
(Grab the remix below 👇)
How I learned HTML 🧵💫
Want to create Framer overrides or learn how to code? This is a great starting point.
In this thread, I will teach you the basics of HTML. You will learn how to:
+ Read & understand
+ Write your own
+ How to proceed learning
Let’s dive in 🤿
Sharing a tutorial on how I made the GameCube logo startup screen animation with
@framer
soon! 👀
Should I add a remix link with a page for every step? 🤔
This week,
@JorisRood
and I will reveal what we've been working on for MagicForm ⚡️
It was a heavier lift than expected, but I'm really excited.
So happy to be able to contribute to the
@framer
space 💙
"Just code the website in React, it’s simple."
As a developer myself, I used to think that way too.
But the reality is:
for most marketing websites, there is just no need to code them from scratch.
Here are the reasons not to, from a dev's perspective:
1) Let's face it. Most
Wanting to know how to use dynamic favicons like Twitter with
@framer
? 🔥
I'm working on an override that enables you to use dynamic favicons like the big websites out there.
Let me know in the comments if I should post the finished override for free ⚡️
Some interesting things I found after rewatching the plugins part:
— SEO plugin
— Lottie plugin
— Spline plugin
— HubSpot plugin
— Icons, Shaders, Text bend plugins
Last week was insane 😧🔥
One post blew up, carrying the stats. Really grateful for this! 🙏💙
Currently feeling unsure about the long-term direction of this account. 🤔
What would you like to see? More about Framer, design, coding or something else?
Comment below! ✍️
Dynamic titles in Framer? ⚡️
Attract users back to your website, display that new content is available, and more just like the big websites out there!
Grab the override remix link below 👇
Ready to create your own game in
@framer
? 👾
I created a starter template with everything set up and ready to start coding your game!
I added loads of comments and links to the code to make it as approachable as possible.
Grab the remix link below!👇
Games made in
@framer
? 🕹️
Possible! With a bit of code inside a code component, we can add them to Framer. 👾
I’m experimenting around with one to test the limits.
Get the remix link below 👇
WIP: Secure login-free comment section in
@framer
🤖
Just integrated a CAPTCHA (Cloudflare Turnstile), one of the most important parts of reducing bot spam on login-free comment sections.
I will put it to a public test once it's ready. Really curious if this will work out 👀
I will teach you HTML here on X. 📚
Yes, you heard right.
No blog post, course, gated content. Straight to X.
I’ll start with a crash course guiding you through the basics, how to keep learning it and what's most important.
Make sure to follow so you don't miss out! 💫
Week 2 on X, what an incredible journey 💫
Initially, I thought it would take a long time for people to notice my account.
Now, only two weeks later, I’m part of a vibrant community!💙
And there is crazy stuff to come.
What I’m excited to share with you in the coming weeks:
Red numbers hurt.
But that’s because one post was doing really well the week prior. Quite happy that some of my posts get attention currently.
So I’m not sad about it at all — just continuing to stay consistent.
Using Twitter light mode right now, btw. Feels kinda illegal 🥲
Dynamic favicon AND title in Framer? 🪄
Customize your website’s tab to make it stand out and keep the user's attention.
Grab the override remix link below 👇
Wow. This was my first week on X. I’m incredibly thankful for all your support and the awesome
@framer
community. Still completely overwhelmed by the support everyone is showing each other. 🙏💙
(Timeframe too short, so no growth or decrease indication, as it seems)
Important note on login-free comment sections in
@framer
💬
It’s not the end of the world if your comment section gets spammed. 🤖
You can turn it off or moderate it. And it can be fine for a while!
But it’s better to avoid a sleepless night doing this. 🛟
Here is how:
Week 3 on X 💫
While there wasn't crazy growth this week, I'm happy that my posts are so well received 💙
Thank you all for reading and engaging with what I share! 🙏
This week, I decided to give
@typefully
a try after seeing
@kearameehan
's post about it. And honestly, I think
Thoughts about these login-free like-components in
@framer
:
They get spammed by bots. 🤖
What can we do?
If you really really don’t want to add user auth:
You have to treat them like a form.🛡️
This could mean:
— add captcha (e.g. Cloudflare Turnstile)
— use aggressive rate
Button micro interactions with
@framer
🔥
I'm experimenting with different designs for my newsletter signup button.
Not quite there yet, but sharing the process anyways!
(Grab the remix below 👇)
The X analytics update is really cool!
Still prefer the detailed analytics on
@typefully
’s mobile app, but the X analytics website for desktop becomes better and better, too.
Taking a break from posting on X to prepare for huge
@framer
projects today 🤫
Realized that it will take more time to create the content that is about to come.
So today's playground will be Typefully to plan, write, and schedule, in the hopes of keeping up with daily content 🔥
I'll walk you through creating code components and overrides step by step over the next couple of weeks, starting with HTML.
I will put as much as possible on X. However, when things get too complex, I might need to switch to a different format than X. 🙌
Taking a break from posting
@framer
content today. Noticed I’ve been pressuring myself to deliver daily, but want to keep the joy. 🙏
So I’ve decided to give myself a break and start reading a book I bought earlier this week.
What do you do to relax today?💙
@benjaminnathan
@framer
The "no need to republish" part is great. No manual updates, migrations or what ever. This is how modern software should work 👏
Sharing your process and building in public is the way to go.
Not even done or polished yet, the games in Framer post from yesterday just happens to be my most successful post already. Incredible.
And I still have loads of stuff to share about this!
— Posting remix links
—
Level up your
@framer
game or website with fullscreen mode 🚀
Let's add a toggle button and keyboard shortcut for fullscreen mode using the Framer game starter template.
Check out the step-by-step guide and remix link below! 👇
Ready to create your own game in
@framer
? 👾
I created a starter template with everything set up and ready to start coding your game!
I added loads of comments and links to the code to make it as approachable as possible.
Grab the remix link below!👇
Remember all the buzz around comment sections in
@Framer
?
Building a prototype with Next.js, shadcn/ui, and Supabase currently. Customizable and, most importantly, spam-safe.
Should I make it a reality in Framer, too?
What does it do exactly? 🤔
It adds a preload <link> for the image to the head, instructing the browser to prioritize it.
Don’t overuse, of course. Use it for images “above the fold”—meaning every image that is visible directly when visiting the page.
@F4grise
@framer
Framer is awesome! 🔥
Being able to extend it with React makes stuff like this possible. Some basic coding knowledge is required to pull off a small game, though
@LucaDaCorte
@igorexit
@JayBorda
Hey!
Yeah, in theory you can import anything inside a Framer override or code component just as you would in an React application and it's handling the rest.
Doesn't work every time, sometimes it needs the help of a trick like a CDN link. With jQuery, it's quite simple, just
I think I’m personally most proud of the upcoming crash course posts about the basics of coding all the way up to creating Framer code overrides. 🤔
The stuff I have planned for the newsletter will be cool, too!
Leave a follow if you don’t want to miss it! 💙