Bruk Frame X til å bygge interaktive prototyper

Sep 11, 2025

hvordan

[1. 3]

(Bildekreditt: Frame)

Som designere er det alltid spørsmålet om hvilke prototypingsverktøy du bør bruke til prosjektet ditt. Det er mye programvare der ute for oppgaver som wireframing (se vår topp wireframing verktøy og utmerket Nettstedbyggere ), prototyping og byggekompleks interaksjoner; Men svært få verktøy er i stand til å håndtere alle disse. Frame er et verktøy som har alle disse funksjonene og øker prosessen med å skape små animasjoner og interaksjoner.

Den nyeste iterasjonen, Frame X. , nå bruker React og JavaScript i stedet for å bruke Coffeescript for å utvikle mikro-interaksjoner og animasjon. Dette bidrar til å levere raskere lastetider og bedre ytelse. I tillegg betyr bruk av reaktkomponenter at brukere har flere muligheter til å legge til og utvide, inkludert innebygde mediespillere, sanntidsdata og grafer i prototyper.

Testing er en kjerne del av Prototype-bygningsprosessen, og mens Framer X er flott for å lage interaktive prototyper, trenger den bidrar til å se hvor gode sine kreasjoner er. Sjekk ut vår bruker testing Legg inn for noen av de beste verktøyene for å utfylle Framer og bidra til å bygge opp virkelige prototyper, og sørg for at du bruker det beste Web Hosting. Service for deg.

Slik lager du en app med Frame X

For å fullt ut sette pris på kraften til Framer X, skal vi lage et virkelighetsprosjekt: en enkel matlagingsoppskriftsprogram med noe innhold og media (eiendeler som sikkerhetskopieres i pålitelig skylagring ). Den første tingen å bygge er hjemmesiden. Vi skal holde ting enkelt med følgende elementer:

Standard søkelinje for å finne oppskrifter
Nylig aktivitet for å vise de siste oppskrifter som vises
Oppskriftskort som viser ting som de mest populære oppskrifter
Opprette en detaljert visning av oppskriften med video- og delingsalternativer

For å komme i gang må du opprette en ny ramme (en artbord) ved å klikke på + -ikonet på venstre navbjel. Velg hvilken som helst artbordstil fra en liste over standard iPhone / Android-maler i høyre linje. Nå er du klar til å gå.

01. Bygg en søkefelt

La oss begynne med å bygge søkefeltet. I stedet for å lage et rektangel og legge til et søkikon som vi normalt ville, kan vi faktisk bruke raske gjenbrukbare komponenter i Frame X, disse kalles pakker. Det er tusenvis av pakker som finnes i venstre navigasjonslinje under Store. Klikk på butikk, søk etter Android Kit og eksempel kit og deretter installere dem.

Disse pakkene inneholder elementer som kort, knapper, tastaturer, glidebryter, innganger og navigasjonsmenyelementer. Når du har installert disse pakkene, kan du bruke elementene fra komponentmenyen til venstre.

Finn elementene du vil ha ved å søke i filteret - i dette tilfellet en søkefelt, som finnes i eksempel kit. Bare dra og slipp den på rammen. Nå kan du endre egenskaper som plassholder tekst, skriftstørrelse og farge ved hjelp av den høyre linjen.

02. Opprett en innholdsstabel

For denne siste aktivitetsblokken, legg først teksten 'Nylig aktivitet', som er ganske grei. Nå kan vi bruke en ny funksjon i Frame X kalt stabler. Dette kan gjøres ved å klikke på + -ikonet og velge Stack S fra menyen. Etter å ha valgt stabelen, dra og slipp et område på 600 x 300 på arbeidsrammen for å lage en stabel. Denne stakken vil bli vist som blå.

La oss nå gå tilbake til komponentseksjonen og under Android Kit, søk etter kort-5-elementet og dra det i stakken vi nettopp opprettet. Dupliser disse kortene to ganger, og sørg for at alle de tre kortene er i stakken.

Så lenge de er i stakken, kan disse tre kortene lett omorganiseres uten at du trenger å bekymre deg for avstanden. Hvis du vil øke avstanden mellom kortene, kan du øke bredden på hele stabelen. Det er så enkelt. Du kan også tilpasse disse kortene ved å endre navnet på tittelen og bakgrunnen i henhold til din smak.

Nå som vi har opprettet en stabel, la oss gjøre det rullbart. Flytt den ut av rammen / artbordet. Klikk på + -ikonet fra venstre NAV og klikk på rullegardinvalget. Akkurat som vi opprettet et område med stakken, opprett et rullbart område på rammen / tavlen som er i samme størrelse som stabelen.

Bytt nå egenskapen til rullen i høyre linje ved å endre retningspilene for å gjøre det til en horisontal rull. Etter at vår Scroll-beholderen er opprettet, trenger vi innhold for det, som serveres av stakken vi tidligere har opprettet. Så bare koble rullebeholderen til stabelen ved hjelp av pilprompten på rullebeholderen. Det fungerer ved å dra musepekeren til stakken.

03. Lag en vertikal stabel

Interactive Framer X - 01 — Frame X lar deg introdusere horisontale og vertikale rullbare stabler (Bilde Kreditt: VAMSI Batchu)

For oppskriftskortene må du følge en metode som ligner på trinn 2, men i stedet for å skape en horisontal rulle av kort, vil du opprette en lignende vertikal som i hovedsak er en liste over de mest populære oppskrifter med miniatyrbilder. For denne øvelsen har hvert kort for en oppskrift fire elementer - et miniatyrbilde, rating, navnet på oppskriften og tiden som trengs for å forberede den.

Ikke bekymre deg for detaljene i hvert kort. De kan tilpasses basert på din design smak. Følg samme metode for å bruke et kort fra komponentene, duplisere dem og legge til alle dem til en stabel med vertikal rulle.

04. Opprett en ny side

La oss nå lage en ny side for å gå inn i detaljene i en bestemt oppskrift. For eksempel, la oss ta tilfelle av det andre kortet her: Fransk pasta. For å opprette denne nye siden, opprett en ny ramme / artbord og introdusere elementene som vi trenger for å vise flere detaljer om den franske pastaoppskriften. Denne nye siden kan brytes ned i en video, en tittel, rating, den tiden som trengs for å gjøre det og noen få actionknapper, for eksempel lagre for å liste og dele til sosiale medier.

For å legge til video, gå til butikken og installer YouTube-pakken, som gjør at du enkelt kan legge til videoer i prototypen din. Gå nå til komponentpanelet og dra og slipp YouTube-elementet fra under YouTube-komponenten i rammen.

Juster bredden på miniatyrbildet slik at den passer til bredden på rammen. I ruten Høyre egenskaper kan du sette inn nettadressen til videoen du vil spille i prototypen. Hvis du vil, er det også en måte å autoplay videoer gjennom avkrysningsruten i egenskapspanelet.

Under denne videoen kan du legge til tittelen, rating og ulike ikoner. For å legge til ikoner for vårt eksempel, brukte jeg komponenten fra ikongeneratorbutikken. Det er en enkel prosess: Bare dra og slipp på basisikonet på rammen, og endre deretter Eiendommen kalt ikon på høyre sidepanel til 'Heart' og 'Share'. Dette vil endre grunnikonene i henholdsvis lagrings- og andelikonene. Deres farger kan også enkelt endres ved hjelp av riktig panel.

For å gjøre ting enkelt for besøkende, kan du legge til en del kalt ingredienser, som ville liste alle ingrediensene som trengs for vår oppskrift - i dette tilfellet fransk pasta.

05. Innfør interaksjoner

Interactive Framer X - 02 — Legg til interaksjoner til knapper og elementer for å gjøre dem mer engasjerende (Bilde Kreditt: VAMSI Batchu)

La oss nå gjøre vårt design mer engasjerende ved å legge til interaksjoner for en knapp. Ideelt sett, når du klikker på Aksje-ikonet, bør du bli bedt om en skjerm for å dele oppskriften på tvers av ulike sosiale mediekanaler. La oss bygge det som bruker en ny ramme.

Pass på at bredden og høyden på denne rammen er den samme bredden og høyden som de to andre rammene vi opprettet. Ideen er at denne nye delskjermen skal glide opp og erstatte gjeldende skjermbilde når delen Delikonet klikkes.

For å bidra til å gjøre skjermen forskjellig, la oss legge til litt farge på den og fylle den med sosiale medier ikoner som Facebook, Instagram, WhatsApp og Email. Denne delen skjermen bør også ha et X-ikon lagt til det, som når klikket ville bringe det tilbake til den opprinnelige tilstanden.

Pass på at alle ikonene er ordnet i en stabel. Så snart X-ikonet er inkludert, er neste trinn å koble denne rammen slik at den dukker opp når du klikker på Aksje-ikonet.

For å gjøre dette, velg rammen som inneholder delikonet. I høyre side er det en egenskap som heter Link. Når du klikker på det, vil programgrensesnittet gi deg en pil som du kan dra til den nye aksjen som vi opprettet. Dette vil skape en lenke i bakgrunnen.

Nå, når du velger Aksje-ikonet, vil du observere nye egenskaper i høyre sidepanel under Link, som er mål, overgang og retning. Hver av disse egenskapene gjør at du kan endre elementene, for eksempel type overganger og retningen der skjermen skal dukke opp, etc.

Du kan teste om prototypen fungerer eller ikke, ved å klikke på spillikonet som finnes øverst til høyre i grensesnittet. På samme måte må du koble deleskjermen til skjermbildet, slik at når brukeren klikker på X-ikonet, går den tilbake til forrige skjermbilde.

Dette kan oppnås ved hjelp av en lignende linkegenskap og legge til målet som skjermbildet. Hvis du vil ha en gå på å legge til litt variasjon, kan du gjøre retningen til venstre i stedet for topp og deretter bruke kommandoen Play for å teste om samspillet fungerer eller ikke.

06. Legg til en lagringsknapp

La oss nå legge til en overleggsinteraksjon i lagre-ikonet. Her er målet vårt at når en besøkende klikker på det hjerteformede ikonet, bør det være et popup-vindu som spør om du vil lagre oppskriften til en skreddersydd liste.

La oss starte med å lage en ny ramme som heter Lagrede lister. Akkurat som du gjorde med den forrige, må du kontrollere at denne rammen har samme bredde, men denne gangen må du redusere høyden fordi den vises som et overlegg når det klikkes. For stylingen av den lagrede listerrammen, legg til en header, en tekstinngang for å skrive inn navnet på listen og en knapp som er en CTA for å lagre den.

For å koble til, velg det hjerteformede ikonet på videorammen og legg til en lenke til den lagrede listerrammen. Nå, i stedet for overgangseiendommen er et trykk, gjør det til et overlegg. Juster den til 80% og test den deretter med avspillingsknappen. Endre til du er fornøyd med overlegget. Lenk på X-ikonet på ikonet Lagrede lister Tilbake til videosiden.

Dette er hvordan du bruker Frame X for å enkelt lage handlingsbare interaktive prototyper. Det er også avanserte verktøy du kan bruke, samt å legge til reagere kodende utdrag til elementene i rammene. Også den beste delen av Framer X er at alle kan mestre det ved å prøve det på noen få prototyper.

Denne artikkelen ble opprinnelig publisert i utgave 325 i Net, verdens bestselgende magasin for webdesignere og utviklere. Kjøp utgave 325. eller abonnere til netto.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — Lær hvordan du bygger bedre JavaScript på Generatejs (Bilde Kreditt: Fremtid / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Bli med oss i april 2020 med vår utvalg av JavaScript Superstars på Generatejs - konferansen som hjelper deg med å bygge bedre JavaScript. Bestill nå på. GenerateConf.com.

Les mer:

Hvordan skille seg ut og bli ansatt som en UX-designer
De 20 UX-tipsene du trenger å vite
22 Best Ui Design Tools

Bruk Frame X til å bygge interaktive prototyper

Slik lager du en app med Frame X

01. Bygg en søkefelt

02. Opprett en innholdsstabel

03. Lag en vertikal stabel

04. Opprett en ny side

05. Innfør interaksjoner

06. Legg til en lagringsknapp

hvordan - Mest populære artikler

Gjennomfør gratis og raske brukertest med brukerlook

Steg-for-trinn: Hvordan etterligne oljemaling i Corel Painter

Master Versjonskontroll for eksterne lag

Hvordan male et slott med SketchUp

Bygg en kompleks 3D-sci-fi-scene i blender

Opprett et enkelt fargediagram

Hvordan designe isometrisk typografi

Hvordan lage et vintermiljø

Kategorier