Contra

Overview

Contra is a commission-free freelancing platform empowering independent professionals to sell services and digital products directly to clients.

With the launch of their new Products feature, the team wanted to enable creators to showcase and sell those products directly from their own Framer websites.

To support this, I worked with the Contra team to design and develop:

• A fully custom Framer plugin to sync Contra products into Framer CMS

• Two custom-coded Framer components for seamless storefront integration

The goal was to give Framer users the ability to create fully customisable Framer storefronts powered by Contra - without sacrificing design flexibility or performance.

The challenge

The core challenge was building a reliable bridge between Contra’s Products API and Framer’s plugin + CMS ecosystem, while keeping the experience intuitive for non-technical users.

Key considerations included:

• Normalizsng API data structures (products, pricing options, billing intervals)

• Supporting both single and multiple pricing models

• Handling field mapping between API data and Framer CMS collections

• Ensuring safe re-syncing without overwriting user-managed content

• Managing plugin permissions and sync states properly

• Creating components that could be easily dropped into any Framer project and didn't require any customisation for non-technical users

Everything needed to feel native to Framer - both from a UI/UX and developer standpoint.

My role

I led the end-to-end design and development of the plugin and components.

This included:

• Architecting the plugin logic to fetch, normalize, and sync product data from Contra’s API

• Building the CMS synchronization layer using Framer’s syncManagedCollection API

• Implementing dynamic field mapping to allow users to control how product data maps into their CMS

• Handling edge cases such as varying pricing structures and billing intervals

• Designing the plugin UI to align with Framer’s ecosystem and marketplace standards

• Developing two custom-coded storefront components, including a fully customizable buy button

• Ensuring components worked seamlessly with synced CMS data

• Managing permissions, loading states, and sync feedback to provide a reliable user experience

The result is a system where users can:

1. Import their Contra products into Framer CMS

2. Customize their storefront visually

3. Sell directly via Contra checkout links

All without writing a single line of code.

Outcome

The Contra Products plugin is now live in the Framer Marketplace, enabling creators to seamlessly connect their Contra profile with their Framer website.

One of the two components is also live on the marketplace and can be found here. The other will be released soon.