dreamlydia. — Product Designer & Design Engineer

[ § 03 · WHAT I WRITE ]

Thinking in the open.

Methodology, workflow, and craft notes. Not everything ties back to a product — some of it is just how I think about the work.

Translating Figma Component Properties into Code PropsA Figma property name is not automatically a prop name — a variant labeled Focus turned out to mean an open dropdown, and a shared Boolean meant two completely different things across variants.

figma-apidesign-systems

Engineering a Figma Design System into Production AssetsTurning a Figma design system into something maintainable means three separate layers — repeatable token extraction, a delivery model that matches what the team already runs, and a validation loop that keeps all three in sync.

figma-apidesign-systems

Event Binding Failures When Replacing 3D Models DynamicallySwapping in a new model left every click-based tool dead except volume measurement — the model looked fine, but the framework had reused the old component identity, so pointer events never rebuilt around the new object.

dev-tools3d-design

Rendering Compatibility for User-Uploaded 3D ModelsRendering rules tuned for a fixed set of built-in models silently break on user uploads — a room scan exposed two hidden assumptions: that every face should render, and that every model needs scene lighting.

3d-visualization3d-design

Choosing Fixed, Hug, and Fill for Figma ComponentsThe question isn't which sizing mode looks right — it's where the dimension actually comes from: content and padding, an external rule, or the parent container.

handoffdesign-systems

Adapting a 3D Gizmo for Desktop InteractionThe same Gizmo and picking layer carry over from touch to desktop unchanged — mouse input only adds hover, button roles, and an Escape-to-cancel on top of the existing state system.

3d-visualization3d-design

Structuring Actions and States in a Multi-Feature InterfaceMerging five demos into one interface meant every button had to be classified by what happens before and after the click, not by how it looks — and both classification mistakes only showed up once real user flow was walked through.

3d-designprocess-design

Figma Variables: How I Set Up Variables in a Design SystemA working reference for how variable collections, scope, numeric scales, and the primitives-to-semantic color chain are structured in this design system.

figma-apidesign-tokens

A Scalable Content Structure for a Static Demo SiteA prototype site that keeps growing needs one stable entry point more than one unified framework — a JS manifest handled every plain demo, and only the one that needed a build got its own source/output split.

dev-toolsprocess-design

A Cost-Efficient Stack for Multiple Side ProjectsA free tier's real limit isn't always traffic — two long-running Supabase projects had already used up the account's active-project quota before a third one ever needed real resources.

referencepricing

Occlusion for 2D Overlays in a 3D SceneSVG outlines have no depth information, so dense cubes let rear outlines bleed through front ones — the fix wasn't smarter SVG, it was moving ordinary outlines back into the 3D layer that already has a depth buffer.

3d-visualization3d-design

From a Figma Design System to a Code Component StackAnt Design, Tailwind, Radix, and Framer Motion keep getting compared as if they were rivals — they're not, they sit at different layers, and separating them by responsibility is what actually decides a design-system stack.

figma-apidesign-systems

Local Re-rendering for a Touch Magnifier in a 3D SceneScaling up a screenshot only stretches pixels, not the camera projection — the fix re-renders a small local viewport instead, and the real trap turned out to be a mismatched aspect ratio.

3d-visualization3d-design

Optimizing HTML Overlays in a 3D SceneSeven simple note overlays made camera rotation feel sluggish — the fix was routing per-frame position updates around React and swapping exact raycast occlusion for cheap orientation culling.

3d-visualization3d-design

Screen-Space Positioning for UI Controls in 3D ScenesA delete button anchored with a world-space offset quietly collapsed into the model center in top-down view — the real bug was projection degeneracy, not a special top-view case.

3d-visualization3d-design

3D Model Loading OptimizationA 46MB model made a demo feel broken before it even loaded — the fix combined Draco compression and a Service Worker cache, because neither alone covered both the first and second visit.

3d-visualization3d-design

Touch Interaction for a 3D GizmoA desktop Gizmo built for a precise mouse breaks down on a phone — the fix was not a bigger control, but separating what you see from what you can actually hit.

3d-visualization3d-design

Camera Compensation After Model ScalingWhen a model is rescaled, the camera has to follow — the real design problem was never the easing curve, but deciding why the camera is moving in the first place.

3d-visualization3d-design

Designing Whole-Item Movement for 3D MeasurementsA duplicated measurement needs to move as one object — the real question was what the user should drag to do it, and why that choice matters more than it looks.

3d-visualization3d-design