Sådan installeres og bruges Cannoli Figma-pluginet

Denne blog beskriver, hvordan man bruger Cannoli, en af Scaleros softwareplatforme. For en fuld videobeskrivelse, se vores Cannoli-bidder på YouTube .

Leder du efter det ultimative Figma til HTML-plugin?

Cannoli.app er et af de bedste Figma-plugins derude til at konvertere dine smukke Figma e-mail-designs til præcis, redigerbar kode.

For at lære at installere og bruge plugin'et, kan du se denne korte vejledning eller følge de skriftlige instruktioner nedenfor.

Synkronisering af en fil i Cannoli ved hjælp af plugin'et

1. Tilføjelse af Cannoli-pluginet.
   Start med at gå over til Cannoli-pluginside på Figma og klik på Prøv det .
   
   

2. Kører Cannoli-pluginnet.
   • Herfra skal du åbne din Figma-e-mailskabelon og klikke på ikonet Ressourcer i navigationslinjen.
   • Cannoli-pluginnet burde dukke op under Seneste, men hvis ikke, så brug søgefeltet.
   • Klik på Kør .
   
   

3. Forbinder Figma med Cannoli-appen.
   • Hvis det er første gang, du bruger plugin'et, skal du forbinde din Figma-konto til det.
   • Når du har trykket på Kør , dukker et lille vindue op.
   • Klik på Hent kode i navigationslinjen i dette nye vindue, og tryk derefter på Opret forbindelse .
   • Herfra åbnes et nyt vindue i Cannoli, der beder dig om at forbinde dine Figma- og Cannoli-konti, så vælg Forbind konti .
   • Til sidst bliver du bedt om at give Cannoli adgang til din Figma-konto. Klik på Tillad adgang .
   • Du burde derefter se skærmen nedenfor, der fortæller dig, at dine Figma- og Cannoli-konti er blevet parret.
   • Tryk på Tilbage til Cannoli Plug-in for at begynde at kode!
   
   

4. Kopiering af Figma-filen.
   Når det er klar, skal du vælge din e-mail-designramme, tilføje din forhåndsvisningstekst og derefter kopiere linket til din Figma-fil ved at klikke på Del i navigationslinjen og Kopiér link i pop op-vinduet. Du skal kun gøre dette én gang pr. Figma-fil.
   
   

5. Synkroniserer Figma-filen.
   • Når du har kopieret linket, skal du indsætte det under Indsæt figma-linket for at synkronisere en frame fra denne fil .

   • Klik derefter på Synkroniser .
   
   

6. Kodning af e-mailen.
   • Cannoli vil udføre sin magi og konvertere din Figma e-mailskabelon til HTML på få øjeblikke, med designet til højre på din skærm og koden til venstre.
   • Herfra kan du markere al koden og indsætte den i din ESP (e-mailudbyder).

Hvis du har spørgsmål eller kommentarer, er du velkommen til at kontakte os på hej@cannoli.app .

For adgang til nogle gratis Figma e-mailskabeloner og flere tips til, hvordan du bruger Figma og Cannoli sammen, klik på her .