【Figma技巧】Figma中快速制作斜线阴影的三种方法

最新推荐文章于 2024-03-27 11:18:41 发布
最新推荐文章于 2024-03-27 11:18:41 发布
阅读量5.8k 收藏
点赞数
分类专栏： # Figma 设计 文章标签： figma 设计 绘制 区域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ymyz1229/article/details/114403889
版权
设计 同时被 2 个专栏收录
24 篇文章 4 订阅
订阅专栏
Figma
10 篇文章 7 订阅
订阅专栏

在这里插入图片描述

想要实现的效果

在这里插入图片描述

方法一

安装Hero-Patterns插件（安装地址：https://www.figma.com/community/plugin/743134103711120154/Hero-Patterns-for-Figma）
在这里插入图片描述
缺点：生成的是位图，无法再次修改颜色

方法二

自己画一条斜线，然后用Pattern Hero这个插件生成斜线阵列，再放到蒙版里面
在这里插入图片描述

方法三

用虚线方式手动制作斜线阴影

  1. 画一条横线，增加宽度
  2. 设置虚线和间隔
  3. 绘制一个封闭区域作为蒙版
  4. 旋转角度
    在这里插入图片描述
岩鸣杨子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Figma#1： 图形绘制
weixin_62428841的博客
01-16 1万+
放寒假了，但又没完全放
figma-color-compass:在Figma中轻松快速地选择颜色
05-05
:star: 以设计师为中心的准确性快速浏览色谱无需从整个光谱中随机观察和选择颜色，只需向该插件提供基本颜色即可生成色彩，阴影，色调和互补色。 增大或减小步长值，以在所需的确切阴影上进行磨合。 尝试使用不同的...
figma有哪些插件比较好用，分享5款必备figma插件
七小嗨少的博客
05-27 4907
用过 Sketch 的同学都体会过插件的重要性，目前 Figma 的插件所覆盖的功能已经不输给 Sketch 了，基本上你在 Sketch 常用的插件，在 Figma 都能找到，不仅如此，Figma 基于在线工具的天然游戏，在插件的玩法上想象空间更大，比如你你可以通过插件直接听歌，或者玩游戏，在工作之余还能放松一下。 下面就给大家介绍一下5 款就连大厂设计师都在用的 Figma 插件 1.Clean Document 这款插件可以帮助设计师整理图层，设计稿完成以后，各种乱七八糟的图层和编组不仅自己看着
matlab 柱状图画斜线,请教一个关于柱状图的问题--填充采用斜线之类的，不能是颜色...
weixin_39764487的博客
03-25 419
该楼层疑似违规已被系统折叠隐藏此楼查看此楼endif ratiow*pwidth > bwidthbigpattern(:,bwidth+1:end) = [];endbigpattern = repmat(bigpattern,[1 1 3]);color = (bits(:,:,1) == colorval(1)) & ...(bits(:,:,2) == colorval(2...
如何给边框添加阴影效果：box-shadow
qq243179521的博客
09-29 276
https://blog.csdn.net/zzqwxx/article/details/51895977 https://blog.csdn.net/weixin_40047834/article/details/79320176
figma文字的调用与调节
qq_52175048的博客
01-13 4218
figma文字的调用与调节
11-Figma-属性栏-填充、描边、投影、导出
billycoder的专栏
01-21 5689
11-Figma-属性栏-填充、描边、投影、导出 常见操作 填充 纯色填充，属性面板操作 线性渐变填充，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变填充，属性面板操作，了解 填充存为样式，属性面板操作 填充样式修改，属性面板操作 填充样式分离，属性面板操作 描边 纯色描边，属性面板操作 线性渐变描边，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变描边，属性面板操作，了解 描边存为样式，属性面板操作 描边样式修改，属性面板操作
chrome figma中文插件
12-14
谷歌浏览器 figma中文插件
microsoft-figma：从figma中生成无礼的变量文件
02-03
Figma样式为SASS / LESS文件将figma样式提取到scss / less文件中。先决条件如果尚未安装则需要安装它1.安装NPM依赖项npm install 2.安装gulp npm install -g gulp 3.获取您的figma个人访问令牌跑gulp extract-figma-...
slajdomat:这是一个用于在figma中制作缩放幻灯片的程序
04-09
Slajdomat 这是一个用于在figma中制作缩放幻灯片的程序。 有两个部分： figma的插件，位于figma-plugin目录中一个电子应用程序，它将文件从插件保存到磁盘工作流程是使用插件在figma中的图形上强加树形结构。 然后，...
flow-kit：绘制流箭头.....您也可以在Figma中使用它，只需导入它，它就会将其转换为Figma文件！
02-06
flow-kit：绘制流箭头.....您也可以在Figma中使用它，只需导入它，它就会将其转换为Figma文件！
figmark:在React代码中导入Figma设计
05-02
Figmark允许您在React代码中导入Figma设计。 资源 入门 首先，您需要安装CLI工具-继续运行： npm install figmark -g cd到您的项目目录，然后运行： figmark init 从您的Figma个人访问密钥开始，这将提示您一些...
分享Figma一些非常快速、省时、省力的功能和小技巧
七小嗨少的博客
10-28 1456
ContentReel+Unsplash这是前一篇文章中特别介绍的两个必要的插件，我们使用它们ContentReel它可以帮助你快速生成各种占位符，而不是让你的UI每个用户都在界面中「无名氏」，当然，它可以产生许多类型的占位符：.头像.ID.文本段落等都有，Unspalsh这是著名的免费图库插件，可以为您提供高质量的图库，他的图片可以免费商用。当然，您可以关闭它「Clipcontents」选项，然后你可以让它在容器外看到，第一次，你也可以使用它「cmd/ctrl+Y」在看不见的情况下预览其外轮廓。
Figma使用问题（更新自己遇到的问题）
最新发布
技术小白=-=的博客
03-27 1425
记录型笔记（主要记录Figma使用问题和插件使用过程）
Figma实用小技巧
热门推荐
设计の诗
05-17 2万+
1. 介绍 原作：lijxse 视频地址 文字版整理：岩鸣杨子 2. 快速拖拽调整数值 按住option可在数值上拖拽调整，不按option时只能在X/Y/W/H/旋转/圆角等的图标上拖拽调整，不能调整透明度的数值。 3. 属性粘贴复制 shift+X：互换填充和描边 选中图层的某个属性，然后cmd+C，则可复制这个图层特定的属性。 选中图层的某个属性，然后cmd+V，则可粘贴到这个图层特定的属性上。 4. 列表切换&快速搜索 option+1：切换到Layers option+2：切换到Asse.
figma 安装插件_居家中前14个最新的figma插件可提高工作效率
weixin_26715991的博客
09-16 1781
figma 安装插件Hey everyone! We hope you’re staying well during this time of crisis. The spread of COVID-19 has hit the world, and many of us are now working entirely remotely. Working at home and staying ...
frame中src怎么设置成一个变量_在 Figma 中如何选择 group（组）或 frame（画框）？...
weixin_39777637的博客
11-23 288
导读：在 Figma 中可以使用 group（组）或 frame（画框）来组织元素，但它们又有一些不同。合理地选择如何使用它们，能够帮助我们更好地设计。本文来自 Figma 官方博客，由卓浩翻译。你知道在 Figma 中何时该使用 group（组），何时该使用 frame（画板）吗？它们都是承载其它元素的容器，但它们也有自己独特的属性和使用方法。它们彼此之间的区别并不总是很明显，所以为了帮助区分它...
【Figma技巧】如何计算整个页面中的画板数量
设计の诗
07-16 3904
我们知道，可以打开Resource use显示资源的使用情况，包括整个项目中的图层数量和内存占用率。 那么，有没有方法可以查看画板数量，或者说做了个多少张图？ 通过和群里大神的讨论，总结了以下几种方法。 方法一：全选导出 按cmd+A，全选中页面中的画板，然后按右下角的导出，即可显示所有画板数量。 方法二：开发者工具 在开发者工具的Console里输入以下代码： let i = 0 figma.root.children.map(page => page.children.map(node
figma怎么改中文
07-28
要将 Figma 的界面语言设置为中文，您可以按照以下步骤操作： 1. 打开 Figma 应用并登录您的帐户。 2. 在顶部菜单栏中，找到“Preferences”（偏好设置）选项并点击它。 3. 在弹出菜单中，选择“Language”（语言）选项。 4. 在语言选项中，选择“中文”或“Chinese”（根据 Figma 的界面翻译）。 5. 关闭“Preferences”（偏好设置）窗口，您会看到 Figma 的界面语言已经改变为中文。 现在，您应该能够在 Figma 中使用中文界面了。请注意，根据您的 Figma 版本和操作系统设置，界面翻译可能会有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值