Building Example Apps

Each example app contains the Qwikly, Sketch, and Xcode project code required to build the example.

To get an example up and running:

  1. Download the .tgz file and double-click to expand it
  2. In the expanded folder, double-click the .qwikly file to open it in Qwikly
  3. Use Menu > Product > Build to generate the Xcode project
  4. Open the .xcodeproj file contained in the folder
  5. In Xcode, make sure the example app target is selected
    • For example: if you are working with the ‘Calculator’ example, make sure the ‘Calculator’ target is selected
    • For more info about setting the active target, see this page
  6. In Xcode, use Menu > Product > Run to build the project and run it on the Simulator

That’s it! You should have the example app running on the simulator.

Exploring the example app

Each of the example apps has a documentation page that explores the concepts used in the app. As you’re looking through the examples, there are a few things you can do to dig into what the example is doing:

  • Open the Sketch document
  • Edit the custom code in the Xcode project
  • Update the Qwikly file

Open the Sketch document

Use Menu > File > Open Sketch File (cmd-shift-O) to open the associated Sketch document for any Qwikly project. Changing colors and static text and then running the “Export to Qwikly” Plugin is a great way to get familiar with how Qwikly works with Sketch.

NOTE: Use caution when changing layer names or removing layers, as some layers might be required to make an example work.

Edit the Xcode project

The included Xcode project folder is where custom code for each example app lives. The Qwikly build process will not modify the this directory. If you’re familiar with Swift, this is a great way to explore Qwikly’s custom code support.

Make changes in the Qwikly UI

Finally, you can explore each example in the Qwikly UI. Many common app features are available to you via the Qwikly UI, so it’s worthwhile to understand how each example is put together. Qwikly supports Undo/Redo via the Menu > Edit menu, so you don’t need to worry about making breaking changes.

Questions? Issues? Suggestions?

We are always looking to improve our documentation and support materials. If you run into any issues in the example apps, or if you have a suggestion for something you’d like to see, please let us know at