Free iOS e-commerce Figma design file

Oscar de la Hera Gomez
Two flowers that represent Apple App Store Connect & Figma side by side, beneath them sits the text "Free iOS E-Commerce Figma design file."

Download & learn how we made our free iOS e-commerce Figma design file that covers how to design for Apple In-App Purchases, Subscriptions and Offers.

Our free iOS e-commerce Figma file has been developed into an Open-Source project as part of a series on Apple's StoreKit 2 that reveals all the technical secrets behind StoreKit 2 development.

Access the project and the guide using the links below.

How we made it

A screenshot of the Figma file that we are offering for free.

Our iOS e-commerce design file, which is available through a link below, was made using our design technology methodology which uses Figma to implement a styleguide, components with variants, screens and a user experience map.

Please note that although this template includes modals for promotional offers, the map has not yet been updated to take into consideration promotional offers and will be updated at some point in the future.


A screenshot of the Styleguide from our free iOS ecommerce Figma design file.

A styleguide is a standards manual that represents a brand or organization and which allows a designer to create printed media, multi-media, physical products or digital applications quickly and coherently. It also helps developers understand what typography, colors and local assets are required to create your system.

In Figma, implementing a styleguide system makes modifying designs or creating alternatives, swift and simple, leading to higher productivity and creativity.

To learn more about what a Styleguide is, or how to create one in Figma, consult the links below.

Components, Component Variants & Properties

A screenshot of the Components within our free iOS e-commerce Figma design file.

Components, component variants and properties make creating and modifying designs faster and more efficient.

These elements help developers understand how an application is broken down; reducing the time developers spend thinking and planning; producing results that demonstrate higher quality in shorter development times.

To learn more about how to create components, component variants, text properties or use auto-layout in Figma, consult the links below.

User Experience Map

A screenshot of the user experience map within our free iOS e-commerce Figma design file.

A user experience map (UXM) gives a holistic understanding of your mobile or desktop application by laying out all your screens in a logical order that have application/experience states or sub states associated to them.

The purpose of a UXM is to maximize efficiency and productivity by making sure that the UXM answers any questions that your developers, team or clients may have regarding how your app, website or experience works, when, how and where.

To learn more, click the link below.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details