Figma Tutorial｜Synchronize your design with Google Spreadsheet "Google sheets sync" plugin
For example, when designing a blog, it is difficult to manually input the blog's "title," "eye-catching image," and "excerpt text" each time.
In such cases, the Google sheets sync plugin, which allows you to reflect the information compiled in Google spreadsheets in your design in one go, is useful.
If you create one sheet for web design, you can use the information for all your designs.
Let's try it now.
Google sheets sync
First, prepare the Google Spreadsheet you want to reflect.
Notice the first line. Make the title, img, and text parts the same as the layer name of Figma.
If you are using an image, specify the URL of the image in the Google Spreadsheet value; the URL must end in .jpg, .png, or .gif.
Here we specify the URL of the dummy image generator site (https://placehold.jp/).
Once you have entered it, go to "Share" and set the general access to "Everyone who knows the link".
Next, create the main component in Figma and place an instance on the design.
The layer name is important, and as I told you earlier, make sure it is the same name as the first line of the Google Spreadsheet and prefix it with "#".
You are now ready to go.
With the layer you want to insert data into selected, go to Resources, search for and launch the Google sheets sync plugin.
After entering the URL of the spreadsheet, click "Fetch & Sync".
The information is now inserted.
Here, if the image did not go in properly, the last part of the URL you entered in the spreadsheet will be,
Make sure the URL you entered into the spreadsheet ends with ".jpg", ".png", or ".gif".