figma下載_Figma重新構想的團隊庫

figma下載

The Team Library in Figma 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.

Figma中的團隊庫是團隊中所有文件之間的一組共享組件。可以通過任何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 by Facebook 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，我們使用團隊庫來組織溝通和社交團隊之間的共享資產。市場營銷團隊創建的統一調色板和圖標集，公司徽標以及Facebook的設備等資產都經常使用。使用多種資產管理解決方案之后，擁有可直接在設計應用程序內部訪問的統一，更新版本的資產非常強大。與構建設計和資產庫系統有關的許多問題已被消除。

But don’t feel limited to just icon assets. In Figma’s own words, 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 open-source presentation template, 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)

Select object, group, or frame
選擇對象，組或框架
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”
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
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
右鍵單擊“組件”以將它們添加到團隊庫中，或使用“組件”列表下方的“將文件發布到庫中”將該文件中的所有組件推送到團隊庫中
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:

在此處閱讀有關組件的更多信息：

Components in FigmaToday we are excited to release Components in Figma. By bringing concepts like composition, inheritance and unlimited…blog.figma.com

在FIGMA組件 今天我們很高興能釋放組件在FIGMA。 通過引入組成，繼承和無限等概念…… blog.figma.com

專家提示 (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 fastest release cycle 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沒有贊助這篇文章的寫作，并且在我的允許下做廣告，因為他們也認為這對其他設計師有幫助。