2020.06.26: Framer + Code Components

  • Built a prototype to display quotes from a local JSON array. Each tap shows a new quote randomly with Math.random()
  • Started looking into how to add an interaction to it, so that a new quote displays on swipe. There's another Framer API to consider, Framer Motion.
  • The code examples were useful. It also took me a while to figure out the difference between the Desktop and Web version of the app, and how to access the Code panel.
  • Started looking into useEffects to load the initial state, but that would require a small refactor to make it work.

2020.06.25: Framer + Airtable API

  • Created a Framer prototype that pulls data from an Airtable API.
  • Displaying a list of items in the viewport. I didn't realize that code components get added into the sidebar. To view it, just drag and drop it into the canvas.
  • The Framer API documentation is solid.
  • And there are blog posts that illustrate a very similar use case.
  • This feels like it could be a great way to prototype between code and design. Faster than pure code because of the Framer UI to design the components. It's also more powerful than other design tools, because you can import the code components and modify them directly with code.
//it's simple enough to add interactions to a component via the framer API
import * as React from "react"
import { Frame, useCycle } from "framer"

export function MyComponent() {
    function onDrag(event, info) {}
    function onDirectionLock(axis) {
        console.log(axis)
    }

    return (
        <Frame
            dragDirectionLock
            drag="x"
            dragConstraints={{ left: 0, right: 300 }}
            dragElastic={0.05}
            whileTap={{ scale: 1.1 }}
            dragMomentum={false}
        />
    )
}
import * as React from "react"
import { Frame, Scroll } from "framer"
import { Row } from "./canvas"

export function DisplayProjects() {
    const data = {
        records: []
    }
    // const List = data.records[0].fields.title;
    const List = data.records.map((records, index) => {
        return (
            <Row
                style={RowStyle}
                title={records.fields.title}
                summary={records.fields.summary}
            />
        )
    })

    return (
        <Scroll height={"100%"} width="100%">
            <Frame style={ContainerStyle}>{List}</Frame>
        </Scroll>
    )
}
const ContainerStyle = {
    background: "none",
    cornerRadius: "8px",
}

const RowStyle = {
    position: "relative",
    height: "112px",
    margin: "0 0 1px 0",
}
// importing a design component from the canvas to be used in code
import * as React from "react"
import { Row } from "./canvas"

export function ImportComponent() {
    return <Row title={"Hello World"} />
}
import * as React from "react"
import { Frame } from "framer"

//name the component file to match the function component name
export function SimpleComponent() {
    return <Frame>Hello</Frame>
}

//change text on tap
export function OnTapChange() {
    let text = "Hello World"
    const newText = "Hello Universe"
    function onTap(event, info) {
        text = newText
        console.log("tapped")
        scale: 0.9
    }
    return <Frame onTap={onTap}> {text}</Frame>
}
Designing with APIs | Framer Learn
Learn how to fetch data from an API and turn it into a prototype.
React Hooks (and What They Mean for Designers) | Framer
Learn how Hooks make React significantly easier to write and read, along with some specific examples on how to use them for rapid prototyping.
Working with live data | Framer
How to bring live data into your prototype.
Framer API
A JavaScript library for rapid interactive prototyping for web and mobile.
A Complete Guide to useEffect
Effects are a part of your data flow.
Custom Effect | Framer Examples
Create custom page effects with overrides and the Page tool.