This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Chris Lee
Posted Aug 19 - Read on Facebook

I'm increasingly making complex Framer prototypes with multiple versions reusing the same components. Seems like a prime time to componentize my code. This seems like something that Framer—a code-based prototyping tool, of all things—should be great at.

But I've had headaches trying to figure out how to componentize things in Framer classes because writing Framer classes seems to require a fundamentally different structure than writing normal Framer layers. Like, I can do it, but it doesn't seem worth the effort. I usually just give up. And when I look at the source for (for example) ScrollComponent, it's scarily complex - even for someone like myself with a solid CS background.

Meanwhile, I really like React's functional component framework. Because components in React are simply functions, I can build everything as a big block of code and gradually separate it out into separate components simply by moving the code around. And because components are simply functions, I can create "higher order components" that apply a behavior (similar to Framer's ScrollComponent.wrap) to an existing components - simply by using the same API. This makes it easy to separate out concerns of presentation and behavior into separate components.

Has anyone else been thinking about how to better modularize Framer components? Especially curious if there are any other Framer users who have experience with React, and whether you think it's feasible to apply some of React's design patterns to Framer code.

6 Comments

Jordan Robert Dobson

Interesting. I mean you can just write functions and build what you want that way. The scroll component handles a lot of things and a lot of use cases that your classes likely don't.

Have you seen the new programming section on their site too?

Chris Lee

Yeah, I was thinking of trying to just do more things through functions, but I'm curious how others have approached this. Or is this all unwarranted and I'm just doing it wrong? I'm mostly just asking what alternative composition and componentization patterns others have explored since classes don't really do it for me (so far).

Jochen Leinberger

For me moving code into a class works best. See for example https://www.facebook.com/groups/framerjs/permalink/674114322715642/ Eventually I will move my classes into modules later... but for the momment simple classes work best for me.

Edwin Van Rijkom

I usually end up taking the Class approach too, extending Layer and taking it from there.

Jordan Robert Dobson

i start out with functions until i know i need classes and a whole lot more setup and functionality. if i dont need to see it again then i drop it in a module.

Jared Palmer

I have been thinking about this for a few weeks now. The problem is that Framer has an imperative API (so beginners can learn quickly) and mostly lacks composition. Thus managing state and side effects quickly becomes difficult or impossible as your prototype expands. In contrast, React has mostly a functional API, with a few imperative escape hatches and promotes composition as its core paradigm. As for solutions, I have tried applying some MVC techniques to manage global state in Framer, but ultimately have come up short.

Read the entire post on Facebook