Hi, I’m starting on a Twine project and this time, I want to collaborate with my friend who is a professional UX designer. However, she doesn’t know any CSS! She uses Figma for web design. I don’t know very much about Figma, but it looks like it generates some CSS of elements that you can “draw” in a more natural way.
I have used Harlowe in the past, but before I get started writing in earnest, I was wondering if anyone has used Figma with Twine before. I’ve read that Sugarcube is better for some types of customization with CSS. Is there a Twine format that would “play” better with Figma?
tl;dr: someone would have to poke into the code at some point, but probably doable.
I don’t know anything about Figma either, but poking around their descriptions of the tool, it looks like it does generate HTML and CSS, and that they have thought about letting developers get the code out of the tool. But at some point you’re going to have to get the code out of Figma and into Twine. So one of you is going to have to dive into that at some point (or someone else? if it’s six/eight weeks down the road I might have time to show you the ropes).
I would likely go with SugarCube, yeah. Harlowe’s not as bad as some people make it out to be but I don’t think it’s set up to make it easy to replace the whole UI. But SugarCube has the StoryInterface special passage that just lets you replace the whole thing: you just need a “passages” element so it knows where to put your story. Though Harlowe’s interface is pretty minimal, so depending on how complicated your story coding is going to be and how much you mind learning a new Twine format… it might work out fine to use Harlowe and just hide the sidebar. Dunno.
And if you’re going with SugarCube I’d suggest setting up Visual Studio Code: it’ll give you syntax highlighting, and Twine is really not built for collaboration, so if you use the Twine editor one of you will have to be in charge of the twine document at any given time, and the other will have to save their work somewhere else. That may not be a problem if she’s doing the layout and you’re doing the Twine side and you only need to synch up occasionally, but it’s worth thinking about. I wrote a short thing about installing VSCode/Tweego (the SugarCube version might be out of date by this point, but the basic procedure should work), or @manonamora has a Tweego setup/guide in this set of templates (scroll down a bit). And there are certainly people here who can help you get that going (and people who aren’t super techy who have made the jump and seem to do ok…)
If what I’ve described (in that dump of technical babble) doesn’t resonate with you, then SugarCube is most likely a better choice.
Edit: Upon looking more at Figma, it looks like it might be generating some SVG behind the scenes. There is an SVG export function. SVG works well in practically all browsers. There seems to be some CSS export ability, but that’s for you to work through…
SVG can be styled by CSS, just FYI. I’m familiar with both so let us know if you have any specific questions about exporting from Figma once you’ve made some headway.
About Visual Studio Code: I just did this exact thing this week, so there’s been some recent chatter on the discord about how to set up VSC for Sugarcube. I didn’t know anything about it and was trying to muddle my way through developing in the regular Twine app after having previously used the older Twine.
My recommendation: VSC is worth the bit of hassle of setup for code markup alone, plus it’s got syntax warnings and easy searching, and that’s just what I know about in the first few days. Total game changer.
Just don’t get Visual Studio by mistake! Different animal entirely. Visual Studio Code is what’s needed. Then SjoerdHekking gave me a basic folder setup with the twee conversion batch files and stuff, which made it super simple to get my WIP up and running.
I know nothing about Figma, but if you can get CSS out of it, it should be easy to drop it into Sugarcube’s stylesheet passage, I would think.
In addition to collaborating with a designer, I am collaborating with another writer (Steve Peck of A Short Stay in Hell fame!!) and we are just using GitHub with exported Twee files. So every time we want to commit, we have to export to Twee, then when we want to download updates, we have to import from Twee. It’s not ideal, but I’m not ready to move to visual studio code and figure out Twee and figure out how to explain it to someone else.
I think my designer is going to give me the Figma files (??) and I’ll be the one importing the information into Twine. She did show me how it can give me the CSS for a given element… I have a different friend who might be able to help me figure out how to put it in Twine. I decided to go with SugarCube based on your recommendations. I’m hoping to keep this story simple to help minimize scope creep (maybe it will be ready in time for IFComp?). Adding two collaborators suddenly made EVERYTHING more complicated! Thank you (plural) for your advice.
