How to Superscript in Figma: Advanced Typography

Trademark symbols, exponents, footnote references. They all need to sit above the baseline.

Learning how to superscript in Figma takes about 30 seconds once you know where the option hides.

Figma buries character positioning inside the Type Settings panel rather than the main typography controls. Most designers miss it completely.

This guide walks you through the exact steps to apply superscript formatting using Figma’s native tools. You’ll also learn a plugin alternative for fonts with poor glyph support.

We cover text layer selection, the Details tab navigation, troubleshooting common issues, and verification checks to confirm your raised text renders correctly.

How to Superscript in Figma

Superscript in Figma is the process of positioning selected characters above the baseline at a reduced size using the Type Settings panel.

Users need this when creating trademark symbols (™, ®), mathematical exponents (x²), footnote references, or chemical formulas in UI design projects.

This guide covers 3 methods requiring 1 to 2 minutes and Figma desktop or web app access.

Prerequisites

Before applying superscript formatting to your text layers, confirm you have the following:

• Figma desktop app (latest version) or Figma web app in Chrome, Firefox, Safari, or Edge
• Can edit access to the design file
• Text layer already created on the canvas
• Font family with OpenType features (for native superscript) or any font (for synthesized superscript)

The entire process takes under 2 minutes once you know where to find the typography settings.

Step 1: How Do You Select the Text for Superscript?

Double-click your text layer to enter text editing mode, then highlight the specific characters you want to raise above the baseline.

The selected characters will appear highlighted in blue.

Action

1. Text tool (T): Press T on your keyboard or select the text tool from the toolbar, then click on an existing text layer
2. Enter editing mode: Double-click the text layer to place your cursor inside the bounding box
3. Highlight characters: Click and drag across the specific characters (numbers, letters, or symbols) that need superscript formatting

You should see a blue highlight over your selection. Only these characters will be affected when you apply the position change.

Purpose

Selecting specific characters instead of the entire text layer lets you apply character positioning to individual glyphs.

This is how you create mixed text with both regular baseline text and raised superscript characters in the same line.

Step 2: How Do You Open the Type Settings Panel?

With your text selected, locate the three-dot icon in the Typography section of the right sidebar and click it to open the Type Settings panel.

This panel contains all advanced text formatting options including subscript and superscript.

Action

1. Right sidebar: Look at the right side of your Figma interface where the Design panel displays text properties
2. Typography section: Find the area showing font family, font weight, and font size
3. Type settings icon: Click the three-dot menu icon (⋯) to the right of the alignment options

The Type Settings panel opens as a floating window with two tabs: Basics and Details.

Purpose

Figma places superscript controls in the Type Settings panel rather than the main sidebar because character positioning is an advanced OpenType feature.

This keeps the primary text editing interface clean while giving access to glyph substitution and number positioning when needed.

Step 3: How Do You Apply Superscript to Selected Text?

Navigate to the Details tab in the Type Settings panel, scroll to the Numbers section, and select Superscript from the Position dropdown.

Your selected characters will instantly shift above the baseline with reduced size.

Action

1. Details tab: Click the “Details” tab at the top of the Type Settings panel (not Basics)
2. Numbers section: Scroll down until you see the Numbers heading with Position, Style, and Fractions options
3. Position dropdown: Click the Position field and select “Superscript” from the list

The text instantly moves above the baseline. Figma applies either native OpenType superscript glyphs or synthesized faux typography depending on your font.

Purpose

Figma groups superscript under Numbers because raised characters most commonly appear in mathematical exponents and ordinal indicators.

The same control works for any character type, not just numerals. Letters like “st” in “1st” or trademark symbols like ® respond identically to this setting.

Verification

After applying superscript, confirm these three visual indicators:

• Position: Characters sit above the baseline, aligned with the top of surrounding text
• Size: Superscript characters appear smaller than regular text (automatic reduction)
• Consistency: All selected characters shifted uniformly without breaking the text layer

Click outside the text layer to exit editing mode and view the final result in context.

If characters look misaligned, your font may lack native superscript glyphs. Figma draws a synthesized version instead, which sometimes needs manual size adjustment.

Alternative Method: Using a Figma Plugin

The native Type Settings approach works for most fonts. But some typefaces produce poor synthesized superscript results.

The Superscript plugin from Figma Community solves this by substituting characters with a dedicated superscript font.

Method Comparison

Choose native when your font family handles OpenType features well.

Choose the plugin when you need consistent trademark symbols or reference marks across multiple font weights.

Installing the Plugin

1. Open Figma Community and search “Superscript”
2. Click Install on the plugin by Thomas Lowry
3. Access via Resources panel (Shift + I) → Plugins

The plugin requires installing a companion font file to your system for character substitution.

Troubleshooting

Issue: Superscript Option Appears Grayed Out

Solution: You selected the entire text layer instead of entering editing mode.

Double-click the text layer first, then highlight specific characters. The Position dropdown only activates when you have characters selected within the text editing state.

Issue: Superscript Characters Look Different from Font Style

Solution: Your font lacks native superscript glyphs, so Figma creates faux typography by shrinking and repositioning standard characters.

Options: switch to a font with full OpenType support (Inter, Roboto, Source Sans Pro), or manually adjust the font size of superscript characters for better visual matching.

Issue: Superscript Does Not Export Correctly

Solution: Flatten text to outlines before export (Object → Flatten Selection or Ctrl/Cmd + E).

This converts text layers to vector shapes, preserving exact positioning in SVG or PDF output regardless of font availability.

Issue: Mixed Superscript Glyphs Look Inconsistent

Solution: When you combine native and unavailable superscript glyphs in one text layer, Figma converts everything to synthesized form for consistency.

Either use all supported characters or accept the synthesized appearance across the entire selection.

Related Processes

Once you’ve mastered superscript text formatting, these related Figma typography skills will expand your design capabilities:

• Subscript text: Same process, select Subscript instead of Superscript in Position dropdown (useful for H₂O, CO₂)
• Fraction formatting: Type X/X and click the fraction icon in the Numbers section
• Underline text in Figma: Apply decoration for links and emphasis
• Curve text in Figma: Bend text along paths for logos and badges
• Add fonts to Figma: Install custom typefaces with better OpenType support

Understanding visual hierarchy helps you decide when raised text styling adds clarity versus visual noise.

For web implementation, superscript characters translate to the <sup> HTML tag when developers build from your Figma designs.

FAQ on How To Superscript In Figma

Is There a Keyboard Shortcut for Superscript in Figma?

No native keyboard shortcut exists for superscript in Figma. You must access it through the Type Settings panel under Details → Numbers → Position. Some users create custom shortcuts using third-party automation tools like Keyboard Maestro or AutoHotkey.

Does Superscript Work with All Fonts in Figma?

Yes, but results vary. Fonts with OpenType features display native superscript glyphs. Fonts without this support get synthesized versions where Figma shrinks and repositions standard characters automatically.

What Is the Difference Between Superscript and Subscript?

Superscript positions characters above the baseline (x², ™). Subscript positions them below (H₂O, CO₂). Both options appear in the same Position dropdown within Figma’s Type Settings panel.

Can I Apply Superscript to Multiple Text Layers at Once?

No. Figma requires you to enter text editing mode for each layer individually. Select characters within one text layer, apply superscript, then repeat for other layers. Batch formatting is not supported for character positioning.

Why Does My Superscript Text Look Different from the Original Font?

Your font lacks native superscript glyphs. Figma creates faux typography by scaling down regular characters. Switch to fonts like Inter, Roboto, or Source Sans Pro for better OpenType glyph support.

How Do I Remove Superscript Formatting in Figma?

Select the superscript characters, open Type Settings, go to Details → Numbers → Position, and choose “Normal” from the dropdown. Characters return to standard baseline positioning instantly.

Does Superscript Export Correctly to PDF and SVG?

Usually yes. If positioning looks wrong after export, flatten text to outlines first (Ctrl/Cmd + E). This converts text layers to vectors, preserving exact character placement regardless of font availability on other systems.

Can I Use Superscript in Figma Components and Variants?

Yes. Apply superscript to text within a component, and all instances inherit the formatting. You can also create variants with different text positioning for flexible design systems.

What Characters Can Be Superscripted in Figma?

Any character works. Numbers, letters, symbols, and special characters all accept superscript positioning. Common uses include trademark symbols (™, ®), ordinals (1st, 2nd), mathematical exponents, and footnote references.

Is There a Figma Plugin for Better Superscript Support?

Yes. The Superscript plugin by Thomas Lowry handles fonts with poor native support. It substitutes characters using a dedicated superscript font. Install it from Figma Community and add the companion font file to your system.

Conclusion

Now you know how to superscript in Figma using the native Type Settings panel. The process takes seconds once you locate the Position option under the Details tab.

Fonts with OpenType support give you clean, native superscript glyphs. Others get synthesized versions that work fine for most projects.

Use the Superscript plugin when your font family produces inconsistent results with trademark symbols or footnote markers.

Remember to verify your raised text before export. Check baseline alignment, character size reduction, and consistency across the text layer.

These typography settings apply equally to subscript formatting. Same panel, same dropdown, different position value.

Practice with exponents, ordinal indicators, and chemical formulas to build muscle memory for the Type Settings navigation.