Built with Framer
Kinetiq & Lucent: Figma to Framer Template Development
Kazi Mohammed Erfan
Verified
Kinetiq and Lucent: Figma to Framer development of two website templates
DesignMe needed two website templates built in Framer from Figma designs. We built both: Kinetiq, for a Web3 launch platform, and Lucent, for an advertising intelligence product.
Client: DesignMe · Industry: Website templates, Web3, ad tech · What we did: Figma to Framer development · Platform: Framer · Live: kinetic-template.framer.website, lucent-template.framer.website
About the client
DesignMe is the client on this project. The two templates were designed in Figma, and DesignMe hired us to build both of them in Framer: one for a Web3 launch platform, one for an ad-tech intelligence product.
The challenge
A template buyer wants the site to look exactly like the preview and still be easy to change.
Match the Figma. The Framer build had to match the designs on desktop, tablet and phone.
Lots of motion. Both designs lean on animated stat counters, glowing panels and floating data cards.
Product screens inside a marketing site. Kinetiq shows wallet checks, allocations and campaign status. Lucent shows supply-path and signal data.
Buyers edit, not developers. Text, images and sections had to change without code.
What we did
Kinetiq: a dark site for Web3 launches
Built the hero, “Everything you need to launch in One System”, with its glowing backdrop and stat counters.
Built the wall of questions launch teams ask, from “How do I distribute tokens fairly?” to “Where do I even start a launch?”.
Built the feature panels for access control, multi-phase launches and live campaign tracking.
Lucent: a product site for ad-tech intelligence
Built the hero, “The intelligence behind every impression”, with floating data cards for ads.txt status, ID coverage and supply-path risk.
Built the supply-path panel and the run of dark sections that explain the product step by step.
Built the inner pages: Platform, About, Customer Stories, Changelog and a blog with article pages.
Every breakpoint, every animation
Built from the Figma files for desktop, tablet and phone.
Added the scroll and hover animations, including the animated stat counters on both sites.
Ready for a buyer to edit
Set both templates up in Framer so a buyer can edit text, images and sections without code.
Kinetiq also has Pricing, Developers, About, Contact and two launch pages, so a buyer starts with a full site, not one page.
Scope
Included:
Framer development of both templates from the Figma designs
Desktop, tablet and phone layouts
Scroll and hover animations and animated stat counters
Kinetiq: 7 pages. Lucent: 6 main pages plus blog articles and a customer story
Not included:
The visual design: we built from the Figma files we were given
A custom domain: both templates run as Framer previews
Results
Both templates are live as Framer previews: kinetic-template.framer.website and lucent-template.framer.website.
Kinetiq has 7 pages: Home, About Us, Contact Us, Developers, Launch Setup, Launch Details and Pricing.
Lucent has Home, Platform, About, Blog, Customer Stories and Changelog, plus article pages.
Both can be edited in Framer without code.
What we'd improve next
Add a light theme. A light version of each template would let buyers with a light brand use it without redesigning every section.
Add more launch-ready pages. A careers page and a docs-style help page would give buyers more of a full company site from day one.
Add a style guide page to each template with its colors, fonts and buttons, so a buyer can rebrand in an afternoon.
Working on something similar?
I design websites in Figma and build them in Framer or Webflow, so your team can edit every page without a developer. Message me here on Contra with your site or Figma file, and I'll reply with a plan and a fixed price.
Like this project
Posted Oct 19, 2026
Two website templates built in Framer from Figma for DesignMe: Kinetiq for a Web3 launch platform and Lucent for an ad-tech product.
Likes
1
Views
8
Clients
DesignMe
