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.


Creating a new project

Open the menu bar application by clicking the Qwikly logo and click New Project to open the new project window. Qwikly project templates are an easy way to bootstrap iOS projects. They contain Sketch design files and functionality presets to create powerful, reusable starting points for your next app.

create new project

Select a template, fill in the required settings, and click Next to complete the setup. Qwikly will open the new Sketch document and show the Qwikly toolbar.

select a template


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

Using Components

You can use special symbols called Components to easily add functionality to your app designs. Using Components in your design will allow Qwikly to convert your layers into higher-level views such as sliders and text inputs. For more information about each Component, see Components.

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.

Optimum 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 create new projects using Qwikly templates.

qwikly app


Project Templates

Project templates are a great way to get started using Qwikly, combining ready-to-use design assets with pre-configured functionality. Just clik Create New Project and pick a template to get started. Then, once you've configured your new project, click Done to open the new project in Sketch.

project templates


Activating Qwikly

To activate Qwikly, you must first purchase a license from our website. Once you have your license key, click Settings > Activate Qwikly 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 controls how the selected layer or group in Sketch is represented when Qwikly generates your iOS app. Depending on the type of layer you have selected, different options will be available. For example, if you have a text layer selected, you can use the View Settings panel to make sure Qwikly knows to create an editable text field, instead of a label (which is the default).

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


Components

Powerful, reusable views

You can use special symbols called Components in your designs to easily add complex views with standard functionality. For each component, there are a few properties that you can set by updating your design, as well as some that can only be updated in Xcode.

To add a component to your design, use Insert > Symbol from the Sketch menu.

Slider

slider

Usage

Use a Slider component when you want need to work with a range of values between a known range.

Properties

Max tint color: Color "Track > Maximum Track Tint"
The color used for the maximum section of the slider's range
Min tint color: Color "Track > Minimum Track Tint"
The color used for the minimum section of the slider's range
Thumb tint color: Color "Thumb"
The color used for the slider's handle

Switch

switch

Usage

Use a Switch when you want need to toggle between two states.

Properties

On tint color: Color "On > Tint"
The color used for the switch when it is on
Tint color: Color "Off > Tint"
The color used for the switch when it is off
Thumb tint color: Color "Off > Thumb"
The color used for the switch's handle

Text Field

Use a Text Field when you want the user to input text.

text field

Properties

Font : Font "Field > Text"
The font used by the text field
Font size : Number "Field > Text"
The font size used by the text field
Placeholder: Text "Field > Placeholder"
The text displayed by the text field when no value is present
Text : Text "Field > Text"
The default text displayed by the text field
Text color : Color "Field > Text"
The text color to use for the text field