Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Figma / Help

Version Control

Version Control

Figma / Help · February 6, 2019 at 9:01pm

Hi!

My journey have been Sketch -> Figma -> Sketch. Whereas Figma was a great discovery and I love how streamlined is the component management, there are 3 major reasons for the move back to Sketch:

  • Open-source plugin environment (we build internal plugins in Product Design team)
  • Team being used to Sketch
  • Version Control (Abstract)

My question is: how do you guys control version in Design teams using Figma? Is there any Abstract equivalent for Figma?

Thanks!


February 6, 2019 at 10:17pm

Hey @gpijoan this is a great question.

  • reply
  • like

I've noticed that teams are managing versioning in Figma in a few different ways. We do have built in version history and the ability to create checkpoints in Figma, but we agree this system could be a bit more robust, and it's something we're actively thinking about. :)

like-fill
4
  • reply
  • like

And then as far as plugins go, this is soemthing we're actively working on solving. We want to make sure we get this right though so stay tuned on this.

like-fill
2
  • reply
  • like

February 6, 2019 at 11:49pm

I don't really miss the sketch plugins I used to use in sketch, paddy was cool but only if everyone had it and anima got unreliable between users, that's the problem with plugins installation comparability between local installations. Figma allows me to use files across platforms so much more reliably. i would like to see their design data features using simple text files. Those are genius.

like-fill
4
  • reply
  • like

February 7, 2019 at 7:29am

I've noticed that teams are managing versioning in Figma in a few different ways. We do have built in version history and the ability to create checkpoints in Figma, but we agree this system could be a bit more robust, and it's something we're actively thinking about. :)

Thanks @josh, that would be a major upgrade for the tool and a factor to, potentially, move myself back to Figma. Perhaps if you do an open-source plugin environment Abstract could be used also in Figma and you hit two targets with one shot :D

  • reply
  • like

I don't really miss the sketch plugins I used to use in sketch, paddy was cool but only if everyone had it and anima got unreliable between users, that's the problem with plugins installation comparability between local installations. Figma allows me to use files across platforms so much more reliably. i would like to see their design data features using simple text files. Those are genius.

Didn't mean any plugin specifically but the concept in general. Is true that I didn't really miss any (althought some makes life much easier) but having the possibility to create your own plugin is powerful. I created a plugin to pull real data from our company's endpoints and we can now easily fill our designs with real movie covers or movie snapshots with two clicks. That is something couldn't be reproduced in Figma nowadays.

like-fill
1
  • reply
  • like

February 7, 2019 at 10:30am

Figma are actively developing their API

like-fill
1
  • reply
  • like

February 7, 2019 at 1:03pm

Need an older version of what we worked on together, at the same time? Just open the auto saved versions, ah there it is, found it. Copy the pieces you need from the old version and keep going

  • reply
  • like

Honestly, I was tasked with trying to get uptake of Abstract so other designers would follow a git like process for version control. This....was just very cumbersome to explain to other designers, let alone get everyone to adhere to the process smoothly in an agile environment.

like-fill
1
  • reply
  • like

With Figma, all I have to do to explain is, "It's like Google docs."

like-fill
1
  • reply
  • like

I'm thrilled that Abstract exists, I wanna try that workflow again with Sketch. That said, never hitting Command+S anymore is just too amazing. As far as version control pain points with Figma: things are moving around live. This can cause some, "Wait....where did that go? That was just here..." That said, this hasnt been a major problem on agile teams for me. Tight communication, I can so quickly send them a link to what theyre looking for, it's just fast. Period.

  • reply
  • like

February 7, 2019 at 2:48pm

Honestly, I was tasked with trying to get uptake of Abstract so other designers would follow a git like process for version control. This....was just very cumbersome to explain to other designers, let alone get everyone to adhere to the process smoothly in an agile environment.

I had the same problems with Abstract and Plant - lack of grocking it from design team. I have lost hours in Sketch with work lost when it has a memory panic and dies when you forgot to save. I think I lost 5 minutes in figma in a year.

Edited
like-fill
1
  • reply
  • like

February 7, 2019 at 3:54pm

I miss Pixelapse! Do you guys remember that one? It was git for design files. It's a shame they shut down the project.

  • reply
  • like

February 7, 2019 at 8:41pm

the solution we're using to handle version control at my work is —

Every project has two files, the 'Designer File' and the 'Developer File'. Designers work inside of the designer file, and the developers refer to the developer file.

When the designers meet with a client, users or internally for a feedback session, we use the in-built version functionality to mark each iteration as a new version.

When the client signs off on an iteration or change, we copy over the UI from the designer file into the developer file under a new 'Page'. The page is dated, given a version and a small title or description (for instance 'Feb 5th – v1.2 – Minor consistency tweaks). Then we produce a change log inside of Confluence outlining both a high-level summary of the changes, then a nitty-gritty screen-by-screen list of changes between the latest version and the previous version.

This way the developers only have to refer to one link, and they know the page at the top of the 'Pages' panel will be the latest (with a date to confirm). It also means the designers can have a working file that isn't being referenced to by developers.

like-fill
4
  • reply
  • like

February 8, 2019 at 9:06am

the solution we're using to handle version control at my work is —

Every project has two files, the 'Designer File' and the 'Developer File'. Designers work inside of the designer file, and the developers refer to the developer file.

When the designers meet with a client, users or internally for a feedback session, we use the in-built version functionality to mark each iteration as a new version.

When the client signs off on an iteration or change, we copy over the UI from the designer file into the developer file under a new 'Page'. The page is dated, given a version and a small title or description (for instance 'Feb 5th – v1.2 – Minor consistency tweaks). Then we produce a change log inside of Confluence outlining both a high-level summary of the changes, then a nitty-gritty screen-by-screen list of changes between the latest version and the previous version.

This way the developers only have to refer to one link, and they know the page at the top of the 'Pages' panel will be the latest (with a date to confirm). It also means the designers can have a working file that isn't being referenced to by developers.

That's a great overview you will lose the comments on the copy but I don't think they are relevant to develop if they have the release notes.

  • reply
  • like

February 8, 2019 at 5:48pm

Each file corresponds to a JIRA issue for us. And the document is named accordingly. (ie. LPA-123) And then title with the feature, view, etc. and the date the file was last touched. Within the file we have Live, Verification, Iteration, and Prototype pages. Both Iteration and Prototype pages can have multiple pages with different names depending on the complexity of the design challenges.

like-fill
2
  • reply
  • like

Live is what the developers work from, and they have access to the other pages throughout to help provide feedback..and general interaction. Verification is where UI elements go that Product / Business need to give the thumbs up on before moving forward. Iteration is of course iterations on designs with prototypes being interactive click-throughs.

  • reply
  • like

Anytime we make a major set of changes we (ctrl-alt + s) and create a new version with an accompanying name and description. And we also clear out iterations as we are refining, and rely on version history if we happen to need something new, or decide to revert to a specific path from an earlier iterations.

  • reply
  • like

We create "branches" by simply adding branch after the name in the original title. We limit this as often as possible as we like to live within a single file if possible. This allows comments, and the design history to remain together.

  • reply
  • like

We also have a Design System Library that everything feeds from, and a "Views" Project that contains all the completed screens separate by app, and specific target. That's our workflow in a nutshell.

  • reply
  • like

February 11, 2019 at 7:46am

@mrbrianhinton sounds interesting but how do you move things from Verification/Iteration to Live and how do you communicate it to developers? Is there any automatism around it or is it manual work?

Also, how do you manage conflicts in case you find some?

  • reply
  • like

February 11, 2019 at 11:40am

@gpijoan Products get moved from Iterations to Verification when design believes it's ready for Product and Business to review. Then once they have approved the design it gets moved into Live. Figma has commenting. We either ping members of engineering in Figma, OR we discuss and review with them as needed.

like-fill
4
  • reply
  • like

Conflicts? We have yet to have anything I'd consider a conflict. You don't merge files. You just edit one together. If we have a separate file we simply copy it in.

like-fill
1
  • reply
  • like

February 11, 2019 at 2:40pm

I had similar questions here https://spectrum.chat/figma/tips-and-tricks/versions-vs-branches~da9bee6b-a3d7-4142-a464-59c5adffff91 and reached out to the team before committing. They told me at the time it wasn't on their roadmap. But that was a few months ago.

  • reply
  • like

February 11, 2019 at 11:12pm

I've noticed that teams are managing versioning in Figma in a few different ways. We do have built in version history and the ability to create checkpoints in Figma, but we agree this system could be a bit more robust, and it's something we're actively thinking about. :)

The versioning could def be a bit more robust, and given the nature of the tool it seems like the audit log should be a basic feature not just for organizations. We end up relying on Sketch w Abstract to offer a birds eye view.

  • reply
  • like