medium bookmark / Raindrop.io |
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. 🙂
<img class=”progressiveMedia-noscript js-progressiveMedia-inner” src=”https://cdn-images-1.medium.com/max/1600/1*DC-Y539LDJ2sUffNq7X44w.gif”>https://dribbble.com/shots/3612312-Joining-Trainline
Framer design mode allows us to validate different ideas quickly, without jumping back and forth between Framer and Sketch/Figma/Photoshop.
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()
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)
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.lineHeight
question1=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.
Here’s another approach to this problem as suggested by Callum Boddy.
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
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
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.
I came across this amazing module by Lukas Guschlbauer that does most of the things I described:
AI-driven updates, curated by humans and hand-edited for the Prototypr community
