Xstate: convert sketch systems to xstate

[david-raine]

I have been using sketch systems and I love the fact that I can use their text syntax to explain the states to "semi-technical" users. I also like editing that text format and then running it through the sketch system site to produce xstate json.

I would love to be able to include this as part of my build process, so this is a cheeky request to see if anyone knows of any way to do this conversion in an automated way? Is there a CLI tool available? If not, how hard do you think it might be to write one?

[hnordt]

It would be very interesting if we also had an editor extension to read the machine definitions and allow us to see the visual representation while editing the code.

https://github.com/statecharts/xstate-viz could be the foundation for this.

[johnkazer]

Currently sketch.systems exports json in XState v3 format, it would be wonderful if XState had a conversion script to v4 (or we convince sketch.systems to upgrade :-) ).
I'm very keen on this work flow (expanded on a bit here), and the update would be a great improvement:

1. Creating the initial design with Figma and sketch.systems (see the 'Export to clipboard' option) which informs, and is informed by;

2. State chart maths in XState.

3. UI via a framework (such as React or Hyperapp) is a side-effect of state chart behaviour.

4. Testing can be derived directly from the XState graph module and implemented with Cypress.

5. Requirement changes can quickly be incorporated into design and state chart maths updates, which (generally) require simple UI framework tweaks.

[coodoo]

@johnkazer Out of curiosity, how do you convert Figma format to xstate? Is there something like Export to clipboard for Figma as in sketch.systems?

[johnkazer]

Is a bit clunky, but sketch.systems defined a method in this tutorial. It might also work for other prototyping apps, if they generate unique URLs per 'screen', 'wireframe', 'state' etc. I looked at Balsamic as an alternative, but I don't think it supports an equivalent approach.

[johnkazer]

PS, am investigating option of creating a Figma plugin to export a json list of URLs.

[johnkazer]

Here's a pretty raw first go. Run it as a development plugin in the desktop app (not online)