Pulling data from an API right into a Figma Layer is considered one of the good, most useful things we are able to do using Figma. If we were working on a mockup for Airbnb, for instance, and we desired to insert apartment data into it, we’d need to use the Airbnb API for speed, realism, and realtime updates.

In this primary step, we’ll use the Data Sync plugin, which enables us to request JSON, XML, or CSV-formatted data from Google Sheets and APIs, after which insert it into our mockup.

Start by choosing the Text layer in “Desktop – 1” with the “Larger” Text Style applied, then run the Data Sync plugin.

Now let’s assume that what we’re designing tells users what their IP address is. We’ll use the ipify API to search out out what ours is and insert it into the Layer. Paste https://api.ipify.org/?format=json into the text field after which click on the Load button, which can request the information from the API before switching us to the Connect tab. (That is an open API, so we don’t need to incorporate any authentication credentials.)

We’ll see the information returned by the API straight away, which on this case is our IP address. Click on it after which click on the Insert button to exchange the Layer’s content with the information.

Change the content of “Heading” to “Your IP address is…”

Setting Up API Access

Most APIs require authentication and request options, so unless we’re using an open API just like the one above, it could actually be just a little tricky to establish. That being said, data returned by APIs could be reformatted in Figma using JavaScript, so it is perhaps value learning some JavaScript to make it easier to work with APIs.

This text is a brief extract from The Designer’s Guide to Figma, available on SitePoint Premium.