Back to Plugins
Peppercorn - The Perfect Type Scale

Peppercorn - The Perfect Type Scale

Easily generate a flexible, harmonious and responsive type scale for balanced, beautiful typography.

typography systemtypography scaletypography variablesdesign systemfontstypography

Plugin Preview

Peppercorn - The Perfect Type Scale preview

About this plugin

If you like my work, buy me a croissant or a coffee :) https://paypal.me/abroudin thank you!


Description

Create flexible, harmonious and responsive typography scales with ease, complete with documentation, text styles bound to variables and code ready to share with your developers.


Key Features:

Primary and secondary font families: Create even more flexible type scale with 2 font families.

Documentation: Automatically generate your typography scale within a Figma frame with associated Text Styles & Variables

Naming: Name your text styles directly from the plugin, supports nesting, i.e: Headings/Title XL

Figma text Styles: Create Figma Text Styles to apply your new typography across projects effortlessly, ensuring design consistency.

Precision positioning: Select the position of predefined elements within your scale without the need to recalculate everything, saving you valuable time.

Custom elements: Add new elements to your typography scale.

Save your scale: Never lose your settings with the ability to save and revisit your typography scales whenever you wish. It will automatically be loaded.

Variables: Generate Figma variables

Responsive scales: Create multiple scales, such as mobile, tablet, laptop, desktop and large desktop, ensuring your typography is always on point.

Code generation:

  1. W3C DTCG Json
  2. Chakra UI theme
  3. CSS


Note: some Google fonts styles, like Noto Sans condensed, are not supporded yet.

Plugin Details

Version23
CreatedJanuary 3, 2024
Last UpdatedJanuary 9, 2025
Categoryediting & effects plugins
CreatorAlexandre Broudin
Stats985 installs, 294 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com
    • https://webfonts.googleapis.com
    • https://www.google-analytics.com