【Figma_01】Figma软件初始与使用

已于 2024-12-16 08:23:18 修改
阅读量760 收藏 10
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 产品 文章标签： figma
于 2024-12-15 13:18:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxfighting/article/details/144482944

Figma初识与学习准备

背景介绍

Ul设计:User Interface Design，即用户界面设计，属于“平面视觉”的子类。

  • 传统的UI设计软件有：adobe PS，adobe AI。但是它们由于功能太过冗余复杂，不适合专门做UI设计。
  • 之后有两款专门用于UI设计的软件推出了，分别是Sketch（2010推出），adobe XD（2017年推出）。但是这两款软件都是本地软件，无法抵抗云服务的浪潮，于是 Figma 在这个背景下应运而生飞速发展。

Figma下载网站：https://www.figma.com/downloads/

在这里插入图片描述
免费版使用的时候会有限制，对学生可以申请教育优惠。但是这里需要你使用学校的邮箱登录。

软件使用

1.1 切换主题

在这里插入图片描述
有黑白两个颜色可以切换。

在这里插入图片描述

1.2 官方社区

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Figma的文件类型：

在这里插入图片描述
白板文件类型：可以进行涂改和绘画。

在这里插入图片描述
幻灯片文件类型：目前还很简陋。

因此目前主要的还是设计文件。

设计界面

2.1 创建一个项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 修改文件名

在这里插入图片描述

2.3 四种模式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4 新增界面

在这里插入图片描述
在这里插入图片描述

2.5 图层

在这里插入图片描述
在图层当中选中元素和在画面当中选中元素是一样的。

2.6 工具栏

在这里插入图片描述

  • 拖动画布：按住空格键之后拖动。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
快捷键：shift+c

2.7 属性栏

在这里插入图片描述

在这里插入图片描述

section

在这里插入图片描述

透明度和圆角

在这里插入图片描述

在这里插入图片描述

改变多边形的边数

在这里插入图片描述

渐变效果

在这里插入图片描述

描边

在这里插入图片描述

设置阴影等特效

在这里插入图片描述

拖拽相同的图形

在这里插入图片描述

Figma：用户界面(UI)设计实战_2024-07-22_01-02-37.Tex
11-18 1006
选择工具：用于选择和移动设计元素。矩形工具：创建矩形和正方形。椭圆工具：创建圆形和椭圆形。多边形工具：创建自定义多边形。文本工具：添加和编辑文本。画笔工具：自由绘制线条和形状。钢笔工具：创建精确的路径和形状。填充工具：为选定的区域添加颜色或图案。描边工具：为元素添加边框。
Figma：跨平台设计一致性教程_2024-07-22_01-22-16.Tex
11-17 616
设计系统是跨平台设计一致性的重要工具，它包括一套预定义的组件、样式和规则，确保设计在不同平台上的一致性和可扩展性。
【Figma】安装指南及基础操作
weixin_56463218的博客
04-07 6532
先前做UI设计一直都是用PS等绘图软件设计，但发现在纠结像素和排版问题上会花很多时间，再加上AI没来得及上手，就需要迅速出成图，此时通过论坛发现了figma，基本上可以满足足够的需求，并且可以在windows系统上使用。
Figma最全面的新手指南，从基础到高级，一网打尽
2301_79599164的博客
11-22 5077
Figma基础界面与传统设计软件没有太大区别，有Sketch使用经验的用户几乎可以无缝连接到Figma。顶部导航栏顶部是导航栏，所有打开的文档都将显示在这里。左边的Figmaicon是Home键。点击返回团队主页。右边的导航Tab可以通过快捷键Command+123切换。这里的快捷键与Sketch查看所有视图的快捷键相冲突。在Figma中，查看所有视图的快捷键是Shift+1，查看目标视图到全图大小的快捷键是Shift+2。
在Figma中用Flowbite构建UI：高效与定制
weixin_33481022的博客
05-13 350
本文介绍了在Figma使用Flowbite设计系统来构建UI的过程。首先，通过颜色选择和组件实例化，展示了如何快速更改UI中的颜色主题。接着，详细阐述了创建一个登录页面的步骤，包括选择合适的组件、调整样式和布局，以及如何通过分离组件实例来实现定制化。此外，文章还展示了如何使用Flowbite提供的各种组件变体和主题模式，以实现更加丰富和动态的用户界面。
Figma入门-初识组件
我码玄黄的博客
11-24 847
Figma中组件可复用，设计好元素后创建组件，可快速复制并保持一致性。修改母版组件，所有实例自动更新。组件提升设计效率，方便团队协作，确保风格统一。
Figma：颠覆设计协作的未来之星
m0_71270952的博客
06-20 1177
结语： Figma作为一款基于云端的设计工具，以其强大的协作功能和出色的用户体验，成为了设计界的新宠儿。而Figma作为一款基于云端的设计工具，以其强大的协作功能和出色的用户体验，成为了设计界的新宠儿。强大的设计工具：Figma提供了丰富的设计工具，包括矢量编辑、布局、样式库等功能，满足了设计师的各种需求。评论和反馈：Figma提供了丰富的评论和反馈功能，团队成员可以在设计文件中进行标注、评论和提出修改建议。这种实时协作的方式大大减少了设计文件的来回传输和合并的麻烦，提高了团队的工作效率。
第一课：Figma 软件安装与汉化
qq_41768447的博客
07-06 9009
Figma 是一款可在线协作的UI设计软件，最大的亮点在于它基于 WEB 平台研发，能支撑全平台操作系统的运行，适合各种场景下的使用。
figma_awd
03-04
"figma_awd-master"这个文件名很可能代表这是Figma项目的主要或初始版本。在这个压缩包里，可能包含了一系列的Figma设计文件，比如界面布局、图标、按钮等元素的设计稿，以及可能的交互原型。这些文件对于理解项目的...
人工智能_大模型085_AI产品设计02_MASTERGO_传统原型工具_DRAW_FIGMA_MOTIFF_极简UI设计原则_快速Demo_开发_迭代_KANO模型---人工智能工作笔记0220
添柴程序猿的专栏
05-30 311
思考：懂代码的我们，可以用 [Gradio](Gradio)，快速搭出一个主流程 demo，供用户/客户体验，验证需求。如果对视觉要求高，还需要特别做视觉设计。否则套模板就差不多。对全栈来说，三件事不分先后，而是彼此交错。
Figma：设计规范与最佳实践_2024-07-22_00-55-20.Tex
11-17 525
在Figma中创建设计规范，首先需要定义一套统一的颜色和字体系统，以确保设计的一致性和品牌识别度。颜色是设计语言中的关键元素，它不仅影响设计的美观，还承载着品牌的情感和信息。在Figma中，可以通过创建“颜色主题”来管理项目中的颜色。创建颜色主题打开Figma项目，选择“文件”>“项目设置”>“颜色”。点击“+ 新建颜色”，输入颜色名称和十六进制代码。例如，定义品牌主色为“#007AFF”并命名为“品牌蓝”。应用颜色选择设计元素，如文本、形状或组件。
figma-组件库建立
基本无害的博客
03-23 5500
组件库
UI设计新手必看：如何快速掌握Figma？
贝格前端工场的博客
03-31 1352
比如在设计一个水平排列的导航栏时，将所有导航按钮放入一个开启智能布局的图层组，设置好间距和对齐方式，当添加或删除按钮时，其他按钮会自动调整位置和大小，保持整体布局的合理性，大大提高了设计效率。插件市场提供了各种各样的插件，满足不同的设计需求。通过对 Figma 基础概念的认识、核心功能操作的掌握、团队协作的运用、实用插件的探索以及项目实践的不断积累，UI 设计新手能够快速且系统地掌握 Figma 这一强大的设计工具，为在 UI 设计领域的发展打下坚实基础，逐步提升设计能力，创作出优秀的 UI 设计作品。
完整详细的 Figma 插件开发入门到进阶教程
最新发布
luckucu的博客
06-23 644
Figma 插件是运行在 Figma 设计工具中的“扩展程序”，可以访问和操作文档中的节点、图层、属性，实现自动化、增强工作流、批量操作、设计工具与外部系统集成等功能。插件的 UI 界面通常用 HTML/CSS/JS 构建，业务逻辑运行在 Figma 的沙盒环境中。Figma 插件为设计师和前端开发者带来了极大的效率提升空间。通过掌握 Figma 插件 API、UI 通信、常见场景解决方案，以及插件的打包、上线流程，你可以快速开发出满足团队和社区需求的各种自动化工具。实践是最好的老师。
Figma基本操作
cc蒲公英的博客
08-08 3054
Figma基本操作
figma组件标准化命名（个人版）
mio115的博客
06-12 1157
└ one，two，three，four...：同上。└ Variant：变体（figma原本命名）Property：属性（figma原本命名）Default：原型（figma原本命名）└ category：种类（y、x轴数据）└ value：数值（y、x轴数据）└ yz：y轴分割线。└ xz：x轴分割线。└ yaxisline：y轴纵坐标。└ xaxisline：x轴横坐标。└ 1，2，3...：自定义类型。└ dashed：虚线。└ bottom：底部。└ solid：实线。└ right：右边。
Figma入门-文字、样式、链接、动作
我码玄黄的博客
11-23 2260
Figma原型图制作入门，记录文字工具使用（快捷键T，修改字体苹方、semibold、16号），链接设置及actions面板常用操作，包括复制组件链接，提高制作效率。
Figma入门-实战列表页
我码玄黄的博客
12-12 1579
本文介绍Figma上手过程，实操实现Web端经典列表页，包括标题、搜索框、列表项和分页。采用侧边栏+主内容区布局，使用自动布局实现内外边距，绘制内容列表和分页器，最后进行微调。
自动主题插件：一键切换设计风格
gitblog_00960的博客
11-28 467
自动主题插件：一键切换设计风格 1. 项目基础介绍 本项目是一个开源的Figma插件，名为“Auto Theme”，旨在帮助设计师自动地为主题设计进行配色转换。它主要使用TypeScript进行开发，同时结合了React和Webpack技术，以实现高效的插件性能和用户交互体验。 2. 核心功能 自动主题切换：设计师可以选择一个设计框架或多个框架，插件将自动遍历每个图层，根据预设的主题对象进行颜色...
点击figma_agent.exe没反应怎么回事
03-09
<think>嗯，用户遇到了Figma Agent程序无响应的问题，点击figma-agent.exe没反应。首先，我需要考虑可能的原因和解决方案。根据之前的知识库引用，可能需要检查团队协作中的无序合作问题，或者产品经理的驱动力是否影响了团队效率，但这里可能不太相关。不过引用4提到了性能测试和线程池的问题，可能和程序资源占用有关。 首先，应该建议用户检查系统兼容性，比如是否满足Figma Agent的最低要求，特别是Windows版本。然后，以管理员身份运行程序，解决权限问题。接着，清理缓存可能解决临时文件导致的冲突。更新显卡驱动和关闭冲突软件，如杀毒软件或其他设计工具，也可能有帮助。重新安装程序可以修复损坏的文件。查看日志文件能获取具体错误信息。如果问题持续，联系官方支持是必要的。此外，虚拟线程的性能问题可能影响响应，但用户可能不太了解技术细节，所以保持建议的易懂性很重要。需要确保步骤清晰，避免专业术语过多，方便用户逐步操作。</think>### Figma Agent无响应解决方案 #### 1. 检查系统兼容性 - **操作步骤**：确认操作系统版本是否满足Figma Agent的最低要求（通常需Windows 10或更高版本）[^5]。 - **原理**：旧系统可能导致兼容性问题，例如API接口不支持或驱动冲突。 #### 2. 以管理员身份运行 - **操作步骤**：右键点击`figma-agent.exe`，选择“以管理员身份运行”。 - **原理**：权限不足可能导致程序无法访问系统资源（如注册表、临时文件夹）。 #### 3. 清理缓存文件 - **操作步骤**： 1. 关闭Figma及相关进程。 2. 删除`C:\Users\<用户名>\AppData\Local\Figma`中的缓存文件。 - **原理**：损坏的缓存文件可能引发程序死锁或初始化失败。 #### 4. 更新显卡驱动 - **操作步骤**：通过设备管理器或显卡官网下载最新驱动。 - **原理**：图形渲染依赖GPU加速，驱动过时可能导致界面渲染失败[^4]。 #### 5. 关闭冲突软件 - **操作步骤**：临时禁用杀毒软件（如360、火绒）或其他设计工具（如Adobe系列）。 - **原理**：安全软件可能误拦截进程通信，多线程设计工具可能占用相同端口[^1]。 #### 6. 重新安装程序 - **操作步骤**： 1. 通过控制面板卸载Figma Agent。 2. 从官网下载最新安装包重新安装。 - **原理**：修复可能存在的文件损坏或注册表错误。 #### 7. 检查日志文件 - **操作路径**：`C:\Users\<用户名>\AppData\Local\Figma\logs` - **分析方法**：查找包含`ERROR`或`CRASH`关键字的日志条目，例如： ``` [ERROR] Renderer process crashed (code: 3221225477) ``` #### 8. 联系官方支持 - **适用场景**：若上述方法无效，通过Figma官网提交包含日志的工单。 - **引用案例**：类似虚拟线程的吞吐量问题可能需要底层框架调试[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温欣2030

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值