Design with real Data on Figma - Self-guided demo

DataPocket

Hello guys, I'm Paula from DataPocket, and today I'm going to show you how to

Real data will help you work faster, stay focused, and make fewer mistakes by

not having to copy and paste external data.

In this Figma example, we are going to use a template as if we were creating a

Let's begin by installing the DataPocket plugin.

Go to plugins, manage plugins, and search DataPocket.

We are using the DataPocket samples for this tutorial, but remember, 

I have other videos where I explain how to connect e-commerce platforms, Google Sheets, 

This is our plant shop example connected to Figma, which includes images, text,

I'll start by choosing a product from the product list.

Next, I select an image from my design and click on the one 

I'm going to replace the three images that I have in my product page.

Then, I select the title from my design and click on the text field I need.

Finally, I'll finish the design by replacing the price.

Let's go back to the product list. Select your design.

Now, the data autofill buttons are enabled.

Click the data autofill button on a product.

See how the image and title automatically change in just one click.

Now, imagine that you want to do the same with multiple designs,

Select them all and click the wand button.

See how the designs have automatically changed in a matter of seconds.

I can't wait to see how your products will look with this trick!

Thanks for watching! You can find more videos where I share tips and integrations.