I spent some time today learning about penpot. Its an open source web style design tool. Supposed to be similar to figma I guess.
I watched a video from ICC a couple years ago about using these sorts of tools to rapid prototype and design the UI/UX part of a SCADA. For years I have felt that the future of SCADA will be more similar to web design than anything else. So adopting these sorts of practices seems like a good idea.
I havent done much in it yet but im wondering how many poeple are using tools like this and what may be some tips and tricks in regards to applying these tools to ignition systems?
High Fidelity Prototypes:
I don't find it that much faster to build a screen in Figma than to throw it together in Ignition. Ignition is quick enough to develop in, that with a nice set of templates you can get objects onto a screen relatively quickly and have it look closer to the final version of the product than Figma would.
Low Fidelity Prototypes:
I have found a lot of value in drawing wireframes during requirement gathering meetings and showing them to users for discussion. (If you have 2 engineers, one can handle the conversation and the other can focus on quick prototyping on the spot.) It's mostly squares for screens, squares for sections, header labels, squares for controls, placeholders for more complex things etc. without any styling. It helps people visualize what the product could look like and provides discussion points. I get significantly more useful feedback with some kind of prototype. Otherwise the discussion is just too abstract for people who don't develop user interfaces for a living.
Any type of prototyping or even whiteboard software will work just fine. I've been using Microsoft Whiteboard and its been sufficient, but there are probably better options out there. Figma was overkill for me.
I wholeheartedly endorse using Figma to prototype designs and found it much faster to mock up designs once you have a design system with components. Most things parallel very closely between how they are called in Perspective vs Figma, e.g. flexbox is auto-layout in Figma and flex container in Perspective. Figma components have variants, while Perspective components have parameters.
Figma was also a capable editor for SVG creation - things like single-line diagrams - and I preferred it over tools like Inkscape or Affinity Designer. Once you have a design system in Figma, it's very quick to create SVGs using instances/variants of these components. Then you can easily show/hide any layers you want and export a portion of your Figma component tree.
I admit I was not a Figma pro the first time I used it, so I offered a UI/UX consultant a side-gig helping build out our design system. We ended up hiring him full time and he quickly learned how to be a capable Ignition developer. Food for thought.