Engaging designers via workflow

This seems like a good progression from a design point-of-view, especially if designers already have a good handle on JavaScript. To engage a cross-section and critical mass of designers who are still learning to code, could an intermediary step (additional to uploading images) consist of entering a link to Axure or Sketch Cloud prototype URLs? This could connect design and UI development closer over multiple iterations, allowing for designers to begin to transfer more refined designs into HTML/CSS/JS, eventually replacing the previous prototype links with real code? Especially if working with a UI developer, designers are exposed to bite-sized chunks of code that may help contextualize or simplify the interpretation of static design to front-end/dynamic code.

Hi Sam!

I think this is a solid idea, thanks for the feedback and for contextualizing it.

Putting on my product manager hat for a minute, I just want to reiterate your points to make sure I understand the core problems to be solved:

  1. Not every designer is ready to write JS prototypes

  2. Visual wireframes and mocks get iterated regularly / change a lot, so manually updating them in the system sketch is time-consuming

  3. The design process is often such that wireframes/mocks come before exploring/refining code prototypes

Does that sound right?

Hi Ryan,

Yes indeed, nicely formed problem statements from my scratchings.

Potentially one more:
4. Designers wanting to contribute code for early review/discussion feel that setting up a production environment with the current code-base could be overkill before a wider ticket is assigned to them

In the super near term, we’re working on making it a little easier to add static mocks to a state. (drag and drop) When that’s in, we’ll be updating the relevant tutorial to show how it works.

That’s aimed at #1 (designers not ready to use JS). It’d be helpful for us to know if hooking up static mocks this way feels useful for designers before we address #2 (more automatic syncing with visual design tools).

Interesting—are designers in your org using anything for this right now? (e.g. Codepen, Framer)

It’d be helpful for us to know if hooking up static mocks this way feels useful for designers before we address

I think it would be useful in the early stages of the design process helping foster earlier collaboration with the wider team. When mocks are iterated on and evolve further in the process, the rate of and number of versions escalate considerably. The issue at that point, is having to manage many exported iterations in multiple places. Then drag and drop begins to feel like hard work, since you have to maintain the version of the source, then the exported files, then what ever system you are sharing them in (Sketch System, cloud storage… etc). Using a link thats generated from the Studio/Figma/Sketch/Axure/Framer source reduces that issue and promotes the a greater chance of return/re-use and value for a designer.

Interesting—are designers in your org using anything for this right now? (e.g. Codepen, Framer)

In terms of designers playing with code, not so much. If they do, they’d probably use Codepen, JSFiddle and Plunker – I’m the only one who uses Framer. Otherwise if they already contribute production code, they’ll just do it locally and screen capture it. Even though this most likely an edge case or peripheral problem, the long-term value in helping designers learn could help justify buy-in.

It’ll probably be a minute before we can implement this sort of thing (various APIs, all with lots of fun issues). But in the near term, if you’d like to experiment with the idea, it’s possible to embed any public URLs with iframes.

I did a quick example of attaching Figma frames/artboards to states via JS here: https://sketch.systems/ryanlucas/sketch/a58505b25ac114c6cec64922cb8fb325

If that’s something useful to your team, happy to further chat about optimizing the workflow a bit.

Nice one, will try that and let you know how we get on.

Love the idea of integrating live Figma references.

For the ambitious, it looks like the Figma API also lets you go further to grab images instead of iframes - https://www.figma.com/developers/explorer#files-endpoint.

@Clayton I had the same thought two weeks ago and did some digging — unfortunately Figma’s API is very limited.

For example, there is no way to list your files.
They actually say in their docs that you need to manually open up the Figma website with your file, then copy/paste the ID out of the URL bar.
This means it’s not possible for us to implement a nice workflow (e.g., link your Sketch.systems account to your Figma account, and then have thumbnails of all your artboards available from within Sketch.systems).

Figma’s API also takes a few seconds to generate each image and will delete the images after 30 days — so you’ll need to copy them out and host 'em yourself if you plan on having them for more than a month.

Anyway, like @ryan mentioned we’re looking into options for adding images to sketches, and we’ll definitely announce it here and on the mailing list when we have something ready for ya’ll to test.

Ah, that’s good to know. Thanks for the detailed explanation @kevin.

I’m eager to try SS out in real world use to see how it impacts thinking and workflows. Thanks for sharing it.

Just a quick update on this topic: I added a short video tutorial on how to hook up Figma nodes/frames/artboard embeds to states in Sketch.systems.

You can find it here: https://sketch.systems/tutorials/figma-embed/


@Ryan That tutorial is great! Thank you for doing that, really helpful. Will have to start using Figma more now.

1 Like

Just an update on this discussion, I saw that @steveruizok built a prototype for hooking up Figma’s image API to states: https://sketch.systems/steveruizok/sketch/e7ce8e8f43c5072a65a1154b9fe272bc

It’s a cool demo, Figma’s API is unfortunately dog slow (likely due to rendering out images via headless Chrome?). So as per Kevin’s post above, this doesn’t seem like a workable direction at the moment.

I’ve still been exploring this: https://sketch.systems/steveruizok/sketch/94aa03dab62d1c1c221c3d86f31a40c6

Originally, I’d been polling Figma each time the machine changed states and updating the image when that their API responded to my request. Now I’m sending only one request (for all of the project’s images) when the project loads. I cache the image urls and just swap them around as the machine changes states. It’s not ideal – I’m only caching the URLS, not the images themselves, so each state will load its image from Figma’s servers when that state is first viewed – but it’s much faster.

1 Like

Caching the URLs is definitely a lot snappier. Also a decent workaround for the 30-day image deletion issue that Kevin mentioned above. Thanks for sharing this, Steve.