figma button_如何在Figma中创建锚链接

figma button

Anchor Links aren’t the most exciting interaction to design, but they are a crucial design element for validating long form content and larger websites. It’s not intuitive to create Anchor Links but it’s possible with the Scroll Overflow technique, if you’re careful with layer management. I’ll show you how to create one, how you can organise your layers to keep it manageable, and a couple of limitations you may encounter.

锚链接并不是设计中最令人兴奋的交互，但它们是验证长格式内容和较大网站的关键设计元素。 创建锚链接并不是很直观，但是如果您对图层管理很谨慎的话，可以使用滚动溢出技术。 我将向您展示如何创建一个图层，如何组织图层以使其易于管理以及可能遇到的一些限制。

Here’s the Figma preview link if you just want to see a proof-of-concept:

如果您只是想查看概念验证，请点击这里，查看Figma预览链接：

https://www.figma.com/proto/6lHkEfRTTArHCwNxPCAYm8/medium-blogs?node-id=1%3A102&viewport=226%2C592%2C0.5461657047271729&scaling=scale-down-width

https://www.figma.com/proto/6lHkEfRTTArHCwNxPCAYm8/medium-blogs?node-id=1%3A102&viewport=226%2C592%2C0.5461657047271729&scaling=scale-down-width

什么是滚动溢出 (What is Scroll Overflow)

If you’ve been designing functional prototypes for mobile devices within Figma then this is a concept you’ll have encountered. In many apps you’ll want some elements such as the app bar to remain in a fixed position, whilst letting the rest of the elements and content be scrollable. It’s often talked about with the ‘Fix position when scrolling’ checkbox feature, since it’s only possible once you’ve activated an Overflow Behavior.

如果您一直在为Figma设计移动设备的功能原型，那么您将遇到这个概念。 在许多应用程序中，您希望某些元素(如应用程序栏)保持在固定位置，同时让其余元素和内容可滚动。 它经常与“滚动时固定位置”复选框功能有关，因为只有在激活“溢出行为”后才有可能。

When the content of a Frame doesn’t fit, you get the ‘Overflow Behavior’ dropdown in the Prototype tab. 当框架的内容不合适时，您会在“原型”选项卡中获得“溢出行为”下拉列表。

As you can see in the screenshot above, I have a parent Frame called ‘iPhone 11 Pro / X — 1’ with layers inside that are larger than the parent Frame. When this happens I can set the Overflow Behavior to ‘Vertical Scrolling’, and I’ve also ticked the ‘Fix position when scrolling’ checkbox for my app bar at the bottom. This allows a viewer to scroll the page up and down in Figma’s Presentation View more realistically.

如您在上面的屏幕快照中所见，我有一个名为“ iPhone 11 Pro / X — 1”的父框架，其内部层大于父框架。 发生这种情况时，我可以将“溢出行为”设置为“垂直滚动”，并在底部的应用栏上勾选“滚动时固定位置”复选框。 这使查看者可以更实际地在Figma的Presentation View中向上和向下滚动页面。

You can read more about it in the Figma documentation for prototype scrolling with overflow behaviour.

您可以在Figma文档中阅读有关它的更多信息，以进行带有溢出行为的原型滚动 。

锚链接解剖 (Anchor Link anatomy)