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.
Did you manage to find a solution? My goal is to export SVG images from Figma, created using our UX theme, and then embed them in Ignition Perspective. I want to be able to link tags to multiple elements and also modify the text, similar to what you're asking about.
How do you handle tag binding if you need to update your SVG image? Do you have to rebind all the tags, or do you use Python to handle tag binding?
Hi Kim,
We still use Figma to develop one-lines, and have optimized things in there with Figma components (e.g. breaker_open), styles, and variables (e.g. bus line color and size). But, we still manually have to do the bindings after SVG import, OR we just use embedded views for our devices layered above a base SVG.
In Figma's SVG export, there's an option (defaulted to false) to include "id" attribute which I was hoping to use with some sort of script to simplify imports and bindings. But I think this would only be useful if I want to use that ID to style with CSS, because it's the same as the name. Basically what ever the container/component is called in the component stack in Figma. For example, if I include an instance of a Breaker component and give it the name 52H in the Figma component stack, it shows up with name and id as 52H upon export:
But the reason why I'm avoiding this for now... my goal is to pivot to @nader.chinichian's method of using embedded views even for the busses and lines on the drawing. Once we build our components as views to embed, then we won't even need to use Figma for each instance of a one line.
I'd be more curious to see an Ignition plug-in for Figma. It could be useful for so much more than just replacing a SVG export/import workflow. It would be great to source CSS from Figma, or have Figma component variants be aware of their equivalent parameters in Perspective. And so much more.
I hope it will not slow and laggy environment like pipes and also not be limited to the basic features otherwise using it is pointless. In the real world, all standard features that you find in standalone commercial tools are really important. Like Layers, visibilities, creating templates(Edit>Clone Menu),...
