A new possibility for UI designer — FramerX
two-week trial versions walkthrough, from install to publish a plugin.
Framer has become one of the most popular design tools after its newest version released. With FramerX, designers are able to deal with responsive layouts, interactive design, hi-fi prototyping, and bring everything closer to production — all in one place.
I started to go over FramerX in the middle of May 2019. In this article, I’d like to share my thought about:
- Reason for using FramerX
- Compare alternative with FramerX
- Two-week walkthrough
- Conclusion
Reason for using FramerX
1. Community
FramerX has an active community, with many kinds of tutorials and issue discussed. It’s like not only the company but also every user got a chance to speak for what they thought, or what they curious about, and eventually someone will come up with a good solution.
2. Everything is Possible
When FramerX announced that the studio is able to create a new plugin by writing React component, I feel it’s like a game changer, and this really shows us the potential of how far the tool can take us. For example, you can embed an Instagram photo, right away in your prototype. Or how about embedding a map component that can really interact with. By bringing designer and developer into the same page, now everything is possible.
Compare alternative with FramerX
If you are still deciding to use FramerX or not, how about reading through this article(written in October 2018):
People often complain about the Ecosystem of FramerX, which available only on Mac for now. furthermore, importing Sketch artboards seem a little buggy, which user might encounter some difficulties and the imported artboards were incomplete. But even if the import feature is working fine, having only one import file format supported seems not enough. (Figma, AdobeXD…)
For collaborate works on Framer X…unfortunately, they didn’t do much on this feature. Now, there’s no way to hand-off the project to the client or developer — unless the other also install FramerX on their Macbook. And this is quite bothering.
Tools like inVision provide a domain for users to uploading their prototyping files, also let other users directly make comment on what the designer just made. Framer X has none of these features complete yet. You are allowed to generate the share link but it will shut down the service once your project is closed or if you stop the live preview.
Two-week walkthrough
Although FramerX can’t meet every user’s needs, I still want to give it a try. I am really interested in what this “design IDE” can bring for me, and allow me to use React to build some cool custom interaction.
1. Install and follow the tutorial
First thing first, install FramerX form its website…and enjoy the trip!
I looked into some Medium introducing articles and also the tutorial resource on its official website, they provide basic React tutorials, introduce their interactive tools, and fundamentals of code components. The most exciting part is what FramerX mentions about how to build reusable code components with custom UI that exposes property controls to edit images, text, numbers and more.
2. Start learning code block and overrides
After the first three days looked into tutorials, I moved on to the code part. It’s straight forward to write code in FramerX, with basic knowledge in React, a developer is easy to create a simple reusable component.
Then, I install a popular plugin in FramerX store — Sticky by Ismamz, and check out the source code on Github. With other people’s code, I have a more clear picture to work on creating my own plugin, and also gain a lot of React knowledge from them.
I have a good user experience using their built-in code editor. Auto code beautify, keyword suggestion, and popout clear documentation when hovering on some function or element...these features really help a lot while writing the code. The only thing makes the editor not so well is that sometimes the autocomplete will mess up the code when you type too fast, and ending up deleting extra word manually.
3. Publish plugin
At the end of the first week, I successfully finished the plugin! It’s a small plugin that allows users to trigger content scroll to the top/bottom with animation by specific elements.
you can see in the demo that I expose property controls such as scrolling transition time, scroll direction for designers to control whatever they want.
For the publishing process, it’s more simple than I thought. Just click on the ‘Store’ tab on the left navbar, then click ‘Publish’ on the top of the menu, and we’re halfway there.
after upload an eye-catching icon and screenshot for the scenario, describe details and usage steps, click the button on the top-right corner — the plugin is released!
I think this is the reason why FramerX becomes that popular, it brings developers and designers into the same interface, lower the barrier of ones to release a custom plugin, and even allow users to import production components into its project. I believe the growth of FramerX may become faster, as more and more community power join in.
Conclusion
1. Follow FramerX on Twitter
As soon as I published the scrolling plugin, there’s an article about mastering scrolling animation that got posted on FramerX’s Twitter account at the same time. although what I just published compare with the article is quite simple, I still enjoy the process of making my own plugin.
If you are interested in the newest feature FramerX can provide, or curious about what the community is working on right now, don’t hesitate to follow FramerX on Twitter!
2. Course & tutorial
There are plenty of good material about FramerX on the internet, for example, collection of FramerX, 30 days of FramerX…to name a few.
I want to share a website hosted by Linton that provide detailed information and lots of tutorials, hope everyone can enjoy the features FramerX provide while building your prototype:
and one more thing…come learn a 4-week course with Linton this summer (Registration close: midnight June 2nd) 👉 here is the magic link
