I’m working on a project where I need to modify text elements and swap out images in my Figma design files automatically. Basically, I want to feed data from a JSON file that contains new text strings and image URLs, then have those changes applied to specific elements in my Figma document.
Is there a way to accomplish this using Figma’s API? I’ve been looking through the documentation but I’m not sure if direct content modification is supported. Can anyone point me in the right direction or share their experience with similar automation tasks?
Any code examples or workflow suggestions would be really helpful. I’m hoping to avoid manual updates since I’ll need to do this regularly with different content sets.
Hit the same wall when I built an automated design system for my team. Yeah, the REST API won’t let you change content, but there’s a workaround that actually works pretty well. I combined Figma plugins with external automation - basically a Node.js script processes your JSON data and talks to a Figma plugin through webhooks or a local server. The plugin gets the processed data and handles the updates inside Figma. For text changes, use figma.currentPage.findOne() with consistent naming conventions. Images are trickier - you’ll need to convert URLs to Uint8Array first, then update the fills property. The real trick is having a solid naming system for your design elements so the plugin can reliably find and update the right stuff. This setup scales great for regular content updates and you still get Figma’s version history.
The Figma REST API won’t let you modify content directly - it’s mostly for reading files and basic file management. However, Figma plugins can address your needs. I developed a custom plugin last year that pulls JSON data and updates text and images automatically. The plugin interacts with your document to locate specific text layers by name or ID and updates the content programmatically. For images, you replace the fills with new image data. Essentially, you create a plugin that runs within Figma, retrieves your JSON data, and iterates through your target elements to make the necessary changes. You would utilize figma.currentPage.findAll() to identify elements and modify their properties. This requires some JavaScript proficiency, but it allows for complete automation without any manual intervention.
yea, figma’s api is super limited for changing stuff directly. i faced that issue too. it’s mostly just read-only. maybe look for a plugin to help? good luck!