Slik bruker du funksjonen Repeat Grid i Adobe XD

Repeat Grid er en av de beste tidsbesparende funksjonene i Adobe XD. Repeat Grid-funksjonen lar deg lage et sett med gjentatte elementer med et enkelt klikk og dra. Når de gjentas, kan du justere ett sett med gjentatte elementer og få disse endringene reflektert umiddelbart gjennom resten av elementene. Trinnene du finner her hjelper deg å oppleve denne flotte funksjonen.

Det er best å følge instruksjonene hvis du kan. Du kan finne en eksempelfil som har et bilde og litt tekst i LuckyTemplatesCCfiles-mappen . Åpne XD-mappen og velg RepeatGrid-Sample-filen. Følg deretter disse trinnene:

Åpne en fil som har elementer som du vil gjenta vertikalt (nedover) på siden. Som tidligere nevnt, kan du lage din egen eller bruke RepeatGrid-Sample-filen som er gitt på nettstedet vårt.

Velg alle elementene som skal gjentas, og trykk deretter på Gjenta rutenett-knappen i Egenskaper-panelet. Du kan også velge å bruke hurtigtasten, Ctrl+R (Windows) eller ⌘ +R (Mac).

Håndtak vises på høyre og nedre side av elementene dine.

Velg elementene du vil gjenta, og trykk deretter på Gjenta rutenett-knappen i Egenskaper-panelet.

Klikk og dra ned på det nederste håndtaket for å se at en repetisjon opprettes automatisk mens du drar. Dra forbi malen for å utvide kunstverket utenfor bunnen.

Gjenta valgte elementer enkelt ved å bruke funksjonen Repeat Grid.

Gå tilbake til originalkunsten din og gjør en enkel endring. Kanskje endre typestørrelsen på tittelen, eller skalere bildet litt. Legg merke til at når du gjør endringer i dette første elementet, gjenspeiles endringene gjennom gjentagelsen.

Dette kan være en stor tidsbesparelse, men følg med gjennom de neste trinnene for å se hvordan du enkelt kan erstatte det gjentatte bildet og teksten.

Importerer oppdaterte bilder til det gjentatte rutenettet ditt

Etter at du har gjentatte elementer, kan det være lurt å demonstrere hvordan applikasjonen din kommer til å fungere med mer realistisk innhold. Det gjentatte elementet gir ikke en mulighet til å vise de ulike dataene som appen din kan tilby. Nedenfor tar du en mappe med bilder og slipper dem på toppen av det gjentatte rutenettet ditt for å erstatte det originale bildet. Bare følg disse trinnene:

Finn en mappe med bilder i et format som XD støtter, for eksempel JPEG, PNG eller GIF. Hvis du har tilgang til LuckyTemplatesCCfiles-mappen , kan du finne en mappe som heter Insects i XD Files-mappen.

Plasser XD-vinduet som inneholder tegnebrettet med repetisjonen slik at du kan se det og også mappen full av bilder.

Sørg for å velge alle bildene, og klikk og dra dem til gjentatt rutenett. Bildene byttes ut.

Du kan dra og slippe flere bilder inn i det gjentatte rutenettet for å erstatte bildeinnholdet ditt.

Du kan også dra bilder fra Bridge-applikasjonen til Adobe XD.

Oppdaterer teksten i det gjentatte rutenettet

Her finner du ut hvordan du oppdaterer teksten din i et gjentatt rutenett. Dette gjøres på omtrent samme måte som med bilder, men .txt-formatet er avgjørende for at denne prosessen skal fungere:

Lag tekst i et hvilket som helst program som kan lagre filen i et vanlig tekstformat – det vil si med filtypen .txt. Teksten kan genereres fra Notisblokk, Word, lastes ned fra Google Docs som ren tekst, eller eksporteres fra mange andre applikasjoner. For dette eksemplet kan du bruke eksempeltekstfilen kalt Bugtext.txt i XD-Files-mappen på nettstedet vårt.

Plasser mappen som inneholder tekstfilen slik at du kan se filen og det gjentatte rutenettet.

Som med prosessen med å erstatte det gjentatte bildet, klikk og dra .txt-filen over den gjentatte rutenettteksten. Teksten erstattes med tekst fra filen din.

Klikk og dra en .txt-fil over det gjentatte rutenettet for å erstatte teksten.

Du kan se eksemplet slik det ser ut når bildene og teksten er erstattet her.

Det gjentatte rutenettet med nye bilder og tekst.

Hvis du strakte deg utover visningsområdet, sørg for å klikke på tegnebrettnavnet over tegnebrettet for å velge det.

Dra det nederste håndtaket for å utvide til lengden på det gjentatte rutenettet. Dette gjør at skjermen kan rulles i forhåndsvisningen. Den stiplede linjen representerer området som forhåndsvises før rullingen.

Klikk og dra for å utvide visningsområdet til det gjentatte rutenettet.

Klikk på Skrivebordsforhåndsvisning-knappen og rull for å se det gjentatte rutenettet i aksjon.