DESIGN TOOL

TYPE RAMP TOOL FIGMA PLUGIN

Generate Figma comps from a Text Ramp Planner export. The plugin can apply the recommended type sizes to a selected comp, with an optional layout-adjustment pass.

Download Figma Plugin

TL;DR

The plugin is currently distributed as a local Figma development plugin rather than through the Figma Community. Installation takes a few manual steps the first time.

Download and unzip the plugin.
In the Figma desktop app, open a design file.
Go to Plugins → Development → New Plugin.
Choose Figma Design → Custom UI and create a temporary development plugin.
Open the manifest.json Figma creates and copy its "id" value.
Open the downloaded Text Ramp Planner plugin's manifest.json and replace its placeholder "id" with the Figma-generated ID.
In Figma, go to Plugins → Development → Import plugin from manifest and select the edited Text Ramp Planner manifest.
The plugin will now appear under Plugins → Development.

Already installed?

Select a comp, run the plugin, and load the .tokens.json downloaded from Text Ramp Planner.

SETUP GUIDE

INSTALLING THE PLUGIN

01 | Create a Development Plugin

Create a temporary plugin in Figma

In the Figma desktop app, open any design file and go to:

Plugins → Development → New Plugin

Choose Figma Design, then select Custom UI when Figma asks which type of plugin to create.

Give the temporary plugin any name. Its purpose is simply to have Figma generate a valid local development-plugin ID.

Opening the Figma development plugin menu — Open the Development plugin options in Figma.

Creating a new Figma development plugin — Create a new development plugin.

Selecting Custom UI for the Figma development plugin — Choose the Custom UI plugin option.

02 | Find the Plugin ID

Open Figma's generated manifest

Figma creates a starter plugin folder containing several files.

Open that folder and locate manifest.json.

Open manifest.json in a plain-text or code editor. Near the beginning of the file will be an entry containing the development plugin's ID.

Files generated by Figma for a new development plugin — Locate manifest.json in Figma's generated plugin folder.

Opening the Figma manifest and locating the plugin ID — Open manifest.json and copy the generated plugin ID.

"id": "1234567890123456789"

Only the plugin ID is needed from this temporary plugin.

Copy only the value inside the quotation marks. The rest of Figma's generated starter files will not be used.

03 | Add the ID to Text Ramp Planner

Paste the Figma ID into the downloaded plugin

Download and unzip the Text Ramp Planner Figma Plugin.

Inside that downloaded folder, open its manifest.json.

Find the placeholder "id" value and replace it with the ID copied from Figma.

Pasting the Figma-generated plugin ID into the Text Ramp Planner manifest — Replace the placeholder ID in the Text Ramp Planner manifest.

The downloaded file may begin with something similar to:

{ "name": "Text Ramp Planner", "id": "PASTE_FIGMA_PLUGIN_ID_HERE" }

Replace only the placeholder value:

{ "name": "Text Ramp Planner", "id": "1234567890123456789" }

Keep the quotation marks.

Replace only the text between the quotation marks and save the file.

04 | Import Text Ramp Planner

Import the edited plugin into Figma

Return to Figma and choose:

Plugins → Development → Import plugin from manifest

Select the edited manifest.json from the downloaded Text Ramp Planner plugin folder.

Importing the Text Ramp Planner manifest into Figma — Import the edited Text Ramp Planner manifest into Figma.

Select the Text Ramp Planner manifest.

Use the edited manifest from the downloaded Text Ramp Planner folder, not the temporary starter-plugin folder created earlier.

USAGE

GENERATE COMPS FROM THE PLUGIN

Once the plugin is installed, a Text Ramp Planner export can be loaded into Figma and used to generate a set of test comps across the selected resolutions and ramp stops.

01 | Run the Plugin

Select a comp and open Text Ramp Planner

Select the Figma frame, component, instance, or group that will be used as the source comp.

Open the development plugin from:

Plugins → Development → Text Ramp Planner

The selected comp becomes the source used to generate the additional resolution and scale-stop versions.

Selecting a source comp in Figma — Select the comp that will be used as the source.

Opening the Text Ramp Planner development plugin — Run Text Ramp Planner from Figma's Development plugins.

02 | Load the Type Ramp Export

Import the Text Ramp Planner export

Use the .tokens.json file exported from the Text Ramp Planner.

Load that file into the plugin. It contains the generated type sizes, text-style roles, ramp columns, resolution information, custom scale stops, and font information needed to build the comps.

Loading a Text Ramp Planner tokens export into the Figma plugin — Load the .tokens.json file exported from Text Ramp Planner.

03 | Validate the Font

Match the exported font to the Figma font

Enter the exact font family name used by Figma and choose the appropriate fallback style.

Select Validate Font before generating comps. This confirms that Figma can load the font that will be applied to the generated text.

This step is especially important for locally installed or uploaded fonts, where the filename and the font-family name may not match.

Entering the font family in the Text Ramp Planner Figma plugin — Enter the font family and fallback style used in Figma.

Successfully validating a font in the Text Ramp Planner Figma plugin — Validate the font before continuing.

04 | Map the Text Styles

Match text layers to the type-ramp roles

The plugin scans the selected comp and attempts to match its text layers to the roles included in the Text Ramp Planner export.

Review the mappings and adjust any that need correction. Individual text layers can also be ignored when they should not be changed.

Mapping Figma text layers to Text Ramp Planner type roles — Review the automatically detected roles and adjust mappings as needed.

05 | Choose the Comp Type

Choose how the generated comps should behave

Select one of the two generation modes:

Generate text sizes only applies the exported type sizes while otherwise preserving the existing layout. This is useful for exposing wrapping, clipping, and spacing problems.

Generate with layout adjustments applies the type ramp and makes conservative layout changes intended to accommodate the resized text.

Choosing a comp generation mode in the Text Ramp Planner Figma plugin — Choose between text-size-only generation or layout-adjusted generation.

06 | Generate the Comps

Generate the complete type-ramp set

Generate the comps to create a duplicate of the source design for each resolution or custom ramp stop included in the Text Ramp Planner export.

Real resolution targets use their corresponding frame dimensions. Custom ramp stops use their generated typography scale without inventing an additional platform resolution.

Generated Figma comps created by the Text Ramp Planner plugin — The plugin generates a set of comps from the selected Text Ramp Planner ramp.

Experimental

This is still rough and experimental — but it does, in fact, kinda work. Generated comps are intended as a fast starting point for testing type across resolutions, not finished production layouts. Some layouts will still need manual review and cleanup.