Data Populator

About this plugin

Figma Data Populator makes using real, meaningful data faster and easier than ever. Inspired by Sketch Data Populator, this plugin allows you to connect a JSON data source and quickly populate text and images. Try it out 1 - Click “Manage Data Source” and add the demo JSON file: https://api.myjson.com/bins/zdv2i 2 - Create a Text layer and rename it "{name.first}" 3 - Create a Rectangle or Ellipse layer and rename it "{avatar}" 4 - Create another text layer, rename it “location” and type into it “{location.city}, {location.country}” 5 - Select all your new layers and click “Populate”. 6 - Turn the layers into a component and populate again. Note how all the layers within a component or instance will be populated with data from the same record. --------------- Adding a data source • Try http://myjson.com/ for simple JSON hosting. • If you want to populate layers randomly, use arrays in your first level of JSON values, e.g. { “users": [ object1, object2, …, objectN ], “jobs”: [ objectA, objectB, …, objectC ] }. • Data from these objects is referenced using curly brackets {…} and dot notation, allowing you to populate structured data like {users.name.first} and {jobs.description}. • If you only have a single array, you don’t need to reference the first key. E.g. for { “data": [ object1, object2, …, objectN ] }, write {name.first} instead of {data.name.first} Populating text • Populate an entire text layer by renaming the layer. • Alternatively populate a part of a text layer by adding your curly brackets within the text (e.g. “I love {location.city}” becomes “I love New York”). • The plugin remembers the parts it populated, so you can populate the same layers again and again. Populating images • Populate images by renaming a shape layer. • The data source for images must be a URL to a hosted image. • Try https://source.unsplash.com/ for easy hosted images. Populating a component/instance • When you select a bunch of regular layers, the plugin randomly chooses the records to populate them with. If you want them to all be populated from the same record, turn them into a component (or instance). • Add data to your library components so that they’re ready to go! Roadmap...? • Manage multiple data sources • Use data from google sheets and other sources • Basic functions like random() and if() • DM me suggestions!