Att leverera Android-ikoner ska inte kräva en mini-produktionslina. Men det gör det oftast: exportera från Figma, välj rätt densiteter, byt namn på filer, lägg dem i drawable-*-mappar, öppna sedan en PR och hoppas att inget saknas.
Den här Figma GitHub-automationen slår hårt mot mobila team. Android-utvecklare märker det när releaser blockeras av ”bara assets”, och produktpersoner dras in i review-trådar för att filvägar ser fel ut. Designers? De får höra ”exportera igen” alldeles för ofta.
Det här arbetsflödet gör designuppdateringar till Android-klara drawables och levererar dem till ditt repo som en strukturerad pull request. Du får se vad som automatiseras, vad du får tillbaka och vad som krävs för att köra det stabilt.
Så fungerar den här automationslösningen
Hela n8n-flödet, från trigger till slutresultat:
n8n Workflow Template: Figma till GitHub, Android-resurser som PR
flowchart LR
subgraph sg0["Execute workflow Flow"]
direction LR
n0["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/merge.svg' width='40' height='40' /></div><br/>Merge"]
n1["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Download Each Image from the.."]
n2["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>get figma Url"]
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/merge.svg' width='40' height='40' /></div><br/>Merge1"]
n4@{ icon: "mdi:swap-horizontal", form: "rounded", label: "If", pos: "b", h: 48 }
n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Get Figma Export URL"]
n6@{ icon: "mdi:play-circle", form: "rounded", label: "Execute workflow", pos: "b", h: 48 }
n7["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Find Icons & Buttons"]
n8["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Predefine drawable folders"]
n9["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Filter nullable url of nodes"]
n10["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Edit File names"]
n11["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Prepare Pull Request"]
n4 --> n11
n0 --> n2
n0 --> n3
n3 --> n10
n2 --> n9
n10 --> n4
n6 --> n5
n7 --> n0
n5 --> n7
n5 --> n8
n8 --> n0
n9 --> n1
n1 --> n3
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n6 trigger
class n4 decision
class n1,n2,n5,n11 api
class n7,n8,n9,n10 code
classDef customIcon fill:none,stroke:none
class n0,n1,n2,n3,n5,n7,n8,n9,n10,n11 customIcon
Problemet: Android-assets blir en återkommande röra
Leverans av Android drawables går sönder på samma ställen, om och om igen. Någon exporterar i fel skala. Någon glömmer mdpi men tar med xxxhdpi. Filnamn glider från er kodstandard, så utvecklare döper om dem manuellt, vilket är där små misstag smyger sig in. Sedan måste du ändå committa allt, skapa en branch, öppna en PR och förklara för reviewers varför en mapp saknas eller varför en fil flyttades. Det är inte ”svårt”, det är bara konstant. Och ärligt talat är det värre.
Friktionen bygger på. Här är var det faller isär i riktiga team.
- Att exportera flera densiteter för hand tar cirka 30 minuter varje gång en uppsättning ikoner ändras.
- Mappnamn måste vara perfekta, eftersom Androids resursvägar inte förlåter fel.
- Reviewers slösar tid på att validera assets i stället för att granska den faktiska appändringen.
- Dubbletter eller konflikter mellan PR:er uppstår när två personer ”bara pushar assets” samma dag.
Lösningen: Figma-exporter landar i GitHub som en PR
Det här n8n-arbetsflödet hämtar exportdata från en Figma-fil, filtrerar på de komponenter du bryr dig om (som Icons och Buttons), och mappar sedan varje asset till rätt Android drawable-mappar för olika skärmdensiteter. Det begär bild-URL:er från Figmas export-API, hoppar över allt som är tomt eller ogiltigt och laddar ner de faktiska filerna som binärer. Därefter slår det ihop varje fil med den metadata ditt repo behöver, normaliserar namn och sökvägar så att de matchar era konventioner och gör en kontroll för att undvika att skapa dubbletter av pull requests. Till sist commitas allt till en branch och en GitHub-PR öppnas som endast innehåller asset-uppdateringarna.
Flödet startar med en manuell körning (eller en trigger du kan lägga till senare), och omvandlar sedan Figmas exportinställningar till faktiska PNG:er i flera densiteter. På slutet får GitHub en prydlig PR som reviewers snabbt kan skanna, eftersom mappstruktur och filnamn är konsekventa.
Vad du får: automation vs. resultat
| Vad det här arbetsflödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här ser det ut
Säg att teamet uppdaterar 20 ikoner under en sprint. Manuellt kanske du exporterar 5 densiteter per ikon och lägger cirka 2 minuter per export-och-placera-cykel, plus ytterligare 20 minuter för att byta namn och organisera mappar. Det blir ungefär 3 till 4 timmar pilligt arbete innan du ens öppnar en PR. Med det här arbetsflödet startar du triggern i n8n (en minut), låter den hämta URL:er, ladda ner binärer och bygga sökvägar (ofta 10–20 minuters väntan), och en GitHub-PR dyker upp redo för granskning.
Det här behöver du
- n8n-instans (testa n8n Cloud gratis)
- Alternativ för self-hosting om du föredrar det (Hostinger funkar bra)
- Figma för att exportera ikoner och knappar.
- GitHub för att committa assets och öppna en PR.
- Figma API-token (hämta den i Figma-kontoinställningarna).
Svårighetsnivå: Medel. Du klistrar in API-tokens, ändrar några variabler (filnyckel, node ID, folder map) och testar en körning end-to-end.
Vill du inte sätta upp det här själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
En körning triggas. I det medföljande arbetsflödet startar den manuellt, vilket är praktiskt medan du finjusterar filnycklar och namnregler. Senare kan du byta trigger till en Webhook eller ett schema om du vill ha regelbunden synk.
Figma-exportdata samlas in och rensas. n8n anropar Figma för att hämta exportlistan och filtrerar sedan ner till relevanta komponenter (arbetsflödet riktar in sig på saker som Icon och Button). Tomma export-URL:er tas bort så att du inte får ”spök-assets” i PR:en.
Android-mappsökvägar genereras och matchas mot assets. En mappning för drawable-mappar skapas (mdpi till xxxhdpi) och slås sedan ihop med komponentlistan så att varje exporterad fil vet exakt var den ska ligga i ditt repo. Filsökvägar normaliseras för att matcha projektets konventioner.
En GitHub pull request skapas bara när den ska. Arbetsflödet grenar på en villkorskontroll för att förhindra dubbletter, pushar sedan binärfilerna och öppnar en PR som reviewers kan lita på eftersom den följer samma struktur varje gång.
Du kan enkelt ändra komponentfiltren för att inkludera fler typer (som Avatars) efter behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-implementeringsguide
Steg 1: konfigurera den manuella triggern
Det här arbetsflödet startar manuellt så att ni kan köra asset-synkningar vid behov.
- Lägg till noden Manual Execution Start som er trigger.
- Lämna standardinställningarna som de är eftersom den inte kräver någon konfiguration.
Steg 2: anslut Figma API-åtkomst
Dessa noder anropar Figma-endpoints för att hämta fildata och bild-URL:er.
- I Fetch Figma Export List, ställ in URL till
https://api.figma.com/v1/files/[YOUR_ID]?ids=[YOUR_ID]. - I Fetch Figma Export List, aktivera Send Headers och lägg till X-Figma-Token med värdet
[CONFIGURE_YOUR_API_KEY]. - I Request Figma Image URLs, ställ in URL till
=https://api.figma.com/v1/images/[YOUR_ID]?ids={{$json["id"]}}&format=png&scale={{$json["scale"]}}och inkludera samma X-Figma-Token-header.
Combine Streams skickar utdata både till Request Figma Image URLs och Merge Files with Metadata parallellt.
Fetch Figma Export List skickar utdata både till Locate Icon and Button Nodes och Define Drawable Folders parallellt.
⚠️ Vanlig fallgrop: Figma API-anropen misslyckas om ni inte ersätter [YOUR_ID] och [CONFIGURE_YOUR_API_KEY] med ert faktiska Figma-fil-ID och API-token i båda HTTP-noderna.
Steg 3: konfigurera asset-upptäckt och mappskalning
Dessa noder identifierar ikoner/knappar och skapar Android drawable-mappskalor.
- I Locate Icon and Button Nodes, behåll JavaScript Code som den är för att matcha ikon-/knapplager och traversera Figma-dokumentträdet.
- I Define Drawable Folders, verifiera att JavaScript Code returnerar mapparna
drawable-mdpi,drawable-hdpi,drawable-xhdpiochdrawable-xxhdpimed skalorna1,1.5,2och3. - Säkerställ att båda noderna matar in i Combine Streams för att kombinera alla ikon-/knappnoder med metadata för drawable-mappar.
Steg 4: hämta och normalisera exporterade bilder
Den här delen hämtar bild-URL:er, laddar ner assets och genererar normaliserade filsökvägar.
- I Remove Empty Image URLs, behåll JavaScript Code som filtrerar bort saknade URL:er.
- I Retrieve Exported Images, ställ in URL till
={{ $json["url"] }}och säkerställ att svarsformatet är inställt på File. - I Merge Files with Metadata, ställ in Mode till
combineoch Combine By tillcombineByPositionså att binära filer linjerar med metadata. - I Normalize File Paths, bekräfta att koden bygger sökvägar som
app/src/main/res/${folder}/${name}.pngoch sätter branch tilladd-assets-from-figma.
Steg 5: konfigurera GitHub-utdata och routning
Det här steget säkerställer att endast en pull request skapas och skickar GitHub API-anropet.
- I Branch on First Item, ställ in villkoret Left Value till
={{$itemIndex}}och Right Value till0så att endast första item triggar PR:en. - I Create GitHub Pull Request, ställ in URL till
https://api.github.com/repos/[YOUR_ID]/[YOUR_ID]/pulls. - Ställ in Method till
POST, Specify Body tilljsonoch JSON Body till den angivna PR-payloaden. - Lägg till headers i Create GitHub Pull Request: Authorization
Bearer [CONFIGURE_YOUR_TOKEN], Acceptapplication/vnd.github+jsonoch Content-Typeapplication/json.
⚠️ Vanlig fallgrop: Ersätt [YOUR_ID] och [CONFIGURE_YOUR_TOKEN] med er GitHub-repoägare/namn och en giltig GitHub-token, annars misslyckas PR-anropet.
Steg 6: testa och aktivera ert arbetsflöde
Kör ett fullständigt test för att verifiera att Figma-assets laddas ner och att en GitHub-PR skapas.
- Klicka på Execute Workflow på Manual Execution Start för att köra arbetsflödet manuellt.
- Bekräfta att Retrieve Exported Images returnerar binära filer och att Normalize File Paths ger ut fälten path och commitMessage.
- Kontrollera att Create GitHub Pull Request returnerar ett lyckat PR-svar från GitHub.
- När allt är verifierat, växla arbetsflödet till Active för produktionsanvändning.
Vanliga fallgropar
- Figma-inloggningar kan löpa ut eller sakna behörighet till filen. Om något går sönder, kontrollera först token-scope och filåtkomst.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om efterföljande noder fallerar på tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in er varumärkesröst tidigt, annars kommer du redigera utdata i all evighet.
Vanliga frågor
Räkna med cirka 45 minuter för den första körningen som fungerar.
Nej. Du justerar ett par konfigurationsfält och testar en körning, men du bygger ingen app.
Ja. n8n har ett gratis self-hosted-alternativ och en gratis provperiod på n8n Cloud. Cloud-planer startar på 20 USD/månad för högre volym. Du behöver också räkna in användning av Figma och GitHub (oftast ingen extra kostnad utöver era befintliga konton om ni inte slår i API-gränser).
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller self-hosting på en VPS. För self-hosting är Hostinger VPS prisvärd och hanterar n8n bra. Self-hosting ger dig obegränsade körningar men kräver grundläggande serverhantering.
Ja, men du ändrar var filerna genereras. Behåll Figma-exportanropen och lägg sedan till ett konverteringssteg efter ”Retrieve Exported Images” (många team konverterar PNG till WebP där). Vanliga anpassningar är att lägga till fler komponenttyper (Avatar, Chip), ändra drawable-mappstrukturen och skriva striktare namnregler i logiken för ”Normalize File Paths”.
Oftast är det ett tokenproblem. Skapa en ny Figma API-token, uppdatera sedan inloggningen som används av HTTP Request-noderna och bekräfta att filnyckeln är korrekt. En 403 betyder ofta att token inte kommer åt den filen, vilket händer när filen ligger i ett annat team eller när token skapades under fel konto. Kontrollera också att dina Figma-komponenter faktiskt har exportinställningar konfigurerade, eftersom saknade exportinställningar kan se ut som att ”arbetsflödet misslyckades” när det egentligen bara returnerar null-URL:er.
I en typisk setup fungerar hundratals per körning bra, men det beror på Figma API-gränser och dina n8n-exekveringsgränser. Om du self-hostar finns ingen exekveringstak, men stora batcher tar ändå tid eftersom varje densitet är ytterligare en nedladdning. I praktiken kör team ofta per ikonpaket eller per sprint för att hålla PR:er läsbara.
För asset-pipelines som denna är n8n oftast bättre, eftersom du kan hantera binärfiler, sammanslagningar och villkorsgrening utan att betala per ”extra steg”. Zapier eller Make kan fungera för enkla överlämningar, men PR-skapande plus mappnormalisering blir snabbt pilligt. En annan stor grej är self-hosting, som gör körkostnader förutsägbara när du kör frekventa synkar. Om du bara behöver en lätt notifiering när designer ändras kan de verktygen vara enklare. Om du vill ha den här kompletta PR-baserade leveransen, håll dig till n8n, eller prata med en automationsexpert för att sanity-checka upplägget.
När detta väl är igång slutar asset-uppdateringar att vara en återkommande brandövning. Arbetsflödet tar hand om det repetitiva så att teamet kan fokusera på att leverera produkten.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.