Skip to main content
Coreframe generates a production-ready typography system from a handful of configuration choices. You pick your fonts, set a base size, choose a scale algorithm, and Coreframe calculates every step — from tiny labels to large display headings — complete with auto-derived line heights and letter spacing. The output lands in Figma as named text styles, organized by role, so your team can apply them from the Figma styles panel immediately after generation.

​
Configuring typography

1

Open Coreframe → Typography tab

Launch the plugin and select the Typography tab. Click Reset at any time to restore defaults before starting a new configuration.
2

Choose your font families

Select separate fonts for headings and body text using the Heading Font and Body Font dropdowns. The dropdowns list every font available in your Figma document, including any Google Fonts already loaded. Heading and body can share the same font family if your design uses a single typeface.
3

Configure your type scale

Set the Base Font Size (in px, typically 14–16 px). Then choose a Type Scale algorithm: Ratio Based (multiplies each step by a ratio such as the Perfect Fourth at 1.333 or the Golden Ratio at 1.618), Linear (adds a fixed increment per step), or Fibonacci (follows the Fibonacci sequence). Use the Sizes above base and Sizes below base fields to control how many steps the scale extends in each direction.
4

Preview the scale

Click Preview Scale to generate the full list of type steps. Each step shows its size in px, line height, and letter spacing. Coreframe assigns roles automatically — large sizes become display and heading, the base size becomes body or Base, and smaller sizes become Small. Pro users can click Edit on any row to rename a step, adjust its size, line height, or letter spacing, toggle font weights, or duplicate and delete steps.
5

Expand into weight variants

Click Generate Styles to expand each scale step into individual weight variants (e.g., Heading 1 Bold, Heading 1 Regular). Review the final list of export-ready text styles on the next screen.
6

Push to Figma

Click Generate Typography Style on the final screen to push all text styles into your Figma document.

​
Generated output

When you generate, Coreframe creates the following in your Figma document:
  • Text styles for every scale step and weight variant, organized under Typography/{role}/{name} (e.g., Typography/heading/heading-1-bold). These appear in the Figma text styles panel and can be applied to any text layer.
  • Font family — the heading and body font families are stored in the token payload so that component generation can reference them later.
  • Font size, line height, and letter spacing — each style encodes these values directly. Line heights are calculated automatically based on size and role (large display sizes use tight line heights around 1.1; body text uses a comfortable 1.6), and letter spacing tightens progressively at larger sizes.
  • Font weight and style — each expanded variant captures the exact Figma font style string (e.g., Bold, SemiBold, Regular), so the correct weight loads even if the font family uses non-standard style names.
Coreframe loads Google Fonts automatically — no need to install fonts manually. As long as a Google Font name appears in the Heading Font or Body Font dropdown, Coreframe fetches the full weight range before generating styles.