---
title: Getting Started for Designers
description: Use the following guides and blog posts to design and build your first microapp. Additionally we have created a microapp to help with getting started. Organize Your Content and Design: Your microapp
---
[Skip to content](https://support.tiled.co/getting-started-for-designers#main-content)
English
Show submenu for translations
[Submit a request](https://support.tiled.co/kb-tickets/new)
![logo-horizontal\_w.png\]](https://support.tiled.co/hs-fs/hubfs/logo-horizontal_w.png?height=30&name=logo-horizontal_w.png)
Open main navigation
Close main navigation
- English
Show submenu for translations
- [Submit a request](https://support.tiled.co/kb-tickets/new)
Hi, how can we help you?
- There are no suggestions because the search field is empty.
1. [Support](https://support.tiled.co/)
2. [Getting Started](https://support.tiled.co/getting-started)
3. [Intro to Tiled](https://support.tiled.co/getting-started#intro-to-tiled)
# Getting Started for Designers
## Your designs, brought to life. You already know how to make something beautiful. Tiled turns it into something people can explore: tap, scroll, play, and move through at their own pace, on any screen. This guide is your invitation to build your first microapp, and a look at just how far you can take it.
Use the following guides and blog posts to design and build your first microapp. Additionally we have created a microapp to help with [getting started](https://support.tiled.co/explore-whats-possible-with-tiles).
### **Design for Exploring, Not Just Viewing**
A slide deck is read in order and then forgotten. A microapp works more like a small website or app: people choose their own path, tap into what interests them, and come back to it. That changes how you design, and it opens up a lot more room to be creative.
| | **A Static Deck or PDF** | **A Microapp** |
| --- | --- | --- |
| **How people move** | Page after page, in your order | Their own path, like a website or app |
| **Depth** | Everything on the page, or it’s left out | Overlays, galleries, and scrolling reveal more on demand |
| **Screens** | One size, zoomed and squinted at on a phone | A designed layout for each screen size and orientation |
| **After you send it** | No idea if it was opened | See who engaged, with what, and for how long |
| **Making changes** | Send a new file | Re-sync and republish. The same link shows the update |
| ### **You design it. Tiled makes it interactive. Your audience decides where to go next.** |
| --- |
### **What You Can Make**
Designers use microapps for almost anything that would otherwise be a deck, a PDF, or a one-page site. A few ideas to get you thinking:
| **SELL** **A deck people actually explore** Replace the pitch deck with an experience prospects navigate themselves, and keep it working after the meeting as a leave-behind. [How to Avoid Death by PowerPoint](https://www.tiled.co/blog/how-to-avoid-death-by-powerpoint) | | **SHOWCASE** **Portfolios and proposals** Present projects with galleries, video walk-throughs, and before-and-after views that feel premium on any screen. [How a 35-Year AEC Firm Started Competing With National Giants](https://www.tiled.co/blog/how-a-35-year-aec-firm-started-competing-with-national-giants-and-winning) |
| --- | --- | --- |
| **ENABLE** **Playbooks that get used** Turn a dense playbook into a hub people can search by section, with deep detail tucked into overlays. [How Using Microapps for Company Playbooks Increases Sales](https://www.tiled.co/blog/how-using-microapps-for-company-playbooks-increases-sales) | | **WELCOME** **Onboarding journeys** Guide new hires or customers step by step, with video, progress cues, and completion tracking. [Interactive Employee Onboarding With Microapps](https://www.tiled.co/blog/create-a-memorable-employee-onboarding-experience-with-microapps) |
| --- | --- | --- |
| **TRAIN** **Learning experiences** Build training people move through at their own pace, with scrolling stories, galleries, and checkpoints. [Interactive Sales Training Ideas That Inspire](https://www.tiled.co/blog/how-to-create-interactive-visual-experiences-that-inspire-sales) | | **PRESENT** **Live sessions and events** Present from a microapp instead of slides, then share the same experience with everyone who attended. [Turning Content Into Conversations](https://www.tiled.co/blog/turning-content-into-conversations-create-immersive-experiences-for-your-virtual-sessions) |
| --- | --- | --- |
### **Your Creative Toolkit**
You design the look in your favorite design tool. In the Tiled Builder, tiles add the interaction on top of it. These are the ones designers reach for first:
| [**Hotspots**](https://support.tiled.co/hotspot-tile-2.0) Make any area clickable. One hotspot can hold a whole navigation bar. | | [**Video**](https://support.tiled.co/video-tile-2.0) Play video on a page, or use it as a moving background. | | [**Carousel**](https://support.tiled.co/carousel-tile-1) Show many images in one place, as a slideshow or full screen. |
| --- | --- | --- | --- | --- |
| [**Scroll**](https://support.tiled.co/scroll-states-in-builder-2.0) Long stories or wide panoramas that scroll inside a page. | | [**Overlays**](https://support.tiled.co/microapp-pages-subpages-overlays-2.0) Pop-ups for detail, footnotes, or video, without adding pages. | | **[Hover](https://support.tiled.co/image-tile-2.0)** Images that move, scale, or swap when someone interacts. |
| --- | --- | --- | --- | --- |
| [**Embed Tile**](https://support.tiled.co/embed-tile-2.0) Sections that switch in place, like tabs under a menu. | | [**Lottie animations**](https://support.tiled.co/lottie-tile-2.0) Lightweight motion that guides the eye through a page. | | [**Navigation components**](https://support.tiled.co/how-to-use-components-in-builder) Ready-made Top Nav and Left Nav bars. |
| --- | --- | --- | --- | --- |
| **Pro Tip:** In [Builder 2.0](https://support.tiled.co/builder-2-0#main-content), [Brand Kit](https://support.tiled.co/brand-kit)puts your brand’s colors, fonts, and logos right in the Builder, so every microapp starts on-brand. Ask your Account Admin to set one up. |
| --- |
### **Pick Your Design Tool**
Design in the tool you already love. With Figma, Sketch, or Adobe XD, the Tiled plugin syncs your frames straight into your microapp, so updating it later is as simple as syncing again. You can design in any other tool too, then export your pages as images and upload them.
| **MOST POPULAR** **Figma** The plugin updates itself automatically. [Tiled Plugin for Figma](https://support.tiled.co/tiled-plugin-for-figma) | | **SMART SYNCING** **Sketch** Smart Syncing detects cover and page sizes for you. Install plugin updates yourself. [Tiled Plugin for Sketch](https://support.tiled.co/tiled-plugin-for-sketch) | | **SMART SYNCING** **Adobe XD** Supported where Adobe XD is still available, which is limited in some countries. Install plugin updates yourself. [Tiled Plugin for Adobe XD](https://support.tiled.co/tiled-plugin-for-adobe-xd) |
| --- | --- | --- | --- | --- |
| **Note:** You need the Editor role or above to sign in to the [Tiled plugins](https://support.tiled.co/logging-into-the-tiled-plugins). See Logging Into the Tiled Plugins for SSO sign-in. |
| --- |
### **From First Idea to Published**
Every great microapp goes through the same five stages. Spend a little time on each and the rest takes care of itself.
| ### **1** | ### **Plan** The stage people skip most, and the one that saves the most time later. • Decide what the microapp is for, and how you’ll know it worked. • Outline your pages and how people will move between them, as you would for a website. • Find out how it will be [shared](https://support.tiled.co/manage-direct-share-replies): in a meeting, by email, on social, or embedded on a site. • Gather images, video, and brand files in one place. • Feel free to use the [Microapp Planner](https://support.tiled.co/microapp-planner) to organize your ideas. • Use a [Microapp template](https://support.tiled.co/create-a-microapp-from-a-template). *You’re ready for the next stage when* ***you can sketch your page map on one sheet of paper.*** |
| --- | --- |
| ### **2** | ### **Design** Design your [pages](https://support.tiled.co/figma-plugin-faq) in your design tool, at the size of the screen they’ll be viewed on. • Create a frame for each page at your [adaptive format size](https://support.tiled.co/publish-a-microapp), such as desktop, tablet, or mobile. • Give each page a clear “first read”: make the most important thing stand out with size, color, and space. • Design n[avigation](https://support.tiled.co/adding-a-left-navigation-bar-tile) that always shows people where they are and where they can go. • Leave room for [video](https://support.tiled.co/video-tile-2.0) and [carousels](https://support.tiled.co/carousel-tile-1), and add cues that show what’s clickable. *You’re ready for the next stage when* ***every page in your outline has a frame.*** |
| --- | --- |
| ### **3** | ### **Sync** Send your frames to Tiled with the [plugin](https://support.tiled.co/tiled-plugin-for-figma). • Frames that match your adaptive format become pages, with your design as the background. • Frames of any other size come in as assets you can use in tiles. • Sync each [adaptive format](https://support.tiled.co/create-an-adaptive-format-microapp-1) separately. • Sync often. Small, frequent syncs make problems easy to spot. *You’re ready for the next stage when* ***your pages appear in the Builder in the right format.*** |
| --- | --- |
| ### **4** | ### **Assemble** This is where your designs come to life ([The Builder](https://support.tiled.co/builder-2.0-as-default-creation-experience)). It’s usually the shortest stage, and the most fun. • Add [hotspots](https://support.tiled.co/hotspot-tile-2.0) for navigation, then layer in v[ideo](https://support.tiled.co/video-tile-2.0), [carousels](https://support.tiled.co/carousel-tile-1), [scrolling](https://support.tiled.co/nested-scroll-tile-returns), and [overlays](https://support.tiled.co/microapp-pages-subpages-overlays-2.0). • Group related sections with [Scroll States](https://support.tiled.co/scroll-states-in-builder-2.0) to keep things tidy. • Mark your most important pages as [completion events](https://support.tiled.co/how-to-set-up-completion-events-in-tiled), so you can see when people reach them. • P[review](https://support.tiled.co/preview-your-microapp) constantly, not just at the end. *You’re ready for the next stage when* ***every hotspot, link, and overlay goes where it should in Preview.*** |
| --- | --- |
| ### **5** | ### **Publish and Share** [Publish](https://support.tiled.co/publish-a-microapp-2.0), then [share](https://support.tiled.co/share-form-unification-hubspot-integration) it with the world. • Publish to make your changes live. Recipients only see published changes. • [Share a link](https://support.tiled.co/direct-share-links), send it [directly](https://support.tiled.co/direct-share-links) to someone, or [embed](https://support.tiled.co/embed-tile-2.0) it on a website. • Watch [engagement](https://support.tiled.co/how-to-use-the-engagement-analytics-dashboard) and keep improving. Updates reach the same link. *You’re ready for the next stage when* ***someone outside your team has opened it.*** |
| --- | --- |
### **Seven Rules Designers Swear By**
These save more rework than anything else.
| ### **01** | **Match your frame size to your [adaptive format](https://support.tiled.co/create-an-adaptive-format-microapp-1).** A matching frame becomes a page. Anything else comes in as an asset only. |
| --- | --- |
| ### **02** | **Keep [one microapp](https://support.tiled.co/best-practices-for-building-a-microapp) in one design file.** Desktop, tablet, and mobile formats included. Use a separate file for each microapp. |
| ### **03** | **Name frames clearly, using letters and numbers only.** The [frame name](https://support.tiled.co/syncing-with-plugins-overview) becomes the page name in Tiled, and characters such as ! @ / - " ( ) can stop a sync. |
| ### **04** | **Give scrolling content its own frame.** Design anything inside a [Scroll tile](https://support.tiled.co/scroll-states-in-builder-2.0) on a separate, taller or wider frame. Think of the page as the window and the scroll as what’s behind it. |
| ### **05** | **Design your cover image at 504 × 224 px.** It’s the first thing people see when you share. A [**504 × 224 px**](https://support.tiled.co/microapp-settings-2.0) artboard also works; Tiled displays it at 2x, and Smart Syncing sets it as your cover automatically. |
| ### **06** | **Treat your design file as the source of truth.** [Syncing](https://support.tiled.co/syncing-with-plugins-overview) overrides Builder changes on the pages you sync, so make design changes in the design file. Page order and positions set in the Builder stay as they are. |
| ### **07** | **Keep files light.** Aim for under [300 MB](https://support.tiled.co/best-practices-file-sizes) for the whole microapp, under 10 MB for each video, and under 50 MB for all video combined. Compress before you upload. |
| **Heads Up:** Using [Lottie animations](https://support.tiled.co/lottie-tile-2.0)? If the microapp will be viewed offline, use a GIF instead. Lottie files need an internet connection to load. |
| --- |
### **Your First 30 Minutes**
The best way to learn Tiled is to make something small. Try this before you start your real project:
| **STEP 1** **Create** Open the [Tiled plugin](https://support.tiled.co/tiled-plugin-for-figma), create a microapp, and choose a desktop format. | | **STEP 2** **Design two frames** One at your [format size](https://support.tiled.co/create-an-adaptive-format-microapp-1) and one at any other size. Sync both. | | **STEP 3** **Notice the difference** In the Builder, one is a [page](https://support.tiled.co/microapp-pages-states-overlays) and the other is an [asset](https://support.tiled.co/adding-assets-to-a-microapp-2.0). That’s syncing in a nutshell. |
| --- | --- | --- | --- | --- |
| **STEP 4** **Add a hotspot** Link the [page to a second page](https://support.tiled.co/hotspot-tile-2.0) or an overlay, then open Preview and click it. | | **STEP 5** **Change and re-sync** Change a color in your design file and [sync again](https://support.tiled.co/syncing-with-plugins-overview). Watch it update. | | **STEP 6** **Publish and share** [Publish](https://support.tiled.co/publish-a-microapp-2.0) it and send it to yourself. You’ve built your first microapp. |
| --- | --- | --- | --- | --- |
### **Start Here**
| **EXPLORE** [**Tiled Tiles**](https://support.tiled.co/explore-whats-possible-with-tiles) See what a microapp can do by exploring one we built to help you get started. | | **SKIP THE BLANK PAGE** **Start from a [template](https://support.tiled.co/create-a-microapp-from-a-template)** Pick a finished, interactive microapp and make it your own, design file included. See [Create a Microapp From a Template.](https://support.tiled.co/personalization-template-customization) |
| --- | --- | --- |
### **Get Inspired**
The Tiled blog is full of ideas from designers building interactive experiences. A few favorites to start with:
- - [UX Design for Microapps](https://www.tiled.co/blog/ux-design-for-microapps) — planning structure, non-linear journeys, contrast, and building in interaction.
- [Top 10 Best Practices for Interactive Content Design](https://www.tiled.co/blog/top-10-best-practices-for-interactive-content-design) — from experience-first covers to navigation hubs and device fluidity.
- [How to Make Figma Designs Interactive](https://www.tiled.co/blog/turning-figma-designs-into-interactive-experiences) — turning static Figma designs into experiences.
- [How to Create Interactive Content With Built-In Wow Factor](https://www.tiled.co/blog/how-to-create-interactive-content-with-built-in-wow-factor) — techniques that make people stop and explore.
- [7 Eye-Popping Interactive Presentation Ideas](https://www.tiled.co/blog/7-eye-popping-sales-presentation-ideas) — ideas to borrow for your next presentation.
- [Planting Our Flag for Human Creativity in the Age of AI](https://www.tiled.co/blog/planting-our-flag-for-human-creativity-in-the-age-of-ai) — why intentional, human-made experiences matter.
Browse everything on the[Tiled blog](https://www.tiled.co/blog).
### **Common Questions**
| **Question** | **Answer** |
| --- | --- |
| **Do I need Figma, Sketch, or Adobe XD?** | No. You can design in any tool, export your pages as images, and upload them in the Builder. The plugins save time by syncing directly, and make updates as simple as syncing again. |
| **Can I build from PowerPoint?** | There’s no PowerPoint plugin. Export each slide as a .png and upload it, but later changes won’t sync, so a design tool is the better choice for anything you’ll update. |
| **Are microapps responsive?** | No, they’re adaptive. You design a layout for each screen size and orientation, so you control exactly how it looks everywhere. |
| **Can my team design together?** | Yes, in your design tool. Figma, Sketch, and Adobe XD support collaboration, and that’s where most design happens. Only one person can edit a microapp in the Builder at a time. (Avoid using the same file names for duplicated microapps or migrated microapps from Builder 1.0 to Builder 2.0) |
| **Does the plugin work with Builder 1.0 and Builder 2.0?** | Yes. Syncing works the same way in both. |
| **My frame came in as an asset, not a page.** | Its size doesn’t match your adaptive format. Resize it to the format’s exact dimensions and sync again. |
| **My Builder changes disappeared after a sync.** | Syncing overrides Builder changes on the pages you sync. Make design changes in the design file instead. |
| **My sync isn’t working.** | Check that you’re signed in to the plugin, you’re in the right adaptive format, and frame names use only letters and numbers. On Sketch or Adobe XD, make sure the plugin and the app are up to date. See Troubleshooting the Tiled Plugin. |
### **Keep Going**
Build Faster Next Time. Once your first microapp is live, these are what turn one build into a practice:
- [Components in Builder](https://support.tiled.co/how-to-use-components-in-builder) — build a header once, reuse it everywhere.
- [Inserting Pages From a Template Microapp](https://support.tiled.co/inserting-pages-from-a-template-microapp) and [Copying Pages Between Microapps](https://support.tiled.co/copying-and-pasting-pages-between-microapps) — assemble from what already works.
- [Custom Microapp Templates](https://support.tiled.co/custom-template-creation-seismic-account-type) — so your team starts from your standard, not from blank.
- [Personalization Overview](https://support.tiled.co/personalization-overview-2.0) — one microapp, different content per audience.
*Working in Builder 1.0? These guides cover Builder 2.0, the default for new microapps. See [Migrating your microapp to the new builder](https://support.tiled.co/migrating-your-microapp-to-the-new-builder) — and if your microapp uses page states, [Migrating Scroll States](https://support.tiled.co/1.0-2.0-scroll-state-migration).*
- [Getting Started](https://support.tiled.co/getting-started#main-content)
- [Intro to Tiled](https://support.tiled.co/getting-started#intro-to-tiled)
- [Tiled Library](https://support.tiled.co/getting-started#tiled-library)
- [Tiled Builder](https://support.tiled.co/tiled-builder#main-content)
- [Tiled Builder](https://support.tiled.co/tiled-builder#tiled-builder)
- [Microapp Tiles](https://support.tiled.co/tiled-builder#microapp-tiles)
- [Personalization](https://support.tiled.co/tiled-builder#personalization)
- [Asset Library](https://support.tiled.co/tiled-builder#asset-library)
- [Best Practices](https://support.tiled.co/tiled-builder#best-practices)
- [Tiled Tiles](https://support.tiled.co/tiled-tiles)
- [Settings](https://support.tiled.co/settings#main-content)
- [Account Settings](https://support.tiled.co/settings#account-settings)
- [Library Settings](https://support.tiled.co/settings#library-settings)
- [Microapp Settings](https://support.tiled.co/settings#microapp-settings)
- [Sharing & Analytics](https://support.tiled.co/sharing-analytics#main-content)
- [Microapp Analytics](https://support.tiled.co/sharing-analytics#microapp-analytics)
- [Personalization](https://support.tiled.co/sharing-analytics#personalization)
- [Sharing Microapps](https://support.tiled.co/sharing-analytics#sharing-microapps)
- [Useful Resources](https://support.tiled.co/useful-resources#main-content)
- [Additional Guides](https://support.tiled.co/useful-resources#additional-guides)
- [Developer Tools](https://support.tiled.co/useful-resources#developer-tools)
- [Accessibility](https://support.tiled.co/useful-resources#accessibility)
- [Tiled Mobile App](https://support.tiled.co/useful-resources#tiled-mobile-app)
- [Seismic](https://support.tiled.co/useful-resources#seismic)
- [Authentication & Security](https://support.tiled.co/useful-resources#authentication-security)
- [Builder 2.0](https://support.tiled.co/builder-2-0#main-content)
- [Tiled Builder 2.0](https://support.tiled.co/builder-2-0#tiled-builder-2-0)
- [Microapp Tiles 2.0](https://support.tiled.co/builder-2-0#microapp-tiles-2-0)
- [Personalization 2.0](https://support.tiled.co/builder-2-0#personalization-2-0)
- [Asset Panel 2.0](https://support.tiled.co/builder-2-0#asset-panel-2-0)
- [Layers & Settings 2.0](https://support.tiled.co/builder-2-0#layers-settings-2-0)
- [FAQ](https://support.tiled.co/builder-2-0#faq)
- [Tiled Plugins](https://support.tiled.co/tiled-plugins#main-content)
- [Figma Plugin](https://support.tiled.co/tiled-plugins#figma-plugin)
- [Adobe XD Plugin](https://support.tiled.co/tiled-plugins#adobe-xd-plugin)
- [Sketch Plugin](https://support.tiled.co/tiled-plugins#sketch-plugin)
- [Integrations](https://support.tiled.co/integrations#main-content)
- [CRM & Marketing Automation](https://support.tiled.co/integrations#crm-marketing-automation)
- [Content & Asset Management](https://support.tiled.co/integrations#content-asset-management)
- [Collaboration & Communication](https://support.tiled.co/integrations#collaboration-communication)
- [New Releases](https://support.tiled.co/new-releases#main-content)
- [v66.0.0](https://support.tiled.co/new-releases#v66-0-0)
- [v65.0.0](https://support.tiled.co/new-releases#v65-0-0)
- [v64.0.0](https://support.tiled.co/new-releases#v64-0-0)
- [v63.0.0](https://support.tiled.co/new-releases#v63-0-0)
- [v62.0.0](https://support.tiled.co/new-releases#v62-0-0)
- [v61.0.1](https://support.tiled.co/new-releases#v61-0-1)
- [v60.0.0](https://support.tiled.co/new-releases#v60-0-0)
- [v59.0.0](https://support.tiled.co/new-releases#v59-0-0)
- [v58.0.0](https://support.tiled.co/new-releases#v58-0-0)
- [v57.0.0](https://support.tiled.co/new-releases#v57-0-0)
- [v56.0.0](https://support.tiled.co/new-releases#v56-0-0)
- [v55.0.1](https://support.tiled.co/new-releases#v55-0-1)
- [v54.0.0](https://support.tiled.co/new-releases#v54-0-0)
- [v53.0.0](https://support.tiled.co/new-releases#v53-0-0)
- [v52.0.0](https://support.tiled.co/new-releases#v52-0-0)
- [v51.0.0](https://support.tiled.co/new-releases#v51-0-0)
- [v50.0.0](https://support.tiled.co/new-releases#v50-0-0)
- [Uncategorized](https://support.tiled.co/uncategorized)
[](https://tiled.co)
Copyright © 2026, Tiled
```json
{
"@context" : "https://schema.org",
"@type" : "VideoObject",
"contentUrl" : "https://4720090.fs1.hubspotusercontent-na1.net/hubfs/4720090/video_assets/224012843857/inherited/web_optimized.mp4",
"dateModified" : "2026-10-09T15:51:33.950Z",
"duration" : "PT1M9S",
"height" : 1080,
"name" : "Designer Getting Started Animationv2",
"thumbnailUrl" : "https://4720090.fs1.hubspotusercontent-na1.net/hubfs/4720090/Designer%20Getting%20Started%20Animationv2.mp4/medium.jpg",
"uploadDate" : "2026-10-09T15:51:33.947Z",
"width" : 1920
}
```