figma下载_Figma中的动态内容和颜色

figma下载

First off, why use dynamic data?

首先,为什么要使用动态数据?

  • It’s easy to create and manage long lists of content

    创建和管理一长串内容很容易
  • You get a better idea of what your product will look like with actual data

    通过实际数据,您可以更好地了解产品的外观
  • You can quickly test different sort & view options

    您可以快速测试不同的排序和查看选项
  • Moving, editing, and adding new rows of content is a breeze

    轻松移动,编辑和添加新的内容行
  • Easier to maintain realistic content data

    易于维护真实的内容数据

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表格同步已涵盖了我们。 他已经提供了有关常规设置的详细信息,因此我想展示更多有关在插件上使用颜色的信息,并提供一些提示和示例。 这是原始文档。

1.在Figma中创建组件 (1. Create your component in Figma)

  1. Create text fields, images, and elements

    创建文本字段,图像和元素
  2. 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

    在左侧的图层面板中,在图层名称之前添加#。 此时适用于文本,图像URL和颜色
  3. [Optional] turn your design into an element for extra scalability

    [可选]将您的设计变成元素,以实现额外的可扩展性

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.

提示:对于文本,请通过单击图层面板并将其重命名来确保您的图层名称和文本已断开连接。 否则,当您运行插件时,它将同时更改文本和图层名称,并且如果您想再次运行该插件,将无法使用。

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.

提示:只有图层名称需要#,但是我发现将其显示在组件中很有用,以提醒团队动态是什么。

A Figma text component with a # in front of the name
A Figma fill shape with a # in front of the layer name
Example of a text (left) and color (right) set up
设置文本(左)和颜色(右)的示例
A video clicking on the layers panel and changing the layer name to disconnect the layer name from the actual text
Disconnecting the layer name from the actual text
断开图层名称与实际文本的连接

2.将您的数据添加到Google表格中 (2. Add your data to a Google Sheet)

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

    标头应与Figma中的图层名称匹配(即,此处的“ Shade Name”标头与Figma中的“ #ShadeName”图层名称匹配)
  2. 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.

    对于颜色,您需要在每个十六进制代码之前添加一个/# ,以使插件将其识别为颜色而不是文本。

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

    确保您要使用的数据是第一个标签
  4. Go to the share button, set it to “anyone with the link can view” and copy the link

    转到共享按钮,将其设置为“知道链接的任何人都可以查看”并复制链接

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.

提示:确保所需的数据是Google表格中的第一个标签。 您可以通过这种方式存储多个列表,并在激活Figma中的插件之前移动所需的选项卡。 在下面的示例中,我们将在运行插件之前将“ Foundation”选项卡从第二个选项卡拖动到第一个选项卡。

A google sheet with a column & header for each title, description, and color variable

3.根据需要经常更新您的内容 (3. Update your content as often as needed)

  1. Run the Google Sheets Sync plugin

    运行Google Sheets Sync插件
  2. Enjoy seeing all your content load

    欣赏您所有的内容负载
  3. Adjust your Google sheet and re-run the plugin as many times as desired

    调整您的Google工作表,然后根据需要多次运行插件

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.

现在您已完成所有设置,创建,测试和更新设计非常容易。 我很高兴看到不同的分组和排序如何改变体验,尤其是对于较长的列表。

这是所有事物的示例: (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:

在这个颜色选择器的示例中,您可以看到这对于了解组件如何与实际内容一起工作很有帮助。 在短短的几分钟内,我能够:

  • Set up a list from my master component

    从我的主组件设置列表
  • 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

    移动选项卡,查看同一组件将如何作为基础
  • Resort the data and decide on the best way to display the content

    整理数据并确定显示内容的最佳方法

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.

另外,如果产品名称或颜色有任何更改,则可以轻松添加/删除行或更改Google文档中的内容。

Happy Designing & Thanks Dave!

祝您设计愉快,并感谢Dave!

Image for post
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),这是一个巴西组织,致力于通过采取行动,赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

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

figma下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275491.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

你可能不知道的package.json

大家好,我是若川。最近组织了源码共度活动:1个月,200人,一起读了4周源码,参与的小伙伴都表示收获很大。如果感兴趣可以点击链接扫码加我微信 ruochuan12。今天推荐一篇相对简单的文章。前言在上一篇npm init vitejs/ap…

基于上下文的rpn_构建事物-产品评论视频中基于上下文的情感分析

基于上下文的rpnThe word “Social” has taken a whole new meaning in today’s digital era. Simply going out to enjoy is no longer the only “social” criteria. Social now is — giving a peek in your personal and professional life to your connections. Facebo…

可爱的 Python: 使用 mechanize 和 Beautiful Soup 轻松收集 Web 数据

可爱的 Python: 使用 mechanize 和 Beautiful Soup 轻松收集 Web 数据 使用 Python 工具简化 Web 站点数据的提取和组织 David Mertz, Ph.D., 开发人员, Gnosis Software, Inc.从 2000 年开始,David Mertz 就一直在为 developerWorks 专栏 Charming Python 和 XML M…

JavaScript 断点调试技巧

大家好,我是若川。最近组织了源码共度活动:1个月,200人,一起读了4周源码,参与的小伙伴都表示收获很大。如果感兴趣可以点击链接扫码加我微信 ruochuan12。之前推荐过很多次调试文章,说明调试的重要性&#…

大学生电子设计大赛案例分析_为大学生设计问答平台—案例研究

大学生电子设计大赛案例分析Dealing with academic-related questions like picking a course, fulfilling a major requirement can be tedious and ineffective when you have to simultaneously balance school work, social activities, and focus on personal growth and …

最新最详细最简洁Eclipse调试PHP配置详解(Xdebug,Zend Debugger)

搬家注:该日志写于2011 年 04 月 07 日,Eclipse,PHP等版本号很多,更新也比较快,请注意文章中的版本。本文不一定帮您解决问题,但能给您一些解决问题的思路及一些概念。 最近开始做SRTP项目WebOS&#xff0c…

入门前端学习路线图【送书】

大家好,我是若川。记得点上方音频听小姐姐配音,超级好听。华章图书又赞助了书籍送福利给大家。本次送4本书的抽奖方式是:截止到9月6日(周一)20:00,在留言区留言任意内容。我会在留言区抽取「1位」关注我公众…

单选按钮设置为被选中状态_为什么要设置错误的按钮状态

单选按钮设置为被选中状态当正确的方法出错时 (When the right way goes wrong) Let’s say you want to create a click effect on an HTML button. The first idea that many people get is to do something that reproduces the feeling of the sound emitted by a real but…

「娃娃分享」-常见自校检分析实例.

自校检是许多软件的保护手段之一,对软件加个简单的壳再增加自校检在一定程序上可以抵挡住一大部分新手,不过,对许多人来说,这个保护已经很弱了。。下面讲几种常见的解决自校检方法,写的粗略,希望大家补充。…

用VC和MinGW导出dll的def和lib(a)文件

为什么80%的码农都做不了架构师?>>> 原文地址:http://zhangyafeikimi.iteye.com/blog/404580 有了dll文件需要导出def文件: pexports zlib1.dll > zlib1.def 有了dll和def文件,需要导出MinGW的.a文件:…

产品设计美学案例分析_美学在产品设计中的重要性

产品设计美学案例分析重点 (Top highlight)In one of my previous jobs, I had really interesting debates with the CEO regarding whether we should spend more time improving the way our app looks and feels. ‘How could he not care that the design is outdated?! …

即将到来的ECMAScript 2022标准

大家好,我是若川。周末分享一篇相对简单的文章。最近组织了源码共度活动:1个月,200人,一起读了4周源码,参与的小伙伴都表示收获很大。如果感兴趣可以点击链接扫码加我微信 ruochuan12。另外:昨天的推文入门…

c语言中二叉树中总结点,C语言二叉树的三种遍历方式的实现及原理

二叉树遍历分为三种:前序、中序、后序,其中序遍历最为重要。为啥叫这个名字?是根据根节点的顺序命名的。比如上图正常的一个满节点,A:根节点、B:左节点、C:右节点,前序顺序是ABC(根节…

动态库的创建与使用

1、动态库文件的创建 (1)编写源文件 (2)编译生成动态库 g -fPIC -shared -o libfile_operation.so file_operation.cpp 此编译过程分为两步,等同于下面的两个命令: g -c -fPIC file_operation.cpp …

ux设计中的各种地图_UX写作中的移情

ux设计中的各种地图Demetri Martin is a master of comedic situations. If you’ve never seen Demetri Martin是喜剧情境的大师。 如果你从未见过 him before, he has a sort of dry brand of observational humor, relying more on anecdotes than full stories, and often…

字符串搜索。HOJ1530 Compound Words。

stl set实现字符串搜索。。效率一般。(附二分搜索。) Compound WordsTime limit:1sec.Submitted:233Memory limit:32MAccepted:81Source: Waterloo ACM Programming Contest Sep 28, 1996 You are to find all the two-word compound words in a dictionary. A two-word compo…

字节3-1前端面试官自学Vue的正确姿势

大家好,我是若川。前不久和一个字节前端TL朋友聊天,说到大厂前端供需脱节的情况。特别是使用Vue框架的,因为简单易学好上手,但是能够深入理解的人并不多,大多都只停留在应用层面,缺乏更深层面的理解。尤其是…

苹果风格ui_苹果如何使Soft-UI成为未来

苹果风格ui重点 (Top highlight)Apple announced some pretty wild updates at WWDC 2020 today.苹果今天在WWDC 2020上宣布了一些相当疯狂的更新。 But technology aside, let’s focus on how their UI has changed. It went through the first bitmap representations, thr…

【数据结构】量子危机

问题 宇宙时间公元 5.55 亿年,由于某种原因两大联盟展开了激战(maxingc 联盟采用了微子技术): 邪恶的 maxingc 联盟采集好了微子能,就要运输。Maxingc 联盟的领袖 xc 此时才发现,自己的军事基地中由微子发射…

android 自定义menu背景,Android编程实现自定义系统菜单背景的方法

本文实例讲述了Android编程实现自定义系统菜单背景的方法。分享给大家供大家参考,具体如下:不多说,上图,见代码。package lab.sodino.menutest;import android.content.Context;import android.app.Activity;import android.os.Bu…