Zo importeer je een Figma-design in Framer

Wil je een Figma-design in Framer importeren, installeer dan de gratis plugin Figma to HTML with Framer, selecteer de frames die je nodig hebt en plak ze in je Framer-project. Framer houdt je lagen, groepen en structuur intact, dus je komt terecht op een echt webcanvas in plaats van in een statische code-export. Alles na het plakken is opruimen, en juist over dat opruimen waarschuwt niemand je.

Zo importeer je een Figma-design in Framer, stap voor stap

Installeer Figma to HTML with Framer via de Figma Community. De plugin is gratis en Framer noemt ruim 600.000 gebruikers, dus dit is de officiële route en geen brug van een derde partij. Selecteer de lagen of frames die je wilt verplaatsen en start de plugin. Er verschijnt een melding met het aantal gekopieerde lagen. Ga naar je Framer-project, klik op het canvas en plak. Framer loopt op zijn eigen Figma to HTML-pagina dezelfde acht stappen af: plugin installeren, je Figma-designs kopiëren, plakken in Framer, verder werken, responsive maken, effecten en animaties toevoegen, pagina's en links toevoegen, publiceren.

Plak één sectie tegelijk

Selecteer niet je hele paginaframe om alles in één keer te verplaatsen. Een landing page bevat honderden lagen, en als er iets misgaat weet je niet welk onderdeel het veroorzaakte. Plak de hero, fix de hero. Plak de logostrip, fix de logostrip. Werk de pagina van boven naar beneden door, in dezelfde volgorde als een bezoeker scrolt. Framer zegt zelf dat sommige complexe Figma-structuren opgeruimd moeten worden voor het web, dus geef jezelf kleine stukken om op te ruimen.

Fonts fix je als eerste

De helpdocumentatie van Framer is hier duidelijk over. Bij een import uit Figma wordt een custom font dat Framer niet heeft vervangen door het standaardfont van Framer. Je hero staat opeens in een standaard schreefloze letter, elke regellengte verandert en je spacing schuift mee. Regel je typografie dus voordat je aan de layout begint. Voeg een tekstlaag toe, open de fontkiezer in het rechterpaneel, ga naar het tabblad Custom, klik op Upload Fonts en upload je bestand. Framer raadt .woff2 aan voor de laadtijd. Selecteer daarna de geïmporteerde tekstlagen en pas het font opnieuw toe. Kijk eerst in de ingebouwde bibliotheek, want Framer levert Google Fonts en Fontshare mee en de kans is groot dat jouw letter er al tussen staat.

Wat wel meekomt en wat niet

Lagen, groepen en hiërarchie komen mee. Layout-instellingen ook, en de academy-les van Framer bevestigt dat auto layout, hiërarchie en fill-eigenschappen automatisch worden overgenomen. Wat niet meekomt, is alles wat Figma nooit had: breakpoints, hover states, scroll-effecten of componenten zoals Framer die kent. In zijn eigen FAQ zegt Framer dat je statische onderdelen na de import moet vervangen door echte componenten. Neem dat serieus. Bouw je navigatie, je button en je card als Framer-componenten, in plaats van veertig geplakte kopieën die je veertig keer moet aanpassen.

Maak van geplakte frames stacks die meeschalen

Een geplakte sectie met vaste pixelbreedtes loopt op een telefoon over de rand. Framer noemt dit in zijn troubleshooting-artikel de meest voorkomende reden dat een pagina op de Phone-breakpoint het scherm niet vult: een element dat breder is dan de mobiele viewport, meestal een vaste breedte zoals 321px of een te grote Max Width. Loop sectie voor sectie langs, selecteer de containers en zet in het Size-gedeelte van het rechterpaneel de Width van een vast getal naar 100% of 1fr. Houd Max Width alleen op de content wrapper, zodat je tekstkolom leesbaar blijft op een breed scherm. Doe dit eerst op Desktop, want Desktop-waarden stromen door naar de kleinere breakpoints.

Voeg daarna toe waar Framer echt voor is

Dit is de winst van Framer gebruiken in plaats van code exporteren. Zet je drie breakpoints. Geef buttons hover- en tapstates. Voeg scroll reveals toe aan secties. Maak componenten van blokken die terugkomen, zodat één aanpassing elke instantie bijwerkt. Bouw je tekststijlen in het Assets-paneel onder Styles, met formaten per breakpoint voor Desktop, Tablet en Mobile, zodat je typografie meeschaalt zonder dat je losse lagen aanraakt. Niets hiervan bestond in het Figma-bestand. Dit is het deel dat van een mockup een pagina maakt.

De volgorde die wij aanhouden

Eerst fonts, dan kleuren en tekststijlen. Daarna sectie voor sectie van boven naar beneden, waarbij je vaste breedtes onderweg omzet naar fill. Bouw componenten voor alles wat terugkomt. Zet daarna je breakpoints, van Desktop naar Tablet naar Phone, en voeg dan pas interacties toe. Metadata en links doe je als laatste, als de structuur stil is gaan liggen. Met die volgorde staat één landing page in een dag. Door elkaar werken kost drie dagen, omdat elke fix de vorige weer ongedaan maakt.