Framer X - Prototyping with data

Project files

Key points

  • Why prototyping with real data? (Thanks everyone who chimed in for this question!)

    • Bring design closer to final product
    • Stress testing the design
    • Improve the quality of user testing
    • “More realistic. Especially if you’re doing User Testing. In UT, participants know it’s a prototype. So they get a sense of it being fake. They know they can’t really make mistakes. the more realistic it is, the better feedback you’ll get”
    • “Realism, but also accuracy. I design for sporting products and using things like real player names or horse names, for example, is really helpful.”
    • “Designing with the production data”
  • Use a combination of code and design components to prototype with data

    • Local files
    • REST APIs
    • GraphQL APIs
  • Use React state and async/await to fetch and display data
  • Prototyping with data is a broad topic. I’ve only scratched the surface in the webinar. There are other important topics such as

    • Authorization (how to access data when you need to login)
    • Cross-Origin Resource Sharing (CORS)
    • Design for latency and errors
    • Integrate with real time data
    • Other data sources such as device sensors (heart rate, accelerometers etc.)

Q&A

  • In import * as rows from “./french.json”, does * just mean import everything?

    • It imports everything that’s exported
    • If importing from a json file, it’ll import everything. And it’ll create an array or object depending on what’s in the JSON file. The array/object will be stored in a constant called “rows”
  • Can you show the code for a design component, like RestaurantRow?

    • Design components are created programatically, so its code isn’t worth much reading. In fact, it looks like below. You can hold the CMD key and click RestaurantRow in the import to open the file.
    export const RestaurantRow = createDesignComponent<{parentSize?:{width:number|string,height:number|string},width?:number|string,height?:number|string}>(canvas, "id_NOiaX0ung", {}, 33,34);
    • I personally look forward to the upcoming changes which will hopefully make design components a lot more flexible, as the team mentioned earlier.

Links


© 2019 jimu Labs, Inc.