Figma to Perspective SVG findings and best practices

Hi, I’ve been playing around with creating visuals in Figma then embedding the resulting SVG into Perspective. Has anyone else done this or embedded SVGs created with similar UX/graphics tools?

My first use case is to create a one-line diagram for an electrical system.

What I’ve found so far:

  • I can create a Figma frame with column and gutter specs that match a Column view in perspective. This means that once I embed my SVG as a full-width in the container, I can easily snap other components to the same grid layout to match elements in my SVG.
  • I can dig into the SVG properties within the “elements” property of the embedded SVG. I can also view the JSON if I copy the SVG in the project browser.
  • As a result, I can dig into items and bind individual item properties within my SVG. For example, I can bind the paint property of a SVG item to a color coming from somewhere else to dynamically recolor elements. So cool!
  • If I name my layers and elements in Figma then select “Include ID attribute” on the SVG output properties for the frame, I can then read the name property within the element property tree or JSON.

Still working on:

  • When I export text within a SVG from Figma, it converts the text to actual paths. This is extremely messy and not human readable within the element control or JSON. Additionally, I was hoping I could export an element from Figma where type = text instead of path, since then I could modify it with things like expression bindings.
  • Is there a way to dynamically hide/view SVG elements within a SVG embedded in Perspective? For example, I could create multiple layers in Figma for complex visuals and group them together for different states. Then I could use view/hide to choose which elements of the SVG should be visible.

Is anyone else using a similar technique for visual views or one-lines in Perspective?

In response to my second item I’m working on, it looks like individual SVG elements can be hidden by adding Properties: Style then using visibility: hidden/visible. Perspective: Hide SVG elements - #6 by dkylep Initial test is a success.

I use Inkscape to create svg files and it can export svg text as plain text

see this thread for some discussion around inkscape

Or you could just create a simple svg text in notepad

1 Like