The team that I’m working in is shifting from using Sketch + Zeplin to Figma. While Figma is an amazing inspection tool, the team has concerns about the hand-off process (and mostly version control): In Zeplin, once we upload a screen, it would stay there as is and will not update it unless someone updates it manually. This has created a great sense of stability and to some extent made version control unnecessary. With Figma it’s a bit different as a screen might be updated, changed (sometimes without the designer even aware of that as components are being updated). These kinds of changes cause hurdles in the hand-off process and we are looking into a way to “freeze” the designs and make sure they are not being updated while being developed.
I would like to ask if someone here has a workflow, or a solution, they are using to overcome this problem. Thanks!
I can understand this being hard. The thing with Figma is that its “cloud based” so when updating a slide it will thus update in the presentations etc for everyone. In our teams we tend to share everything as presentations by using the “present mode” (the top right play button).
In terms of avoiding things changing as development continues on: Our team tend to utilise pages for that. So we have one “scratchpad” page where it’s free for us designers to play around and tweak ideas “in private”, then another page for user journeys. Lastly we set up a page called “presentation” which is the only page from the document we share with Dev. This means that they can have a look and only see that page whilst us as designers can continue on without ruin anything. You can right-click on a page and select “Copy link to page”. The presentation URL we share with devs are looking similar to the design document but the URL will say something like https://www.figma.com/proto/ which means they can only view it.
Also remember that you can always go back in the historic view to see if anything is different. Hope this helps or can guide you to a solution!
There’s a couple of ways to approach “freezing” your work:
@Sebastian_Hall made a great recommendation of utilizing pages, clearly annotating what should not be touched. It is difficult to 100% prevent any changes this way.
You can create a separate file with these frozen designs with a specific cover page and updated permissions.
You can utilize branches for frozen versions, updating the permissions on the branch to explicitly prevent edits. Sign up for the branching beta through this form. The connected branch will also act as a separate collaborative space for the appropriate team and their respective developers. This way, your team can still make collaborative edits on the main file without worrying about accidental edits.
As for Sebastian’s solution - that’s a great proposal but I’m afraid that inspecting will not be possible in the “presentation” mode, therefore will not help us much. I guess once we’ll have a proper design system that won’t matter, as specs will be extracted from the components anyway, but until then we’ll need to have inspection on the view itself.
As for Clara’s suggestions: both #2 and #3 suggestions are awesome. (didn’t think to use branching in this way!) Do you have some experience you could share with any of these approaches?
I will run some internal interviews with designers colleagues to collect some pain-points and preferences before coming up with a proposal, so any feedback you have might be useful
Have you tried handoff plugins, like Sympli Handoff? This will be similar to your Sketch + Zeplin experience - uploading screens and preserving this state of the design until someone manually updates them. So you can freeze the designs, discuss them if you need it, and you can be sure that developers are working with the version you want them to work with.
Thanks you - I wasn’t aware of this tool. Zeplin also works with Figma so if we would use a separate tool we’d probably continue using Zeplin. We are trying to reduce the amount of tools we’re using and that’s why looking for a more “native” solution within Figma.
