Brug Framer X til at opbygge interaktive prototyper

Sep 11, 2025

hvordan

(Billedkredit: Framer)

Som designere er der altid spørgsmålet om, hvilke prototypingsværktøjer du skal bruge til dit projekt. Der er masser af software derude for opgaver som wireframing (se vores top WireFraming Tools. og fremragende Website Builders. ), prototyping og bygning af komplekse interaktioner; Men meget få værktøjer er i stand til at håndtere alle disse. Framer er et værktøj, der har alle disse funktioner og stærkt fremskynder processen med at skabe små animationer og interaktioner.

Den seneste iteration, Framer X. , bruger nu reagere og javascript i stedet for at bruge kaffeeskriv til udvikling af mikrointeraktioner og animation. Dette hjælper med at levere hurtigere belastningstider og bedre ydeevne. Plus betyder brugen af reaktionskomponenter, at brugerne har mere plads til at tilføje og udvide, herunder indlejring af medieafspillere, realtidsdata og grafer inde i prototyper.

Testning er en central del af prototype bygningsprocessen, og mens Framer X er fantastisk til at skabe interaktive prototyper, har det brug for hjælp til at se, hvor godt dens kreationer er. Tjek vores brugerprøvning Indlæg for nogle af de bedste værktøjer til at supplere Framer og hjælpe med at opbygge Real-World Prototypes, og sørg for at du bruger det bedste Web Hosting. service til dig.

Sådan oprettes en app med Framer X

For fuldt ud at sætte pris på magten i Framer X skal vi oprette et real-life-projekt: En simpel madlavningsopskriftapplikation med noget indhold og medier (aktiver, der understøttes i pålidelige Sky lagring ). Den første ting at bygge er hjemmesiden. Vi skal holde tingene enkle med følgende elementer:

Standard søgelinje for at finde opskrifter
Seneste aktivitet for at vise de seneste opskrifter, der ses
Opskriftskort viser ting som de mest populære opskrifter
Oprettelse af et detaljeret billede af opskriften med video- og delingsmuligheder

For at komme i gang skal du oprette en ny ramme (et tegnebræt) ved at klikke på + -ikonet på venstre NAVBAR. Vælg ethvert Artboard-stil fra en liste over standard iPhone / Android-skabeloner på højre bjælke. Nu er du klar til at gå.

01. Byg en søgelinje

Lad os begynde med at opbygge søgelinjen. I stedet for at oprette et rektangel og tilføje et søgeikon som vi normalt ville vi faktisk bruge hurtige genanvendelige komponenter i Framer X, disse kaldes pakker. Der er tusindvis af pakker, der findes i venstre navigationsbjælke under butikken. Klik på Store, søg efter Android Kit og eksempel kit og installer dem derefter.

Disse pakker indeholder elementer som kort, knapper, tastaturer, skydere, input og navigationsmenupunkter. Når du har installeret disse pakker, kan du bruge elementerne fra komponenters menuen til venstre.

Find de elementer, du ønsker, ved at søge i filteret - i dette tilfælde en søgelinje, som findes under eksempel kit. Du skal blot trække og slip det på rammen. Nu kan du ændre egenskaber som stedholdertekst, skriftstørrelse og farve ved hjælp af den rigtige bjælke.

02. Opret en indholdsstak

For denne seneste aktivitetsblok skal du først tilføje teksten 'Seneste aktivitet', som er ret ligetil. Nu kan vi bruge en ny funktion af Framer X kaldet Stacks. Dette kan gøres ved at klikke på + ikonet og vælge Stack S fra menuen. Når du har valgt stakken, skal du trække og slippe et areal på 600 x 300 på arbejdsrammen for at oprette en stak. Denne stak vil blive vist som blå.

Lad os nu gå tilbage til komponenternes afdeling og under Android Kit, søg efter kort-5-elementet og træk det i stakken, vi netop har oprettet. Duplikere disse kort to gange og sørg for, at alle de tre kort er i stakken.

Så længe de er i stakken, kan disse tre kort let omarrangeres uden at du behøver at bekymre sig om afstanden. Hvis du vil øge afstanden mellem kortene, kan du øge bredden af hele stakken. Det er så simpelt som det. Du kan også personliggøre disse kort ved at ændre navnet på titel og baggrund efter din smag.

Nu hvor vi har oprettet en stak, lad os få det til at rulle. Flyt det ud af rammen / tavlen. Klik på + ikonet fra venstre NAV, og klik på scroll-indstillingen. Ligesom vi skabte et område med stakken, lav et rullebart område på rammen / tystkortet, der er den samme størrelse som stakken.

Nu ændre rolens egenskab i højre stang ved at ændre retningspilene for at gøre det til en vandret rulle. Efter vores scrollbeholder er oprettet, har vi brug for indhold til det, som serveres af den stack, vi tidligere har oprettet. Så skal du blot forbinde scrollbeholderen til stakken ved hjælp af pilprompten på scrollbeholderen. Det virker ved at trække musemarkøren til stakken.

03. Opret en lodret stak

Interactive Framer X - 01 — Framer X giver dig mulighed for at introducere vandrette og lodrette scrollable stakke (Billedkredit: Vamsi batchu)

For opskriftskort skal du følge en metode svarende til trin 2, men i stedet for at skabe en vandret rulle af kort, vil du skabe en lignende lodret, der i det væsentlige er en liste over de mest populære opskrifter med miniaturebilleder. Til denne øvelse har hvert kort til en opskrift fire elementer - et billedminumbnail, rating, navnet på opskriften og tiden, der er nødvendig for at forberede den.

Du skal ikke bekymre dig om detaljerne for hvert kort. De kan tilpasses ud fra din design smag. Følg den samme metode til at bruge et kort fra komponenterne, duplikerer dem og tilføj dem alle til en stak med lodret rulle.

04. Opret en ny side

Lad os nu oprette en ny side for at gå ind i detaljerne i en bestemt opskrift. For eksempel, lad os tage sagen om det andet kort her: Fransk pasta. For at oprette denne nye side skal du oprette en ny ramme / tegnebræt og introducere de elementer, vi har brug for for at vise flere detaljer om den franske pastaopskrift. Denne nye side kan opdeles i en video, en titel, den rating, den tid, der er nødvendig for at gøre det og et par handlingsknapper, f.eks. Gem på listen og deler til sociale medier.

For at tilføje video skal du gå til butikken og installere YouTube-pakken, som gør det nemt at tilføje videoer til din prototype. Gå nu til dit komponentpanel og træk-og-slip YouTube-elementet fra under YouTube-komponenten i rammen.

Juster miniaturebredden, så den passer til rammens bredde. I den rigtige egenskabsrude kan du indsætte webadressen til den video, du vil spille i prototypen. Hvis du vil, er der også en måde at autoplay videoer gennem afkrydsningsfeltet i panelet Egenskaber.

Under denne video kan du tilføje titlen, rating og forskellige ikoner. For at tilføje ikoner til vores eksempel brugte jeg komponenten fra ikongeneratorbutikken. Det er en nem proces: Du skal blot trække og slip baseikonet på rammen og derefter ændre den egenskab, der hedder ikonet på højre side af panelet til 'Heart' og 'Del'. Dette ændrer basisikonerne i henholdsvis GAVE- og Del-ikonerne. Deres farver kan også nemt ændres ved hjælp af højre panel.

For at gøre tingene nemme for besøgende, kan du tilføje et afsnit kaldet ingredienser, hvilket ville vise alle de nødvendige ingredienser til vores opskrift - i dette tilfælde fransk pasta.

05. Indfør interaktioner

Interactive Framer X - 02 — Tilføj interaktioner til knapper og elementer for at gøre dem mere engagerende (Billedkredit: Vamsi batchu)

Lad os nu gøre vores design mere engagerende ved at tilføje interaktioner for en knap. Ideelt set, når du klikker på delikonet, skal du blive bedt om en skærm for at dele opskriften på tværs af forskellige sociale mediekanaler. Lad os bygge det ved hjælp af en ny ramme.

Sørg for, at bredden og højden af denne ramme er den samme bredde og højde som de to andre rammer, vi oprettede. Ideen er for denne nye aktie skærm at glide op og udskifte den nuværende skærm, når delikonet er klikket.

For at hjælpe med at gøre skærmen særskilt, lad os tilføje en farve til den og udfylde den med sociale medier ikoner som Facebook, Instagram, WhatsApp og Email. Denne aktie skærm skal også have et X-ikon tilføjet til det, hvilket, når klikket vil bringe det tilbage til den oprindelige tilstand.

Sørg for, at alle ikonerne er arrangeret inde i en stak. Så snart X-ikonet er inkluderet, er det næste trin at forbinde denne ramme, så den dukker op, når du klikker på ACTE-ikonet.

For at gøre dette skal du vælge den ramme, der indeholder delikonet. I højre side er der en ejendom kaldet link. Når du har klikket på det, vil applikationsgrænsefladen give dig en pil, som du kan trække til den nye aktie ramme, vi oprettede. Dette vil skabe et link i baggrunden.

Nu, når du vælger delikonet, vil du observere nye egenskaber i højre sidepanel under Link, som er mål, overgang og retning. Hver af disse egenskaber gør det muligt at ændre elementerne, såsom type overgange og den retning, hvor skærmen skal dukke op osv.

Du kan teste om prototypen fungerer eller ej ved at klikke på afspilningsikonet, der findes øverst til højre på grænsefladen. Tilsvarende skal du linke aktieskærmen til videoskærmen, så når brugeren klikker på X-ikonet, vender det tilbage til forrige skærmbillede.

Dette kan opnås ved hjælp af en lignende linkegenskab og tilføjer målet som videoskærmen. Hvis du vil have en tur til at tilføje en smule variation, kan du gøre retningen til venstre i stedet for top og derefter bruge afspilningskommandoen til at teste om samspillet fungerer eller ej.

06. Tilføj en Gem-knap

Lad os nu tilføje en overlejringsinteraktion til ikonet Gem. Her er vores mål, at når en besøgende klikker på det hjerteformede ikon, skal der være et pop op-vindue, der spørger, om du vil gemme opskriften til en brugerdefineret liste.

Lad os begynde med at oprette en ny ramme kaldet gemte lister. Ligesom du gjorde med den forrige, skal du sørge for at denne ramme har samme bredde, men denne gang skal du reducere sin højde, fordi den vises som et overlejring, når den klikkes. Til styling af den gemte listeramme, tilføj en header, en tekstindtastning for at indtaste navnet på listen og en knap, der er en CTA for at gemme den.

For at linke skal du vælge det hjerteformede ikon på videorammen og tilføje et link til den gemte listeramme. Nu, i stedet for at overgangsegenskaben er et skub, gør det til et overlejring. Juster det til 80% og test det derefter ved hjælp af afspilningsknappen. Rediger, indtil du er tilfreds med overlejringen. Link X-ikonet på ikonet Gemte lister tilbage til videosiden.

Sådan bruger du Framer X til nemt at skabe effektive interaktive prototyper. Der er også avancerede værktøjer, du kan bruge, samt tilsætning af reagere kodende uddrag til elementerne i rammerne. Også den bedste del af Framer X er, at nogen kan mestre det ved at prøve det ud på et par prototyper.

Denne artikel blev oprindeligt offentliggjort i udstedelse 325 af Net, verdens bedst sælgende magasin for webdesignere og udviklere. Køb problem 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 at bygge bedre JavaScript på EMERDJS (Billedkredit: Fremtid / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Deltag i USA i april 2020 med vores lineup af JavaScript Superstars på Embrudejs - Konferencen hjælper dig med at opbygge bedre JavaScript. Book nu AT. generateconf.com

Læs mere:

Sådan skiller du ud og få ansat som en UX-designer
De 20 ux tips du har brug for at vide
22 bedste UI designværktøjer

Brug Framer X til at opbygge interaktive prototyper

Sådan oprettes en app med Framer X

01. Byg en søgelinje

02. Opret en indholdsstak

03. Opret en lodret stak

04. Opret en ny side

05. Indfør interaktioner

06. Tilføj en Gem-knap

hvordan - Mest populære artikler

Adobe XD: Sådan bruges den auto-animerede funktion

Cinema 4D Tutorials: 13 af de bedste

Sådan tegner du en person

Tackle portræt maleri med olier

Mal på et 3D mesh med Zbrushcores polypaint værktøj

Opret portræt kunst i Corel Painter

Skær dine stilleben maleri færdigheder

Sådan tegner du Harley Quinn

Kategorier