What made me crazy at Framer X (after 6 months Daily use)

Published in

Harbor School (하버 스쿨)

6 min readApr 17, 2019

After August 2018 Framer X opens its curtain, but everyone is still in vague what it is & what it really gives more things to our productivity of design life

This is a list of reason why no one knows what Framer X exactly it is

I still like Framer Classic
Can’t understand why Framer X is better cause it’s slower to make prototypes for me
We don’t need High-Fidelity prototypes
WTF does React & Typescript mean?

As a result, many of us still in as a Framer Classic user, not X user. It’s still hard.

If you find yourself in the same situation, here is the new map at the very beginning door of Framer X from 6 months daily use 🙌

Fast Prototyping using Components other guys already made

“Components allow you to share and re-use parts of your projects with others.“
— Koen Bok (Framer)

In Framer X, it’s like playing with LEGO

At the start point, you can select the LEGO(components) at the store, then carefully compose it as a project

You never need to start your project from scratch

You just need to be a shopper like shopping your ingredients at the market for your dinner 🥘

Eventually, Framer X is sheerly growing with the community

It means Framer X enables the speed to make a prototype if it used more and more by the community!

Here are great components from Framer X Store

1) Slider (by Benjamin den Boer)

Super customizable slider to change your properties easily

2) iOS

iOS 12 UI Kit (by Edoardo Mercati) / iPhone X Kit (by Kasimir Hirvikoski) / iOS Touch ID (by ruucm)

You don’t need to import iOS graphics from other location

Try iOS components with built in animations

3) Sticky Headers (by Ismael Martínez)

Make a simple sticky header using just drag & drops

4) Lottie (by Airbnb)

Like Lottie used in Classic using this module, it also provided Airbnb in Framer X

Make dive your After Effects motions into Framer X with fewer efforts!

5) Page & Scroll & Stack (by Framer Team)

Framer Team already offer internal components that people use most

Imagine, what if the community makes more and more usable components like this

Use the Power of Javascript(ES6) not React

React is a powerful tool for complicated interactions, and Framer team use it very well in Framer X

Though, you don’t need to use the React’s syntax or don’t need to understand whole React in making animation

Because our kindful Framer team made ‘Override’ & ‘Data’ for you

Override and Data are Javascript syntax but not a React syntax

If it attached properly, it throws changing data to your element that reloaded with animation.

Internally this is exact same how React catch data changes to reload its component, but it does not mean you need to use this in React way

Because you can make almost all animations with Override and Data in Framer X

I tell my students that when you’re facing to study codes, should catch what Javascript it is before learning React

Javascript basically enables you to change web elements (dom) and use computing powers that humans are not good at

For loops from javascript reduce repeating codes easily (left) / Make big projects with neatly organized code structures (right)

It(Framer X) is completely based on standards and you can combine it with anything.
— Koen Bok (Framer)

React is used for Code Components, not for Design, Prototyping(animation) in Framer X

The next stage, I’ll introduce parts that you need to use React 🤔

React Power (Closer to the final product for teams)

“The goal of pulling real or realistic data into our designs is to bring us closer to the final product. By designing with real names, real photos, and real content, we gain empathy for the people who use our final product.“
— Zach Johnston (DropBox Design)

If your team use React, it gives a really huge advantage to make a product

Like the article ‘Designing with real data’ from DropBox Design team, a nice workflow could be established between Designers & Developers

Your team could make components store in private mode with the ‘Team Store’. It’s a real tool for making ‘Design System’

Basically, Framer X uses developer standards code in ES6, Typescripts

Every Javascript developers use the same codes as you write in Framer X

Also, Framer Team is preparing integration with production-ready animation library Popmotion in Beta

Your developer would be satisfied it’s performance and speed

As a React Studio (for individual developers)

Also, Framer X is a ‘Well-made React Studio’ itself

I already made a few real websites using it.

It reduced tons of times compared to when I should make all HTML, CSS codes by myself

https://harbor.school/hello-framer-x-en/ — I added payments for our offline class(payments only available in South Korea)

https://framerx-resources.com/ — I made a full web app with NodeJS (backend) & FramerX (frontend). I didn’t use the react template like CRA(create-react-app)