Vad du bygger
Du flyttar en färdig design från skissverktyget Figma direkt in i Framer och förvandlar den till en fungerande, publicerad hemsida. Det som nyss bara var en platt ritning blir nu en riktig webbsida med fungerande kod i bakgrunden, redo att visas för världen.
Innan du börjar
- Ett konto på Figma där du eller en designer har ritat upp hemsidan.
- Ett konto på Framer där vi bygger och publicerar själva webbsidan.
- Insticksprogrammet Framer to Figma installerat i ditt Figma-konto.
Steg för steg
-
Öppna insticksprogrammet i Figma – Klicka på resurssymbolen (ikonen med tre fyrkanter och ett plus) i det övre menyfältet i Figma. Klicka på fliken "Plugins", sök efter "Framer to Figma" och klicka på "Run".
-
Markera din design – Klicka på den ram (Frame) i Figma som innehåller designen för din hemsida så att hela sektionen blir markerad.
-
Kopiera elementen – I rutan för insticksprogrammet som nu har öppnats på skärmen, klicka på den blå knappen "Copy to Framer". Programmet analyserar nu din design och sparar den i ditt tillfälliga urklipp.
-
Skapa ett nytt projekt i Framer – Gå till din startsida i Framer i webbläsaren. Klicka på den svarta knappen "New" uppe i det högra hörnet för att skapa ett helt tomt projekt.
-
Klistra in din design – Klicka en gång på den tomma arbetsytan i Framer. Tryck på det vanliga kortkommandot för att klistra in på ditt tangentbord.
Använd Ctrl + V på Windows eller Cmd + V på Mac.
- Justera och publicera – Kontrollera att alla texter och bilder hamnade där de ska. När du är nöjd klickar du på den blå knappen "Publish" längst upp i det högra hörnet och sedan på "Update" för att göra din hemsida levande på internet.
Byggloftets tips
- Tänk på namngivningen: Om du har döpt dina lager till prydliga namn i Figma blir det betydligt lättare att hitta rätt i Framer efteråt. Vår maskot Bygge brukar hälsa att fem minuters städning i Figma sparar en timmes letande i Framer.
- Använd Auto Layout: Om du använder Figmas funktion Auto Layout på dina textboxar och knappar innan du kopierar, kommer Framer att förstå exakt hur sidan ska anpassa sig efter olika skärmstorlekar.
Vanliga fel
- "Bilderna saknas när jag klistrar in i Framer": Du har troligen kopierat för snabbt. Vänta tills sifferindikatorn i Figma-pluginet har laddat klart till 100 procent innan du stänger fönstret och växlar över till Framer.
- "Typsnittet ser helt annorlunda ut": Framer saknar tillgång till det typsnitt du använde i Figma. Klicka på texten i Framer, gå till panelen till höger och välj ett matchande Google-typsnitt, eller ladda upp din egen typsnittsfil (.otf eller .ttf).
Du är klar när…
Du ser din importerade Figma-design live på en riktig webbadress och kan skrolla på sidan i din mobiltelefon.
