He’s the hero Gotham deserves, Better Figma Design Sharing UX

A Bat(Wo)man Flavored UX/UI Case Study

Hanan A.S.
A Song of Art & Science
5 min readJan 15, 2023

--

“Know your limits, Master Wayne”

I solemnly swear to step on nobody’s toes. I love Figma❤️ and I highly respect the collective efforts poured into making it the amazing tool it already is. But I am a designer who designs, presents and develops and I can’t help but face a big issue with design sharing UX in current Figma version. So this is only me discussing my dream design sharing UX.

Here are my problems:

  1. Share means collaborate, inspect and share prototype. And each link can be with view/edit/comment access. All links are updated in real time allowing no possibility to work in private until a version is stable.
  2. Developers must signup, navigate the canvas and jump between canvas UI and prototype UI-two different experiences- to implement a flow.
t3alo nshoof w7deh w7deh

Problem #1: Chaotic, Very Live Links

You see, sharing is a vague concept. It means give people access to the design file and it also means share prototype link. So to share a link you must think:

  1. Am I sharing the design with another designer or developer to collaborate on it? In this case I should click the little blue “share” button > invite them by email and make sure the link has “can edit” enabled.

OR copy link from the bottom left corner & enable “can edit” for Anyone with the link.

2. Am I sharing a prototype to get feedback/present to client?

In that case I should toggle the right section to prototype mode, find the flow I need and copy the link. The person who has the link can switch between all other flows in the same page.

I mean…why? my brain can’t take all those links, powers, things…🥺

dema3'e ya 3alam 😩

Proposed Solution: Invite designers. Everyone else gets one link that can be used to play a prototype, comment and inspect elements.

Use the avatar on top to help the designer understand that this “plus” adds collaborators to the design file since the creator appears as an avatar. It also helps that this link is not in the prototype section, so this should naturally be an invite to the file, not the prototype.

invite other designers

As for prototype links: each flow has a direct link as it already is, but changes are not visible to anyone until the designer chooses to publish changes. It’s not so cool when you discover that the flow you just broke while tinkering was being presented to the client at that time 😱😨 This way you can work in peace, and push changes when you are ready.

Problem #2: Developer Must signup, learn to navigate the design file to inspect and jump to prototype screen to see a flow in action…

devs be like…

A designer works with many developers as they tackle projects for multiple clients, and not all developers have or are willing to signup for Figma accounts. Moreover, we can’t expect developers to easily navigate Figma’s design UI to find elements to inspect. Just like you can’t expect a designer to find their way inside an app’s source code. Each trade has it’s tools, you know. You can’t give a carpenter a set of kitchen tools 🙃

Proposed solution: One public prototype link. Toggle between present, comment and inspect modes in one screen. Inspect is protected by a password.

When a prototype link is created in the backend, a random password is assigned to it. When anyone who views a flow in the prototype toggles to inspect mode, a prompt asks for the password, and the designer can share it or edit it as they see fit. Since there is no signup, password can be set to ask again every 30 days for example.

I actually love XD’s one page experience for development links so I used that here, only change is: one link, not 100. One password per prototype. A prototype (all flows) remains unchanged in the link until it is manually updated by the designer. And that’s pretty much it 🤷🏻‍♀️

It’s also nice when the developer can nudge the designer from inside the popup to send the password, take easy-of-use to the next level.

“Do you know the only reward you get for being Batman? You get to be Batman.”

And I know no one may care about all this, but at least I got to explore the flow I would love Figma to implement, and that to me is enough.

I can be Bat(wo)man if I want to. It’s my birthday. Ana 7orra 🎂🦇🦸🏻‍♀️

So to conclude: I love the Figma experience 🥰 But I do not think design sharing and handover gets the focus it deserves.

I think we can use the prototype UI to inspect without having to signup for a Figma account if we use some inspo from XD’s preview UI. Having a password that locks inspect will solve the privacy problem, especially since it is auto-generated and requires no effort. Designers can work in peace after the first draft is shared since updates are not synced in real time.

If you hate me for daring to write this, calm down, I’m just a user with a problem and I am trying to share it with people who may care about it.

“Endure, Master Wayne. Take it. They’ll hate you for it, but that’s the point of Batman, he can be the outcast. He can make the choice that no one else can make, the right choice.” — Alfred Pennyworth, The Dark Knight

--

--

Hanan A.S.
A Song of Art & Science

What remains of a Human Female. Digital Product Designer. Bookworm.