So baust du eine Figma-Datei, die sich schnell in Framer umsetzen lässt

Bau deine Figma-Datei so auf. Mach den Desktop-Frame 1200 breit. Leg Auto Layout auf jeden Container, den äußeren Frame eingeschlossen. Entscheide schon in Figma für jedes Element, ob es Fill oder Fixed ist. Dann wandert eine Landing Page an einem Nachmittag nach Framer. Lässt du das weg, baust du die halbe Seite von Hand nach, und das ist der Unterschied zwischen einem Tag und drei Tagen Arbeit.

Designe in den Breiten, die Framer wirklich nutzt

Framers Canvas bringt drei Breakpoints mit, und auf den Produktseiten stehen die Tabs Desktop 1200 und Tablet 810. Der veröffentlichte Code auf framer.com passt dazu. Responsive Bilder werden mit Regeln für min-width 1200px, für 810px bis 1199.98px und für max-width 809.98px ausgeliefert. Bau also einen Desktop-Frame mit 1200 Breite. Häng einen 810 breiten Tablet-Frame dran, wenn sich das Layout dort wirklich ändert. Häng einen Phone-Frame bei etwa 390 dran. Designst du auf 1440 und hoffst das Beste, hast du am Ende einen Hero, der nur auf deinem eigenen Monitor stimmt.

Auto Layout auf alles, auch auf den äußeren Frame

Framers Academy-Lektion sagt, dass Auto Layout, Hierarchie und Fill-Eigenschaften beim Import mitkommen. Das ist der ganze Trick. Eine Sektion mit Auto Layout landet in Framer als Stack, der schon weiß, wie er sich anpasst. Eine Sektion, bei der du Boxen an ihren Platz gezogen hast, landet als lose Ebenen, die du komplett neu bauen musst. Pack jede Sektion in ein vertikales Auto Layout. Pack jede Reihe in ein horizontales. Nutz Gaps, statt Dinge mit leerem Raum auseinanderzuschieben. Jede Ebene außerhalb eines Auto-Layout-Frames ist eine Ebene, die du zweimal baust.

Entscheide Fill oder Fixed vor der Übergabe

Stell den Sektions-Wrapper in Figma auf Fill Container. Gib dem inneren Content-Wrapper eine feste Maximalbreite, zum Beispiel 1200 oder 1140. Setz Cards in einer Reihe auf Fill, dann teilen sie sich die Breite gleichmäßig. Das übersetzt sich direkt nach Framer, wo du Width auf 100% oder 1fr stellst und die Max Width auf den Content-Wrapper legst. Framers Troubleshooting-Artikel nennt eine feste Breite oder eine zu große Max Width als häufigsten Grund, warum eine Seite im Phone-Breakpoint den Bildschirm nicht ausfüllt. Jede feste Zahl, die du in Figma stehen lässt, ist ein Bug, den du weiterreichst.

Benenn deine Text-Styles und nutz sie wieder

Benenn deine Schriftstufen und nutz sie wieder: H1, H2, H3, Body Large, Body, Caption, Eyebrow. In Framer baust du die einmal im Assets-Panel unter Styles nach und weist sie dann im rechten Panel unter Text und Styles zu. Jeder Framer-Text-Style kann eigene Größen für Desktop, Tablet und Mobile mitbringen, also Schriftgröße, Zeilenhöhe, Laufweite und Absatzabstand. Wenn deine Figma-Datei vierzehn leicht unterschiedliche Headline-Größen hat, baust du vierzehn Text-Styles oder lebst mit Schrift, die auf dem Handy falsch wirkt.

Prüf die Font-Lizenz schon beim Moodboard

Framer bringt Google Fonts und Fontshare mit und lässt dich eigene Dateien über den Tab Custom im Font-Picker hochladen. Framer weist auch darauf hin, dass du die passende Lizenz halten musst, bevor du einen Font auf eine Website lädst. Eine Desktop-Lizenz deckt ein Figma-Mockup ab. Für eine Live-Seite reicht sie nicht. Klär das, während du die Schrift aussuchst, und nicht in der Nacht vor dem Launch, denn ein Schriftwechsel verschiebt jeden Zeilenumbruch auf der Seite.

Exportier Bilder in der Größe, in der sie angezeigt werden

Framer komprimiert Bilder an der Edge zu WebP und AVIF und passt ihre Größe für jedes Gerät an, so steht es auf der Performance-Seite. Damit ist die Auslieferung erledigt. Einen Screenshot, den du mit 4000 Pixel Breite reinklebst, macht das nicht kleiner, und aus einem PNG-Logo wird dadurch kein SVG. Exportier Rasterbilder in etwa der doppelten Anzeigegröße. Nimm SVG für Logos und Icons. Schreib den Alt-Text, solange der Inhalt noch frisch im Kopf ist.

Die Checkliste für die Figma-Übergabe

Bevor du die Figma-Datei für fertig erklärst, geh sieben Punkte durch. Der Desktop-Frame ist 1200 breit. Jede Sektion sitzt in einem Auto-Layout-Frame. Sektions-Wrapper stehen auf Fill, Content-Wrapper tragen die Maximalbreite. Die Schrift läuft über benannte Styles, ohne verwaiste Größen. Die Fonts haben eine Web-Lizenz und die Dateien liegen zum Upload bereit. Bilder sind in sinnvollen Größen exportiert, Vektoren als SVG. Die Ebenennamen lesen sich so, wie du sie in der Framer-Ebenenliste haben willst, denn genau so kommen sie an.