How to keep up with large prototypes in Xd

This November Adobe Xd provided a huge update during the annual conference Adobe MAX. It came with a lot of cool stuff, such as components states, real time collaboration, and more. I’ve been using this software for a little less than a year and I have to say, it has changed a lot in the last few months. They have developed a lot of functionalities, keep it up Adobe. Although, it had this major update a lot is still missing, I am sure it will come soon.

At work, our team is developing a big platform, and by big I mean lots of screens and interactions between them. We used to have it all in only one file because it’s what you would expect. As the number of artboards and interactions grew, we needed to do something about it because the software was getting slow. This is how the first file separation in major sections happened. And here is the feature I am missing – External Links to link our other files and simulate navigation through the whole platform.

Then, we realised that working in agile and continuous development cannot go on overwriting the prototype as we go. It provokes conflict with stakeholders and the development team. We needed to close a prototype version with the same pace as our releases. Each one of those files needed to be available for search, allowing us to consult changes and when were they applied. This is exactly how it gets a little bit tricky. We could have the files in Creative Cloud but uploading and updating those big files also got slow.

Another downside was that nobody has the version control over the files and things appear and disappear without leaving a trace. We decided we should go old school, using git, and putting a message with each commit. The most important thing when you develop a modern app is that you are not limited to only one type of 12 grids. (BOOOM!). You can have different grids throughout your design and they don’t need to match (mind blowing, I know). These grids do not come specified in the shared for development prototype, yet. The solution, developers download the files and consult the grids that are used in each section.

This is still a workaround and seems complicated at first, so I hope it changes and adapts better to continuous development.

When the new update was released this November, the first day I was puzzled: “Ohhh…? Ahhh…? Where is my Share button?” It moved from the top right corner to the top left one, so it took me some time to adapt. It looks like a small change, but it is about a functionality you are using everyday and let’s face it, the first couple of days it’s tough.

I am usually excited about the new stuff, so this was no different. One of the coolest things they presented was Components states – simulation of buttons states – normal, on hover, pressed, expanded, those are the basic ones. This also meant that we needed to remake a lot of stuff. Obviously we had already made navigation menus, checkboxes, radio buttons, search areas, etc… the old way. But this new thing meant that we could reduce the number of Artboards and actually present more realistic results. So we got on to it.

Now, we have our main platform separated by main sections with its primary, secondary and tertiary buttons, checkboxes, toggles and radio buttons all clickable from the prototype: “Yey!” I must say they are all shared and it looks very cool, but I would really like to be able to have the whole prototype in the same file. I don’t know what number is the limit for artboards, but I know we have outgrown it very fast.

We needed to prepare a website prototype for a client applying all the different capabilities we have developed so far. Taking into account each one of the included functionalities, each layout change, everything. Here we are developing this prototype for approval and it is getting cra-aa-zy again.

We are already 36 artboard designs in. It includes six different resolutions, light and dark modes, and of course, designs for different sections which multiplies by six resolutions and it grows and grows. We try to maintain everything nice and organized, but with this many considerations, it is insane.

I remember my first website prototype back in 2009, it had 5 main pages, no CMS behind and only one resolution and only one mode. We did designs for a homepage and three or four main pages, including special services and featured elements. In total, it was like 5 screens and we were good to go.

Here we are now, it’s so overwhelming. Sure the tools and computers have become a lot better, it’s faster than ever to develop something cool, but come on?!

The most frustrating thing of all this is that all I mentioned above is necessary, so everybody stays on the same page of what’s being developed. It is great for your client, to see what you are actually talking about. Also for the development team to know exactly what everybody is expecting with little amount of extra information. And here we are, keeping it all connected and trying to develop the next best product. 

A lot of artboards, powerful tools and a lot to keep track of, when somebody asks for changes. I will keep applying all the new stuff as I always do, because it is important to stay up to date. It makes our lives better.

Keep it up and rock on!.


Leave a Reply

Your email address will not be published.