At the end of December 2019, I put a few notes together for my colleagues after having a week or two to really play around with Framer X
Best Use: Interaction Design (IxD)
Transitions, micro-interactions, etc. all can be tweaked with real react code, plus react props can be added as custom properties to the FramerUI based on the component you’re working in.
So if you’re not comfortable with code you can still tweak interactions.
Second-Best Use: Advanced Prototyping
For example, I created a prototype with a live, can-be-interacted-with map using a Mapbox API component. You can also, for example, pass data from an input field on one screen, to a text field in another screen of the prototype.
Something Unexpected, Positive
Objects in the canvas are automatically nested if they’re placed in another object. Makes layer organization much easier as it’s mostly automatic. Just need to maintain naming.
Something Unexpected, Negative
I spent several hours over a weekend trying to import both material and other react components and couldn’t get it to work. I’ll keep working at it in my free time. It has a lot of promise: I should be able to just drag and drop react components as if they were design components.
Other Points
- You can import designs from sketch into Figma.
- As my colleague Richard Novoa has rightly hyped, framer bridge holds a lot of promise. With it implemented, we could basically use Framer like storybook where we could view and update components with version control! It would allow designers to interact with single source of truth components more directly. However it will take some better understanding of React to use effectively.
Key Takeaways
- This can be a very powerful tool for our team, but to use effectively, designers will need to know at least React basics. There’s a steep learning curve with it comes to working with real react components.
- I’d rather prototype in FramerX than any other tools I’ve used.