Silver is a combination of an iOS app, a Mac app, and a Sketch Plugin that seamlessly communicate with each other to make your mobile design process as smooth as possible.

Back Story

I started working on Silver as a side-project in early 2015, when my hunt for the perfect prototyping tool yielded mixed results. During my search I discovered some brilliant tools, including Framer, Pixate, Form, Origami, Invision, Flinto, Marvel, Proto.io, and UXPin. Each of these tools had their own unique benefits, but they all added more chores to my design process. While some were geared towards designing micro-interactions, others were great for flow-based prototypes. And with absolutely no integration between these tools, it was painful to switch between them at every step of the process.

Basically, I was unable to find just one single app that fit all my needs.

And my needs were simple :

• When designing an app, I need to start prototyping a user-flow from the get-go. Although I’m designing one screen at a time, the flow is the complete story, and I don’t want to lose track of it.
• I need to instantly see how the app will look, feel and flow on a mobile device, without having to export images, sync files, or draw hotspots (I hate drawing hotspots). The easier it is to make a prototype, the less attached I am to it, making it that much easier to discard if I realize it isn’t the best approach.
• I need to first design my app at low fidelity and start testing it. As I learn from these tests and iterate on the design, I want to simultaneously bump up the fidelity at every step, without having to switch tools.
• I need to work within the constraints faced by developers who will eventually build the app, so that we don’t end up with a design that is outrageously difficult to build.
• I want to continue designing in Sketch because it is, by far, the best tool for designing interfaces. I need a tool that will integrate well with Sketch, taking advantage of all the great plugins and features that come with it.
• Once the overall flow is defined, tested, and approved, I need to prototype micro-interactions at a screen level. Framer is my personal favorite tool for adding screen-level interactivity in a prototype, so the ideal tool would integrate well with Framer.
• Most importantly, I need to reduce the mundane chores that have infiltrated my design process, so I can instead spend that time talking to customers, doing research, or simply prototyping more options to test.

Rather than complain about the lack of this silver-bullet app, which would magically solve all my problems, I started building it myself. I was already making plugins and knew a bit about the internals of Sketch, so a plugin-based solution immediately appealed to me. I then teamed up with Andrey, who I consider to be one of the gurus of plugin development, to help take the idea to the next level.

Here are some of the capabilities of Silver that we ended up building, and how you might use them to speed up your design process :

Integration with Sketch

When you install Silver on a Mac, you will also be asked to install the companion Sketch Plugin which communicates with the Mac app behind-the-scenes. The Silver app itself lives in the menu bar, and helps you connect to mobile devices, but all other functionality is built right on top of Sketch and is facilitated by the plugin.

All the logic that converts your design into a prototype lives within your Sketch document. Our goal was to eliminate the process of importing, exporting, syncing, and switching between tools.

Connect Devices via WiFi or USB

If you’re designing a mobile app, you must preview your designs on a mobile device while you design the interface. No excuses!

With the Silver Preview app installed on your iOS device, you can either stream changes made to the current Artboard from Sketch, or preview entire Flows created using the Silver Sketch Plugin.

Connecting devices via WiFi gives you the flexibility to show your prototypes around the office, but Silver also lets you connect devices via USB, which greatly improves mirroring speed. Silver automatically switches between USB and WiFi based on whether a device is plugged in.

Design Flows, Not Just Screens

One of our favorite features of Silver is the ability to link Layers with Artboards to create Flows, directly within Sketch. To create a Link, select a layer and type the ‘C’ key on the keyboard. This launches an Interface-Builder-style noodle connector which can be dropped onto the destination Artboard. You can then select the gesture that triggers the transition and other details specific to the transition type.

When you create a Flow using Silver and preview it in the iOS app, what you get is an actual iOS navigation stack with real transitions. Not only does this make your prototype feel more realistic, it also helps you use the iOS navigation structure to your advantage.

Silver supports three types of transition segues :

Push Transitions

Creating Push Transitions

You would use a Push transition for navigating to the next hierarchical level of your app’s content. For example, going from a list of chat conversations to a single conversation in a messages app. To go back to the previous screen you can either swipe from the left edge of the screen, or set up a layer with a Link Back behavior.

Modal Transitions

Combining Push and Modal Transitions

A Modal transition is used to begin a self-contained task that must either be completed or explicitly abandoned by your users. Composing a new email, posting a new photo on Instagram, creating a new note in Evernote, are all examples of self-contained tasks that must be completed in one or more hierarchical steps, or must be cancelled altogether. To cancel a modal task, you must create a layer with a Dismiss Modal behavior.

Modal Transitions provide more flexibility in terms of animating the destination Artboard in and out. You can also set up a Modal Transition to be dismissed interactively with a swipe gesture.

Creating a Slide-Out Navigation using Modal Transitions

No Transition

In cases where you wish to instantly switch to another Artboard, you can achieve that by setting Transition type to None. This will instantly replace the current Artboard with the one you link to. You might use this in cases where you wish to show the current Artboard in a different state. You could also use this setting to prototype a Tab-bar based app, and set transition to None when switching between different tabs, like this:

Creating a Tab Bar app using Artboard Links with No Transition

Trigger Core iOS Functionality

In addition to creating flows, Silver also lets you create Link layers that trigger core iOS functionality such as launching the Camera, browsing Photos, launching the system Email or SMS composers, making a phone call, or launching an external URL in the default browser. You no longer need to create fake static screens to emulate such functionality in your prototypes.

Here’s an example that shows how to create Links that allow users to browse photos on their iOS devices. You can also use the selected photo to fill a layer, by naming it _photo.

Creating a Link to Browse Photos and displaying the selected photo

Fixed Headers and Footers

Silver lets you create fixed Headers and Footers with a mere keyboard shortcut. Select the layers you want to keep fixed, hit Ctrl+Shift+H for Headers or Ctrl+Shift+F for Footers, and you’re done. Any changes made to the size and position of these layers thereafter, will update the preview automatically.

Live Input Fields

Sometimes you need to prototype a Flow that requires users to enter some information. Perhaps it’s a simple Login screen with Username and Password fields, or an Edit Profile screen that contains more text fields. You may tend to fake this behavior, since creating an actual input field in a prototype is quite a painful process.

Well, not anymore. With Silver, you can make a regular Text Layer in Sketch convert to a live input field during preview, just by editing a few settings. Live input fields bring some of the functionality of UITextField objects, such as setting placeholders, showing a clear (x) button within the textfield, selecting a keyboard type, etc., within your reach as a designer.

Embed WebViews

Silver can also convert rectangle shape layers into live Web Views. This might come in handy when you have some functionality of your app already built in HTML, and you want to add new designs in an existing context.

Web Views can also contain links to local Framer prototypes. This allows you mix screen-level interactions built in Framer, with the broader context of your app. A module for Framer is also in the works, to make it easier to call Silver-specific functionality directly from your Framer code.

Public Beta

These are the features included in the private beta that we’ve been testing so far, and this is just scratching the surface. There is a lot more planned for the final release later this year.

We will be inviting a limited number of designers/developers to join our public beta, which will begin in a couple of weeks. If you’re interested, please sign up on silverflows.com.