Visualise any math functions by rendering their graphs right on Figma canvas!
Turn any mathematical expressions and functions into editable bezier curves in seconds. Simply enter the function you want to visualise (e.g. sin(x+1)*cos(x)^2), press Insert, and enjoy the rendered graph right in your Figma file canvas.
Simple as that:
- Select the frame you want to insert your chart in.
- Run the plugin.
- Enter the function you want to visualize.
- Press the Insert button.
- Voila.
I work hard to implement the support for every function, expression, and syntax from math.js. Still, not everything works well, but here is a table containing all the supported and tested syntax you can already use:
| Syntax | Description |
|---|---|
| sin(x) | Sine of x |
| sinh(x) | Hyperbolic sine of x |
| cos(x) | Cosine of x |
| cosh(x) | Hyperbolic cosine of x |
| tan(x) | Tangent of x |
| tanh(x) | Hyperbolic tangent of x |
| cot(x) | Cotangent of x |
| coth(x) | The hyperbolic cotangent of x |
| random() | A random number between 0 and 1 |
| pow(x, y) or x^y | X to the power of Y |
| cube(x) | Cube of x (x^3 or x*x*x) |
| cbrt(x) | The cubic root of x |
| abs(x) | The absolute value of x |
| e | Euler's number (approx. 2.718) |
| pi | PI (approx. 3.14) |
A few known issues and limitations:
- Although the plugin can already preview discontinuous and periodical functions like f(x) = tan(x) quite all right, it cannot render them properly.
- Not every graph type is rendered and scaled as it should, especially functions with abrupt changes like f(x) = 1/x.
- Some dummy inputs (like the single "s" letter) won't throw an error.
I'm a product designer and programming is only my hobby, so besides basically learning how to code and fixing the bugs described above, here are my other plans:
- Improve UX: detailed validation error messages, faster preview render, and other small fixes).
- Refactor and rewrite the most problematic parts of the code (e.g. debouncing algorithm).
- Enrich the UI by adding the supported syntax pop-up and GitHub repository link.
- Improve the performance and speed by simplifying the process of previewing the entered function on canvas as well as the method of rendering the final vector path. I know that it's done poorly.
If you have a bug report or a feature request, please don’t hesitate to add a new issue, or write a message to my email address or Telegram.
- Email: ruslan@maslenkou.com
- Telegram: @maslenkou
My best reward and motivation are you giving this project a star ⭐️ or contributing to its development.
This project is licensed under the MIT License. See the LICENSE file for more details.