figma 安装插件
Hey everyone! We hope you’re staying well during this time of crisis. The spread of COVID-19 has hit the world, and many of us are now working entirely remotely. Working at home and staying productive is may be difficult for someone, but we must all remain professionals and support a community.
嘿大家！ 我们希望您在当前危机时期保持良好状态。 COVID-19的普及已席卷全球，我们中的许多人现在都在远程工作。 对于某人来说，在家工作和保持生产力可能很困难，但是我们都必须保持专业并支持社区。
In general, it’s nice to see people getting together, collaborating and helping each other at these unprecedented times. We do not stand aside, because the main idea of Figma is collaboration.
总的来说，很高兴看到人们在这空前的时刻聚在一起，互相协作并互相帮助。 我们不会袖手旁观，因为Figma的主要思想是合作。
今天在我们的雷达上 (Today is on our radar)
· AutoGrid — grid manage for AutoLayout· Batch Styler — edit multiple text styles at once· Filter — retouch your images in Figma· Find and Replace Colors — organizing color styles· Flipbook — animating Figma designs· Focus CSS — better use of CSS in Figma· Geometric — creating math shapes and curves· Halftones — dotted or halftone effect· Spacing Manager — consistent spacings in components· Spell Inspector — finding spelling errors· Sitemap — create maps of your website· Style Organizer — display and organize color styles· SwiftUI Inspector — enhance the devs workflow for iOS apps· Tracking — create tracking annotations
· 自动栅格 -网格管理为自动版式· 批量斯泰勒 -编辑多个文本样式一次· 过滤器 -修整您的图片中的figma· 查找和替换颜色 -组织颜色样式· 迷你画册 -动画FIGMA设计· 聚焦CSS -在FIGMA更好地利用CSS的· 几何 —创建数学形状和曲线· 半色调 —点状或半色调效果· 间距管理器 —组件中的间距均匀· 拼写检查器 —查找拼写错误· 网站地图 —创建网站的地图· 样式管理器 —显示和组织颜色样式· SwiftUI检查器 —增强了iOS应用的开发人员工作流程· 跟踪 –创建跟踪注释
开始之前 (Before we start)
The most essential thing for us right now is to stay positive, because there is no doubt that soon the pandemic will end and everything will return to normal. For all the people of the world, this is a new experience, as for us — designers, and this is reflected in our work.
对我们来说，目前最重要的事情就是保持积极态度，因为毫无疑问，大流行将很快结束，一切都会恢复正常。 对于我们所有人(设计师)来说，这对于世界上的所有人来说都是新的体验，这反映在我们的工作中。
Despite the difficult economic environment, we do not give up hope that the design sector will be affected by the crisis to the least extent, although many designers are now experiencing a decline in business activity. However, many companies are now leaving to work on a remote basis, and we believe that this is a good time for Figma and other productivity tools, to increase their importance for projects and market demand.
尽管经济环境艰难，但我们不放弃希望设计行业在最小程度上受到这场危机的影响，尽管现在许多设计师的业务活动正在减少。 但是，许多公司现在正离开远程工作，我们认为这是Figma和其他生产力工具增加其对项目和市场需求的重要性的好时机。
Now let’s dive into the plugins!As always, we are starting from the last place, so all the fun is down below.
现在，让我们深入了解插件！ 与往常一样，我们从最后一个地方开始，所以所有的乐趣都在下面。
网站地图 (Sitemap)
14/14 (14 / 14)
If you need to make a map of your website — this plugin will help you with this task.
如果您需要制作网站地图， 此插件将帮助您完成此任务。
The functionality of the Sitemap plugin is pretty simple: type or paste your website URL, click on “Create Map”. The plugin will display all the links that it will find from the HTML source.
Sitemap插件的功能非常简单：键入或粘贴您的网站URL，然后单击“创建地图”。 该插件将显示从HTML源中找到的所有链接。
半色调 (Halftones)
13/14 (13 / 14)
With Halftones you can apply cool dotted and halftone effect filters to your images.
使用Halftones(半色调)，您可以对图像应用冷淡的虚线和半色调效果滤镜。
Just simply select 1 or several images, choose what type of filter you want to apply (dots or halftone effect). Then using the sliders define the angle and pattern size, click on “Apply” and voila — your image looks more trendy now.
只需选择1张或多张图像，然后选择要应用的滤镜类型(点或半色调效果)即可。 然后使用滑块定义角度和图案大小，单击“应用”并瞧瞧-您的图像现在看起来更加时尚。
活页簿 (Flipbook)
12/14 (12 / 14)
Let’s add some fun to our rating! Here comes the Flipbook. A plugin to animate your Figma designs. It has lots of features, including live preview, speed changing, adjusting the animation speed with a slider, as well as reversed animation and exporting to GIF.
让我们为我们的评分增添乐趣！ 随书附上 。 动画化Figma设计的插件。 它具有许多功能，包括实时预览，速度更改，使用滑块调整动画速度以及反转动画并导出到GIF。
There is also a Pro version of this plugin. It has such features as: the absence of watermark and onion skin (which is basically the function of displaying the frame skin to inspect your animation).
此插件还有Pro版本。 它具有以下功能：没有水印和洋葱皮(基本上是显示框架皮肤以检查动画的功能)。
拼写检查员 (Spell Inspector)
11/14 (11 / 14)
Ever needed a tool that could help you to find spelling errors without going out of Figma? Well, Spell Inspector is here to check for grammar mistakes.
您是否曾经需要过一个工具，可以帮助您找到拼写错误而又无需离开Figma？ 好吧， Spell Inspector在这里检查语法错误。
Spell Inspector uses a special SpellCheck API. For now, the dictionary consists of 40,000 words. Spell Inspector checks the page where you want to find the spelling errors and gives you the list of appropriate suggestions. We hope that in the future the creators of this plugin will add more languages and extend the dictionary.
Spell Inspector使用特殊的SpellCheck API。 目前，该词典由40,000个单词组成。 拼写检查器会检查您要查找拼写错误的页面，并提供适当建议的列表。 我们希望将来该插件的创建者可以添加更多语言并扩展词典。
Figma商业版模板 (Figma templates for Business)
Components-driven Figma templates for teams, organizations or single designers (developers). Allows to quick start your project with thousands of shaped components organized as timesaving design systems. Concentrate on the hi-end prototyping without messing with pixels. Create websites, mobile or complex desktop apps faster.
团队，组织或单一设计师(开发人员)的组件驱动的Figma模板。 可以使用成千上万个以节省时间的设计系统组织的成型组件快速启动项目。 专注于高端原型制作而不会弄乱像素。 更快地创建网站，移动或复杂的桌面应用程序。
焦点CSS (Focus CSS)
10/14 (10 / 14)
This plugin will make your CSS experience while working in Figma better and will detect inconsistent styles.
这个插件可以使您在Figma中工作时CSS体验更好，并且可以检测出不一致的样式。
The features include:
功能包括：
- CSS generation for all elements in the entire Figma file; 整个Figma文件中所有元素CSS生成；
- The possibility to hide those CSS properties that you don’t want to copy into the code. 隐藏那些您不想复制到代码中CSS属性的可能性。
- Also there is the filtering feature, which will help you to display only those types of CSS layers that you need. 还有过滤功能，它将帮助您仅显示所需的那些CSS图层类型。
追踪 (Tracking)
9/14 (9 / 14)
Thanks to this plugin, you have a possibility to create, update or attach tracking annotations straight from Figma file.
借助此插件 ，您可以直接从Figma文件创建，更新或附加跟踪注释。
It allows telling the developers what exactly you’d like to track, as well as making sure you track the right things from the bird’s eye view. Also, the plugin has a “status” feature, so you’ll know if tracking has been implemented.
它可以告诉开发人员您到底想跟踪什么，以及确保您从鸟瞰角度跟踪正确的事情。 另外，该插件具有“状态”功能，因此您将知道是否已实施跟踪。
过滤 (Filter)
8/14 (8 / 14)
Despite the fact that this plugin was released last month, it is updated on an ongoing basis and the author adds more and more cool filters there. That’s why we decided to add this wonderful plugin to our list.
尽管该插件已于上个月发布，但仍在不断更新中，作者在那里添加了越来越多的酷炫过滤器。 这就是为什么我们决定将这个出色的插件添加到我们的列表中的原因。
With Filter you will boost your creativity and speed up your workflow. Having this plugin in your Figma arsenal, you might want to stay in Figma and not go out to use Photoshop, because Filter gives you great control of adjusting the images or nodes.
使用过滤器，您可以提高创造力并加快工作流程。 在您的Figma军械库中拥有此插件后，您可能希望留在Figma中而不要使用Photoshop，因为Filter使您可以很好地控制调整图像或节点。
Right now there are more than 30 filters at your disposal, which include: Bulge Pinch, Color Halftone, Cartoon, Triangle Blur, Denoise, Lens Blur, Night Vision, Crosshatch and lots more.
目前，您可以使用30多种滤镜，其中包括：凸捏，彩色半色调，卡通，三角模糊，降噪，镜头模糊，夜视，交叉阴影线等等。
SwiftUI检查器 (SwiftUI Inspector)
7/14 (7 / 14)
If you are working with Swift and looking for the tool that would help you transfer element styles from Figma to Xcode, then stop searching, because SwiftUI inspector will solve your problem. Thanks to this awesome plugin you can export your designs into SwiftUI code.
如果您正在使用Swift，并且正在寻找可将元素样式从Figma转换为Xcode的工具，请停止搜索，因为SwiftUI检查器将解决您的问题。 有了这个很棒的插件，您可以将设计导出到SwiftUI代码中。
Supported features include colors, text labels, basic shapes. The author of the plugin promised to add components, vectors and drop shadows in the future.
支持的功能包括颜色，文本标签，基本形状。 该插件的作者承诺将来会添加组件，向量和阴影。
几何 (Geometric)
6/14 (6 / 14)
Add some math greatness to your designs with this wonderful plugin. Thanks to the power of Geometric, creating complex shapes is now easy. At your disposal such shapes as Polar Rose, Polygons, Spirals of different types, Super Ellipse, Astroid, Trigonometric functions. You can modify them with different parameters. And as the creator of the plugin claims: there will be more interesting math shapes in the near future.
使用这个出色的插件为您的设计增加一些数学上的优势 。 多亏了Geometric的功能，创建复杂的形状现在变得容易了。 您可以随意使用诸如Polar Rose，多边形，各种类型的螺旋，超级椭圆，Astroid和Trigonometric函数的形状。 您可以使用不同的参数进行修改。 就像插件的创建者所声称的那样：在不久的将来，将会有更多有趣的数学形状。
间隔经理 (Spacing Manager)
5/14 (5 / 14)
A lot of designers made different spacings between the elements while designing something. Some elements had 10px spacing, others — 14px, etc. Later on, they had to change every element manually. With the help of AutoLayout, this problem was solved. However, with this plugin you can enhance the spacing experience even more. You can use ready-made spacers from the public library and place them between the elements. Having done that, the spacings between your components will be consistent.
许多设计师在设计某些东西时在元素之间设置了不同的间距。 一些元素的间距为10px，另一些元素的间距为14px，以此类推。后来，他们不得不手动更改每个元素。 借助AutoLayout，此问题得以解决。 但是，使用此插件，您可以进一步增强间距体验。 您可以使用公共图书馆中现成的垫片，并将其放置在元素之间。 完成此操作后，组件之间的间距将保持一致。
How to use the plugin: Add the library to Figma. Or you can have your own elements that have the word “$spacing” in the naming. In case you want to hide the spacings, select a parent frame and run the Spacing Manager. The plugin will find the spacers that were used on the element and will set the opacity value to be 0%.
如何使用插件： 将库添加到Figma。 或者，您可以拥有自己的命名中带有“ $ spacing”字样的元素。 如果要隐藏间距，请选择一个父框架并运行“间距管理器”。 插件将找到元素上使用的间隔物，并将不透明度值设置为0％。
查找和替换颜色 (Find & Replace colors)
4/14 (4 / 14)
Ever experienced the situations when you need to import an unorganized design from the Sketch application? Or your colleague sends you the template that doesn’t have Figma color styles? Yes, these types of things happen from time to time. Well, with this plugin you can easily find all colors and replace them on whatever colors you need.
您是否曾经经历过需要从Sketch应用程序中导入无组织设计的情况？ 还是您的同事向您发送了没有Figma颜色样式的模板？ 是的，这类事情时有发生。 很好 这个插件，您可以轻松找到所有颜色并将其替换为所需的任何颜色。
The plugin is available for working on any type of file, be it a component, instance, rectangle, frame, vector object or text.
该插件可用于处理任何类型的文件，无论是组件，实例，矩形，框架，矢量对象还是文本。
The plugin is easy to use: just install it, run it. Next, click on the input field next to the corresponding color and enter the new color value.
该插件易于使用：只需安装，运行即可。 接下来，单击相应颜色旁边的输入字段，然后输入新的颜色值。
After that, you can begin the process of replacing all matches by clicking the “Replace Colors” button.
之后，您可以通过单击“替换颜色”按钮开始替换所有匹配项的过程。
批处理样式器 (Batch Styler)
第三名！ (Third place!)
Batch Styler is a great solution for the situations when there are lots of text styles and you need to change the font of those text styles with ease.
对于存在许多文本样式并且您需要轻松更改这些文本样式的字体的情况， Batch Styler是一个很好的解决方案。
It doesn’t matter how many text styles or fonts you need to change, Batch Styler will take care of things and will keep all font weights and other styles.
不管您需要更改多少种文本样式或字体，Batch Styler都会处理，并保留所有字体粗细和其他样式。
风格组织者 (Style Organizer)
第二个地方！！ (Second place!!)
This plugin helps to display and organize the color styles on the page. Also, having styles organized, this tool will automatically generate a color palette.
此插件有助于显示和组织页面上的颜色样式。 同样，在组织样式之后，此工具将自动生成调色板。
Features that are ignored in this plugin: Fill/stroke images, invisible padding layers / invisible nodes.
此插件中忽略的功能：填充/描边图像，不可见的填充层/不可见的节点。
Also, be informed that Style Organizer doesn’t support the auto-update function when you make changes in your designs. You need to click the “Update” button manually after you’ve done changes.
另外，请注意，在设计中进行更改时，Style Organizer不支持自动更新功能。 完成更改后，您需要手动单击“更新”按钮。
自动网格❤️ (AutoGrid ❤️)
第一名！！！ (First place!!!)
You probably faced a situation where you have to create multiple AutoLayout layers just to ensure that the cards in your layout are in a neat state?
您可能面临这样一种情况，您必须创建多个AutoLayout图层，以确保布局中的卡片处于整齐的状态？
This plugin is a wonderful solution. AutoGrid takes care of everything related to the grid. All you have to do is define the columns, rows and indents, and AutoGrid will deal with everything else.
这个插件是一个很好的解决方案 。 AutoGrid会处理与网格相关的所有事情。 您所要做的就是定义列，行和缩进，AutoGrid将处理其他所有内容。
Using the plugin is pretty simple:
使用插件非常简单：
- Select the root element for your grid (for example, one card) 选择网格的根元素(例如一张卡片)
- Define the grid structure: how many rows, columns and padding. 定义网格结构：行，列和填充的数量。
- Click “Create a new grid”. 单击“创建新网格”。
The AutoGrid clones your root element so that it fills the newly created grid.
AutoGrid会克隆您的根元素，以便其填充新创建的网格。
Also the plugin has an Auto-Update function. With this feature you won’t have to manually update your grid any time your structure changes.
插件还具有自动更新功能。 使用此功能，您无需在结构更改时手动更新网格。
We chose AutoGrid, Style Organizer & Batch Styler as the leaders in today’s rating, because they are very useful and they boost design processes, especially when it comes to creating the design systems.
我们选择了AutoGrid，Style Organizer和Batch Styler作为当今评级的领导者，因为它们非常有用并且可以促进设计流程，特别是在创建设计系统时。
We hope that this set of plugins has been helpful for you. As always, make sure to go to our store for awesome Figma design systems and templates. We’ll keep you updated. Stay tuned and #stayhome!
我们希望这组插件对您有所帮助。 一如既往，请务必去我们的商店 适用于出色的Figma设计系统和模板。 我们会及时通知您。 敬请关注和#stayhome ！
figma 安装插件
6735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
