A Visual Designer’s 100 Framer Prototypes Challenge: Use arrays and loops in Framer to create a cale…

This post combines from Challenge [005] to Challenge [007] and captures the process of how I built up the prototype while learning new techniques. If you want to follow along, you can download a 2 week free trial of Framer.

What I learned from the Challenges:

1. Nesting two for loops to create a Matrix Grid. 
2. Importing external CSS to stylize the fonts. 
3. Define extending Class as reusable Component.

Challenge [005]-Using Arrays to Simplify the Code:

http://ift.tt/2mMvT1v

I was inspired by David Lee’s medium post Code Less & Achieve More with Arrays in Framer in which he demonstrated the benefits of utilizing the “for loop” and “array” to simplify the code.

To practice what I just learned, I used 2 nested “for loop” to create a gradient matrix and defined the objects within an array. The great part about assigning each “item” into an array, is that we can later declare functions/animations of each “item” so they has the similar behavior, but each of them has slight variation corresponding to their array index. From the example, there’s a various delay for each cell.

Define Your Color Attribute with Math.

With challenge [005], I experimented with the color setting in Framer. 
There are several ways to define the color in JavaScript. The most common formats are Hex Code and the rgb/rgba value.

HexColor = new Layer
 backgroundColor = “#D24D57”

RGBColor = new Layer
 backgroundColor = “rgba(210, 77, 87, 1)”

If we substitute the RGB value with a formula containing the for loop variable (i.e. i*20+55), we can have the background color of each object switches gradually from one value to the other.

for i in [0…10]
  item = new Layer
    width: 50
    height: 50
    x: i * 50
    y: 100
    backgroundColor: “rgba(“ + (i*20+55) + “,” + (i*10+80) + “,” + (i*10) + “,” + i*0.1 + “)”

Streamline the variables to make it a snippet.

In order to utilize this gradient matrix as a component in the future, I merged as many variables as possible into only 2, columns & the “R” value of backgroundColor. To achieve this, all the other values were defined in the functions that describe it’s relation to the two variable bases. (And that is why you might find some math describing the value a bit messy. ) 
You can see how changing the (2) attributes affect the Matrix in the pictures below.

Extended Read — Mathematical operators of JavaScript: http://ift.tt/2mMuLv2

Challenge [006] — Design a Calendar UI:

http://ift.tt/2mMom2M

With the new technique from [005], I created a gradient calendar card.

There is two part of the calendar, the row with the Dates Title (row[0] ), and the cells contain each day of the month (row[1…5]). The Dates array contains the 7 Dates in preferred order, (Some people prefer to start the week with Sunday.) and the calendar date is calculated with a defined attribute startDate. The startDate gives the “for loop” information about which column does the first day of the month starts. (For March it would be Columns[2].)Then the date could be calculated with formula {(i+1)+(j-1)*7 -startDate}.

#The Grid of the calendar
startDate = 2
for j in [1…rows]
  for i in [0…columns]
    cell = new Layer
      width: container.width/columns
      height: container.width/columns
      x: i * (container.width/columns)
      y: j * (container.width/columns) + 60–10
      backgroundColor: “rgb(“ + (50) + “,” + (i*10+150) + “,” + (j*20+110) + “)”
      html: (i+1)+(j-1)*7 — startDate

Using Costume Fonts:

By importing the external CSS, I was able to stylize the UI with Google Font Quicksands.

Utils.insertCSS(‘@import url(http://ift.tt/1Scck8j);’)

Metadata Setup:

For easier files-organization and to optimize the future reuse, I created this Project Base to held all the Metadata, external CSS, and Predefined Color Scheme.

#// BASE
#Framer Metadata
Framer.info =
 title: “[006] — Calendar Card Base”
 author: “ShaoYen Chiang”
 date: “03/07/2017”
 twitter: “@ShaoYenC”
 description:”A Visual Designer’s 100 Framer Challenge.”

#External CSS & Fonts imported
Utils.insertCSS(‘@import url(http://ift.tt/1Scck8j);')

#Canvas & Background Color Setup
Canvas.backgroundColor = “#ededed”
bg = new BackgroundLayer
 backgroundColor: “#bfacaa”

[007] — Use Extend Class to Code Even More Efficiently.

http://ift.tt/2mMtMLi

Reading the article by Øyvind Nordbø, I was able to push my Calendar Card to the next level. By extending the [006] card to a Class, I can now call the Defined Component as many times as I want.

#Define the CalendarCard Class
class Card extends Layer
  constructor: (options={}) ->
  options.width = 350
  options.height = 360
  options.backgroundColor = “#fff”
  options.x = Align.center()
  options.y = Align.center()

  super options 
# Initialize these first parameters above as the default properties.

Something to notice is that I can declare multiple options within the class and then define each of them when I call the Class. I have declared options such as the month, the start date and the length of each month within the Calendar Card Class.

Then I can use the for loop to populate multiple Calendar Cards and assign the options of each card with predefined arrays.

months = [“MARCH”, “APRIL”, “MAY”, “JUNE” ]
colorHues = [25, 130, 230, 245]
startDates = [2, 5, 0, 3]
monthLengths = [31, 30, 31, 30, 31]

And all the Calendar Cards can be wrapped by the PageComponent and create a simple but slick interaction.

I didn’t get much time to continue the Challenge as I did during January, not mention to write the post for each Challenge. Therefore I switched to an alternative approach. I will keep pushing myself to create the Framer projects as frequently as possible. But instead of recording the process of every Challenge, I will use the Medium as a tool to recap, organize and keep the knowledge/techniques I learned. Hopefully I can keep this as a Bi-weekly routine.

Thank you for reading, and let me know if you have any suggestions or questions. Stay tuned, and keep making!