Simple way to fetch JSON data to your FramerJS Project

Angga Putra Sundowo
2 min readJun 2, 2017

--

This is completely a noob post about FramerJS

Like all designers out there that love to code, I’m really eager to try Framerjs as a tool to prototype my static design but don’t have enough free time for it, until I’m forced to think more effective solution to support our sales team when they wanted to meet a prospective client.

Well basically, I don’t wanted to create a new Invision project for different clients (Yes, we use Invision to pitch our products >.<)

Prerequisite

  1. Create an account in Contentful, it’s API based CMS. Basically, you can use similar services that have API with JSON output. This is where you post your data for your dummy app
  2. And of course get yourself a copy of Framer

This app is a digital wallet where users can store their physical card in their app by scanning the card barcode or type the card number manually.

For this example, I wanted to get all cards data from Contentful using their API.

The code

Using this syntax:

JSON.parse Utils.domLoadDataSync

You can access the JSON result like usual

data.items[index].fields.programName

Download the project here and try it by yourself!

#First, fetch the JSON data from contentful using their APIgetData = "http://cdn.contentful.com/spaces/gkwpy6ce00mz/entries?access_token=5c5baa8dc2bee8824341cc1bf4b6e68a57647c90ad234e5c5166cc4
954e2b2a8
"
#The magic syntax
data = JSON.parse Utils.domLoadDataSync getData
# Loop the cardrows = data.items.length
gutter = 0
rowHeight = 220
scroll = new ScrollComponent
size: Screen.size
scrollHorizontal: false
parent: mainScreenScroll.content
cells = []# Loop to create row layersfor index in [0...rows]

cell = new Layer
width: Screen.width
height: rowHeight
y: index * (rowHeight + gutter)
parent: scroll.content
backgroundColor: "#EDEDED"

cardHolder = new Layer
y: -10
x: 20
height: 230
width: 600
backgroundColor: randomColor
parent: cell
shadowBlur: 15
shadowColor: "rgba(0, 0, 0, 0.5)"
clip: true
style: {
"borderRadius" : "12px 12px 0 0"
}

cardProgramName = new TextLayer
text: data.items[index].fields.programName
fontSize: 33
fontWeight: 700
x: Align.left(20)
y: 28
width: 300
color: "#fff"
fontFamily: "Metric,Helvetica"
parent: cardHolder

labelCurr = new TextLayer
text: data.items[index].fields.currency
fontSize: 25
x: Align.right(-20)
y: 15
width: 200
color: "#fff"
fontFamily: "Metric,Helvetica"
parent: cardHolder
style: {
"textAlign" : "right"
}

valueCurr = new TextLayer
text: data.items[index].fields.balanceValue
fontSize: 28
fontWeight: 700
x: Align.right(-20)
y: labelCurr.midY
width: 200
color: "#fff"
fontFamily: "Metric,Helvetica"
parent: cardHolder
style: {
"textAlign" : "right"
"top" : "15px"
}

#Query linked image to spesific entry (https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/links/links-to-a-specific-item)
dataImage = JSON.parse Utils.domLoadDataSync "http://cdn.contentful.com/spaces/gkwpy6ce00mz/entries?access_token=5c5baa8dc2bee8824341cc1bf4b6e68a57647c90ad234e5c5166cc4954e2b2a8&include=10&content_type=program&fields.cardImage.sys.id=" + data.items[index].fields.cardImage.sys.id

cardImage = new Layer
height: 360
width: 560
y: 102
x: 21
image: "http:" + dataImage.includes.Asset[0].fields.file.url
style: {
"borderRadius" : "12px 12px 0 0"
}
parent: cardHolder
cells.push(cardHolder)

--

--