Prototype A Complete Mobile App Using Framer UI Kits & Boilerplate Code
It’s that easy to design your very own Framer prototype.
Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →
I see lots of examples showing how great Framer is for microinteractions — and it is—but it often gets pigeon-holed into this use case. I use it for all my interaction design work. Yeah it relies on code, but increasingly the kind of code I need to get things done is simple boilerplate that I can copy and paste across prototypes. This also makes it fast. I’m hardly any faster at building InVision prototypes than I was when I started dragging rectangles onto static images and choosing targets from dropdowns 2 years ago, but Framer grows with me and I get faster as I get better at it. In other words, it does what a good tool should do.
If you’re new to Framer, The Framer Team now publishes a great collection of resources to make getting started easier — including not just UI components but the code to bring them to life. There’s still a learning curve, but once you climb it you’ll never look back.
I recently put together an entire mobile app prototype using a combination of components and code from UI kits. It was a fun challenge, and I want to share it all — the process, the code, and the final product (though I’ve changed the original app content since it was using internal Datadog HQ business logic). I hope that it helps you get started with Framer and build great things with it.
This code s̵u̵c̵k̵s̵ is appropriate for designers
I’m not a developer, and I’m not trying to turn you into one. I do think digital product designers should write some code, but mostly to gain a real understanding of the medium you’re designing for. If you’re reading this and you’re a developer, I apologize in advance and would love to see an optimized version of this code. If you’re a designer, I hope my lack of skill makes this more approachable for you.
What you’re building
Here’s the prototype you’re building — an app for Sliceline—and the resources you’ll need to build it:
Fiber UI kit
The Fiber UI Kit has a few files you’ll be using:
Onboarding.framerused for, well…the onboarding flowDropdown.framerused for…yeah, dropdowns
Voyage UI kit
The Voyage UI Kit is what you use for the pizza detail screen with some visual changes:
Notifications.framerfor the toggles
Dynamic type
You’re not actually using dynamic type in this prototype, but you can use the Dashboard.framer file for the home screen transitions and screen design.
FramerInput
You’re not using Benjamin den Boer’s FramerInput module in this prototype, but you should know about it (especially the example code at the bottom of that page). This chat app prototype is the quintessential example of something that’s trivial with Framer but almost impossible to do with other interaction design tools.
How it’s done
Now let’s walk through how it’s made:
Defaults
For the sake of simplicity, all animations in this demo use the same curve, set as a global default at the top of the code:
# SETUP AND DEFAULTS
Framer.Defaults.Animation.curve = Spring(damping: .6)Targeting
To use artwork you’ve drawn in Framer Code, you need to activate targets manually. For those coming from the world of Sketch imports, which turns on all objects for Code (and introduces name collisions out the wazoo), this may be helpful:
FlowComponent
A single FlowComponent is used for all navigation in this prototype. If you’ve been around Framer a while, you’ve probably used other components for navigation that require more code. Scrolling in FlowComponent requires no code (just make the artboard taller than the device), and all transitions are done with the same tiny block of code. If you learn how to use FlowComponent, all basic navigation in any prototype is taken care of.
At the top, you initialize the FlowComponent and load the WELCOME screen. Setting the size to Screen.size simply tells it to fill the whole screen:
flowMain = new FlowComponent
size: Screen.size
flowMain.showNext(WELCOME)Navigation
The only function in this demo is to control the main nav. In the design, you have a default and active layer (just setting the color) for each icon in the nav:
The function navTap is called to show the active icon and set all other items to inactive:
navTap = (tapped) ->
for n in navItems
n.children[1].visible = false
n.children[0].visible = true
if n.name == tapped.name
n.children[1].visible = trueEvery onClick action used or navigation is pretty similar, first using either showNext, showPrevious, or showOverlayBottom (which all just control the transition animation) to change screens, and sometimes showing or hiding the main nav completely, and running navTap:
flowMain.showNext(PIZZA_LIST, animate:false)
navTap(this)On-boarding
The on-boarding flow is just an intro screen and a single configuration dropdown for your location.
There’s a lot more going on in the Fiber Kit’s Onboarding.framer file than you’re using here.
On the welcome screen, the logo and Get Started button both transition in with some simple animation code.
So that you don’t have to mess with object positions in your designs, you start by moving both objects up 40px and setting the opacity to 0. Then the animation just moves them back down, while setting opacity to 1. You can wrap these in a simple for-loop and add a delay sequence to stagger the transitions — here, an additional 0.5sec delay for each element. The same code is used for the lock screen animation.
# WELCOME ANIMATIONS
for layer,i in [logo, GetStarted]
layer.opacity = 0
layer.y -=40
layer.animate
opacity: 1
y: layer.y + 40
options:
delay: i * 0.5The dropdown code is taken from the Fiber kit’s Dropdown.framer but again you’re only using a bit of it to control the dropdowns, which will show the text of the item I choose:
You use states to set what the dropdown looks like when open/closed, animations to control the caret and dropdown content, and an action to set the text of the dropdown if any item inside it is clicked.
The dropdown is probably the most code-heavy component in here, and for the sake of brevity I need to punt on explaining it more—reach out via comments if you have questions.
Pizza screen button and toggles
The last significant piece of code is on the pizza screen, where you need a bit to keep the “Add to Cart” button fixed on scroll as well as control the toggles.
A particularly s̵h̵i̵t̵t̵y̵ designer-friendly piece of code here sets the position of the button and uses the Scroll event (but only on this artboard) to make sure it doesn’t move (I know it’s shitty because it’s being checked every single time someone scrolls anywhere, but didn’t immediately think of a better way):
# FLOWCOMPONENT SCROLLING
btnCart.y = Screen.height - btnCart.height - NAV.height
flowMain.onMove ->
if flowMain.current == PIZZA
btnCart.y = Screen.height - btnCart.height - NAV.height + flowMain.scroll.scrollYSimilar to the dropdowns, you’re using states on the toggles, though you only need to specify the off state in code since they are on by default:
for toggle in [toggle1, toggle2, toggle3, toggle4, toggle5, toggle6, toggle7, toggle8]
toggle.states.off =
backgroundColor: "rgba(255, 255, 255, 0.5)"
for knob in [knob1, knob2, knob3, knob4, knob5, knob6, knob7, knob8]
knob.states.off =
x: 263
shadowSpread: 1
shadowColor: "rgba(0,0,0,0.2)"Use an event on each toggle’s knob and background to cycle between the two states with stateCycle():
for row in toppingList.children
row.children[0].onTap ->
this.stateCycle()
this.siblings[0].stateCycle()
row.children[1].onTap ->
this.stateCycle()
this.siblings[0].stateCycle()Wrapping up
I haven’t seen many prototypes stringing together multiple screens and simple interactions. I hope this is useful to you, and I’d love to see more prototypes of app workflows available. If you find this useful, pay it forward.
