具有动态高度的 FramerJS 图层（从草图导入图层）
FramerJS layer with dynamic height (importing layers from sketch)
在高层次上，我们试图了解 Framer 渲染具有动态高度的层的最佳方式。
我们正在将我们的设计从 Sketch 导入 Framer。我们正在构建一个简单的问答页面。每页有 1 个问题，用户将完成 20 个问题，一个问题页接一个问题页。
这是设计的粗略版本：
header、页脚和提示的高度始终相同。
问答部分根据我们要呈现的问题和答案而变化。
我们看到三种可能的解决方案：
- 创建 20 个不同的草图 templates/cards，每个草图代表不同问题的呈现（例如 card1 将列出问题 1 和答案 1）。当第一个问题得到回答时，我们渲染下一张草图卡以显示问题 2 和答案 2。明确地说，我建议每张卡片都包含所有内容：header、问题、提示、答案和页脚。
- 有 1 个草图 template/card，它是 header、问题 1、提示、答案 1 和页脚的完整渲染。有一堆迷你 template/card 层也被导入到 Framer 中。每个问题都有一层，每组答案都有一层。当 Framer 尝试加载问题 2 时，它会加载带有 answers1（和 header、页脚等）的 question1 的完整渲染，并将包含 question1 的层与 question2 交换，并将包含 answers1 的层与 answers2 交换。有问题，question2比question1小，所以现在问题和提示层之间有一个很大的white-space。因此，以编程方式遍历 Framer 中的图层并使用 align 正确对齐它们。
- 有几个小层（header、question1、question2、...、question20、prompt、answer1、...、answer20、footer）并使用 Framer 依次添加每一层来构建页面。还要写CSS以完美匹配设计像素。
问题：
我们对 #2 的问题是有很多前期工作来重新定位“所有层”。据我们所知，Framer 复制了所有草图图层，并根据它们的 x 和 y 坐标的绝对位置定位它们。由于所有层都是绝对定位的，因此必须遍历每一层并 re-apply 对齐，具体取决于它们相对于彼此的定位方式。这看起来确实很笨拙，据我们所知，Framer 中没有辅助函数来帮助实现这一点。当然，我们可以写一些通过 parent 树和 re-aligns 兄弟姐妹工作的东西，但这感觉太容易出错并且不符合使用 Framer 构建原型的精神。
我们对 #3 的问题是，这感觉就像是在构建网站，而不是在制作原型。由于我们无法直接导入 pixel-perfect 草图设计，因此有很多像素推动。我们希望在设计发生变化时快速更新原型。我们希望设计会经常更改，因为我们 运行 进行了大量的用户测试并获得了很好的反馈。每次更改设计以“重新设计”我的原型时，这种方法都会让我花费大量时间进行搅拌。
想法？我们是否遗漏了一些明显的东西？
感谢阅读并感谢您的宝贵时间。
我不知道你周围有多少chrome卡片，如果你想在Sketch中定义图层之间的边距，但是写一个函数来对齐可变高度的图层列表在彼此之上实际上并不需要那么难：
stackLayers = (layerList, startY = 0, spacing = 0) ->
currentY = startY
for layer in layerList
layer.y = currentY
currentY = layer.maxY + spacing
完整示例在这里：http://share.framerjs.com/sztcm5e9l4li/
如果您保持包含卡片的 Sketch 层的名称相同，您可以从 Sketch 重新导入并且重新定位将继续工作，即使大小发生变化。
因为你的 Sketch 文件中组的结构树包含在 Framer 中，你可以将所有你想堆叠的层放在一个组中，然后调用 stackLayers(sketch.nameOfGroup.children, 0, 10) 来堆叠所有子层'nameOfGroup' 彼此重叠。
我们最终使用方法 #2 解决了这个问题。总结：交换层并重新定位下面的所有层，还遍历所有父层并根据需要调整大小（例如，如果新层小于我们要交换的旧层，我们需要缩小父层差）。
一般方法是：
- 使用 TextLayer 创建带有新问题文本的新图层
- 测量原始草图问题文本层和我们新的TextLayer之间的大小差异
- 根据#2
中计算的差异调整父层的大小
- 移除原始草图图层
- 在与原始草图图层相同的 x 和 y 坐标中插入新的 TextLayer
代码要点：https://gist.github.com/MrNickBreen/5c2bed427feb8c701d5b6b1fbea11cb4
特别感谢 Niels 的建议，帮助我解决了这个问题。
在高层次上，我们试图了解 Framer 渲染具有动态高度的层的最佳方式。
我们正在将我们的设计从 Sketch 导入 Framer。我们正在构建一个简单的问答页面。每页有 1 个问题，用户将完成 20 个问题，一个问题页接一个问题页。
这是设计的粗略版本：
header、页脚和提示的高度始终相同。 问答部分根据我们要呈现的问题和答案而变化。
我们看到三种可能的解决方案：
- 创建 20 个不同的草图 templates/cards，每个草图代表不同问题的呈现（例如 card1 将列出问题 1 和答案 1）。当第一个问题得到回答时，我们渲染下一张草图卡以显示问题 2 和答案 2。明确地说，我建议每张卡片都包含所有内容：header、问题、提示、答案和页脚。
- 有 1 个草图 template/card，它是 header、问题 1、提示、答案 1 和页脚的完整渲染。有一堆迷你 template/card 层也被导入到 Framer 中。每个问题都有一层，每组答案都有一层。当 Framer 尝试加载问题 2 时，它会加载带有 answers1（和 header、页脚等）的 question1 的完整渲染，并将包含 question1 的层与 question2 交换，并将包含 answers1 的层与 answers2 交换。有问题，question2比question1小，所以现在问题和提示层之间有一个很大的white-space。因此，以编程方式遍历 Framer 中的图层并使用 align 正确对齐它们。
- 有几个小层（header、question1、question2、...、question20、prompt、answer1、...、answer20、footer）并使用 Framer 依次添加每一层来构建页面。还要写CSS以完美匹配设计像素。
问题： 我们对 #2 的问题是有很多前期工作来重新定位“所有层”。据我们所知，Framer 复制了所有草图图层，并根据它们的 x 和 y 坐标的绝对位置定位它们。由于所有层都是绝对定位的，因此必须遍历每一层并 re-apply 对齐，具体取决于它们相对于彼此的定位方式。这看起来确实很笨拙，据我们所知，Framer 中没有辅助函数来帮助实现这一点。当然，我们可以写一些通过 parent 树和 re-aligns 兄弟姐妹工作的东西，但这感觉太容易出错并且不符合使用 Framer 构建原型的精神。
我们对 #3 的问题是，这感觉就像是在构建网站，而不是在制作原型。由于我们无法直接导入 pixel-perfect 草图设计，因此有很多像素推动。我们希望在设计发生变化时快速更新原型。我们希望设计会经常更改，因为我们 运行 进行了大量的用户测试并获得了很好的反馈。每次更改设计以“重新设计”我的原型时，这种方法都会让我花费大量时间进行搅拌。
想法？我们是否遗漏了一些明显的东西？ 感谢阅读并感谢您的宝贵时间。
我不知道你周围有多少chrome卡片，如果你想在Sketch中定义图层之间的边距，但是写一个函数来对齐可变高度的图层列表在彼此之上实际上并不需要那么难：
stackLayers = (layerList, startY = 0, spacing = 0) ->
currentY = startY
for layer in layerList
layer.y = currentY
currentY = layer.maxY + spacing
完整示例在这里：http://share.framerjs.com/sztcm5e9l4li/
如果您保持包含卡片的 Sketch 层的名称相同，您可以从 Sketch 重新导入并且重新定位将继续工作，即使大小发生变化。
因为你的 Sketch 文件中组的结构树包含在 Framer 中，你可以将所有你想堆叠的层放在一个组中，然后调用 stackLayers(sketch.nameOfGroup.children, 0, 10) 来堆叠所有子层'nameOfGroup' 彼此重叠。
我们最终使用方法 #2 解决了这个问题。总结：交换层并重新定位下面的所有层，还遍历所有父层并根据需要调整大小（例如，如果新层小于我们要交换的旧层，我们需要缩小父层差）。
一般方法是：
- 使用 TextLayer 创建带有新问题文本的新图层
- 测量原始草图问题文本层和我们新的TextLayer之间的大小差异
- 根据#2 中计算的差异调整父层的大小
- 移除原始草图图层
- 在与原始草图图层相同的 x 和 y 坐标中插入新的 TextLayer
代码要点：https://gist.github.com/MrNickBreen/5c2bed427feb8c701d5b6b1fbea11cb4
特别感谢 Niels 的建议，帮助我解决了这个问题。