Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Williames If you want to support the continued development of this plugin, why not buy me a coffee at: buymeacoffee.com/davew STEP 1: Make sure your Google Sheets file has a shareable link – click ‘Share > Get shareable link’ STEP 2: Name your figma layers appropriately • Add a ‘#’ followed by the name of the value you want to sync • For example: to get the value ‘Title’ – name your text layer ‘#Title’ (Note: it is not case sensitive, and will ignore ‘spaces’) STEP 3: Run this plugin, paste your shareable link, and click ‘Sync’ -------- More documentation: https://docs.sheetssync.app -------- SPECIFYING A SPECIFIC SHEET IN THE WORKBOOK You can choose to use a specific sheet in the workbook by naming the page in your Figma file similar to how you’d name a layer – e.g. Naming your page ‘Page 1 //Properties’ will use the sheet named ‘Properties’ from your Google Sheet. (This also works if you name a frame or group the name of the specific Sheet too.) If you do not name your page accordingly, it will default to using the first Sheet in your Workbook -------- USING IMAGES To dynamically set an image fill on your layer — make sure the value in your Google Sheet for a specific property is an image URL (it must end with ‘.jpg’, ‘.png’ or ‘.gif’). Then make sure you name a Vector/Shape layer with the appropriate name – e.g. ‘#image’ -------- More details and documentation for advanced usage coming soon...
Google Sheets Sync
开发 · 4,894 likes
Related plugins
- Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
- Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
- Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI
- SkewDat
Skew any layer or group with all layers preserved to edit.
- Locofy Lightning - Figma to Code in a flash
Convert Figma designs to code in a flash - React, React Native, HTML, Angular, Next, Gatsby, Vue
- Figma to HTML with Framer
Convert your Figma design to HTML code in seconds with Framer.