You must be a Pro member to watch this episode.

Get Access Now

Sign in now if you're already Pro.

1

Design-Based Symbols in Framer

10:29FreeDone

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

Using Templates and States on Symbols

Published by Chris Slowik

Episode Notes

Extra tips from the author

Building the List Item

Now that you know how to make a basic symbol, it's time to put this skill to use and make the drink list item that forms that backbone of our app. This symbol is used all over the app on the main screens. To start, because of the way symbols work, we won't need to create targets for all the child layers of the list item. Go ahead and remove the targets on drinkSize, drinkCaffeine, and drinkName. Also rename the drink layer to _drink to match our symbol naming convention.

Add Template Text

To let us fill this symbol with dynamic text later, we need to replace the placeholder text with some templates. Start with the drink name and just replace the text with {name}. It doesn't really matter what you put in the template tag, although I like to consider it an 'alt' text. Do the same for the size and the caffeine content, although you can leave the units outside the template text. For example: {size}oz and {caff}mg.

Now these text layers can be accessed on an instance of the symbol. Here's an example:

# create an instance of Drink
newDrink = new Drink

# set template text on children of newDrink
# notice child layer names become properties of the Drink symbol
newDrink.drinkName.template = "Coffee"
newDrink.drinkSize.template = "12"
newDrink.drinkCaffeine.template = 80

Using this code, you should see a list item appear at the top of your screen, with the text you set. There's one thing messed up, and that's the alignment of the caffeine content.

Ensure Alignment for Dynamic Text

Back in Design mode, the caffeine content is set to right align, but point text aligns after sizing the text when you use dynamic text like this. So, when we enter a number, the right edge is still dependent on the length of the text. That's not how right alignment works. To fix this, just change the caffeine content text box to box text instead of point, and ensure it extends far enough left to handle a ridiculous amount of caffeine.

Making Drink States

Make three copies of the drink frame, for a total of 4. Each _drink item will need a unique name. Leave one as is, but name the other three as follows: _drinkOk, _drinkWarning, _drinkHazard. These will represent the states that a list item can have. Change the border on _drink to 0 opacity, so there's no border or edge glow. The other three should match the style from our Today screen design, so simply Copy Style and Paste Style for each one.

Now, flip back to the Code tab and create a new variable right above where you declared the Drink symbol originally. Don't forget to add the state variable as a parameter to the symbol.

drinkStates = 
    default:
        template: _drink
    ok:
        template: _drinkOk
    warning:
        template: _drinkWarning
    hazard:
        template: _drinkHazard

Drink = new Symbol(_drink, drinkStates)
Episode Topics: