This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Juan Sanchez
Posted Dec 17 - Read on Facebook

Exploring other ways of bringing data into our prototypes. Tried using a public Google Sheet as JSON and it worked great!

Prototype: https://dl.dropboxusercontent.com/u/51027/SheetData.framer/index.html

Source: https://dl.dropboxusercontent.com/u/51027/SheetData.framer/SheetData.framer.zip

Here's a helpful article I referenced if you want to try and use the same approach: https://coderwall.com/p/duapqq/use-a-google-spreadsheet-as-your-json-backend

I'm thinking of making a folder of these different sheets for different types of data that others can use.

10 Comments

George Kedenburg III

I'm working on a set of guides for integrating framer and Parse which should make this type of thing really easy.

Stephen Crowley

That'd be great George ! Building my first iOS app (excuse to learn XCode/Swift really) with Parse based on a Framer Proto I made. Would be great to use data from same source when designing.

Juan Sanchez

I haven't tried Kimono. I'll check it out. In general, I like the idea of a data source playing a role in the prototyping process, especially if I can just reference something others have created, like activity feed, photo stream, profile, etc. I gravitated towards a spreadsheet because it's pretty approachable for anyone and I can involve non-technical folks.

Juan Sanchez

That'd be awesome. I've just been creating snippets as I pull together new data sources.

Stephen Crowley

I can definitely see that being a viable solution for certain projects with my teammates. Some definite synergies when it comes to data collection. Callil- which one are you using for Sketch? I saw one that maps json object values to text with a $ prefix and same name.

Juan Sanchez

I gave Kimono a try and it was really easy to use. I put together an example using data from Kickstarter. Had to deal with some cross-domain issues for testing on localhost and posting on Dropbox, so you'll need to alter the CORS settings on Kimono if you want to use this technique I think.

Prototype: https://dl.dropboxusercontent.com/u/51027/KimonoData.framer/index.html

Source: https://dl.dropboxusercontent.com/u/51027/KimonoData.framer/KimonoData.framer.zip

Noam Elbaz

Juan Sanchez that's awesome. thanks.

Juan Sanchez

I was also pointed to this: https://import.io

Here's an example from the click of a button: https://magic.import.io/?site=http:%2F%2Fdribbble.com

Stephen Crowley

Thanks Juan Sanchez!

Read the entire post on Facebook