Simple way to fetch JSON data to your FramerJS Project

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 API
getData = "http://cdn.contentful.com/spaces/gkwpy6ce00mz/entries?access_token=5c5baa8dc2bee8824341cc1bf4b6e68a57647c90ad234e5c5166cc4
954e2b2a8"
#The magic syntax 
data = JSON.parse Utils.domLoadDataSync getData
# Loop the card
rows = data.items.length
gutter = 0
rowHeight = 220
scroll = new ScrollComponent
 size: Screen.size
 scrollHorizontal: false
 parent: mainScreenScroll.content
cells = []
# Loop to create row layers
for 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)