Figma#3：色彩

已于 2023-10-22 22:04:49 修改
阅读量5.3k 收藏 2
点赞数
分类专栏： UI # Figma 文章标签： ui
于 2022-01-18 19:17:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62428841/article/details/122535243
版权
本文详细介绍了Figma中的色彩操作，包括个人层面的图层模式选择、吸色和渐变，以及团队协作时如何利用Document Colors、Selection colors、可复用颜色和团队颜色进行高效色彩管理。通过创建团队颜色库，可以实现颜色的跨界面复用，并方便地进行颜色库的更新和同步。
摘要由CSDN通过智能技术生成

参考视频：【Figma教程】保姆级教程，全网最简单易学的Figma教程03-色彩及团队协作_哔哩哔哩_bilibiliicon-default.png?t=N7T8https://www.bilibili.com/video/BV1Z5411s7mi?spm_id_from=333.1007.top_right_bar_window_history.content.click

目录

1 个人

1.1 图层模式选择 

1.2 吸色 

1.3 渐变

2 团队

2.1 Document Colors

2.2 Selection colors 

2.3 可复用颜色 

2.4 团队颜色 

2.4.1 做一个自己常用的色彩库

2.4.2 修改我的色彩库

1 个人

1.1 图层模式选择 

通过点击小水滴可以进入图层模式选择

  • Multiply：正片叠底
  • Screen：滤色
  • Overlay：叠加
  • Soft light：柔光
  • Hard light：强光

1.2 吸色 

 点击图形，并摁住I，可以进行吸色和对目标图形的填充。 

1.3 渐变

最低0.47元/天 解锁文章
魔法电子猫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
掌握Figma设计规范的秘诀：提升设计一致性与效率
DevCorner的Pro技术博客
06-27 520
学习Figma设计规范是提升设计一致性和效率的重要一步。通过了解设计规范的重要性、研究优秀案例、创建组件库和样式库、制定设计规范文档以及学习协作和共享技巧，你将能够更好地应用Figma的功能来创建和维护设计规范。希望本篇博客对你学习Figma设计规范有所帮助。如果你有任何问题或需要进一步的指导，请随时与我联系。祝你在学习Figma设计规范的过程中取得成功！
figma-image-color-correction:Figma插件来操纵图像颜色并添加滤镜
05-05
Figma图像编辑器 PL 使用许多不同的颜色调整和滤镜来处理图像。 保存并加载自己的预设 插件采用并保持图像的原始分辨率。 :television: :artist_palette: 颜色调整： 亮度 对比 色调 频道数 接触 伽玛 充满活力 着色 :horizontal_traffic_light: 筛选条件： 倒置 镜子 噪音 彩色半色调 单色半色调 模糊 镜头模糊 锋利的 :collision: 即将推出的功能： 显示更改的值 凸出/捏变形 漩涡 墨水 边缘工作 六边形像素 :money_with_wings: 如果您想支持
【FIGMA】插件集合
最新发布
tss1009的博客
06-18 219
【6】【Al Color Palette Generator】 AI调色板。【5】【Brands Colors】 品牌颜色。【7】【Palette Magic】魔法调色板。【1】【uiGradients】 渐变色。【4】【Layer lcon】 图层图标。【10】【Atom】 原子化设计系统。【13】【Wise】 设计 规范文档。【2】【Colormate】 色彩。【8】【ColorAl】 AI色彩。【11】【Prime】 资源综合库。【9】【Flex】栅格布局组件。
figma-color-compass:在Figma中轻松快速地选择颜色
05-05
:star: 以设计师为中心的准确性快速浏览色谱 无需从整个光谱中随机观察和选择颜色，只需向该插件提供基本颜色即可生成色彩，阴影，色调和互补色。 增大或减小步长值，以在所需的确切阴影上进行磨合。 尝试使用不同的色板，并直接从插件中即时更新元素。 现在使用实心填充支持组！ :star: 使用 从Figma运行插件 选择一个包含填充，背景或笔触的元素（不支持音符组） 单击“更新”按钮以更新调色板 在选择元素时单击插件色板，以通过更改预先存在的填充，背景或笔触来更新选定的元素。 单击剪贴板图标以复制当前颜色的十六进制代码 更新阶跃值以在调色板中生成更多阴影 :star: 笔记 现在，您可以通过单击剪贴板图标从插件复制十六进制代码 现在，如果当前未选择任何元素，则可以键入自定义十六进制代码，而不是通过画布上的元素进行更新。 请注意，如果在画布上选择了一个元素，然后手动更新了十六进制代码，则插件将默认为首先从所
figma-图标
基本无害的博客
03-24 1424
iconfont支持蓝色使用插件：Fill Rule Editor1.figma导入iconfont问题会遇到图标不一致的情况图标由黄色改为蓝色2.需要Flatten之后好用，选中内层图标，不要变成组件，直接改图形，目标是把它变成蓝色的需要点击高亮处，把空隙里面内容去掉另外要在原子组件里调。
figma-组件库建立
基本无害的博客
03-23 3513
组件库
告别加班！9款Figma汉化插件助你高效工作，提升生产力！
FourxiYuanzi的博客
06-07 578
Figma是一款极受设计师欢迎的设计工具，而Figma中文版即时设计则是在Figma基础上改进而来，有着众多的Figma汉化插件，可以加速设计工作，让每位设计师完成更好的创作。打开即时设计官网首页，点击【设计社区】-【】即可看到众多实用的Figma汉化插件。
figma-designs:Figma设计的系列
04-04
1. **品牌设计**：设计师可以使用Figma来创建和维护品牌的色彩方案、字体规范、图标样式等，确保所有设计输出都符合品牌形象。 2. **UI/UX设计**：Figma是设计网页和应用程序界面的理想工具，可以方便地构建界面布局...
Lopper figma网页模板下载
04-20
3. **Lopper v1.0.fig**：这个文件是Figma的设计文件，其中包含了Lopper模板的所有组件和页面。使用Figma打开此文件，用户可以查看并编辑模板的各个部分，根据自己的需求进行定制。 4. **组件库**：Lopper模板可能...
现代极简实心图标figma素材.zip
12-28
【标题】"现代极简实心图标figma素材.zip"所涵盖的知识点主要涉及现代设计趋势、Figma软件的使用以及实心图标的设计原理和应用。 【现代设计趋势】在当前的设计领域，极简主义已经成为一种主流风格。它强调简洁明了...
figma_awd
03-04
3. **协作与反馈**：团队成员可以在同一设计文件上实时评论，提供反馈，减少邮件或会议沟通的时间。设计师可以即时看到修改建议并进行调整。 4. **导出与交付**：完成设计后，Figma可以方便地导出设计图和切片，供...
分享Figma一些非常快速、省时、省力的功能和小技巧
七小嗨少的博客
10-28 1569
ContentReel+Unsplash这是前一篇文章中特别介绍的两个必要的插件，我们使用它们ContentReel它可以帮助你快速生成各种占位符，而不是让你的UI每个用户都在界面中「无名氏」，当然，它可以产生许多类型的占位符：.头像.ID.文本段落等都有，Unspalsh这是著名的免费图库插件，可以为您提供高质量的图库，他的图片可以免费商用。当然，您可以关闭它「Clipcontents」选项，然后你可以让它在容器外看到，第一次，你也可以使用它「cmd/ctrl+Y」在看不见的情况下预览其外轮廓。
17-Figma-磨砂图标绘制技法
billycoder的专栏
01-22 1552
17-Figma-磨砂图标绘制技法 最后效果 步骤 绘制基本结构 添加基本颜色 渐变填充 描边使用径向渐变 大量用了复制属性 混合模式用了叠加 添加背景模糊 添加噪点 用到了noise插件 用到了蒙版 用到了编组 用到了合并形状 拓展 ...
11-Figma-属性栏-填充、描边、投影、导出
billycoder的专栏
01-21 5877
11-Figma-属性栏-填充、描边、投影、导出 常见操作 填充 纯色填充，属性面板操作 线性渐变填充，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变填充，属性面板操作，了解 填充存为样式，属性面板操作 填充样式修改，属性面板操作 填充样式分离，属性面板操作 描边 纯色描边，属性面板操作 线性渐变描边，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变描边，属性面板操作，了解 描边存为样式，属性面板操作 描边样式修改，属性面板操作
figma 基础使用 —— 常用方法
tengyuxin的博客
11-28 1911
分成两种方式（1）离线的包导入（iOS 常用组件.fig 直接拖拽到figma最近网页（2）在插件市场下载。
Figma#4：图片填充
weixin_62428841的博客
01-18 6101
参考视频：【Figma教程】保姆级教程，全网最简单易学的Figma教程04-图片填充技巧_哔哩哔哩_bilibili。
figma设计_设计原型的最简单方法：Figma速成课程
weixin_26732881的博客
08-03 5637
figma设计It doesn’t matter if you haven’t used any prototyping tools before or you’re transitioning from other ones (like Sketch, Adobe XD); This guide is for beginners and professionals alike. So for a...
figma 安装插件_使用figma插件快速生成颜色系统
weixin_26715991的博客
09-15 6000
figma 安装插件In Figma, using defined styles (colors, type, effects, etc.) early and throughout a design project can have a lot of positive impact on your efficiency and output. I’m not necessarily here t...
figma 安装插件_彩色滤光片Figma插件，用于色盲
weixin_26705191的博客
10-16 726
figma 安装插件So as a UX Designer, it is important to design with disabilities in mind. One of these is color blindness. It is important to make sure important information on your product is legible to ev...
怎么学习figma来设计UI呢
03-25
学习Figma的基础知识： 1. 先了解Figma基本概念，了解Figma的界面及主要工具，如何创建画布，如何使用图形元素和文本等等。 2. 熟悉Figma的插件和共享资源库，以及如何使用它们。 3. 熟悉Figma的协作功能，了解如何与团队成员一起工作。 4. 尝试模仿和实现其他设计师的作品，练习技能和快捷键。 学习UI设计技巧： 1. 熟悉设计的基本原则，如对齐、比例、白空间、色彩、字体等等。 2. 研究流行的UI设计趋势，如平面设计、扁平化、材料化等等。 3. 学习如何制作具有品牌识别度的设计元素，如logos、图标、颜色方案等等。 4. 学习如何快速制作高效的原型设计，如简化工作流程、采用现有组件、使用快捷键等等。 5. 实践不断，将学习到的知识运用到实际项目中去，练习自己的UI设计技能并不断提升自己的创造力和审美水准。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值