You would tell the app something like: I’m starting a new project, here is the directory where I want it stored (so the app can check if a structure already exists and if so, import it), its name and version number (e.g. Instagram version 8.0), the platform it’s designed for (e.g. iOS 9+, iPhone only), a target resolution (iPhone 7), and the software I want to use (Sketch).

What happens with all that information? Well, in the scenario above, the app would securely connect the company’s server, and create a directory called Instagram/iOS/iPhone/8_0_0/ with a file in it: RootView.sketch.

Within that Sketch file, would be three Pages (each corresponding to the device sizes supported by the version of the OS you selected, in this case a Page for the iPhones 5/5S, 6/6S/7, and 6 Plus/6S Plus/7 Plus). The default Page would be that of your target resolution device (iPhone 7), and in that Page would be five empty artboards (named appropriately), one for each of the states you need to be designing for: Ideal, Error, Partial, Loading, and Empty.

To go even further, stock UI elements like the iOS Status Bar could be automatically generated for every artboard.

When going back to UI/FS, you’d see a live preview of the view you just designed, a collapsed stack of designs for each state, and the option to make a new view. Behind the scenes, a new Sketch file has been created in a nice, consistent way on the company’s server.

Clicking on the stack (with the Ideal State on top) could “explode” out the stack to show all five states to give you an overview of where the project’s punchlist stands.

An example of our “file system” after the root view has been designed and Sketch has been quit.

Back to the Interface

So let’s say you’ve designed your root view. Let’s switch examples and say you’ve designed Instagram’s root view: a stream of photos. In it, you’ve designed a classic 5-item UITabBar. The next thing your manager assigns is the Search View.

In UI/FS, you could go about this in two ways: you could create a new isolated view, or you can make a connection between the original view and the new view.

You could Option+Click roughly where the search tab is in the preview window, and drag over to the “Create New View” UI element. In this flow, we already know the name and version number (Instagram version 8), platform (Android API level 19+), target resolution (Google Pixel), and software (Photoshop). All I need to do is give the new view a name. I go for the obvious: Search.

In this scenario, we’d create a directory called Instagram/Version_8/ with a file in it: SearchView.psd, and automatically open it in Photoshop. It would have the artboards for the five states we’re designing for. But now when I’m finished designing, and I return to UI/FS, I’d have the beginnings of not only a complex file structure, but also a flow diagram and spec.

In the native file system, you’d have something like this: