Zo zet je een Figma-bestand op dat snel bouwt in Framer

Zet je Figma-bestand zo op. Maak het desktopframe 1200 breed. Zet auto layout op elke container, ook op het buitenste frame. Bepaal per element of het fill of fixed wordt zolang je nog in Figma zit. Doe je dat, dan staat een landing page in een middag in Framer. Sla je het over, dan bouw je de halve pagina met de hand na, en dat is het verschil tussen een dag en drie dagen werk.

Ontwerp op de breedtes die Framer echt gebruikt

Het canvas van Framer komt met drie breakpoints, en op de productpagina's staan de tabs Desktop 1200 en Tablet 810. De gepubliceerde code op framer.com komt daarmee overeen. Responsive images worden geserveerd met regels voor min-width 1200px, voor 810px tot 1199.98px en voor max-width 809.98px. Bouw dus een desktopframe van 1200 breed. Voeg een tabletframe van 810 toe als de layout daar echt verandert. Voeg een telefoonframe toe rond 390. Ontwerp je op 1440 en hoop je er het beste van, dan houd je een hero over die alleen op jouw eigen scherm klopt.

Auto layout op alles, ook op het buitenste frame

De academy-les van Framer zegt dat auto layout, hiërarchie en fill-eigenschappen bij een import meekomen. Daar draait alles om. Een sectie die met auto layout is gebouwd, landt in Framer als een stack die al weet hoe hij moet meeschalen. Een sectie waarvan je de blokken met de hand op hun plek hebt gesleept, landt als losse lagen die je opnieuw moet bouwen. Wikkel elke sectie in een verticale auto layout. Wikkel elke rij in een horizontale. Gebruik gaps in plaats van dingen uit elkaar duwen met lege ruimte. Elke laag buiten een auto layout-frame is een laag die je twee keer bouwt.

Kies fill of fixed voordat je overdraagt

Zet in Figma de sectiewrapper op fill container. Geef de content wrapper daarbinnen een vaste maximale breedte, bijvoorbeeld 1200 of 1140. Zet cards in een rij op fill, zodat ze de breedte netjes verdelen. Dat vertaalt zich één op één naar Framer, waar je Width op 100% of 1fr zet en Max Width op de content wrapper legt. In zijn troubleshooting-artikel noemt Framer een vaste breedte of een te grote Max Width de meest voorkomende reden dat een pagina op de Phone-breakpoint het scherm niet vult. Elk vast getal dat je in Figma laat staan, is een bug die je doorschuift.

Benoem je tekststijlen en hergebruik ze

Geef je typografie namen en gebruik ze opnieuw: H1, H2, H3, body large, body, caption, eyebrow. In Framer bouw je die één keer in het Assets-paneel onder Styles, en pas je ze toe vanuit het rechterpaneel onder Text en Styles. Elke tekststijl in Framer kan eigen formaten per breakpoint dragen voor Desktop, Tablet en Mobile, inclusief lettergrootte, regelhoogte, letterspatiëring en alinea-afstand. Staan er in je Figma-bestand veertien net iets andere kopformaten, dan bouw je veertien tekststijlen of je leeft met typografie die op mobiel niet klopt.

Check de fontlicentie al bij het moodboard

Framer levert Google Fonts en Fontshare mee, en laat je eigen bestanden uploaden via het tabblad Custom van de fontkiezer. Framer zegt er meteen bij dat je de juiste licentie moet hebben voordat je een font naar een website uploadt. Een desktoplicentie dekt een mockup in Figma. Een live pagina dekt hij niet. Regel dit terwijl je de letter kiest, en niet de avond voor de lancering, want een ander font verandert elke regelafbreking op de pagina.

Exporteer beelden op de maat waarop ze getoond worden

Framer comprimeert beelden aan de edge naar WebP en AVIF en schaalt ze per apparaat, wat op de performancepagina staat beschreven. Dat regelt de levering. Het maakt geen screenshot ongedaan die je op 4000 pixels breed hebt geplakt, en het maakt van een PNG-logo geen SVG. Exporteer rasterbeelden op ongeveer twee keer hun weergavegrootte. Gebruik SVG voor logo's en icoontjes. Schrijf de alt-tekst meteen, zolang de inhoud nog vers in je hoofd zit.

De checklist voor de overdracht van je Figma-bestand

Loop zeven checks langs voordat je het Figma-bestand af noemt. Het desktopframe is 1200 breed. Elke sectie zit in een auto layout-frame. Sectiewrappers staan op fill en content wrappers dragen de maximale breedte. Typografie loopt op benoemde stijlen, zonder losse formaten. Fonts hebben een weblicentie en de bestanden staan klaar om te uploaden. Beelden zijn op verstandige formaten geëxporteerd, met SVG voor alles wat vector is. Laagnamen lezen zoals je ze in de lagenlijst van Framer wilt zien, want die namen komen precies zo mee als jij ze achterlaat.