博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
figma下载_Figma重新构想的团队库
阅读量:2521 次
发布时间:2019-05-11

本文共 10162 字,大约阅读时间需要 33 分钟。

figma下载

一个新的,功能更强大的界面,用于在整个组织中共享组件 (A new, more powerful interface for sharing Components across your organization)

The Team Library in is a set of shared Components across all files in a Team. Components in the Team Library are accessible across any file — existing and new — in any Team project. If a new file is created in our Team, before it has any content in it, it automatically has access to hundreds of existing Components we’ve published to our Team Library. Not only that, but when the master version of a Component is edited, Figma allows those changes to flow throughout every file that contains an Instance of that Component. And the best part is that it’s not a forced update, instead, a notification appears in each of those files, allowing the change(s) to the Instance of that Component to be viewed and accepted.

的团队库是团队中所有文件之间的一组共享组件。 可以通过任何Team项目中的任何文件(现有文件和新文件)访问Team Library中的组件。 如果在我们的团队中创建了一个新文件,则在其中包含任何内容之前,它会自动访问我们发布到我们的团队库中的数百个现有组件。 不仅如此,而且在编辑组件的主版本时,Figma允许这些更改遍历包含该组件实例的每个文件。 最好的部分是,它不是强制更新,而是在每个文件中显示一条通知,允许查看和接受对该组件实例的更改。

Today, a major update to the Team Library was released. The left-hand panel in Figma, formerly just the Layers List, has a new interface at the bottom. By default that panel allows you to see all your layers and objects in the file, just as you could before, and now has two new dedicated spaces: File Components and Team Library, which can be toggled at the bottom of the panel or with keyboard shortcuts: alt + 1 for Layers List, alt + 2 for File Components, and alt + 3 for Team Library (although, Chrome OS hijacks that keyboard shortcut currently).

今天,发布了对团队库的主要更新。 Figma的左侧面板以前只是“图层列表”,底部有一个新界面。 默认情况下,该面板允许您像以前一样查看文件中的所有图层和对象,现在有了两个新的专用空间:“文件组件”和“团队库”,可以在面板底部或使用键盘进行切换快捷键:alt + 1用于“层列表”,alt + 2用于“文件组件”,alt + 3用于“团队库”(尽管Chrome OS当前劫持了该键盘快捷键)。

As a design system scales, maintaining consistency can become more challenging. At Square, we use Team Libraries to organize commonly shared assets between the Communications and Social teams. Assets like unified color palettes and icon sets created by the Marketing team, corporate logos, and devices are all used frequently. After using several asset management solutions, having a unified, updating version of assets directly accessible inside the design application is incredibly powerful. So many issues related to building out design and asset library systems have been removed.

随着设计系统的扩展,保持一致性可能变得更具挑战性。 在Square,我们使用团队库来组织沟通和社交团队之间的共享资产。 市场营销团队创建的统一调色板和图标集,公司徽标以及设备等资产都经常使用。 使用多种资产管理解决方案之后,拥有可直接在设计应用程序内部访问的统一,更新版本的资产非常强大。 与构建设计和资产库系统有关的许多问题已被消除。

But don’t feel limited to just icon assets. In Figma’s , you can “create design systems with linked UI components the whole team can use.” A Component is any object or group of objects that you intend to use in multiple places, but want to reserve the ability to change properties across all versions of them (similar to Symbols in other applications). You could create complex screen layouts or webpages with hundreds of objects in a Frame and turn it into a Component to be shared across your team.

但不要仅仅局限于图标资产。 用Figma的 ,您可以“使用整个团队可以使用的链接UI组件创建设计系统”。 组件是您打算在多个地方使用但希望保留在所有版本中更改属性的能力的任何对象或对象组(类似于其他应用程序中的Symbols)。 您可以创建复杂的屏幕布局或网页,并在一个框架中包含数百个对象,然后将其变成要在整个团队中共享的组件。

使用组件 (Using Components)

Components can be a singular line or shape, or an extremely complex set of objects in a Frame, and everywhere in-between. Components are elements that can be re-used throughout a design file or Team. Take a simple button for example. I want all the buttons in my design to be the same basic design: rounded corners, red background, text size and style, etc. So I create my first button with all the properties set how I like them.

组件可以是单一的线或形状,也可以是框架中以及两者之间无处不在的一组非常复杂的对象。 组件是可以在整个设计文件或团队中重复使用的元素。 以一个简单的按钮为例。 我希望设计中的所有按钮都具有相同的基本设计:圆角,红色背景,文本大小和样式等。因此,我使用所有属性设置了我喜欢它们的方式来创建我的第一个按钮。

Then I make a Component out of my first button. You can select any object then click the Component button at the top of the Figma interface, use macOS keyboard shortcut: option + command + K, or right-click the object and select “Create Component.”

然后,我用第一个按钮创建一个组件。 您可以选择任何对象,然后单击Figma界面顶部的Component按钮,使用macOS键盘快捷键:option + command + K,或右键单击该对象并选择“ Create Component”。

To create more buttons, I duplicate the new button Component or drag a new copy out of the File Components list in the left-hand panel. These new buttons are called Instances, and they all reference and retain the properties of the Component they were created from, as known as the Master Component. If I adjust the color or typeface in the Master Component button, all the Instances in my file will update to match, instantly.

要创建更多按钮,请复制新按钮Component或将新副本从左侧面板的File Components列表中拖出。 这些新按钮称为实例,它们都引用并保留了创建它们的组件的属性,即主组件。 如果在“主组件”按钮中调整了颜色或字体,则文件中的所有实例将立即更新以匹配。

I used Components in an , setting up the slide titles as a Component and Instances of that Component. Now, when I need to customize a new presentation with a different typeface and color palette, it takes seconds.

我在使用了组件,将幻灯片标题设置为组件和该组件的实例。 现在,当我需要使用不同的字体和调色板来自定义新的演示文稿时,只需几秒钟。

Anyone with access to the file can make changes to the Components too. Sharing a file with a copy editor, for example, allows them to update the text in a Master Component and have their copy changes flow through all the Instances.

有权访问该文件的任何人都可以更改组件。 例如,与副本编辑器共享文件,使他们可以更新主组件中的文本,并使副本更改流经所有实例。

Using Components within a file already felt like magic to me, and has always been a huge time saver as a file grows with more Frames and Instances. But the real magic lies in using Components across multiple files, thanks to the Team Library.

在文件中使用组件对我来说已经很神奇了,并且随着文件数量的增加和帧数的增加,向来节省大量时间。 但是,真正的魔力在于借助团队库,可以跨多个文件使用组件。

If I take a button Component, and publish it to the Team Library, then anyone on my team can access it and use it within their files, and any new files created in the Team have access to it as well. That means designers can immediately start building; using foundational Components from our design system.

如果我使用按钮Component并将其发布到团队库,则团队中的任何人都可以访问它并在其文件中使用它,并且在团队中创建的任何新文件也都可以访问它。 这意味着设计师可以立即开始构建。 使用我们设计系统中的基础组件。

As time goes on, the button properties may need to be adjusted. Returning to the Master Component of that button, by right-clicking an Instance of it or the Component itself in the Team Library panel, and adjusting it’s color, for example, notifies every file containing an Instance that there is an update available. A blue notification dot appears on the File Components list icon at the base of the left-hand panel. A “Publish changes” button at the top of the Component List leads to a modal to confirm the changes. Once changes are published to the Team Library, any file that uses an Instance of that Component will receive a notification in the bottom right corner to review the update(s). Clicking “Review” allows you to see what was changed, by who, and when. Once accepted, the Instance(s) in your file will update immediately to conform to the master Component. And you can choose not to accept those changes and your file’s Instances will remain unchanged.

随着时间的流逝,可能需要调整按钮属性。 例如,通过右键单击按钮的实例或“团队库”面板中的组件本身并调整其颜色,返回该按钮的主组件,以通知包含该实例的每个文件有可用的更新。 一个蓝色的通知点出现在左侧面板底部的“文件组件”列表图标上。 组件列表顶部的“发布更改”按钮将导致一个模版,以确认更改。 将更改发布到团队库后,使用该组件实例的任何文件都将在右下角收到一条通知,以检查更新。 单击“查看”可以查看更改的内容,更改的对象和时间。 接受后,文件中的实例将立即更新以符合主组件的要求。 而且,您可以选择不接受这些更改,并且文件的实例将保持不变。

选择文件组件并将其发布到团队库 (Selecting and publishing File Components to Team Library)

  1. Select object, group, or frame

    选择对象,组或框架
  2. Click the Component button at the top of the Figma interface, use macOS keyboard shortcut: option + command + K, or right-click object and select “Create Component”

    单击Figma界面顶部的Component按钮,使用macOS键盘快捷键:Option + Command + K,或右键单击对象并选择“ Create Component”
  3. Switch to the Component tab by selecting the toggle at the base of the Layer List, or use macOS keyboard shortcut: alt + 2

    通过选择“图层列表”底部的切换按钮来切换到“组件”选项卡,或使用macOS键盘快捷键:alt + 2
  4. Right-click Components to add them to the Team Library, or use “Publish file to library” below your Component list to push all Components in this file to the Team Library

    右键单击“组件”以将它们添加到团队库中,或使用“组件”列表下方的“将文件发布到库中”将该文件中的所有组件推送到团队库中

  5. Switch to the Team Library tab by selecting the toggle at the base of the panel, or use macOS keyboard shortcut: alt + 3

    通过选择面板底部的切换按钮切换到“团队库”选项卡,或使用macOS键盘快捷键:alt + 3

Now you can search or navigate to any Component that has been published in your Team, by any contributor.

现在,您可以搜索或导航到任何贡献者在团队中发布的任何组件。

To place an Instance of a Component into your file: Drag from the Team Library panel into any file. That Instance continues to be attached to the Master Component from whichever file in your Team it originates (And it could be from another member of your team), unless you right-click and select “Detach Instance” (macOS keyboard shortcut: option + command + B)

要将组件实例放置到文件中:从“团队库”面板拖到任何文件中。 除非您右键单击并选择“ Detach Instance”(macOS键盘快捷键:option + command),否则该实例将继续从其团队中的任何文件(可能来自您团队的其他成员)连接到主组件。 + B)

You can also add a description to your Components, visible in the Team Library to add additional context for your team. Select to the Master Component and add a description in the right-hand panel. The descriptions appear on hover in the Component List and in the Team Library.

您还可以在“组件库”中为组件添加说明,以为团队添加其他上下文。 选择“主组件”,然后在右侧面板中添加描述。 这些说明会出现在悬停在“组件列表”和“团队库”中。

Read even more about Components here:

在此处阅读有关组件的更多信息:

专家提示 (Pro tip)

You can set the background of a Component tile in the Component List and Team Library by setting a Frame behind the component and changing its color. This is really handy with lighter Components, like white or grey icons.

通过在组件后面设置框架并更改其颜色,可以在“组件列表”和“团队库”中设置“组件”磁贴的背景。 轻巧的组件(例如白色或灰色图标)确实非常方便。

Huge thanks to the team at Figma! Who keep building incredible features like this, and have the I’ve ever seen.

非常感谢Figma的团队! 谁会继续构建此类令人难以置信的功能,并拥有我见过的 。

There are already 464 Components in Square’s Team Library!

Square的团队库中已经有464个组件!

Disclaimer: You may have found this post through advertising on Twitter or Facebook. Figma didn’t sponsor the writing of this post, and are advertising with my permission as they also thought it was helpful for other designers.

免责声明:您可能已经在Twitter或Facebook上通过广告找到了此帖子。 Figma没有赞助这篇文章的写作,并且在我的允许下做广告,因为他们也认为这对其他设计师有帮助。

翻译自:

figma下载

转载地址:http://strwd.baihongyu.com/

你可能感兴趣的文章
Java程序生成exe可执行文件
查看>>
什么是blob,mysql blob大小配置介绍
查看>>
模运算的规则
查看>>
CSS样式布局入门介绍,非常详尽
查看>>
20171027_Python学习第二周五次课
查看>>
LDAP验证用户名和密码
查看>>
【linux】Tomcat 安装
查看>>
JAVA中对同一问题分别使用内部类与匿名内部类实现
查看>>
处女男学Android(七)---Android 应用资源之StateListDrawable
查看>>
超级台阶
查看>>
每天专注三件事
查看>>
graph driver-device mapper-01driver初始化
查看>>
javabean总结
查看>>
android app崩溃日志收集以及上传
查看>>
3、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——用户登录
查看>>
js 事件
查看>>
简易selenium自动化测试框架(Python)
查看>>
IP地址
查看>>
C#弹出对话框
查看>>
love~LBJ,奥布莱恩神杯3
查看>>