figma下載

First off, why use dynamic data?

首先，為什么要使用動態(tài)數(shù)據(jù)？

• It’s easy to create and manage long lists of content
  創(chuàng)建和管理一長串內(nèi)容很容易
• You get a better idea of what your product will look like with actual data
  通過實際數(shù)據(jù)，您可以更好地了解產(chǎn)品的外觀
• You can quickly test different sort & view options
  您可以快速測試不同的排序和查看選項
• Moving, editing, and adding new rows of content is a breeze
  輕松移動，編輯和添加新的內(nèi)容行
• Easier to maintain realistic content data
  易于維護真實的內(nèi)容數(shù)據(jù)

Fortunately, the Google Sheets Sync by Dave Williames has us covered. He’s already provided great details on the general setup, so I wanted to show more on using color with the plugin and provide a few tips and examples. Here’s the original documentation.

幸運的是， 戴夫·威廉姆斯 ( Dave Williames)的Google表格同步已涵蓋了我們。 他已經(jīng)提供了有關(guān)常規(guī)設(shè)置的詳細信息，因此我想展示更多有關(guān)在插件上使用顏色的信息，并提供一些提示和示例。 這是原始文檔。

1.在Figma中創(chuàng)建組件 (1. Create your component in Figma)

Create text fields, images, and elements

創(chuàng)建文本字段，圖像和元素

Put a # in front of the layer name in the layer panel in the left. Works for text, image URLs, and colors at this point

在左側(cè)的圖層面板中，在圖層名稱之前添加＃。 此時適用于文本，圖像URL和顏色

[Optional] turn your design into an element for extra scalability

[可選]將您的設(shè)計變成元素，以實現(xiàn)額外的可擴展性

Tip: For text, make sure your layer name and text are disconnected by tapping into the layer panel and renaming it. Otherwise, when you run the plugin it will change both the text AND the layer name and will not work if you want to run the plugin again.

提示：對于文本，請通過單擊圖層面板并將其重命名來確保您的圖層名稱和文本已斷開連接。 否則，當(dāng)您運行插件時，它將同時更改文本和圖層名稱，并且如果您想再次運行該插件，將無法使用。

Tip: Only the layer name needs the #, but I found it useful to show it in the component to remind my team what can be dynamic.

提示：只有圖層名稱需要＃，但是我發(fā)現(xiàn)將其顯示在組件中很有用，以提醒團隊動態(tài)是什么。

Example of a text (left) and color (right) set up設(shè)置文本(左)和顏色(右)的示例 Disconnecting the layer name from the actual text斷開圖層名稱與實際文本的連接

2.將您的數(shù)據(jù)添加到Google表格中 (2. Add your data to a Google Sheet)

Headers should match your layer name in Figma (i.e. the “Shade Name” header here matches the “#ShadeName” layer name in Figma)

標(biāo)頭應(yīng)與Figma中的圖層名稱匹配(即，此處的“ Shade Name”標(biāo)頭與Figma中的“ #ShadeName”圖層名稱匹配)

For colors, you need to add a /# in front of each hex code for the plugin to recognize it as a color instead of text.

對于顏色，您需要在每個十六進制代碼之前添加一個/＃ ，以使插件將其識別為顏色而不是文本。

Make sure the data you want to use is the first tab

確保您要使用的數(shù)據(jù)是第一個標(biāo)簽

Go to the share button, set it to “anyone with the link can view” and copy the link

轉(zhuǎn)到共享按鈕，將其設(shè)置為“知道鏈接的任何人都可以查看”并復(fù)制鏈接

Tip: Make sure the data you want is the first tab in the Google Sheet. You can store multiple lists this way, and move the tab you want just before you activate the plugin in Figma. In the example below, we’ll drag the “Foundation” tab from the second to first tab before running the plugin.

提示：確保所需的數(shù)據(jù)是Google表格中的第一個標(biāo)簽。 您可以通過這種方式存儲多個列表，并在激活Figma中的插件之前移動所需的選項卡。 在下面的示例中，我們將在運行插件之前將“ Foundation”選項卡從第二個選項卡拖動到第一個選項卡。

3.根據(jù)需要經(jīng)常更新您的內(nèi)容 (3. Update your content as often as needed)

Run the Google Sheets Sync plugin

運行Google Sheets Sync插件

Enjoy seeing all your content load

欣賞您所有的內(nèi)容負載

Adjust your Google sheet and re-run the plugin as many times as desired

調(diào)整您的Google工作表，然后根據(jù)需要多次運行插件

Now that you have everything set up it’s super easy to create, test, and update your designs. I had a lot of fun seeing how different groupings and sorts would change the experience, especially for longer lists.

現(xiàn)在您已完成所有設(shè)置，創(chuàng)建，測試和更新設(shè)計非常容易。 我很高興看到不同的分組和排序如何改變體驗，尤其是對于較長的列表。

這是所有事物的示例： (Here is an example of everything together:)

In this example of a color picker you can see how helpful this was to understand how the component might work with real content. In just a few minutes I was able to:

在這個顏色選擇器的示例中，您可以看到這對于了解組件如何與實際內(nèi)容一起工作很有幫助。 在短短的幾分鐘內(nèi)，我能夠：

• Set up a list from my master component
  從我的主組件設(shè)置列表
• Run the plugin and see how it would look for my lipsticks
  運行該插件，看看它對我的口紅的外觀如何
• Move a tab and see how the same component would look for my foundations
  移動選項卡，查看同一組件將如何作為基礎(chǔ)
• Resort the data and decide on the best way to display the content
  整理數(shù)據(jù)并確定顯示內(nèi)容的最佳方法

Plus, if there are any changes to the product names or colors it will be easy to add/delete rows or change the content in the Google Doc.

另外，如果產(chǎn)品名稱或顏色有任何更改，則可以輕松添加/刪除行或更改Google文檔中的內(nèi)容。

Happy Designing & Thanks Dave!

祝您設(shè)計愉快，并感謝Dave！

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權(quán)和知識共享的舉措來促進科技行業(yè)中的黑人女性平等。 對系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計社區(qū)。

翻譯自: https://uxdesign.cc/dynamic-content-colors-in-figma-4a47c68d9a44

figma下載

總結(jié)

以上是生活随笔為你收集整理的figma下载_Figma中的动态内容和颜色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。