【Figma学习】操作工具及其使用二

最新推荐文章于 2024-04-28 19:41:49 发布
最新推荐文章于 2024-04-28 19:41:49 发布
阅读量5.5k 收藏
点赞数
分类专栏： Figma学习 文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47050107/article/details/126273821
版权

文字工具
1.两种输入方式：选中文字工具 拖拽 or 点击
2.拖动调参数：Alt + 鼠标滚轮
3.复制：文字可单纯复制属性及文本，点击文字右键进行操作
4.加链接操作: 复制链接 选中文字Ctrl + V直接进行粘贴
5.链接画框：选中画框右上分享操作，复制链接
6.文本属性保存：选中文字，右框（可以通过保存文本样式及进行复用或者推送给团队使用）

在这里插入图片描述
预览以及分享
1.设置封面：画板右键，设为封面操作
2.分享：项目可改名，右上角为分享键
3.评论添加操做：通过评论功能进行团队之间的沟通
4.草稿中的文件可以分享和编辑，对方可以保存
5.只有付费团队中的项目可以设置不让对方保存

Figma属性栏
1.对齐、平均分布
左对齐：Alt + A
顶对齐：Alt + W
右对齐：Alt + D
底对齐：Alt + S
水平居中：Alt + H
垂直居中：Alt + V
水平翻转：Shift + H
垂直翻转：Shift + V
2.图片的一系列操作

在这里插入图片描述
3.填充、描边、投影、导出

Figma常用插件
Chinese Font Picker:中文字体选择器
Heron Handoff：切图标注交接
Unsplash：丰富的可商用图片资源
SmoothShadow：阴影调整器
UI Faces：生成用户头像
Find and Replace：文本替换
Icons8 Icons：图标资源库
Chinese User Data Generator：中文用户数据生成器
更多插件访问官方社区
右键——管理插件

马里亚纳Mariana
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Figma 中文版 Windows.zip
06-11
figma是一个跨平台uI设计工具，很适合设计行业人员使用，里面提供了丰富设计插件和模板素材，支持多人协作，自动保存，还能跨文件共享组件，轻松原型设计，完全满足不同用户的设计需求，十分推荐。支持Windows。
figma-handoff:Figma切换工具，支持离线导出
04-27
Figma苍鹭交接 插件现已可用！ 单击进行安装。 介绍 Heron Handoff可以帮助您根据设计规范生成脱机文件。 这对于开发人员移交很有用。 此项目是您从中生成的模板，用于生成交接文件。您需要首先安装。 有关更多信息，请访问 。 单击查看演示。 用法 1.安装插件 访问Figma中的，然后单击安装。 2.在文件中运行插件 在Figma中打开一个文件，右键单击并选择plugin-> Heron Handoff来运行它。 3.选择并导出 此插件将识别画布中的每个顶级框架，现在您可以选择所需的内容。 选中“ Export components list选项将在设计规格的左侧面板中生成Export components list 。 如果只是将所有组件放在如下页面中，则无需检查它。 4.选择出口 该插件将识别具有导出属性的所有图层。 您需要选择要导出的图像。 重复的图像将被重命名
figma-github-action：将Figma组件和样式同步到React和CSS
02-07
使用TypeScript创建JavaScript操作 使用此模板来引导TypeScript操作的创建。 :rocket: 该模板包括编译支持，测试，验证工作流，发布和版本控制指南。 如果您是新手，也可以进行更简单的介绍。 请参阅 从此模板创建动作 单击Use this Template然后为您的操作提供新的回购详细信息 主码 安装依赖项 $ npm install 构建打字稿并将其打包以进行分发 $ npm run build && npm run package 运行测试 :check_mark: $ npm test PASS ./index.test.js ✓ throws invalid number (3ms) ✓ wait 500 ms (504ms) ✓ test runs (95ms) ... 更改action.yml action.yml包含定义动作的输入和输出。 使用您的
figma-copy-css-and-react-style:Figma插件可从选定图层复制CSS样式或React内联样式
05-04
复制CSS + React样式 从Figma中的选定层复制CSS样式或React内联样式。 与在正确的检查面板中处理CSS有什么区别？ 不相关的绝对立场和评论已删除。 导出原始CSS样式或React内联样式。 自定义样式，例如单引号或双引号，6位十六进制颜色（#ffffff）或3位数字（#fff）。 自定义CSS变量替换。 所有自定义选项都可以在“设置”菜单中找到。 不久将支持更多选项。
figma-plugin-react-template:使用此模板和工具快速启动Figma插件
04-30
Figma插件React模板 该模板包含所示的react示例，并进行了一些结构上的更改和额外的工具。 快速开始 运行yarn安装依赖项。 运行yarn build:watch以监视模式启动webpack。 打开Figma > Plugins > Development > New Plugin...然后从此仓库中选择manifest.json文件。 :star: 要更改插件的UI（React代码），请开始编辑 。 :star: 要与Figma API进行交互，请编辑 。 :star: 阅读有关。 工装 此仓库正在使用： React + Webpack 打字稿 更漂亮的预提交钩子
Figma
m0_46298235的博客
01-08 2559
V 移动 花+ 缩放 L 线条（双击添加锚点 shift+L 箭头 矩形的圆角控制（支持在输入框+数值｜滚轮滚动 shift+？ 描边删除 angle，控制字体描边出错的情况： shift+delete：删除点同时自动缝合（在编辑模式下 倒数第二个可以快速删除某一部分 alt+w｜A | D 左，上，右对齐 alt+H \V 水平 垂直居中 ...
Figma 笔记 常用快捷键
海胆的博客
03-02 6907
【代码】Figma 常用快捷键。
教你使用figma工具复制copy页面及对应的代码
前端职场小白_炜晨科技的博客
08-31 4988
部分开发部门习惯用figma工具上传 Ui图,开发人员不会使用的话,还得自己去吸色,css样式,等交接页面时,软测,UI人员可能会找到各种不符合要求的原型图,这就需要大量的工程修改,这期教小伙伴们如何使用figma工具copy背景,页面及对应的css代码(研究了挺长时间才弄懂的工具)选中你要复制的页面,左侧会有,眼睛睁开代表复制这一样式图,点击关闭就是 取消(不方便显示,有公司的原型图.... 自己摸索一下吧)点击这个 复制copy整个页面的设计图(肯定是不能在公司的原型图上修改的了~)...
学习figma
qq_66740903的博客
06-27 4720
Figma是目前最流行的一款免费云端设计工具，常用于UI设计，Web设计，移动应用设计和交互设计等领域。下面介绍一些Figma的基本概念和使用方法。
【学习记录】Figma入门使用
weixin_46346674的博客
05-31 7031
入门figma使用；figma页面设置中文；figma的本地字体设置；如何在figma中使用微软雅黑字体（Mircosoft YaHei）；解决figma本地字体丢失问题
FigmaGen:使用Figma API生成样式代码的命令行工具
05-25
FigmaGen FigmaGen-一个命令行工具，可使用Figma组件为UI样式生成代码。 它可以生成： 颜色样式 文字样式 导航 Figma文件 世代设定 颜色 文字样式 执照 安装 可可豆 要使用CocoaPods安装FigmaGen，请将以下行添加到Podfile ： pod 'FigmaGen' , '~> 1.0.0' 然后在终端中运行： $ pod install --repo-update 如果使用CocoaPods安装了FigmaGen，则在使用generate命令时，应该使用Pods/FigmaGen文件夹的相对路径： $ Pods/FigmaGen/figmagen generate 自制酒 要使用Homebrew安装FigmaGen，请运行： $ brew install hhru/tap/FigmaGen 手动地 转到发布页面。 下载
Figma-Vue3-Template:使用Vue3的Figma插件模板
05-25
Vue公司3插件模板FIGMA 这个模板可以让你和运行，建设的figma插件，在很短的时间内Vue3框架。 特征： Vue 打字稿 集成 消息处理的辅助功能，以简化主代码和UI代码之间的通信。 （感谢 ） 直播服务器预览使构建UI更快。 npm run preview 这个模板是建立在顶部和更新，以使用Vue3 下载模板 还有，你可以使用这个模板的一些方法。 最简单的办法就是打 或这个回购。 另外，您可以通过使用该模板作为模板，为自己的github回购 gh repo create "<YOUR>" -p "https://github.com/LukeFinch/Figma-Vue3-Template" 如何使用？ 安装带有依赖npm i 。 运行npm run dev和文件夹名为dist将被创建。 在FIGMA桌面应用程序，请单击创建新的插
Figma导出源文件的方法，用这个方法快速转换其它格式
七小嗨少的博客
04-26 4146
Figma确实是一种设计合作工具，但在跨工具的导入和导出功能上仍然有些单一。解决方案也很简单，使用即时设计作为媒介进行存储和导出，即时设计与市场上大多数设计工具兼容（Figma、Sketch、AdobeXD）与此同时，功能与Figma相当，也是免费的中文版本，更适合国内设计师，大量的社区资源，使设计师的工作方便。市场上设计工具层出不穷，Sketch、AdobeXD、Axure、InVision、Figma、Pixso等都是优秀的设计工具，设计师经常面临如何从设计工具中导出文件的问题。
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学习】操作工具及其使用一
weixin_47050107的博客
08-10 1万+
Figma学习
figma有哪些快速入门的好用技巧
七小嗨少的博客
12-06 1453
使用Figma在创建设计系统或处理大型设计项目时，总会涉及批量修改.快速定位.自动布局问题，MarcAndrew这篇文章分享了技巧，可以大大提高设计效率，希望对大家有所帮助:在这篇文章中，我列出了一些快速简单的方法来帮助你更快地使用它Figma制作设计系统。这里分享的大部分技能都非常适合处理设计系统，或者庞大的设计文件和设计项目，当然也适合Figma处理日常设计项目。​你可能熟悉一些内容，但也可能有一些内容是你从未发现过的宝藏。接下来，让我们开始：1.批量修改颜色的使用「颜色选择面板」当你想快速修改多个组件
Figma文件保存图片教程，4个详细步骤一网打尽！
FourxiYuanzi的博客
06-08 1510
在设计领域中，Figma 作为一款备受欢迎的在线协同设计软件，给设计师们带来了许多便利。然而，Figma 目前并不能直接保存图片。那么，有没有什么方法可以解决这个问题呢？答案是使用「」，这是一款国产的在线设计工具，可以说是 Figma 的本土版。它不仅在功能上与 Figma 兼容，并且完全支持中文界面，消除了语言上的障碍。下面将介绍一种全新的方法，让你轻松保存 Figma 文件中的图片。
11-Figma-属性栏-填充、描边、投影、导出
billycoder的专栏
01-21 5073
11-Figma-属性栏-填充、描边、投影、导出 常见操作 填充 纯色填充，属性面板操作 线性渐变填充，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变填充，属性面板操作，了解 填充存为样式，属性面板操作 填充样式修改，属性面板操作 填充样式分离，属性面板操作 描边 纯色描边，属性面板操作 线性渐变描边，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变描边，属性面板操作，了解 描边存为样式，属性面板操作 描边样式修改，属性面板操作
鸿蒙launcher浅析
最新发布
xianrenli38的博客
04-28 749
launcher的ui加载 是这样的，使用的不是UIAbility，而是没见过的ServiceExtension.,如此，添加的UI。product 业务形态层：区分不同产品、不同屏幕的各形态桌面，含有桌面窗口、个性化业务，组件的配置，以及个性化资源包。之前做过Android launcher，所以对鸿蒙的launcher挺好奇的，看看和普通鸿蒙应用有何区别。feature 公共特性层：抽象的公共特性组件集合，可以被各桌面形态引用。common 公共能力层：基础能力集，每个桌面形态都必须依赖的模块。
怎么学习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、付费专栏及课程。

余额充值