Framer X: Using local JSON data to populate design components
By: Chris Robinson
Tags: Design Tools, Product Design, Framer, Framer X, Json

Now we need to set up some very basic styles, here I’m adding some for our stack and one for our card:

const stackStyle: React.CSSProperties = {

background: "rgba(255,255,255,1)",

marginLeft:"20px",

}; const cardStyle: React.CSSProperties = {

maxWidth: "335px",

};

This just gives the stack component a white background and sets a margin of 20px to centre our cards in the canvas frame, (I’m pretty sure there is a better way to centre using the stack controls but this is my quick fix 🤭). The style for the card component just gives it a maxWidth to stop it responding, totally unnecessary if you want to create a responsive card component…

Next lets set up the basic properties under the code you just created:

//props

interface Props {

width: number;

height: number;

gap: number;

}

Let’s get our new Card_Stack component started and give it some default properties:

export class Card_Stack extends React.Component<Props> {

static defaultProps = {

width: 375,

height: 500,

gap: 24 //The rest of the tutorial code will now go into this space };

So the defaults here give our “Card_Stack” component a default width of 375, a height of 500(fairly arbitrary) and a gap between each card of 24. Next, we will add a property control to dynamically change the padding (gap) between our cards, new code highlighted in bold:

export class Card_Stack extends React.Component<Props> {

static defaultProps = {

width: 375,

height: 500,

gap: 24 //The rest of the tutorial code will now go into this space //prop for framers interface static propertyControls: PropertyControls = {

gap: {

type: ControlType.Number,

title: "Padding",

min: 0,

Step: 1

},

}

};

👆This adds a control into framers property panel which we’ve named “gap” with a user-friendly title of “Padding” that will allow is to change the padding between each card in our stack without digging back into the code component!

We’ve set this up with a minimum value of 0 and a step change of 1, you can also add a max value if you wanted to restrict the padding to a range. This could be handy for restricting control of the padding between two values and only let a designer change the padding by 2 pixels at a time e.g.

min: 24,

max: 48,

Step: 2

Now let’s move on to rendering our new component onto the canvas, new code highlighted in bold:

export class Card_Stack extends React.Component<Props> {

static defaultProps = {

width: 375,

height: 500,

gap: 24 //The rest of the tutorial code will now go into this space //prop for framers interface static propertyControls: PropertyControls = {

gap: {

type: ControlType.Number,

title: "Padding",

min: 0,

Step: 1

},

} render() {

const { width, height } = this.props;

return (

<Stack

style={stackStyle}

width={width}

height={height}

gap={this.props.gap}

distribution="start"

direction="vertical"

> {cardData.map(data => (

<Store_card_1

style={cardStyle}

width="100%"

cardTip={data.cardTip}

cardTitle={data.title}

cardSubTitle={data.subtitle}

image={data.image}

/>

))}

</Stack>

);

}

};

To break this down the first thing we add is our <Stack> </Stack> component and pass the default properties to it, including the gap control we set up earlier.

Then within that stack, we map the JSON data to our <Store_card_1/> component so we can now match up the card text fields with the line of data in the JSON and loop through it to create multiple instances of the card. For an example look at the line: cardTitle={data.title} if you remember we named our text field “cardTitle” and within the JSON we created a field called “title”.

That’s it for the code component, make sure you save this out and head back to Framer, if you need to copy and paste the full code is here: