品牌型号：联想Yoga 14Sitl

系统：Windows 10 64位专业版

软件版本：Figma入门版

设计的时候，有时候我们会把导航栏固定住，这样用户滚动页面时，它一直会停在屏幕顶部。这个技巧在网页和手机应用里挺常见的。另外，调整旋转中心点能让动画和视觉效果变得更细腻。下面为大家介绍Figma怎么设置导航栏不滚动，Figma怎么设置旋转中心的相关内容。

一、Figma怎么设置导航栏不滚动

为了练习设置导航栏不滚动，我们来模拟这样的一个案例：在手机的界面中，当屏幕向下滚动时，顶部导航栏保持不动，仅是下方的内容滚动。接下来我就通过五个详细的操作步骤给大家演示一下如何用Figma做出导航栏不滚动的效果：

1、设置框架

在工具栏中选择画框工具，右侧面板中会出现多种预设好的手机尺寸，我们选择iPhone 16，画布中就会即刻出现一个393*852像素的框架，这个框架就是接下来我们的界面区域范围。

框架在默认情况下是被设置为不滚动的，我们需要选中框架后在右侧的原型类目中，将滚动行为选项设置为【垂直】。因为我们制作的案例模拟的是移动端的使用情况，而在移动端中垂直的滚动更常见。

2、制作导航栏

导航栏的制作有两种方式。第一种是自己搭建，我们可以用工具栏当中的基础形状（矩形、圆形等），根据需要组建出一个导航栏。第二种方式是运用已经搭建好的导航栏，案例中我们采用第二种方式。在左侧的面板中，将栏目从本地文件切换为资源，输入【导航栏】的英文navigation进行检索，注意使用英文检索，用中文【导航栏】可能搜不出结果。

从搜索结果中，选择合适的导航栏，拖拽到框架中进行使用。

3、设置不滚动

点击选中【导航栏】整组，将右侧面板从【设计】类目切换为【原型】类目，其中有对滚动行为的设置。默认设置是【跟随父级滚动】，我们将它改为【粘性-停留在顶部】。

4、制作滚动内容

为了测试效果，我们需要准备用于滚动的内容。我们要思考为什么需要滚动。滚动是发生在当内容量太多的时候，我们要进入下一屏，因此我们准备的滚动内容高度要大于预设手机尺寸的高度，案例中是要大于852像素。为了简便，我们这里使用矩形工具加文字工具制作简单的元素来代表真实的内容。

5、预览效果

对于固定导航栏后的效果，我们需要在预览模式中进行查看。点击右上角的【播放】按钮。进入到预览的模式中。

在预览中，我们可以看到，当滚动鼠标滚轮的时候，顶部导航栏没有移动位置，下方的内容在进行滚动。

二、Figma怎么设置旋转中心

旋转中心就是物体旋转时的轴心点。Figma默认会把旋转中心放在对象的正中间，但有时候做复杂图形时，我们可能需要调整这个中心点。不过Figma本身没法直接改旋转中心，得靠插件帮忙。有个叫Rotate Origin的插件能帮我们实现。用这个插件的话，修改旋转中心的步骤是这样的：

1、安装插件：打开网址https://www.figma.com/community/plugin/780000661582724634/rotate-origin，找到Rotate Origin，点击【Open in figma】按钮，选择一个建立好的文件。在网页的下方有插件的使用说明，最好通读一次，能帮助我们更加了解这个插件的作用和使用方法。

2、加载插件：选中要改变旋转中心的对象，在工具栏中选择【Actions】,在【Plugins&widgets】中找到【Rotate Origin】插件。

选择【Open plugin】命令，可以在单独的窗口中打开插件，后续的操作会更加方便。

3、改变旋转中心：使用这个插件后，我们可以看到矩形的中心出现一个标识点，表示旋转的中心，但在使用方式上，不能够通过直接拖拽这个标识点来改变旋转中心。要通过【Rotate Origin】窗口中Offset X和Offset Y的值来进行设定，它们指的是旋转中心点偏移的百分比位置，例如图12中X轴的偏移值是80%，Y轴的偏移值是30%，可以看到旋转中心点跑到了右上的位置。

完成旋转中心点的设定后，点击【Rotate】执行偏移，还可以通过【Angle】的数值设定对旋转的角度进行控制。

以上就是Figma怎么设置导航栏不滚动，Figma怎么设置旋转中心的全部内容。固定导航栏能让用户更方便，重要的内容一直都能看到。而调整旋转中心的话，可以做出更复杂的旋转动画，让设计看起来更灵活、更有动感。