Använd Framer X för att bygga interaktiva prototyper

Sep 11, 2025

Hur

(Bildkredit: Framer)

Som designers är det alltid frågan om vilka prototypverktyg du ska använda för ditt projekt. Det finns massor av programvara där ute för uppgifter som wireframing (se vår topp WireFraming Tools och utmärkt Webbplatsbyggare ), prototyper och byggande komplexa interaktioner; Men väldigt få verktyg kan hantera alla dessa. Framer är ett verktyg som har alla dessa funktioner och kraftigt påskyndar processen med att skapa små animationer och interaktioner.

Den senaste iterationen, Framer X , använder nu reagering och javascript istället för att använda kaffe för att utveckla mikro-interaktioner och animering. Detta hjälper till att leverera snabbare lasttider och bättre prestanda. Dessutom innebär användningen av reaktionskomponenter att användarna har mer utrymme att lägga till och utöka inklusive inbäddning av mediaspelare, realtidsdata och grafer i prototyper.

Testning är en kärndel av prototypbyggnadsprocessen och medan Framer X är bra för att skapa interaktiva prototyper behöver det hjälpa till att se hur bra sina skapelser är. Kolla in vår användartestning Posta för några av de bästa verktygen för att komplettera Framer och hjälpa till att bygga verkliga prototyper, och se till att du använder det bästa webbhotell service för dig.

Hur man skapar en app med Framer X

För att fullt ut uppskatta kraften i Framer X kommer vi att skapa ett verkligt projekt: ett enkelt matlagningsreceptansökan med något innehåll och media (tillgångar som säkerhetskopieras på tillförlitlig molnlagring ). Det första att bygga är hemsidan. Vi ska hålla saker enkelt med följande element:

Standard sökfält för att hitta recept
Senaste aktiviteten för att visa de senaste recepten som ses
Receptkort som visar saker som de mest populära recepten
Skapa en detaljerad bild av receptet med video- och delningsalternativ

För att komma igång måste du skapa en ny ram (ett ämne) genom att klicka på + -ikonen på vänster Navbar. Välj någon skyltstil från en lista med vanliga iPhone / Android-mallar på höger fält. Nu är du redo att gå.

01. Bygg en sökfält

Låt oss börja med att bygga sökfältet. I stället för att skapa en rektangel och lägga till en sökikon som vi normalt skulle vi faktiskt kan använda snabba återanvändbara komponenter i Framer X, de kallas paket. Det finns tusentals paket som finns i den vänstra navigeringsfältet under butik. Klicka på Store, sök efter Android Kit och exempel kit och installera sedan dem.

Dessa paket innehåller element som kort, knappar, tangentbord, skjutreglage, ingångar och navigeringsmeny. När du har installerat dessa paket kan du använda elementen från menyn Komponenter till vänster.

Hitta de element du vill ha genom att söka i filtret - i det här fallet en sökfält, som finns under exempel kit. Dra och släpp det bara på ramen. Nu kan du ändra egenskaper som platshållare, teckensnittstorlek och färg med hjälp av högerfältet.

02. Skapa en innehållstack

För det här senaste aktivitetsblocket, lägg först till texten "senaste aktivitet", vilket är ganska enkelt. Nu kan vi använda en ny egenskap av Framer X som heter Stacks. Detta kan göras genom att klicka på + ikonen och välja Stack S från menyn. Efter att ha valt stacken, dra och släpp ett område på 600 x 300 på arbetsramen för att skapa en stapel. Denna stapel kommer att visas som blå.

Låt oss nu gå tillbaka till komponentersektionen och under Android Kit, söka efter Card-5-elementet och dra det i den stack som vi bara skapat. Duplicera dessa kort två gånger och se till att alla tre korten är i stapeln.

Så länge de är i stapeln, kan dessa tre kort enkelt omorganisera utan att du behöver oroa dig för avståndet. Om du vill öka avståndet mellan korten kan du öka bredden på hela stacken. Så enkelt är det. Du kan också anpassa dessa kort genom att ändra namnet på titeln och bakgrunden enligt din smak.

Nu när vi har skapat en stapel, låt oss göra det rullbart. Flytta den ut ur ramen / artboard. Klicka på knappen + från vänster nav och klicka på rullningsalternativet. Precis som vi skapade ett område med stapeln, skapa ett rullbart område på ramen / artboard som är samma storlek som stacken.

Ändra nu Rullens egendom i högerfältet genom att ändra riktningspilarna för att göra det till en horisontell bläddra. När vår Scroll Container är skapad behöver vi innehåll för det, som serveras av den stack som vi tidigare skapat. Så helt enkelt ansluta rullbehållaren till stapeln med pilprovningen på rullbehållaren. Det fungerar genom att dra muspekaren till stapeln.

03. Skapa en vertikal stapel

Interactive Framer X - 01 — Framer X låter dig introducera horisontella och vertikala rullbara staplar (Bildkredit: Vamsi Batchu)

För receptkorten måste du följa en metod som liknar steg 2, men istället för att skapa en horisontell bläddring, skapar du en liknande vertikal som i huvudsak är en lista över de mest populära recepten med miniatyrer. För denna övning har varje kort för ett recept fyra element - en thumbnail om bild, betyg, namn på receptet och tiden som behövs för att förbereda det.

Oroa dig inte för detaljerna i varje kort. De kan anpassas utifrån din design smak. Följ samma metod för att använda ett kort från komponenterna, duplicera dem och lägga till dem alla till en stapel med vertikal bläddring.

04. Skapa en ny sida

Låt oss nu skapa en ny sida för att gå in i detaljerna i ett visst recept. Till exempel, låt oss ta fallet med det andra kortet här: fransk pasta. För att skapa den här nya sidan, skapa en ny ram / artong och presentera de element som vi behöver för att visa mer information om det franska pasta receptet. Den här nya sidan kan brytas ner i en video, en titel, betyg, den tid som behövs för att göra det och några åtgärdsknappar, till exempel Spara till lista och dela med sociala medier.

För att lägga till video, gå till affären och installera YouTube-paketet, vilket gör att du enkelt kan lägga till videoklipp till din prototyp. Gå nu till din komponenter och dra och släpp YouTube-elementet från under YouTube-komponenten i ramen.

Justera miniatyrens bredd så att den passar ramens bredd. I rutan Rätt egenskaper kan du infoga webbadressen för den video du vill spela i prototypen. Om du vill, finns det också ett sätt att autoplay-videoklipp via kryssrutan i panelen Egenskaper.

Nedan den här videon kan du lägga till titeln, betyg och olika ikoner. För att lägga till ikoner för vårt exempel använde jag komponenten från ikongeneratorbutiken. Det är en enkel process: helt enkelt dra och släpp basikonen på ramen och sedan ändra egenskapen som heter ikonen på höger sida för "hjärta" och "dela". Detta kommer att ändra basikonen i respektive spara och dela ikoner. Deras färger kan också enkelt ändras med rätt panel.

För att göra saker lätt för besökare kan du lägga till en sektion som heter ingredienser, som skulle lista alla ingredienser som behövs för vårt recept - i det här fallet franska pasta.

05. Introducera interaktioner

Interactive Framer X - 02 — Lägg till interaktioner på knappar och element för att göra dem mer engagerande (Bildkredit: Vamsi Batchu)

Låt oss nu göra vår design mer engagerande genom att lägga till interaktioner för en knapp. Ideellt, när du klickar på ikonen Dela, bör du bli uppmanad med en skärm för att dela receptet över olika sociala medier. Låt oss bygga det med en ny ram.

Se till att bredden och höjden på den här ramen är samma bredd och höjd som de andra två ramarna som vi skapade. Tanken är att den här nya delskärmen ska glida upp och byt ut den nuvarande skärmen när ikonen Dela Clicked.

För att göra skärmen distinkt, låt oss lägga till lite färg på den och fylla den med sociala medierikoner som Facebook, Instagram, WhatsApp och e-post. Den här delskärmen ska också ha en X-ikon som läggs till den, vilket när du klickade skulle ta tillbaka den till det ursprungliga tillståndet.

Se till att alla ikoner är ordnade inuti en stapel. Så snart X-ikonen ingår är nästa steg att länka den här ramen så att den dyker upp när du klickar på ikonen Dela.

För att göra detta, välj ramen som innehåller ikonen Dela. I höger sida finns en fastighet som heter Link. När du klickar på det, kommer programgränssnittet att ge dig en pil som du kan dra till den nya aktiefrömmen som vi skapade. Detta kommer att skapa en länk i bakgrunden.

När du väljer ikonen Dela, kommer du att observera nya egenskaper i den högra panelen under länk, som är mål, övergång och riktning. Var och en av dessa egenskaper gör att du kan ändra elementen, till exempel typ av övergångar och den riktning i vilken skärmen ska dyka upp, etc.

Du kan testa om prototypen fungerar eller inte genom att klicka på spelikonen som finns i det övre högra hörnet av gränssnittet. På samma sätt måste du länka delskärmen till videoklippet så att när användaren klickar på X-ikonen, återgår den till föregående skärm.

Detta kan uppnås med hjälp av en liknande länkegenskap och lägger till målet som videoskärm. Om du vill ha en gå till att lägga till lite variation kan du göra riktningen till vänster i stället för toppen och använd sedan spelkommandot för att testa om interaktionen fungerar eller inte.

06. Lägg till en spara-knapp

Låt oss nu lägga till en överlagringsinteraktion till spara ikonen. Här är vårt mål att när en besökare klickar den hjärtformade ikonen, bör det finnas ett popup-fönster som frågar om du vill spara receptet till en anpassad lista.

Låt oss börja med att skapa en ny ram som kallas sparade listor. Precis som du gjorde med den föregående, se till att den här ramen har samma bredd, men den här gången måste du minska höjden eftersom den kommer att visas som en överlagring när den klickas. För styling av den sparade listorna, lägg till en rubrik, en textinmatning för att ange namnet på listan och en knapp som är en CTA för att spara den.

För att länka, välj den hjärtformade ikonen på videoramen och lägg till en länk till den sparade listorna. Nu, istället för att övergångsfastigheten är ett tryck, gör det till ett överlag. Justera den till 80% och testa den med PLAY-knappen. Ändra tills du är nöjd med överlägget. Länk X-ikonen på ikonen Sparade listor Tillbaka till videosidan.

Så här använder du Framer X för att enkelt skapa handlingsbara interaktiva prototyper. Det finns också avancerade verktyg du kan använda, liksom att lägga till reageringskodande snippets till elementen i ramarna. Den bästa delen av Framer X är också att vem som helst kan behärska den genom att prova det på några prototyper.

Denna artikel publicerades ursprungligen i utgåva 325 av netto, världens bästsäljande tidning för webbdesigners och utvecklare. Köp utgåva 325 eller prenumerera till nätet.

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 dig hur du bygger bättre javascript på Generatejs (Bildkredit: Framtida / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Gå med i april 2020 med vår sortiment av JavaScript Superstars på Generatejs - Konferensen hjälper dig att bygga bättre JavaScript. Boka nu på generateconf.com

Läs mer:

Hur man sticker ut och blir anställd som en UX-designer
De 20 UX-tipsen du behöver veta
22 bästa UI-designverktyg

Använd Framer X för att bygga interaktiva prototyper

Hur man skapar en app med Framer X

01. Bygg en sökfält

02. Skapa en innehållstack

03. Skapa en vertikal stapel

04. Skapa en ny sida

05. Introducera interaktioner

06. Lägg till en spara-knapp

Hur - Mest populära artiklar

Gör fordonets animationer med iClone 7

Hur man utformar en ChatBot-upplevelse

Hur man målar övertygande reflektioner

Hur man förbättrar prestanda för e-handelsplatser

Hur man skapar manga med en Wild West Twist

Använd partiklar för att skapa en 3D-stänk

Skapa enkla illustrationer för webben

Skapa en spelmiljö i Unreal Engine 4

Kategorier