Design-Based Symbols in Framer

10:29FreeDone
2

Using Templates and States on Symbols

6:45ProsDone
3

Replacing Sample UI Elements

7:16ProsDone
4

Load and Use JSON Data with Symbols

4:01ProsDone

Design-Based Symbols in Framer

Published by Chris Slowik

Episode Notes

Extra tips from the author

Get started

If you haven't done so already, complete the first part of this prototype series here, or to get jump-started on this half, go ahead and download the source files - it's a Framer file representing where we left off in part one.

Manage your modules

We're going to start using Framer Modules. It’s a small app that helps in searching for, and installing, modules for your Framer projects. If you have a project open, you can search for the module you want and install it by simply hitting enter.

Framer Modules

Make sure you have the Caffeine prototype open, and use spotlight (cmd-enter) to search for and run Framer Modules. Search for "Framer Symbols" now, and hit enter to install it.

You should see {Symbol} = require "symbols/Symbol" at the top of your prototype now. This means the Framer Symbols module is installed properly.

What is Framer Symbols?

Framer Symbols is an awesome module that helps automate some of the process of creating a class (or symbol) based on Design tab layers. It's an awesome time saver, and a good way to encourage creating reusable components. I love using it! You can read the full documentation to see some more examples of usage and read more about it.

Creating a symbol allows us to do things like generate dynamic counts of elements based on data, and when it's based on something in Design mode, it's very easy to update - just update the layers in Design and it updates in code.

Make your first symbol

To see how this all works, the first thing we'll do is make a symbol out of the switch element on our design. Go to the Design tab and duplicate that standalone switch artboard, so you have one for both the on and off states. I named mine _switchOff and _switchOn. When naming symbol artboards, it's always a good idea to use some kind of identifier so you know it's a symbol. I like to use an underscore prefix. Add a target for each artboard and make sure the background is 0% opacity for the artboard.

In the code, under the App Setup section, add a new section called # Symbol Setup - here's where we'll be setting up all the symbols used in the app. To define a new symbol only requires one line of code:

ToggleSwitch = new Symbol(_switchOff)

The variable name here is in camel case but with the first letter capital - I did this because symbols are classes, and that's a good way to know at a glance that ToggleSwitch references a class. We set this variable to a new instance of a Symbol, with _switchOff as the template. Now we can create a new instance of a ToggleSwitch, whenever we need to. Test this out now by adding the following code to the end of your prototype:

mySwitch = new ToggleSwitch
    x: Align.center
    y: Align.center
    parent: Today

Here we create a new ToggleSwitch variable called mySwitch and center it in the Today screen. You should see the result in your prototype now.

Adding states to ToggleSwitch

A simple symbol like the one we just made could be useful for icons and the like - but for a switch we need at least two states, and some animation! Here's how you can add two states to the switch:

toggleSwitchStates = 
    default:
        template: _switchOff
        animationOptions:
            curve: Spring(damping: 0.85)
            time: 0.27
    on:
        template: _switchOn
        animationOptions:
            curve: Spring(damping: 0.85)
            time: 0.27

The states are stored in a variable called toggleSwitchStates, and our default state is the off state. To create a state, you name it and add a template. You can also add animation options for each state, in case you want to animate the changes differently. To add these states to the ToggleSwitch symbol, we just need to add them as a parameter in the initial declaration. Do that now, just by adding toggleSwitchStates after _switchOff.

Events are added in the same way. In the case of this switch, there's only one event, toggling (or cycling). When the user taps, we want the symbol to stateCycle. Create toggleSwitchEvents, and dont forget to add it to the ToggleSwitch declaration.

toggleSwitchEvents = 
    Tap: -> @.stateCycle()

The ToggleSwitch declaration should now look like this: ToggleSwitch = new Symbol(_switchOff, toggleSwitchStates, toggleSwitchEvents)

Inserting symbols into your design

In design mode, it's useful to see a representation of your symbols in place, although it's nice to separate your symbols from context so that you can design states. To solve this, I like to put a copy of the symbol in the design, and just name it with a SAMPLEUI_ prefix. For example on this switch, in the design for the setting screen, I renamed it to SAMPLEUI_switch in preparation for swapping it with a symbol in code. In addition, the parent section - in this case the Health Kit access setting - should be targeted so you can add the symbol instance as a child. I named the healthkit group healthKitAccess. To swap the designed switch with an instance of our symbol is pretty easy now:

# Settings Screen Setup
healthKitSwitch = new ToggleSwitch
    x: SAMPLEUI_switch.x
    y: SAMPLEUI_switch.y
    parent: healthKitAccess
SAMPLEUI_switch.destroy()

First, we make a new ToggleSwitch with the same position as our sample switch, and make its parent healthKitAccess. Then we can destroy the sample one. Well done!

Episode Topics: