Kairos MBA Masterclass·07:43

Design and Figma Overview: the Target Screens and How to Read the Figma File

Mayank Build trainer - co-founder of Epic, a Delhi no-code/low-code product studio (80+ products); builds the real-estate marketplace in Bubble on camera

▶LMS lesson

The short version

The target UX: home (header, hero search by city/type/budget, featured listings with filter tabs, brand section, footer); listing page with filters and a map in sync with the list; detail page with photos, price, address, highlights, agent and a sticky 'Request for visit' or pay button; host dashboard (0:00-0:03).
The Figma file: desktop frame 1440 px, mobile 375; style guide with Manrope, H1-H3 and body styles, a primary colour plus green/red/blue accents, Phosphor icons; use Developer mode to read values and Export; sign in to export (0:04-0:07).

At a glance, three clicks deep

Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.

01The screens to build, and reading values out of Figma1440 / 375 frames;›

1440 / 375 frames; Manrope; Dev mode to read values.

Target screens (0:00-0:03)

Figma procedure (0:04-0:07)

↓ Full write-up of this concept

The concepts in full

The screens to build, and reading values out of Figma

Open Developer mode, click a layer, copy the hex and the font size. That is the whole hand-off.

Screens: home, listing (filters + synced map and list), detail (photos, price, address, highlights, agent, sticky CTA that can be a visit request or a direct payment), host dashboard (earnings, bookings, properties). Figma: desktop 1440 px wide with dynamic height, mobile 375; the style guide gives Manrope (free Google Font Bubble supports), heading and body sizes/weights/letter spacing/line heights, primary colour and accents, Phosphor icons, button styles. PROCEDURE: select a layer -> Developer mode -> read colour, font, size -> Export; you must be signed in with email to export (open the shared link in incognito if it misbehaves).

Why it matters

Every Bubble value typed in the next lessons comes from this file.

Tools referenced

Tool	Coverage	Moment	Context
Figma	demonstrated
Phosphor Icons	mentioned

Action items

Resources mentioned

Resources

docLesson page on the platform

Extraction notes

This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

Transcript corrections applied

The transcript says	The trainer actually means
make matters	MagicBricks (probable)
real start date / real aesthetics / real static	real estate
Type / Cypress / Skype / Sykes	Stripe
Mando / Mandrope / Mangrove	Manrope (font)
repeating loop / repeating row	repeating group
paid listings name	Current page Listing's name

True on recording day — verify before relying

Bubble's editor labels, menu paths and plan rules have changed since this 2023-24 recording; treat every click-path as a guide, not a map