Tips for Big projects with Framer

Clarity

Enthusiasm for tools is no substitute for process. Before I get started with a flow in Framer I make sure to write it out or whiteboard the design, so I’m forced to articulate it. Then I use that material to pitch my idea to my team. If you can’t explain the gist of your idea with clarity, then you’re not ready to write code.

Have a master Sketch file

Once the details of the project are starting to settle in, it’s worth consolidating your designs into a single Sketch document. Every prototype you build from here on should pull from this file. Focus on components, instead of layouts. Try not to duplicate elements. Instead use layer.copy() to sample and keep the file lean.

I handover my Sketch files to the developers, so I keep it very readable and avoid stacking layers to suit Framer’s import. Any variation my components need I try and surface here, so it’s easy to keep track of.

Build components into modules

Framer has a standard JS module system that’s perfect for reusing code. My components generally starts with Sketch layers that I attach logic to. I build these out in Framer’s IDE and once they’re working I refactor them into modules and edit them in a separate text editor.

Here’s an example of the arguments I created for the above component, 
in a module:

exports.weekView = (arrayOfTitles, arrayOfDays, parentLayer, leftArrow, rightArrow, defaultPage) ->

In Framer, I then reference the module and its function, and then provide specific Sketch layers. I can pass in different Sketch layers for variations.

week.weekView(weeknamesForHeader.children, sketch.dayGroups.children, sketch.homepageView, sketch.leftArrow, sketch.rightArrow, 1)

Break up your prototypes into phases

Your project probably has an onboarding phase, a first use phase .etc — make each phase a separate Framer project. Doing this takes pressure off managing the properties and states of your components, which would require a fair bit of code and defeats the purpose of prototyping. You can reuse your modules and create variations in Sketch to infer the phase, like with my above calendar variations.

Avoid magic numbers

Where possible avoid hard coding numbers into your prototypes that would break as your apps changes. Use properties like layer.maxY or layer.minX to find the edge of layers, so that everything can be relative to their dimensions and positions. This gives you the flexibility to make adjustments in Sketch, that pass through to Framer.

TextLayers

Many of my components make use of Andreas Wahlström’s module, TextLayer. Using real data in your prototypes is highly beneficial, and the TextLayer modules creates a simple way to bind text to your Sketch layers dynamically.

By the way, use this code to pull in webfonts:

Utils.insertCSS(“@import url(https://fonts.googleapis.com/css?family=Open+Sans);")

Artboard and layer exclusion

Some Sketch artboards and layers might not be relevant to every prototype. Create a simple for loop like so:

for name, layer of sketch
    if _.startsWith(layer.name, “styleguide”)
        layer.destroy()

This removes the layers so that your navigator stays easy to read, but only after import. To stop the Sketch Importer from processing specific layers, use ‘*’ suffix on on your Sketch Group names to flatten your designs (.eg “smallButton*”) or the ‘-’ stop them from importing all together (“smallButton-”). These are undocumented and liable to change.

I haven’t had a chance to use this module yet but Find For Framer would add just enough abstraction that you functions and modules could become more relative and therefore reusable.

Use Page components to manage your views

Most UI frameworks have a view controller that you can use to manage layouts. With Framer a simple full screen page component can handle this for us. If you’d like more control over the animations, you may like to try another excellent module by Andreas for something more powerful.

Presenting your prototypes

The fun part of making a prototype is getting to share it with your team. Given that a Framer project is actually a website, you have a lot of flexibility with the way your prototypes can be showcased. I used a simple index/exhibit pattern, with a single iFrame that called in each project’s index.html file. This allowed me to annotate my designs and present them in sequence, while avoiding complexity in my code.