Slide UX | The User Experience Design Consultancy

View Original

Collaborative UX Design with Axure Pro and Beanstalk SVN

Slide UX Staff

At Slide UX, we often share Axure wireframe files via Beanstalk SVN Repositories. We do this so that:

  • Multiple users can edit a file at the same time.

  • We always know where the latest source file is.

  • We can keep version control in case we need to revert to past versions of a file.

  • We can track changes.

Here, we'll use step-by-step instructions complete with pretty pictures to show you how to create a Beanstalk SVN repository to share and collaboratively edit a file created in Axure 7.0 Pro. 

Guidelines for Sharing Axure Files (AKA Lessons Learned) 

See this form in the original post

  • Communication is key! Talk to your co-authors and let everyone on the team know which files will be used by whom each day. This reduces the likelihood of team members running into conflicts.

  • Don't upgrade without speaking up. Updates to Axure (even X.X releases) are typically not backwards-compatible. And users are only prompted to update when they start the software - so users who don't restart frequently may not know when something's changed. Do your team a favor, and agree about the right time to upgrade. We've found that failure to upgrade together can cause pages to corrupt.

  • Always get changes before you start. Although screens are updated when you check out, you might reference screens that you don't check out - and you don't to be the one that is drawing from old work.

  • Be a good teammate and always check files in at the end of a work session/day.

  • After the document has been released and/or if there are other teammates collaborating, please note the changes that you made and where it makes sense, the reasons for changes as you check files in. You might use SVN to do this - or you might employ other methods of change tracking.

Now on to the good stuff.

First, you need to set up the repository in Axure.

1. Log into your beanstalk account

2. Once inside the system, you'll see the + Create a Repository button.  Click it!

3. A new page will appear prompting you to create a repository title.  We typically organize our repos by client name or project depending on the complexity of the relationship/engagement. Axure relies on Subversion, so make sure that's selected.  We also typically accept the suggested repository path (NOTE: they'll force you to use lowercase letters, making the URL case sensitive in later steps).  We don't use color labels - but hey, to each his own. When you're done here, click Next.

4. On the Data Import screen, select Create the repository from scratch and the checkbox for Create trunk, branch and tag directories.

5. Now we're onto permissions. With our company structure any team member could need to work on any project at any time, so we like to give everyone permissions to the file.  Beanstalk must agree with our approach, because these are the default settings. Configure to suit your needs. Don't worry, you can always come back and modify these permissions later if you decide to revote or grant additional access. Select Set Permissions.

6. Congratulations!  You've done it.  Now, either leave this window open or copy the repository link because you're going to need it soon.

We're exactly halfway there!  

Next, you link it to your Axure file.

7.  If you're anything like me, you've been working and have already created your Axure file before you remember that you want to make it a team file. No worries, just open it before starting these next steps!  If you're really prepared and want to start from scratch, simply open a new blank Axure file.

8.  With the file open (or new file), click on File in the menu bar and select "New Team Project (PRO)..."

9.  In the modal that appears, Axure prompts you to Create Team Project by entering the project name.  This could be anything.  We tend to use the same naming structure as when we create the repository to keep things similar.  Select "Next."

10. Next, you're prompted for the Team Directory.  This is where you paste the Beanstalk Repository URL you copied/saved in Step 6.  Enter the full URL including HTTPS:// and select "Next."  NOTE: The URL is case sensitive so for the sake of all our sanity, please copy/paste the URL.

10 1/2: NOTE: You may be prompted for you Beanstalk credentials.  Just enter your username and password calmly and everything will be okay.

11.  Now it's time a local directory to store your copy of the Team Project.  When you finish, the .rpprj file and DO_NOT_EDIT folder will be created in the local directory you selected. Once your computer has a local copy, you do not need to get a new local copy and can just open the RPPRJ file.  The local directory is making a locally saved working version of the file.  Nothing is added to the repository until you manually decide to check-in your files. Just let this step do it's thing and select "Finish."

12.  Congratulations, again!  If you followed these instructions correctly, the open Axure file has successfully been loaded into Beanstalk.  Axure should now be displaying a Success message.

More Info