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.

从 Figma 组件属性到代码 PropsFigma 的属性名不能直接照搬成 Prop 名——一个叫 Focus 的 Variant 实际表示下拉面板已展开，一个共享的 Boolean 在不同 Variant 里也可能控制着完全不同的内容。

figma-apidesign-systems

Figma 设计系统的工程化落地把 Figma 设计系统真正落地，靠的是三层分开处理：可重复执行的 token 提取、匹配团队现状的交付方式，以及让三份资产持续对齐的校验环节。

figma-apidesign-systems

动态替换 3D 模型时的事件绑定失效换了一个新模型后，除了体积测量以外所有需要点击的工具都失灵——模型显示正常，但框架复用了旧的组件身份，指针事件压根没有围绕新模型重新建立。

dev-tools3d-design

用户上传 3D 模型时的渲染兼容性为固定内置模型调好的渲染参数，换成用户上传的模型后悄悄失效——一个房间扫描模型暴露了两个隐性假设：所有面都该渲染，以及模型都需要场景灯光。

3d-visualization3d-design

Figma 组件尺寸：Fixed、Hug 和 Fill 怎么选关键不是哪种尺寸模式看起来对，而是这个数值到底是从内容和 padding 推出来的，还是来自外部规则或父容器。

handoffdesign-systems

3D Gizmo 的桌面端交互适配同一套 Gizmo 和拾取逻辑从触屏搬到桌面端基本不用重做——鼠标输入只是在已有状态系统上多接了 Hover、按键分工和 Escape 取消这几层。

3d-visualization3d-design

多功能界面的操作入口与状态分层五个 demo 合并成一个界面时，每个按钮都得按"点击前后的操作关系"分类，而不是按长相——两次分类判断错误，都是重新走一遍真实使用流程才发现的。

3d-designprocess-design

Figma Variables：我在设计系统里怎么设置变量记录设计系统里变量集合、Scope、数值梯度，以及 Primitives → Semantic 颜色引用关系的一套具体设置方式，方便以后继续扩展时查阅。

figma-apidesign-tokens

静态 Demo 站点的可扩展内容架构一个持续增加原型的站点，需要的是稳定的统一入口，而不是让每个 demo 都用同一套框架——一份 JS 清单就够管普通 demo，只有真正需要构建的那一个才单独拆出源码与产物目录。

dev-toolsprocess-design

多个 Side Project 的低成本技术栈选型免费额度真正的瓶颈不一定是流量——两个长期项目就已经占满了 Supabase 账号允许的活跃项目数，第三个项目还没怎么跑就先撞上了这堵墙。

referencepricing

3D 场景中 2D 覆盖层的遮挡关系SVG 描边没有深度信息，密集摆放的立方体会让后方轮廓穿透到前方——解法不是让 SVG 变聪明，而是把该遵守空间遮挡的描边挪回本来就有深度缓冲的 3D 层。

3d-visualization3d-design

从 Figma 设计系统到代码组件的技术分层Ant Design、Tailwind、Radix、Framer Motion 经常被当成竞品比较——其实它们根本不在同一层，先按职责分层，才是真正决定设计系统技术栈的方法。

figma-apidesign-systems

3D 场景中触屏放大镜的局部渲染设计截图放大只是在拉伸像素，没有重新计算相机投影——真正的解法是让相机局部重新渲染，而实际踩的坑是裁剪区域和渲染目标的宽高比没对上。

3d-visualization3d-design

3D 场景中 HTML 浮层的性能优化只有 7 条笔记的浮层，却让相机旋转变得明显卡顿——解法是把每帧定位挪出 React 渲染链路，并把精确遮挡判断换成更便宜的朝向剔除。

3d-visualization3d-design

3D 场景中 UI 控件的屏幕空间定位用世界坐标偏移定位的删除按钮，在俯视时悄悄塌回了模型中心——根因不是"俯视模式的特殊 bug"，而是投影退化。

3d-visualization3d-design

3D 模型加载优化一个 46MB 的模型让 demo 在打开的那一刻就显得不专业——最终用 Draco 压缩加 Service Worker 缓存的组合拳，同时覆盖了首次和二次加载两种场景。

3d-visualization3d-design

移动端 3D Gizmo 的触控交互设计为鼠标设计的桌面 Gizmo 直接搬到手机上会失灵——解法不是把控件画大，而是把"看到的尺寸"和"能点中的范围"分开设计。

3d-visualization3d-design

模型缩放时的相机补偿动画设计模型比例修改后相机需要跟着调整——真正要想清楚的不是用哪条缓动曲线，而是这次相机运动到底为什么发生。

3d-visualization3d-design

3D 测量项的整体移动手势设计复制出的测量项需要整体移动——真正的问题不是选哪个手势更顺手，而是想清楚"整体移动"到底该由什么触发。

3d-visualization3d-design