Hur man använder funktionen Repeat Grid i Adobe XD

Repeat Grid är en av de bästa tidsbesparande funktionerna i Adobe XD. Funktionen Repeat Grid låter dig skapa en uppsättning upprepade element med ett enkelt klick och dra. När de upprepas kan du justera en uppsättning upprepade element och få dessa ändringar att återspeglas direkt i resten av elementen. Stegen du hittar här hjälper dig att uppleva denna fantastiska funktion.

Det är bäst att följa instruktionerna om du kan. Du kan hitta en exempelfil som har en bild och lite text i mappen LuckyTemplatesCCfiles . Öppna XD-mappen och välj filen RepeatGrid-Sample. Följ sedan dessa steg:

Öppna en fil som har element som du vill upprepa vertikalt (nedåt) på sidan. Som tidigare nämnts kan du skapa din egen eller använda RepeatGrid-Sample-filen som har tillhandahållits på vår sida.

Välj alla objekt som ska upprepas och tryck sedan på knappen Upprepa rutnät i egenskapspanelen. Du kan också välja att använda kortkommandot, Ctrl+R (Windows) eller ⌘ +R (Mac).

Handtag visas på höger- och undersidan av dina element.

Välj de objekt som du vill upprepa och tryck sedan på knappen Upprepa rutnät i egenskapspanelen.

Klicka och dra nedåt på det nedre handtaget för att se att en upprepning skapas automatiskt när du drar. Dra bortom mallen för att förlänga konstverket utanför botten.

Upprepa markerade objekt enkelt med hjälp av funktionen Repeat Grid.

Gå tillbaka till din ursprungliga konst och gör en enkel förändring. Kanske ändra typstorleken på titeln eller skala bilden lite. Lägg märke till att när du gör ändringar i det här första objektet återspeglas ändringarna under hela upprepningen.

Detta kan vara en enorm tidsbesparande, men följ med i nästa steg för att se hur du enkelt kan ersätta den upprepade bilden och texten.

Importera uppdaterade bilder till ditt upprepade rutnät

När du har upprepade objekt kanske du vill visa hur din applikation kommer att fungera med mer realistiskt innehåll. Det upprepade elementet ger inte en möjlighet att visa de olika data som din app kan erbjuda. Nedan tar du en mapp med bilder och släpper dem ovanpå ditt upprepade rutnät för att ersätta din originalbild. Följ bara dessa steg:

Leta reda på en mapp med bilder i ett format som XD stöder, till exempel JPEG, PNG eller GIF. Om du öppnar LuckyTemplatesCCfiles-mappen kan du hitta en mapp som heter Insects i mappen XD Files.

Placera ditt XD-fönster som innehåller ritytan med upprepningen så att du kan se den och även mappen full av bilder.

Se till att markera alla bilder och klicka och dra dem sedan till det upprepade rutnätet. Bilderna byts ut.

Du kan dra och släppa flera bilder i det upprepade rutnätet för att ersätta ditt bildinnehåll.

Du kan också dra bilder från Bridge-programmet till Adobe XD.

Uppdaterar din text i ditt upprepade rutnät

Här upptäcker du hur du uppdaterar din text i ett upprepat rutnät. Detta görs på ungefär samma sätt som med bilder, men .txt-formatet är avgörande för att den här processen ska fungera:

Skapa text i valfritt program som kan spara filen i ett vanlig textformat - det vill säga med filtillägget .txt. Texten kan genereras från Anteckningar, Word, laddas ner från Google Dokument som vanlig text eller exporteras från många andra applikationer. För det här exemplet kan du använda exempeltextfilen med namnet Bugtext.txt i mappen XD-Files på vår webbplats.

Placera mappen som innehåller textfilen så att du kan se filen och det upprepade rutnätet.

Som med processen att ersätta den upprepade bilden, klicka och dra .txt-filen över din upprepade rutnätstext. Texten ersätts med text från din fil.

Klicka och dra en .txt-fil över det upprepade rutnätet för att ersätta texten.

Du kan se exemplet som det ser ut när bilderna och texten har ersatts här.

Det upprepade rutnätet med nya bilder och text.

Om du sträckte dig utanför visningsområdet, se till att klicka på ritytans namn ovanför ritytan för att välja den.

Dra det nedre handtaget för att sträcka sig till längden på ditt upprepade rutnät. Detta gör att skärmen kan rullas i förhandsgranskningen. Den prickade linjen representerar området som förhandsgranskas före rullningen.

Klicka och dra för att utöka visningsområdet för ditt upprepade rutnät.

Klicka på knappen för förhandsgranskning av skrivbordet och bläddra för att se ditt upprepade rutnät i aktion.