Skylight · Smart Calendar — Scalable CMS Framer Dev 💻 by Madison GreenSkylight · Smart Calendar — Scalable CMS Framer Dev 💻 by Madison Green
Built with Framer

Skylight · Smart Calendar — Scalable CMS Framer Dev 💻

Madison Green

Madison Green

Verified

Skylight Calendar · Module Library & Landing Page (Figma to Framer)

Overview

Skylight is a staple in the smart home space, with products that live in hundreds of thousands of homes. Their calendars and digital frames are already part of people’s daily routines, so the website needs to carry that same level of trust and clarity.
They came in with strong Figma concepts, but the goal wasn’t just to translate them into Framer. We needed to turn those concepts into a system their team could use and grow with over time.
That meant building a real foundation behind the design, where components stay consistent across pages and the CMS can handle new products without breaking structure. The goal was to give their team something they can move quickly in, without needing developer support every time content changes.

✨ Check out Skylight on Instagram 💻

The Build

The modular library (cards, sections, etc.) was built out by Skylight's lovely internal team in Figma. What followed was a careful rebuild in Framer, where each component was given behavior, responsiveness, and a place within a system that actually functions on the web.
There’s a difference between something that looks consistent and something that stays consistent once it’s live. Spacing, hierarchy, and interactions all had to be defined in a way that wouldn’t drift as pages evolved or content shifted.
By the end, the library wasn’t just mirrored, it was operational. What existed in Figma had a direct counterpart in Framer that the team could easily tweak and reuse, not just reference.

CMS Structure

The CMS was where this project really came together. Every section on the site—features, FAQs, testimonials, user-generated content, product specs—pulls from structured CMS collections. Nothing is hardcoded. The content team can update copy, swap images, add new feature pages, or rearrange sections without ever opening the codebase or having to edit on the art board.
This matters because Skylight's product line keeps growing. New devices, new features, new use cases, and the site needs to keep up without a full redesign every quarter. The CMS structure was built with that in mind: modular, scalable, and easy for anyone on the team to manage.

The End Result

The site carries over all of the components and sections outlined in Figma while functioning as a system the team can actually use day to day on a live site.
Updates don’t require extra lift, new content fits into the structure naturally, and the build holds up as the product evolves. It does what it needs to do without getting in the way.

🚀 Check out the live site ⤵

Like this project

What the client had to say

Madison was amazing to work with. She's creative, responsive and has a strong attention to detail. Would highly recommend!

Trevor Kaufman, Skylight

Mar 19, 2026, Client

Posted Apr 1, 2026

Developed a scalable CMS-based website and modular component library in Framer for Skylight.

Likes

0

Views

0

Timeline

Feb 23, 2026 - Mar 19, 2026

Clients

Skylight