Stylepack

Schriften

Die Schriften von figma.com

figma.com setzt Überschriften und Fließtext in figmaSans. figmaSans ist eine lizenzierte Schrift, die die Seite selbst ausliefert. Die nächste freie Alternative auf Google Fonts: Inter.

vor 4 Tagen auf figma.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

2 Schriftfamilien
figmaSans
Verwendet für
h1, h2, h3, body, button, label
Quelle
Selbst gehostet
Freie Alternative
Inter
figmaMono
Verwendet für
label
Quelle
Selbst gehostet
Freie Alternative
Inter

CSS zum Nachbauen

Schrift-Variablen mit der freien Alternative im Font-Stack, damit dasselbe CSS mit und ohne die lizenzierte Schrift funktioniert.

:root {
  --font-heading: "figmaSans", "Inter", sans-serif; /* Inter stands in for figmaSans */
  --font-body: "figmaSans", "Inter", sans-serif; /* Inter stands in for figmaSans */
  --font-size-base: 30px;
}

So ist der Text gesetzt

headline-displayQuick brown foxfigmaSans / 56px / 400 / lh 56px / -1.25px
headline-lgQuick brown foxfigmaSans / 44px / 400 / lh 48.4px / -0.66px
headline-mdQuick brown foxfigmaSans / 16px / 400 / lh 22.4px
body-mdThe quick brown fox jumps over the lazy dogfigmaSans / 30px / 400 / lh 36px / -0.66px
label-mdThe quick brown fox jumps over the lazy dogfigmaSans / 16px / 400 / lh 22.4px
buttonThe quick brown fox jumps over the lazy dogfigmaSans / 16px / 400 / lh 23.2px
Verwendete Schriftgrößen
12141618304456

Für KI-Agenten

Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.

curl -s https://stylepack.ai/packs/figma.com/DESIGN.md

Fragen

Welche Schrift benutzt figma.com?

figma.com nutzt figmaSans, figmaMono. Überschriften sind in figmaSans gesetzt, Fließtext in figmaSans, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von figma.com frei nutzbar?

Nein. figmaSans ist eine lizenzierte Schrift, die figma.com selbst ausliefert. Die nächste freie Alternative ist Inter, verfügbar auf Google Fonts. Das CSS auf dieser Seite setzt sie als Ersatz in den Font-Stack.

Wie bekomme ich dieselbe Typografie wie figma.com in mein Projekt?

Lade das Designpaket von figma.com bei Stylepack herunter: Es enthält den Font-Stack, die Schriftskala, jeden Textstil und die Screenshots, in einer Form, aus der ein KI-Coding-Agent wie Claude Code oder Cursor bauen kann.