Sync Android drawable assets from Figma to GitHub via PR (multi‑density PNG)
This n8n workflow automatically fetches design assets (icons, buttons) from Figma, exports them into Android drawable folder formats based on resolution (e.g., mdpi, hdpi, etc.) and commits them to a GitHub branch, creating a Pull Request with all updates.
Who’s it for
- Android / Flutter developers managing multiple screen densities.
- Design + Dev teams wanting to automate asset delivery from Figma to codebase.
- Mobile teams tired of manually exporting assets, resizing, organizing and uploading to GitHub.
How it works
- Execute Flow manually or via trigger.
- Fetches all export URLs from a Figma file.
- Filters out only relevant components (
Icon, Button).
- Prepares Android drawable folders for each density.
- Merges components with folder mapping.
- Calls Figma export API to get image URLs.
- Filters out empty/invalid URLs.
- Downloads all images as binary.
- Merges images with metadata.
- Renames and adjusts file names if needed.
- Prevents duplicate PRs using conditional checks.
- Commits files and opens a GitHub Pull Request.
How to set up
- Set up your Figma token (with file access)
- Get Figma File Key and desired parent node ID
- Connect your GitHub account in n8n
- Prepare a GitHub branch for uploading assets
- Add your drawable folders config
- Adjust file naming logic as per your code style
- Run the workflow
Requirements
| Tool | Purpose |
|---|
| Figma API Token | To fetch assets and export URLs |
| GitHub Token | To commit files and open PR |
| n8n | Workflow automation engine |
| Figma File Key | Target design file |
| Node Names | Named like Icon, Button |
How to customize
- Add more component types to extract (e.g.,
Avatar, Chip)
- Change drawable folder structure for other platforms (iOS, Web)
- Add image optimization before commit
- Switch from branch PR to direct commit if preferred
- Add CI triggers (e.g., Slack notifications or Jenkins trigger post-PR)
Add‑ons
- Slack Notification Node
- Commit summary to
CHANGELOG.md
- Image format conversion (e.g., SVG → PNG, PNG → WebP)
- Auto-tag new versions based on new asset count
Use Case Examples
- Auto-export design changes as Android-ready assets
- Designers upload icons in Figma → Devs get PR with ready assets
- Maintain pixel-perfect assets per density without manual effort
- Integrate this into weekly design-dev sync workflows
Common Troubleshooting
| Issue | Possible Cause | Solution |
|---|
Export URL is null | Figma node has no export settings | Add export settings in Figma for all components |
| Images not appearing in PR | Merge or file name logic is incorrect | Recheck merge nodes, ensure file names include extensions |
| Duplicate PR created | Condition node not properly checking branch | Update condition to check existing PR or use unique branch name |
| Figma API returns 403/401 | Invalid or expired Figma token | Regenerate token and update n8n credentials |
| GitHub file upload fails | Wrong path or binary input mismatch | Ensure correct folder structure (drawable-mdpi, etc.) and valid binary |
| Assets missing certain resolutions | Not all resolutions exported in Figma | Export all densities in Figma, or fallback to default |
Need Help?
If you’d like help setting up, customizing or expanding this flow, feel free to reach out to our n8n automation team at WeblineIndia!
We can help you:
- Fine-tune Figma queries
- Improve file renaming rules
- Integrate Slack / CI pipelines
- Add support for other platforms (iOS/Web)
Happy automating!
