Figma to GitHub Android Asset Sync for Multi-Density Drawables - n8n Workflow

Ideal User Persona

Mobile Development Teams: Who need reliable, automated syncing of UI assets.
Design Ops Specialists: Looking to enforce design system standards directly in the codebase.
n8n Automation Engineers: Seeking advanced n8n templates for integrating design tools (Figma) with code repositories (GitHub).
Anyone: Who frequently manages Android resource folders (drawable-mdpi, drawable-hdpi, etc.) and wants to save manual effort.

Managing multi-density assets for Android can be tedious and prone to human error. This comprehensive n8n workflow solves this problem by creating an automated pipeline from Figma directly into your GitHub repository.

It ensures that all assets matching specific naming conventions (like 'icon' or 'button') are exported at the correct scales (1x, 1.5x, 2x, 3x) required for mdpi, hdpi, xhdpi, and xxhdpi folders. This eliminates manual downloading, renaming, and staging, significantly speeding up the design-to-development handover process. By utilizing multiple n8n node steps for API calls, data transformation, and file handling, this sophisticated n8n template guarantees that your drawable assets are standardized, correctly structured, and presented via a clean Pull Request, ready for code review.

This automation starts with the Execute workflow n8n trigger.

1. Figma API Call: The workflow first uses an HTTP Request n8n node to fetch the document structure and export URLs from the Figma API, requiring a Figma Project ID and Token.


2. Asset Identification: A subsequent Code n8n node (Find Icons & Buttons) scans the Figma file structure recursively, identifying specific components (like icons and buttons) that are targeted for export.


3. Density Definition: Concurrently, another Code n8n node (Predefine drawable folders) defines the necessary Android folder names (e.g., drawable-mdpi) and their corresponding scale factors (1, 1.5, 2, 3).


4. Data Combination: The first Merge n8n node combines every identified asset with every density scale, ensuring each icon is processed four times (once per resolution).


5. URL Retrieval & Filtering: The workflow then calls the Figma image API for each asset/scale combination, retrieves the direct image URLs, and filters out any null URLs using a dedicated Code n8n node.


6. Image Download: The Download Each Image HTTP Request n8n node downloads the binary PNG file data for all resolutions.


7. Metadata Preparation: After merging the downloaded files with their original metadata, the Edit File names Code n8n node standardizes the naming convention and defines the full resource path within the Git repository (e.g., app/src/main/res/drawable-hdpi/my_asset.png).


8. Pull Request Creation: An If n8n node ensures that the final step, Prepare Pull Request, runs only once per execution cycle. This final HTTP Request n8n node pushes all committed files to a feature branch and creates the final GitHub Pull Request, completing the automated n8n workflow.

To deploy this powerful n8n workflow template, follow these steps:

1. Import: Copy the provided n8n workflow JSON data and paste it into your n8n instance via the 'New' menu -> 'Import from JSON'.


2. Figma Credentials: Locate the HTTP Request n8n nodes (Get Figma Export URL and get figma Url). Replace FIGMAPROJECTID in the URLs and FIGMATOKEN in the header parameters with your actual Figma file ID and Personal Access Token.


3. GitHub Configuration: In the Edit File names Code n8n node, update the placeholders for REPOOWNER and REPONAME to match your target repository.


4. GitHub Token Setup: In the Prepare Pull Request HTTP Request n8n node, replace GITHUBTOKEN in the Authorization header with a valid GitHub Personal Access Token that has repository write permissions.


5. Execution: Since this n8n template uses a Manual Trigger, you can test the flow immediately by clicking 'Execute workflow'.

This n8n workflow relies on several specialized n8n node types to handle asset processing and Git integration:

Execute workflow (n8n trigger): Serves as the starting point for this specific n8n workflow, allowing manual or test execution.
Get Figma Export URL / get figma Url (HTTP Request n8n node): Crucial for interacting with the Figma API. The first fetches the file structure; the second uses dynamic expressions (={{ $json["scale"] }}) to request the specific image export URLs based on the required Android density scale.
Find Icons & Buttons (Code n8n node): Implements recursive logic to traverse the Figma document JSON structure and filter nodes by names containing 'icon' or 'button', providing targeted data for the downstream n8n nodes.
Predefine drawable folders (Code n8n node): Statically defines the four required Android drawable folders and their corresponding scale factors (1, 1.5, 2, 3), preparing the data for the merging step.
Merge (n8n node): Used twice in this n8n workflow. The first instance combines every identified asset with every density scale defined. The second combines the downloaded binary files with the structured metadata.
Filter nullable url of nodes (Code n8n node): Essential for robustness, ensuring that only items that received a valid export URL from Figma proceed to the download stage, preventing errors in the subsequent HTTP Request n8n node.
Download Each Image from the Figma Export URL (HTTP Request n8n node): Downloads the actual image files. Configured to store the response as binary file data.
Edit File names (Code n8n node): Performs vital data manipulation, converting component names to a safe Android format (lowercase, underscores) and setting up the full file path and necessary GitHub repository parameters for the PR step.

• If (n8n node): Controls the flow, ensuring the Prepare Pull Request action, which affects the repository state, is only executed once per full batch processing cycle, optimizing this robust n8n workflow.