Use Tapcart's free Design Best Practices Figma template to plan your app's look and feel, then recreate those layouts in App Studio with Design Blocks, Brand Kit, and screen settings.
Open the template: 2026 Design Best Practices (Figma). Duplicate the file to your Figma account so you can edit, swap in brand assets, and export imagery for App Studio.
For exact asset sizes, see Tapcart Asset Dimensions. For how to add and configure blocks, see Building with Design Blocks and Getting Started with Blocks (App Studio).
How to use the template with App Studio
Open the Figma file and review each section (Brand Assets, Icons, Hero Banners, Homepage Layouts, Collection List, and more).
Set your global styles in Brand Kit (colors, fonts, logos, and global icons).
In App Studio → Screens, build the matching layout by dragging Design Blocks from the block bank.
Edit each block with the AI, Visual, or Dev tabs, set destinations (product, collection, URL, or app screen), then Publish when ready.
Brand Assets & Icons
The Figma Brand Assets and Icons sections help you prepare logos, brand photography, and UI icons before you build.
In App Studio: upload logos and theme styles in Brand Kit. Configure Back, Close, and Cart defaults under global icons, then customize per-screen headers as needed (Customizing Your App Headers).
Pro tip: use a logo with a transparent background so it sits cleanly in the header.
Hero Banners
The Figma Hero Banners section shows common hero patterns: full-bleed lifestyle images, text + CTA overlays, stacked heroes, and swipeable carousels.
Map these to App Studio Hero & Media blocks:
Image Banner: upload an image and optionally show a button/CTA. Best for Shop Now / campaign heroes.
Swipe-able Hero Banner: multiple images customers can swipe through (hero carousel).
Video Banner: short lifestyle or product video with an optional CTA (max 10MB, MP4). Sound is not supported in-app.
Image Block or Multi-destination Image Grid: thinner banners, shop-by tiles, content hubs, social links, or footer imagery that deep link to products, collections, URLs, or screens.
Design tips (also shown in Figma):
Keep high contrast between copy and the background. In Figma, add a dark fill layer over the photo and lower the opacity, or add a light drop shadow on text.
Include a clear CTA so the banner reads as tappable.
Export and preview assets on a phone before publishing. Aim for roughly 22-24pt minimum text size depending on the typeface.
Homepage Layout Examples
The Figma Homepage Layouts section includes annotated examples that combine App Studio building blocks. Use them as recipes, then swap in your brand content.
Common patterns and the App Studio blocks that match them:
Hero Banner → Image Banner or Video Banner
Hero Carousel → Swipe-able Hero Banner
Collection Bubbles / Circle Carousel → Circle Collection Carousel or Multi-Destination Circle Carousel
Collection Slider / Collection Carousel → Collections Carousel or Thin Collection Carousel
Stacked Hero Banners → multiple Image Banner or Image Block rows stacked on the screen
Search Bar → Search Block
Countdown Timer → Countdown Timer block
Text Block → Basic Text Block
Content / blog / location cards → Content Link, Image Block, or Multi-destination Image Grid with destination links
Transparent Header → configure the screen Header in App Studio (and Brand Kit globals)
Multipages / tabs → Homepage Design tab multi-tab settings (see Getting Started with Screens)
Product merchandising sections often use:
Collection - Product Carousel
Collection - Product Grid
Collection - Product Showcase
Recently Viewed Products.
Collection List
The Figma Collection List section shows browsable shop navigation layouts (grids, list rows, and image-forward menus).
In App Studio: open the Collections List screen to choose layout, columns, spacing, custom images, destinations, and optional subcollections. For multi-tab category menus (for example Men / Women), use the Collections List screen Header settings.
Full walkthrough: Collections List Overview.
More block ideas from the template
Shop-by or category strips: Thin Collection Carousel, Multi-destination Image Grid, or stacked Image Blocks with destination links.
Video storytelling: Video Banner or Video Block. Keep files under 10MB.
Blog, lookbooks, or store locations: Image Banner / Image Block / Content Link with title, short description, and CTA linking to a URL or custom screen.
Footer / social / payment imagery: Image Block or Multi-destination Image Grid near the bottom of Home, PDP, or other screens.
Considerations
The Figma template is available to all Tapcart customers via the link above. Duplicate it into your own workspace to customize.
Need help matching a Figma layout to blocks? Start from the annotated Homepage Layout Examples in the template.
More Questions
If you have additional questions, reach out through LiveChat in your dashboard or email [email protected].