Sketch.systems

I've been trying (and failing) to spend more time with state machines and xstate since I saw @DavidKPiano talk a.. year? two? ago, but just stumbled upon this thing - sketch.systems/anon/sketch/new. Looks absolutely amazing for visualizing diagrams

Wow, Figma designs can be hooked into sketch.systems state machines to visualize state changes between screens sketch.systems/tutorials/figm…

We've just added support for parallel states in Sketch.systems —they make it much easier to model systems with a lot of combinatorial complexity. Check out the tutorial here: sketch.systems/tutorials/para…

Quick tip: want to indent multiple states at the same time in the spec editor? Use ⌘] for indent and ⌘[ for dedent (MacOS) and CTRL + [ and CTRL + [ (Windows).

You can now drag-and-drop JPEGs or PNGs from your computer into states in your Sketch.systems diagram. This is handy for quickly adding visual mockups to your sketch. To get started, view the tutorial: sketch.systems/tutorials/img-…

Want a quick introduction to sketching out states—and how it can help you think about your product’s behavior? Check out @ryanlucas’ 8-minute video sketching out the iOS lock screen: sketch.systems/tutorials/ipho…

If you’re interested in hooking up your Figma artboards to Sketch.systems states, check out this prototype from @steveruizok. It’s a nice workaround for the Figma API being slow to generate images: sketch.systems/steveruizok/sk…

Statecharts are really handy for tweaking animations that run on state changes. Try clicking through the diagram and the prototype of this sketch: sketch.systems/ryanlucas/sket… (Design inspiration from @andmironov: dribbble.com/shots/2323892-…)

Quick tip: the editor in Sketch.systems supports multiple cursors. Really helpful when you need make changes in multiple places at once. Just hold down the command key (MacOS) or control key (Windows) and click where you want to place each cursor.

Statecharts are great for experimenting with animations. @lynaghk talks about this—and the new back button feature in Sketch.systems. 📺Watch the 2-minute video: player.vimeo.com/video/278387834 👉Experiment with the example yourself: sketch.systems/ryanlucas/sket…

With the new image support, @sketchsystems is now basically a better prototyping tool than all major design tools.

@georgeocrawford We’ve been pretty non-prescriptive on the prototype code side while we see how people want to use it. If you have a chance, it’d be great if you could share your sketch and thinking with the community on talk.sketch.systems.

@sketchsystems 2. I was wondering if you have any plans to make boilerplate JS like this (repeated JSX blocks with very similar setup, mapping events to model.emit(), <style> blocks, external scripts) easier in any way? A slightly richer JS API would make prototypes even easier to create.

@sketchsystems I'm loving your ideas in sketch.systems. I've thrown together sketch.systems/georgecrawford…, and have a couple of thoughts:

You can now export Sketch.systems statecharts as JSON (for @davidkpiano's xstate) or EDN (for @nikitonsky's DataScript), so you can compute freely. Here's a 12m demo of querying a statechart w/ datalog and then visualizing w/ GraphViz: player.vimeo.com/video/276059082

Designing component UIs with state machines goes a long way toward making behavior explicit. Check out @steveruizok's sketch here: sketch.systems/steveruizok/sk…

Great article from @Hillelogram on the value of formally specifying UIs, with examples using Sketch.systems and Alloy. 👇 twitter.com/Hillelogram/st…

Fun obligatory toggle component example from @steveruizok in sketch.systems. sketch.systems/steveruizok/sk…

Good discussion on the forum about linking mockups from visual design tools into sketch.systems. Here's an example sketch with frames/artboards from Figma attached to states via embed URL: sketch.systems/ryanlucas/sket…

Stop building only #happypath scenarios and get serious! Sketch.systems promising new tool is encouraging designers to plan more concrete product behaviour. 😮#uxdesign buff.ly/2L9MBkM

Now this looks very promising! Sketch.Systems allows us to use Markdown to describe the behavior of a system, while building prototype user interfaces on top of it. sketch.systems

sketch.systems is a site where you can easily map out your product system via state machines, built by @subformapp Super useful.