Skip to content
English
Submit a request
  • There are no suggestions because the search field is empty.

Creation & Educational Modals

Guided microapp creation with templates, scratch flow, dropzone UI, and onboarding tutorials for design tool users

1. Purpose & Scope

This article documents the creation and educational modal experience introduced in Tiled v55.0.1. The December 2025 release delivers a significant expansion of the new-user and new-microapp creation journey, introducing guided flows, template selection, scratch creation, a dropzone upload UI, and updated educational tutorials covering tile personalization and design tool onboarding.

Scope: All Tiled users creating new microapps. Particularly relevant for first-time users and those transitioning from external design tools (Figma, Canva, Google Slides, PowerPoint, Adobe XD, InDesign, PDF).

2. Creation Flow Components

2.1 Guided Creation Experience (TD-6258, TD-6257)

A new guided creation modal presents users with a structured starting point when creating a new microapp. The modal surfaces three primary paths:

Start from a Template

Browse and select from a curated template library. Templates are categorized by use case and pre-populated with placeholder content.

Start from Scratch

Begin with a blank canvas in the selected builder version and format. The scratch flow guides users through initial settings (format, orientation) before opening the Builder.

Import from Design Tool

Upload or connect a file from an external design tool to convert into a Tiled microapp. This path opens the Design Tool import flow (KB-v55-02).

2.2 Dropzone Upload UI (TD-6253, TD-6255)

The creation modal includes a drag-and-drop dropzone for uploading design files directly from the user's local file system. The dropzone:

• Accepts files from all supported design tool formats (see KB-v55-02 for the full format list).

• Displays a visual drag-target state when a file is dragged over the browser window.

• Handles upload errors gracefully — unsupported file types and oversized files surface a clear, actionable error message without crashing the modal.

• Provides upload progress feedback while the file is being processed.

2.3 Error Handling (TD-6252)

The creation modal includes comprehensive error handling for all failure states in the creation flow:

Unsupported File Type

Modal displays an inline error identifying the unsupported format and listing supported alternatives.

File Too Large

Modal displays an inline error with the maximum supported file size for the attempted format.

Upload Failure

Network or server errors during file upload surface a retry prompt without closing the modal.

Template Load Failure

If a template fails to load, the modal surfaces an error and offers the user the option to start from scratch instead.

3. Educational Tutorials

3.1 Tile Personalization Tutorial (TD-6237, TD-6239)

An updated educational flow introduces tile personalization to new users. The tutorial covers:

1. What personalization is — variable content fields that update per viewer or recipient.

2. How to add a personalization field to a text, image, or video tile.

3. How to set a default value and preview personalized content.

4. How viewers interact with personalized content in the viewer and share links.

3.2 Design Tool Onboarding Tutorial (TD-6259)

A new onboarding tutorial guides users who arrive via a design tool import through the key differences between a design file and a Tiled microapp:

• Static vs. interactive content — what the design file provides vs. what Tiled adds.

• Tiles as interactive containers — how imported content maps to Tiled tile types.

• Next steps — adding hotspots, animations, personalization, and sharing.

4. QA Validation

QA Scope: Creation flows across all supported design tools and file imports were validated in the v55.0.1 QA cycle. Error handling for unsupported files and oversized uploads was tested explicitly.

5. Change History

v1.0 — December 9, 2025

Initial article. All creation and educational modal features shipped in Tiled v55.0.1.