Framer X Beta: My first week
I was so excited when I received a beta invite for Framer X last Friday. The Framer team definitely helped build up hype and I just could not wait to see what they had in store for us.
What I will be writing about has the purpose of describing my first impressions and future expectations rather than explaining the app and everything it can do. But there will be a lot of drooling about the new features, so be warned!
How is Framer X different from legacy Framer
Framer X is not a typical update. It transforms the way the app is used. Someone can design and deliver a full blown prototype without touching a single line of code. If coding is your thing however, you can now use real ReactJS components to your prototype. You have reusable components and, in the future, team tools that bring design and development as close to each other as possible.
If you were wondering if you can use old Framer projects, the answer is no. The filetype is not a folder anymore and Framer X is not backwards compatible.
You can paste designs from Sketch but not Photoshop, but that’s probably for the best. In the end you won’t be needing these apps anymore. The code panel is gone, but you can use a code editor to create/edit code components. This is also for the best since you can use already great code editors that are built for heavy duty programming, like VSCode.
Things I tested
Creating a prototype using design components and code components I built myself. You can download the project used in the video here.
First impressions
At first glance, Framer X is an impressive piece of software just like its predecessor Framer. Extremely stable and polished, taking into account it is only in beta. I tested it on an older borrowed MacBook that can can barely run the Adobe Suite and the performance was surprisingly fast. I appreciate the fact that it can revive an old machine and create beautiful prototypes fast without the use of another design program. The new vector design system can pretty much cover everyday needs.
I loved the stacks feature. The ability to have evenly spaced out pieces of UI without the pain of reordering is speaking volumes to my mild OCD and it definitely is a timesaver.
Linking frames with built in animations speeds up the process of delivering a quick basic prototype without touching code at all.
Custom reusable component creation seems like a very logical decision, taking into account that other software is already doing that. The selling point here is ReactJS. You can import a real react coded component and it will work on the design interface and preview.
Being used to automatic hierarchy in Framer, I had a few cases where it was more a burden than help. So now that I can temporarily disable it, this experience has been fixed for me. Other automations like responsive design, that existed in legacy Framer, are always a huge plus.
Another thing that proved somewhat annoying in legacy Framer was the way the preview panel worked on Framer. I can now start the preview from any selection, not only from the starting frame of the prototype. Huge timesaver and convenience.
The real game changer however is definitely the Store. User generated components everyone can use. It’s the same vision as having an operating system and allowing people to create upon it, expand it, complete it, even fix it. There is already a grid component that acts as if you installed a plugin. Heck, there’s even a Lottie component and it has already transformed Framer X into an animation heaven.
First small nuances
Coming to the actually useful part of the app’s review is to point out what I found to be a little odd from my point of view.
One of the things I will use the most is the left panel, where all the design modules are located. It is somewhat annoying that the tools panel changes to hierarchy automatically after placing something on the canvas. I would like to have the option to stick to the view I started with. Even with the use of shortcuts, it seems a little distracting.
I found out I cannot delete a component if it was created from code. Seems like I should be able to do it, since deletion is available for design components.
While browsing the store and clicking on links, there is no indicator that something is loading or happening and the app seems like it is unresponsive while it is not.
If I download a big library of components and navigate to them later on the components tab, the panel does not remember my search or the scroll position. So I have to search for it all over, next time I import another component from the library.
Bugs and issues
Apart from the small subjective problems there are a few bugs. For example, the program can sometimes become unresponsive while using the components panel.
There was also a time I could not reopen the project I was working on, even though I closed it a second ago. Relaunching the app a few times fixed it.
Error count does not update at the bottom right when the problems are fixed. I had to reboot for that as well.
At times, components take a long time to refresh when edited in code, but it could be that the laptop I used is old and slow.
When I preview a link animation and I edit the link properties, I need to reset the preview. It seems stuck in the last opened frame and does not change when I manually select the frame I want. Not sure if this is intentional or not.
Finally, while typing out a new code components’ name, I changed window focus and when I returned, Framer X was unresponsive.
Looking forward to
I cannot wait for Framer X to reach final release. It will most probably be amazing whatever the team chooses to include, but a girl can dream. So I made a list of the things I wish to be added.
UI/UX wise
A toggle for text case
Better zoom control — incremental is annoying
Option to disable snap
Feathered edge for frames and shapes
Ability to remove links for scroll components
Ability to show scroll bar in scroll components
Animation wise
I would love to create custom animations without code as well. Could probably use other peoples code components. However micro interactions that require basic animation like position/size/rotation could probably be done in the app. It used to be a little easier to do that in Framer with CoffeeScript than React. Maybe that will be explained in the documentation later.
Code wise
I wish I could create custom link transition animations. From the existing ones, if I could further customise one animation, it would be the overlay. I sometimes prefer the drawer without the black semi-transparent overlay (backdrop). I also believe I should be able to select the pivot point of an animation, not just the direction.
The Store
I have a dream that the store will one day become a bit like github. I would like to be able to extend or build upon a package, like a fork in github, and properly give credit to the person that started it.
There should be a profile for each component creator so that I can see other components from them. Feedback/review/rating for components will be needed when it scales and we need to easily find resources that fit our needs. The should also be a way to share a store component/package URL.
Downloaded components are currently downloaded and used per project. Some components like the grid, are always useful. It would be great if I could retain it across all of my projects. Could there be a way to download a component to use every time and some for specific projects only?
General/Miscellaneous
I feel like there is the need for custom page navigation. Right now, the prototyping tools are limited to individual page links that are not sharing parts of the UI. There is no easy way to retain static UI elements like the mobile status bar.
Epilogue
There is still a lot to explore to have a complete grasp of what Framer can do. It seems like I have scratched the surface. But it has been fun creating with the new tools and ReactJS. Onward to new components!
