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?