NoteX - Math-SVG using Latex

About this plugin

NoteX - Math-SVG using LaTeX

NoteX is a high-precision utility for designers, engineers, and researchers who need to integrate mathematical notation into their Figma designs seamlessly.

Stop struggling with messy, oversized SVG imports. NoteX focuses on consistent vertical rhythm, allowing you to generate equations that perfectly align with your typography at a fixed height of your choice.

✨ Key Features

Dynamic Precision: Powered by the MathJax engine for industry-standard LaTeX rendering.

Fixed Height Scaling: Set your desired height (defaulting to 10px) via the settings menu. NoteX ensures every equation matches your UI's font size.

Smart Proportions: The plugin automatically calculates the correct width based on the equation's complexity, preventing stretching or distortion.

One-Click Insert: Place equations directly on your canvas as clean, editable Figma vector nodes.

Robust Copy/Paste: Use the "Copy SVG" button to grab the code for external use or quick pasting, featuring a fallback system for the Figma Desktop app.

🛠 How to Use

Launch NoteX: Open the plugin from your Figma menu.

Input LaTeX: Type your formula (e.g., E=mc^2 or \frac{-b \pm \sqrt{b^2-4ac}}{2a}) into the text field.

Set Your Size: Tap the Settings (⚙️) icon to adjust the output height to match your design system (10px, 14px, 16px, etc.).

Insert: Click Insert to Figma to render the vector directly in your current view.

💡 Best Practices

Typography Match: For standard body text, try setting the height to 14px. For labels, 10px usually works best.

Connectivity: NoteX requires an internet connection to fetch the latest rendering libraries, ensuring your vectors are always perfectly formed.