How to create amazing things in Framer Design with reusable components
Reusable components for Framer Design | Framer.com
The Problem
Let’s say you downloaded a nice UI kit for Framer (this one for example). Or you have elements in design mode that you want to reuse several times in your prototypes once you’ve designed them, like buttons, elements of lists, alerts, and so on. Previously, long-bearded prototypers were doing components with code, which meant that if the visual part was changed significantly the code should be changed too.
Right now we have the power of the Design tab in Framer, and though some early adopters are skeptical, people are doing some amazing things with it.
The example below by Alex Manthei was made only with Framer layers in Design mode and it blows my mind. :)
Framer design mode allows us to validate different ideas quickly, without jumping back and forth between Framer and Sketch/Figma/Photoshop.
Basic exploration
A simple thing we can do with reusing design made components is just copy the object. If you’re copying a parent object with several children inside , the children will also be copied. We can apply a loop to create even more copies.
Keep in mind that in order to copy a layer from design in code, you must create the target for this layer in design mode.
for i in [0..4]
newContact=contact.copy()
Selectors
We have multiple blocks now, but they all have the same content. We can play a guessing game and talk to the children in our list element with an index like this:
for i in [0..4]
newContact=contact.copy()
newContact.y=newContact.height*(i+1)
newContact.children[1].text=i
newContact.children[0].image=Utils.randomImage()
It’s closer to our needs, but if we have complex components with lots of children inside, guessing the index of children can be complicated.
Andrew Cunliffe pointed me to new things in Framer — selectors made by Andreas.
Here is the basic overview of how they work:
Knowing the name of the child layer makes it a little a bit easier to change its properties. Below I’m using some dummy JSON data to bring our prototype to life.
data = [{name: “Callum Boddy”, company: “Linkedin”, userpic: “”}
{name: “Justo Inceptos”, company: “Mollis”, userpic: “”}
{name: “Pharetra Euismod”, company: “Tristique”, userpic: “”}
{name: “Egestas Sollicitudin”, company: “Sit”, userpic: “”}
{name: “Tellus Etiam”, company: “Egestas”, userpic: “”}
]for i in [0..4]
newContact=contact.copy()
newContact.selectChild(‘company’).text=data[i].company
newContact.selectChild(‘name’).text=data[i].name
newContact.selectChild(‘userpic’).image=Utils.randomImage()
newContact.y=newContact.height*(i+1)
Classes
We can obviously use the copy function and arrays for simple things. But if we want to add more interaction to our components — add event listeners, states, animations, and so on — it’s time to use classes.
In case you are new to this thing, here are a couple of useful links:
Official guide by Framer team:
And a proper article by Øyvind Nordbø:
For example, if you’re working on a chat app and you designed your chat bubbles in design mode, set up border-radius, background, paddings, font-sizes, and so on. From there you need to go dynamic. You can create a class for chat bubble that will read certain properties from your Design mock in Framer.
class chatBubble extends TextLayer
constructor: (options = {}) ->
if options.type==answer
stylingLayer=answer
stylingText=answer_text
else
stylingLayer=question
stylingText=question_text
super _.defaults options,
backgroundColor: stylingLayer.backgroundColor
borderRadius:stylingLayer.borderRadius
color:stylingText.color
fontSize:stylingText.fontSize
padding:
top:stylingText.y
bottom:stylingText.y
left:stylingText.x
right:stylingText.x
lineHeight:stylingText.lineHeightquestion1=new chatBubble
text:”Hey, whatsup?”
type:question
answer1=new chatBubble
text:”Trying to create reusable components from Design mode”
type:answer
y:question1.maxY+10
If you change something in Design mode, your prototype will be updated automatically.
Extending layer prototypes
Here’s another approach to this problem as suggested by Callum Boddy.
States
If you have a UI kit in Framer Design, you can attach states you defined in Design to your class in Code.
class button extends TextLayer
constructor: (options = {}) ->
super _.defaults options,
backgroundColor: button_default.backgroundColor
borderRadius:button_default.borderRadius
color:text.color
fontSize:text.fontSize
fontWeight:text.fontWeight
padding:
top:text.y
bottom:text.y
left:text.x
right:text.x
lineHeight:text.lineHeight
animationOptions:
time:0.2
@.states.active=
backgroundColor: button_active.backgroundColor
color:text_1.color
@.onTouchStart ->
@.animate(“active”)
@.onTouchEnd ->
@.animate(“default”)press=new button
text:”Press me”
x:Align.center
y:Align.center
Complex components
One of the interesting ways to create reusable components from Design mode is the styled slider.
class Slider extends SliderComponent
constructor: (options = {}) ->super _.defaults options,
height: track.height
borderRadius:knob.borderRadius
knobSize: knob.Size
backgroundColor: track.backgroundColor
min: 1, max: 10
@.fill.backgroundColor=highlight.backgroundColor
@.knob.backgroundColor=knob.backgroundColor
#u can put here individual properties like shadows and borderradius of knob for example, if u are going to change that
@.knob.shadow1=knob.shadow1
mySlider=new Slider
x:Align.center
y:Align.center
Conclusion
Spending time on reusable components makes sense if you’re working on long projects and have UI kits in place, or if you are using JSON data for example that you want to test with your Framer designs.
In most cases, people prototype several small screen interactions, which doesn’t require going crazy and coding components and just drawing everything in Design mode. Framer’s Fiber UI kit, for example, is divided into small interactions that you can work with together or separately.
Useful resources
I came across this amazing module by Lukas Guschlbauer that does most of the things I described:
Happily accepting any feedback and suggestions.
P.S. If anyone hiring interaction designer in UK or remote — let me know, I need fresh challenge. :)
