Vector Type
Convert outlined vector shapes into installable font files in one click
Plugin Preview
About this plugin
Key Features:
1.Export any vector shape as an installable font character.
2.Built-in slant slider for quick oblique/italic style generation.
3.Supports both OTF and TTF formats.
Full Description:
Introducing Vector Type — the fastest workflow from vector shapes to real font files, all inside Figma.
Traditionally, creating custom icon fonts or simple typefaces required exporting numerous SVGs and converting them repeatedly in external font software. Now, the entire process can stay within Figma. Simply draw your shapes, name your Frames, and generate your own font instantly.
With Vector Type, your full creative workflow remains in the canvas. Design your glyph inside a Frame or using outlined vector layers, and export industry-standard TTF or OTF files in seconds. Perfect for design systems, custom icon sets, and experimental typography.
🔥 Highlights
1.Export fonts directly from Figma: No external tools needed — generate .ttf and .otf files instantly.
2.✨ Built-in Slant Control: Adjust the slant angle using a simple slider to create oblique or pseudo-italic styles effortlessly.
3.Professional Metadata Options: Set font name, designer, version, weight, and other key details.
4.Live Glyph Preparation Preview: See which Frames are selected and ready for conversion before exporting.
🛠 How to Use
1.Design each character or icon inside a fixed-size Frame (e.g., 500×500).
2.Name each Frame using the corresponding character (e.g., “U” for the glyph U).
3.(Optional) Fill in font metadata or adjust the slant angle. Defaults work as well.
4.Select all Frames you want to export and generate your font file.
Ready to turn your vectors into real fonts? Try Vector Type now!
特色功能:
1.快速将形状导出为可安装字体。
2.内置倾斜滑块,轻松生成斜体样式。
3.支持导出 OTF 与 TTF 两种主流格式。
详细描述:
隆重介绍 Vector Type —— 从矢量图形到字体文件的最快工作流! 过去,创建自定义图标字体或简单字型需要导出大量 SVG,并在外部字体软件中反复处理。而现在,一切都可以在 Figma 内完成。只需设计单个形状或字符,即可立即生成属于你的字体。
Vector Type 让整个流程完全留在 Figma 中: 只需在 Frame 内设计好你的字形(或使用轮廓化图层),命名字符,点击生成,即可获得行业标准的 TTF 或 OTF 字体文件。 无论你是在制作设计系统、自定义图标集,还是进行实验性字体创作,这款插件都能显著提升效率。
🔥 核心亮点
1.Figma 内直接导出字体:无需切换软件,直接生成可安装的 .ttf 与 .otf。
✨ 内置倾斜控制:通过滑块调节倾斜角度,轻松获得 Oblique 或伪斜体效果,无需对字形逐一操作。
2.专业元数据设置:可填写字体名称、设计师名、版本号、字重等关键参数。
3.实时准备状态预览:清晰显示当前选中的 Frame 及已准备好的字形。
🛠 如何使用
1.将每个字符或图标设计在一个固定尺寸的 Frame 中(如 500×500)。
2.使用字符命名 Frame,例如 “U” 即代表字符 U。
3.可选择填写字体信息或调整倾斜角度,默认设置也可直接导出。
4.选中所有需要导出的 Frame,点击生成即可获得字体文件。
5.准备好让你的矢量图变成真正的字体了吗?立即体验 Vector Type!
Plugin Details
| Version | 1 |
|---|---|
| Created | November 25, 2025 |
| Last Updated | November 25, 2025 |
| Category | Import & export plugins |
| Creator | Lionel |
| Stats | 109 installs, 52 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://cdn.jsdelivr.net
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML