Back to Plugins
KSP Font Generator

KSP Font Generator

<p>A simple, lightweight utility for generating bitmap fonts for Kontakt.&nbsp;</p><p>This plugin converts any text object into a Kontakt-compatible font strip which retains most* of the font settings from the original text object (*see caveats below).</p><p><br></p><p>This plugin improves upon existing Kontakt font generation tools in a number of ways:</p><ul><li>No need to manually upload font files or copy settings into an external tool. You can convert text elements directly from your interface design, without leaving Figma.</li><li>Because the font is generated by Figma’s rendering engine, the glyphs will look identical to any static text you are using in your design.</li><li>The plugin detects the true bounds of each rendered character, and prevents pixels from neighbouring characters from overlapping (common problem with some of the existing tools).</li></ul><p><br></p><p>This is an essential tool for anyone using Figma for Kontakt GUI designs. Enjoy!</p><p><br></p><p><br></p><h2>How To Use</h2><p><br></p><p>Right click on any text object in your Figma document, and select<strong> Plugins &gt; KSP Font Generator &gt; Generate Font.</strong></p><p>A new frame will be created, containing the generated font spritesheet in vector format. The generated font will retain any text styles applied to the original text object.</p><p>Finally, export the frame as a PNG, and it will be ready to use in Kontakt.&nbsp;</p><p><br></p><p><br></p><h2>Supported text properties</h2><p><br></p><ul><li>Typeface</li><li>Font size&nbsp;</li><li>Font weight (bold, italic, etc.)</li><li>Character spacing</li><li>Underline and strikethrough&nbsp;</li><li>Lettercase</li><li>Fill colour</li><li>Opacity</li><li>Inner shadow</li></ul><p><br></p><p><br></p><h2>Unsupported features and caveats</h2><p><br></p><p>Due to the nature of bitmap fonts and how Kontakt handles them, there are a few caveats you should be aware of.&nbsp;</p><ul><li>Kontakt doesn’t support kerning pairs. This means that certain character sequences might look unusually spaced (especially characters with parallel diagonal lines that usually overlap, like ‘AV’). Unless Kontakt supports kerning pairs in the future, there’s nothing that can be done about this.&nbsp;</li><li>The plugin will clamp the position of each character to prevent overlapping. This will come into effect when choosing a font size or spacing value which would usually cause overlapping characters. A warning will be displayed when this occurs.</li><li>Any text effects which would cause character bounds to overlap are unsupported. This includes blur, drop shadows and strokes. We may add support for these in the future, although using these features would force the minimum character spacing to increase.</li><li>Gradient fills are unsupported.</li><li>Other text properties such as line and paragraph spacing would have no effect because custom fonts can only be used on single-line labels.</li></ul>

nkscustom fontbitmap fontmusicvstaudiokspkontaktkomplete kontrolnative instrumentsfontkomplete

Plugin Preview

KSP Font Generator preview

About this plugin

A simple, lightweight utility for generating bitmap fonts for Kontakt. 

This plugin converts any text object into a Kontakt-compatible font strip which retains most* of the font settings from the original text object (*see caveats below).


This plugin improves upon existing Kontakt font generation tools in a number of ways:

  • No need to manually upload font files or copy settings into an external tool. You can convert text elements directly from your interface design, without leaving Figma.
  • Because the font is generated by Figma’s rendering engine, the glyphs will look identical to any static text you are using in your design.
  • The plugin detects the true bounds of each rendered character, and prevents pixels from neighbouring characters from overlapping (common problem with some of the existing tools).


This is an essential tool for anyone using Figma for Kontakt GUI designs. Enjoy!



How To Use


Right click on any text object in your Figma document, and select Plugins > KSP Font Generator > Generate Font.

A new frame will be created, containing the generated font spritesheet in vector format. The generated font will retain any text styles applied to the original text object.

Finally, export the frame as a PNG, and it will be ready to use in Kontakt. 



Supported text properties


  • Typeface
  • Font size 
  • Font weight (bold, italic, etc.)
  • Character spacing
  • Underline and strikethrough 
  • Lettercase
  • Fill colour
  • Opacity
  • Inner shadow



Unsupported features and caveats


Due to the nature of bitmap fonts and how Kontakt handles them, there are a few caveats you should be aware of. 

  • Kontakt doesn’t support kerning pairs. This means that certain character sequences might look unusually spaced (especially characters with parallel diagonal lines that usually overlap, like ‘AV’). Unless Kontakt supports kerning pairs in the future, there’s nothing that can be done about this. 
  • The plugin will clamp the position of each character to prevent overlapping. This will come into effect when choosing a font size or spacing value which would usually cause overlapping characters. A warning will be displayed when this occurs.
  • Any text effects which would cause character bounds to overlap are unsupported. This includes blur, drop shadows and strokes. We may add support for these in the future, although using these features would force the minimum character spacing to increase.
  • Gradient fills are unsupported.
  • Other text properties such as line and paragraph spacing would have no effect because custom fonts can only be used on single-line labels.

Plugin Details

Version2
CreatedJanuary 18, 2022
Last UpdatedFebruary 23, 2022
Categoryfonts-typography
CreatorWill Bedford
Stats486 installs, 36 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:dist/main.js
  • Editor Types:
    figma