Getting Started

Welcome to Qwikly, the fastest way to go from mobile designs to working apps. Using Qwikly, you’ll be able to import your UI directly from design programs like Sketch, add functionality using the Qwikly UI, and build them as mobile apps.

Requirements

There are a few things you’ll need to have before you can really use Qwikly:

  • Sketch - Download and install
  • Xcode 7 - Available from the App Store

With that out of the way, let’s take a look at some of the basics:

Import from Sketch

The first step for most projects is to import a Sketch document. This will load the UI information from the Sketch document into Qwikly and create a .qwikly file in the same folder as the Sketch document. The .qwikly file will contain all of your app’s configuration and settings.

To import a Sketch document:

  1. Use ‘Menu > File > Open…’ to open the dialog
  2. Select a Sketch document
  3. Click ‘Open’ to import the Sketch document

You can also import a document from the ‘Welcome to Qwikly’ window:

  1. Use ‘Window > Welcome to Qwikly’ menu item to open the welcome window
  2. Click ‘Import from Sketch’
  3. Select a Sketch document
  4. Click ‘Open’ to import the Sketch document

Check out an example app

To get a sense for the types of things you can do with Qwikly, check out the example apps.

About the UI

The Qwikly UI is divided into three panels: the Explorer, the Canvas, and the Inspector.

The Explorer Panel

The Explorer displays a hierarchical list of the current scene. Click on a row to select that view.

explorer-panel

The Canvas Panel

The Canvas displays a visual representation of the current scene with the selected view highlighted. Click on an element in the Canvas to select the corresponding view.

canvas

The Inspector Panel

The Inspector displays a set of control panel inspectors for the currently-selected view.

inspector

Project Settings

Each project in Qwikly has its own settings that are stored in the .qwikly file. To access the Project Settings, use ‘Menu > File > Project Settings’

project-settings

Build Settings

These settings control how the project is built using the ‘Menu > Product > Build’ and ‘Menu > Product > Release’ actions. They must be configured before you can build your project and run it in XCode.

Integrations

These settings determine how your app interacts with external services such as Facebook, GitHub, or your own API service.

For more information about integrations, see Working with External Integrations