WEBVTT 00:00:00.000 --> 00:00:08.200 Hi, this is Paint By JSON. 00:00:08.200 --> 00:00:12.800 It's an API client built in Figma that lets you design with real API data. 00:00:12.800 --> 00:00:17.000 Let me show you how it works. 00:00:17.000 --> 00:00:22.120 So if I have a product page like this, it can be painful to go in and find placeholder 00:00:22.120 --> 00:00:24.600 content and things like that. 00:00:24.600 --> 00:00:31.760 But if I have an API already, I can make a call to it. 00:00:31.760 --> 00:00:35.520 So I've got auth headers or any other headers needed. 00:00:35.520 --> 00:00:40.120 These aren't saved, they're cached locally on your machine, but our database never sees 00:00:40.120 --> 00:00:41.120 them. 00:00:41.120 --> 00:00:42.320 We also have variables. 00:00:42.320 --> 00:00:47.080 So if I want to switch out IDs, I can do that pretty easily. 00:00:47.080 --> 00:00:49.840 So when I send this API call, I get an API response. 00:00:49.840 --> 00:00:54.800 We can see the JSON here on the left side, then we have our sort of mappings over on 00:00:54.800 --> 00:00:56.720 the right side. 00:00:56.720 --> 00:01:00.920 So I'm going to start mapping content into this frame. 00:01:00.920 --> 00:01:07.120 So with the brand name, I'm going to match it to the brand and you can see that that's 00:01:07.120 --> 00:01:09.200 creating a new mapping. 00:01:09.200 --> 00:01:11.960 I add this. 00:01:11.960 --> 00:01:17.040 And now what's cool about the plugin is that it guesses what you want to do based on 00:01:17.040 --> 00:01:18.740 the layer name. 00:01:18.740 --> 00:01:22.360 So if I click on this, I see a suggestion. 00:01:22.360 --> 00:01:28.400 So if I click into this, I can see that the thumbnail is being filled with the image fill 00:01:28.400 --> 00:01:33.120 of the image URL. 00:01:33.120 --> 00:01:37.160 If I keep clicking these, I can create new ones. 00:01:37.160 --> 00:01:45.600 And then if I apply, we have real product data. 00:01:45.600 --> 00:01:48.160 Where it gets interesting is something like the price. 00:01:48.160 --> 00:01:53.080 So we don't want to display price as just a number, we want to show a currency symbol. 00:01:53.080 --> 00:02:01.200 So if I click into this mapping, I can add a transform and I can format currency and 00:02:01.200 --> 00:02:05.440 set this to Euro, hit add and I save it. 00:02:05.440 --> 00:02:10.060 And now if I reapply, we see that Euro come in. 00:02:10.060 --> 00:02:15.840 There's some other pretty interesting transforms in there around text, number, and actually 00:02:15.840 --> 00:02:20.560 some pretty powerful conditional switch case stuff. 00:02:20.560 --> 00:02:25.840 So this is great for doing one-off PDPs, but if anybody's ever worked with product cards 00:02:25.840 --> 00:02:31.800 or any type of card, you know how painful it can be to kind of keep pulling in data. 00:02:31.800 --> 00:02:35.680 So what we also have is collection mode. 00:02:35.680 --> 00:02:44.400 So if I go back and I'm going to create a new one, and this time I'm just calling the 00:02:44.400 --> 00:02:46.520 list endpoint. 00:02:46.520 --> 00:02:49.160 So now I've got 30 products. 00:02:49.160 --> 00:02:56.400 So if I click on the 30 products, I can see that it's selected this array within the response. 00:02:56.400 --> 00:02:59.640 So now I need to click a field inside that array. 00:02:59.640 --> 00:03:08.240 So the first item here, I can choose title and then I select a frame repeating instances. 00:03:08.240 --> 00:03:13.040 So I have frame six here and you can see it's auto-detected 10 instances. 00:03:13.040 --> 00:03:18.000 And within this, I can just select the first one and it knows to do text content because 00:03:18.000 --> 00:03:22.780 it's a text layer and create an ad mapping. 00:03:22.780 --> 00:03:29.000 Now if I apply all, we should see our titles update. 00:03:29.000 --> 00:03:34.920 I can also, the auto suggest works here as well, which is really powerful. 00:03:34.920 --> 00:03:45.080 So now if I apply these, we see this come through again, the price needs to be formatted 00:03:45.080 --> 00:03:46.880 correctly. 00:03:46.880 --> 00:03:54.960 These product cards have two attributes they've reviews and sale badge. 00:03:54.960 --> 00:04:03.680 What I can do is add a mapping in collection mode where I select my products and I want 00:04:03.680 --> 00:04:09.560 to say if the discount percentage is over 10%, I want to show the sale badge. 00:04:09.560 --> 00:04:21.800 So what we do is we choose a conditional and we say if what comes out of this is greater 00:04:21.800 --> 00:04:28.280 than 10, this is going to be true and this is going to be false because this is a Boolean 00:04:28.280 --> 00:04:32.400 instance. 00:04:32.400 --> 00:04:38.020 So I'm going to choose my product card component here and I can choose what key to use. 00:04:38.020 --> 00:04:47.280 So I'm going to do sale badge and that is going to basically pass true or false into 00:04:47.280 --> 00:04:51.320 the component property based on the number here. 00:04:51.320 --> 00:04:53.440 So I'm going to add this mapping. 00:04:53.440 --> 00:05:00.400 Now if I apply all, we can see that it's applied them to the correct products. 00:05:00.400 --> 00:05:12.440 So this is very powerful, you can start to really build out quite complicated workflows. 00:05:12.440 --> 00:05:18.600 Thank you for using the plugin and feel free to reach out to hi@paintbyjson.com if you 00:05:18.600 --> 00:05:19.760 have any questions.