Overview

A brief overview of the Qwikly design-to-code system.

Getting Started

Start here to learn the basics of building apps with Qwikly.

Before you install

Before using Qwikly, make sure you have Sketch and Xcode installed. If you already have these tools installed, feel free to skip ahead to the "Installing Qwikly" section.

Installing Sketch

You can download a free trial of Sketch from their website. The free trial works just fine for getting started with Qwikly, and installation is as easy as downloading the app and dragging it into your /Applications folder.

installing sketch

Installing Xcode

Xcode is available for free from the App Store. Note that Xcode is a large download and can take up to several hours on some connections. Once the download and installation completes, make sure to open Xcode at least once. This will install the additional components (like the iOS Simulator) required to build apps with Qwikly.

installing xcode

Installing Command Line Tools

If you are having problems building your app because you don't see a list of simulators, there's a good chance you have to install and setup the command line tools. Qwikly will attempt to install the command line tools for you if it does not find them, but in some cases you may need to install and setup the command line tools manually.

Open up Xcode and click on the Xcode -> Preferences menu. After clicking on the Locations tab you need to make sure the Command Line Tools select box has the current version selected.

setup command line tools


Installing Qwikly

You can download a free version of Qwikly from our website. Just click any of the download links on the site, and fill out your name and email, to begin downloading Qwikly. Once the download has finished, open Finder and double-click the zip file. Drag Qwikly.app into your /Applications folder and double-click it to complete the installation. Be sure to restart Sketch after you launch Qwikly.


Works with existing designs

You can enable Qwikly for any Sketch document - just make sure to save it first. Click the button in the top left to turn things on.

enable qwikly

Once you have enabled Qwikly for your document, you can use the Qwikly Sketch plugin to build and run your app, update your Project, Scene, and View Settings, and add View Interactions.


Running your app

Once you've created your Qwikly-enabled Sketch document, click the play button to run your app on the iOS Simulator. The simulator allows you to use your app without installing it on a physical device like an iPhone. After Qwikly generates the source code for your iOS app, it will install and run your app. This process may take a few moments to complete and will take slightly longer for larger projects.

running your app

If your trial has expired, you will need to Buy Qwikly to do future builds.

running app


Qwikly for Designers

Enabling Qwikly for an Existing Design

If you already have a Sketch design document for your mobile app, you should be able to get started with Qwikly in just a few clicks. First, make sure you have the necessary software installed by following the Before you install and Installing Qwikly sections of the Getting Started guide.

With your sketch design open, the fastest way to enable Qwikly is by clicking on the button in the upper left.

enable qwikly

Once you have enabled Qwikly for your document, you can use the Qwikly Sketch plugin to build and run your app, update your Project, Scene, and View Settings, and add View Interactions.

Color Settings

In order to ensure that the colors in your app match those in your design, you should set your monitor's color profile to sRGB. This will ensure that the colors you use in your design are the same ones used when your app runs on the Simulator or device.

color settings


Qwikly for Developers

Guiding Principles

Qwikly was designed to work hand-in-hand with custom code development. We have worked hard to incorporate the principle of least surprise into how Qwikly works and the source code that it generates. With an understanding of iOS development, you should be able to use Qwikly without much ramp-up.


How Qwikly Works

The Qwikly Sketch plugin allows the designer or developer to describe how the iOS app that Qwikly generates should behave. Wherever possible, we have tried to ensure that the code that Qwikly generates can be easily extended or modified by an experienced iOS developer.

how qwikly works


Say Hello to QwiklyKit

Each iOS project that Qwikly generates contains a custom iOS framework called QwiklyKit. Each copy of QwiklyKit is unique - Qwikly generates and includes a copy of QwiklyKit each time you build and run your app. The full source code of your app's QwiklyKit is included in the Xcode project that Qwikly generates. You should never modify the contents of QwiklyKit, because it will be regenerated the next time you build and run.

qwikly kit


Extending Your App

QwiklyKit contains the the view controllers and custom views that Qwikly generates on your behalf as base classes. The Xcode project for your app uses subclasses of these base classes to drive your application, so you can easily modify or extend the subclasses as needed. For example, you might override a view controller's viewDidLoad method to initialize some custom property or make an API request. The subclass source files included in your Xcode project will not be overwritten on subsequent builds and can be used to develop using custom code.

Consider the following example, showing a view controller subclass that has been modified to set a new title for the view controller once the view has loaded:

// InitialSceneViewController.swift

import QwiklyKit
import UIKit

class InitialSceneViewController: InitialSceneViewControllerBase {

  override func viewDidLoad() {
    super.viewDidLoad()
    // perform your custom set-up code here.
    // This code won't be overwritten when Qwikly builds your app
    self.title = "Welcome to MyApp!"
  }

  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
  }

  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
  }

}

Custom Actions

When you need to trigger a bit of custom code in response to some user action, you can use Qwikly's view interaction system to do this easily. To get started, select a layer or group in Sketch and create a new view interaction with the "Custom" action type. When you build your app, Qwikly will create a stub implementation for your custom method in the view controller subclass included in your app's Xcode project. Simply modify the contents of the method body to include whatever custom code your app requires.

custom action

Consider the following example, where the value "doSomething" was used for the custom action selector:

// LoginScreenViewController.swift

import QwiklyKit
import UIKit

class LoginScreenViewController: LoginScreenViewControllerBase {

  // ...

  override func doSomething() {
    // add your custom code here
  }

  // ...

}


Interface

A quick tour of the Qwikly interface

The Qwikly status bar app

The Qwikly app lives in your status bar and is responsible for coordinating your builds and installing the Sketch plugin. You'll also use the Qwikly app to install updates and manage your user preferences.

qwikly app


Activating Qwikly Pro

To activate Qwikly Pro, you must first purchase a license from our website. Once you have your license key, click Settings > Activate Qwikly Pro to open the activation form. Enter your license key, then click Activate to activate Qwikly on your computer.

activate qwikly


System Profile

The System Profile preferences section can help diagnose and troubleshoot issues you might run into using Qwikly. To access the system profile, click Preferences from the settings menu then click the System tab.

system profile


Sketch Plugin

The Qwikly plugin for Sketch is where you will design your app's iOS buildout. It is installed by the Qwikly app and updated automatically whenever a new version is avaiable. The plugin UI is comprised of a toolbar next to the layers list in Sketch, and you can toggle it using the Plugins > Qwikly > Toggle Qwikly plugin command.


The Run Widget

To build and run your app on the Simulator, click the play button in the upper left of the Qwikly toolbar. You can also use the keyboard command ctrl-shift-r to run your project.

build settings


Project settings

Project Settings apply to your project as a whole, and they don't need to be changed when you are first getting started. Before you ship to the App Store, though, you'll need to make sure to update the settings in this section.

project settings


Scene settings

Scene Settings apply to the current artboard and are used to control how your artboard is converted into an app scene.

scene settings


Understanding View Settings

The View Settings panel displays information about how the layer will be converted to code.

view settings


Adding a View Interaction

Adding a view interaction is as easy as selecting a layer and then choosing a gesture type from the drop-down list. For example, we can create an interaction that transitions to another scene when a user single-taps on the selected view. By adding interactions, you can easily create powerful UX flows without writing any code.

view interactions


Help

Qwikly's integrated help system will show you information about the panel you are currently using. To toggle the help panel, click the question mark icon in the lower left corner of the screen.

help