Figma / Adobe XD - Whats your workflow designers?

Hey Guys,

More a discussion topic than a wishlist but wasn’t sure where to put it. I’m keen to get other intuiface creators feedback on their design workflow.

We typically use something like Figma or Adobe XD (as the design team love it) to wire frame and storyboard an experience, including the interactivity of buttons etc

the URL sharing of Figma / XD tends to be a lot more corporate friendly than sending them an it department unfriendly .exe they have to install to preview an Intuiface experience.

Once approved we export assets direct from Figma or Illustrator to build the actual experience.

We do however often wonder about the time spent doing all of this in Figma / XD vs just building it straight up in intuiface as the storyboard tool and sharing to minimize the double handling.

So, whats your workflow? Keen to hear how other people operate.

And now for my wish list

Import from Figma / XD into intuiface :slight_smile: or share via browser with no exe to install (on the roadmap?)

Hi @ben1,

I moved your topic to “Best Practices + Tips & Tricks” section since I believe it’s more relevant to this discussion.

As for my personal experience & usage, I don’t use Adobe tools (I let designers do it :stuck_out_tongue: ) and I build all my mock-ups / proof of concepts directly in Intuiface. When I need to share it with a prospect/customer, it usually starts with an online meeting where I’ll share my screen and just run the XP on my PC. I often record the session so they get a video of that experience early version.

If I just need to send snapshots of the different scenes, I either

  • use the Snapshots folder automatically created by Composer and grab what I need here
  • or if I need some snapshots that require trigger/actions to happen first (after animation state of the scene), I’ll run the XP, take these snapshots and merge them in a PDF (I really rarely do that).

Regarding your wish list question, yes the share via browser is in our roadmap :wink:

Intuiface users like @tosolini, @Louie_Smith, @janelle (& Amy) and many others will probably have some good inputs to your question.

2 Likes

Hi @ben1 and thank you for the tag @Seb

For me personally, we have used both Figma and Adobe XD/PSD/AI we use PNG Images exported from any of them and I will work out what I can/can’t create from scratch within Intuiface and go on from there.

Normally we do not build anything within Intuiface unless I have a clear understanding of the client’s requirements or they request a demo of a particular feature (Can you do this?).

But see the below design flow and methodology.

  1. Discussion with the client on the needs and requirements of the experience they want us to create.
  2. Create something quickly based on the first stage and screen record and send them over a video to something similar we have done in the past.
  3. Draw out wireframes based on the discussions with the client (usually on a piece of paper).
  4. Create a scope document based on the previous discussions and wireframes which have been approved by the client.
  5. Start creating formal designs in Figma/Adobe Illustrator/Photoshop for approval based on the wireframes and previous discussions once approved.
  6. Start building the experience and using the exports from Adobe or Figma. Throughout the process, I create videos of the different stages of the development and upload them to YouTube so the client can see progress until the end result and final experience.

I hope this helps

Kind Regards

Louie

2 Likes

Thanks for the feedback guys.

As a former UX/UI Designer, my usual way to go, when I know I won’t have access to my beloved Graphic Designers in house and I’m on my own, is this one:

  1. Start with sketching with good old pen and paper
  2. If more complex behavior is required and needs to be presented or explained, like scene sequencing or layout, then I use Adobe XD
  3. Start Composer to build the Experience “skeleton”, using bland default elements
  4. Refine XP on the fly, usually having Illustrator opened on the side, producing graphic elements and integrating them in the XP as I progress

Regards,

Alex.

1 Like

Our approach is similar to those above. Since our clients are mostly enterprises with tight deadlines, after our initial meeting, we launch two parallel workstreams: the Intuiface architecture and the visual design.

I focus on the Intuiface experience trying to figure out what the interactions will look like. Our designer drafts three variations of the UI using Illustrator. We agree with the client that we’ll iterate incrementally and quickly, so we don’t go down the wrong path, as long as they can provide prompt feedback.

Once the client is happy with the UI direction, we export the graphic assets from Illustrator and we move to showing the Intuiface XP only from that moment forward.

We are big believers in prototyping. Sometimes, we create Intuiface Proof of Concepts (POC) before knowing if we’ll get the contract. POC have pros and cons. They can help your client selling the project up to management, and offer confidence in your services. They can also be a waste of time. But I tend to see them as a sales tool.

2 Likes