【Figma_01】Figma软件初始与使用

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

在这里插入图片描述

透明度和圆角

在这里插入图片描述

在这里插入图片描述

改变多边形的边数

在这里插入图片描述

渐变效果

在这里插入图片描述

描边

在这里插入图片描述

设置阴影等特效

在这里插入图片描述

拖拽相同的图形

在这里插入图片描述

人工智能_大模型085_AI产品设计02_MASTERGO_传统原型工具_DRAW_FIGMA_MOTIFF_极简UI设计原则_快速Demo_开发_迭代_KANO模型---人工智能工作笔记0220
添柴程序猿的专栏
05-30 299
思考：懂代码的我们，可以用 [Gradio](Gradio)，快速搭出一个主流程 demo，供用户/客户体验，验证需求。如果对视觉要求高，还需要特别做视觉设计。否则套模板就差不多。对全栈来说，三件事不分先后，而是彼此交错。
Figma：跨平台设计一致性教程_2024-07-22_01-22-16.Tex
11-17 589
设计系统是跨平台设计一致性的重要工具，它包括一套预定义的组件、样式和规则，确保设计在不同平台上的一致性和可扩展性。
【Figma】安装指南及基础操作
weixin_56463218的博客
04-07 5985
先前做UI设计一直都是用PS等绘图软件设计，但发现在纠结像素和排版问题上会花很多时间，再加上AI没来得及上手，就需要迅速出成图，此时通过论坛发现了figma，基本上可以满足足够的需求，并且可以在windows系统上使用。
Figma最全面的新手指南，从基础到高级，一网打尽
2301_79599164的博客
11-22 4369
Figma基础界面与传统设计软件没有太大区别，有Sketch使用经验的用户几乎可以无缝连接到Figma。顶部导航栏顶部是导航栏，所有打开的文档都将显示在这里。左边的Figmaicon是Home键。点击返回团队主页。右边的导航Tab可以通过快捷键Command+123切换。这里的快捷键与Sketch查看所有视图的快捷键相冲突。在Figma中，查看所有视图的快捷键是Shift+1，查看目标视图到全图大小的快捷键是Shift+2。
UI设计新手必看：如何快速掌握Figma？
最新发布
贝格前端工场的博客
03-31 1183
比如在设计一个水平排列的导航栏时，将所有导航按钮放入一个开启智能布局的图层组，设置好间距和对齐方式，当添加或删除按钮时，其他按钮会自动调整位置和大小，保持整体布局的合理性，大大提高了设计效率。插件市场提供了各种各样的插件，满足不同的设计需求。通过对 Figma 基础概念的认识、核心功能操作的掌握、团队协作的运用、实用插件的探索以及项目实践的不断积累，UI 设计新手能够快速且系统地掌握 Figma 这一强大的设计工具，为在 UI 设计领域的发展打下坚实基础，逐步提升设计能力，创作出优秀的 UI 设计作品。
Figma入门-初识组件
我码玄黄的博客
11-24 788
Figma中组件可复用，设计好元素后创建组件，可快速复制并保持一致性。修改母版组件，所有实例自动更新。组件提升设计效率，方便团队协作，确保风格统一。
Figma：颠覆设计协作的未来之星
m0_71270952的博客
06-20 1150
结语： Figma作为一款基于云端的设计工具，以其强大的协作功能和出色的用户体验，成为了设计界的新宠儿。而Figma作为一款基于云端的设计工具，以其强大的协作功能和出色的用户体验，成为了设计界的新宠儿。强大的设计工具：Figma提供了丰富的设计工具，包括矢量编辑、布局、样式库等功能，满足了设计师的各种需求。评论和反馈：Figma提供了丰富的评论和反馈功能，团队成员可以在设计文件中进行标注、评论和提出修改建议。这种实时协作的方式大大减少了设计文件的来回传输和合并的麻烦，提高了团队的工作效率。
学习figma
qq_66740903的博客
06-27 6128
Figma是目前最流行的一款免费云端设计工具，常用于UI设计，Web设计，移动应用设计和交互设计等领域。下面介绍一些Figma的基本概念和使用方法。
figma_awd
03-04
"figma_awd-master"这个文件名很可能代表这是Figma项目的主要或初始版本。在这个压缩包里，可能包含了一系列的Figma设计文件，比如界面布局、图标、按钮等元素的设计稿，以及可能的交互原型。这些文件对于理解项目的...
Figma：设计规范与最佳实践_2024-07-22_00-55-20.Tex
11-17 495
在Figma中创建设计规范，首先需要定义一套统一的颜色和字体系统，以确保设计的一致性和品牌识别度。颜色是设计语言中的关键元素，它不仅影响设计的美观，还承载着品牌的情感和信息。在Figma中，可以通过创建“颜色主题”来管理项目中的颜色。创建颜色主题打开Figma项目，选择“文件”>“项目设置”>“颜色”。点击“+ 新建颜色”，输入颜色名称和十六进制代码。例如，定义品牌主色为“#007AFF”并命名为“品牌蓝”。应用颜色选择设计元素，如文本、形状或组件。
Figma：高级原型与动画效果制作_2024-07-22_00-41-55.Tex
11-17 967
选择工具：用于移动和选择对象。矩形工具：创建矩形和正方形。椭圆工具：绘制圆形和椭圆。多边形工具：绘制多边形。文本工具：添加和编辑文本。钢笔工具：绘制自定义形状和路径。填充和描边工具：调整对象的颜色和边框。图层操作：创建、删除、调整图层顺序。Figma允许你自定义元素之间的过渡效果，如淡入淡出、滑动或缩放，以增强原型的视觉体验。
figma-theme-ui:将主题UI配置转换为Figma样式
03-21
Figma的主题UI插件 将配置转换为。 用法 选择一个仅包含导出和主题的.js文件。例子： module . exports = { fonts : { body : '-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"' , heading : "inherit" , } , fontSizes : [ 12 , 14 , 16 , 20 , 24 , 32 ] , fontWeights : { body : 400 , heading
figma客户端下载
05-18
今后上传的资源都会免费提供下载，包括我开发的demo项目和游戏素材，技术体会都将上传。
【Figma】入门第一篇 页面和功能简介 初学者必看
JU_OLG的博客
10-10 3682
本文以网页版 figma 英文为例，简单介绍一下工作台界面上的各个模块的功能，给刚开始使用 figma 的学习者提供一些参考，加速上手。
【UI设计】Figma —— 响应式栅格系统
2401_83303206的博客
08-25 4215
本文简述栅格系统与响应式设计概念及效用，并阐述在Figma中设置栅格、实现响应布局的方法，助力设计师高效打造优质网页体验。
第一课：Figma 软件安装与汉化
qq_41768447的博客
07-06 8646
Figma 是一款可在线协作的UI设计软件，最大的亮点在于它基于 WEB 平台研发，能支撑全平台操作系统的运行，适合各种场景下的使用。
01-figma介绍
billycoder的专栏
01-20 4504
01-figma介绍 为什么我们要去学习figma平台 如此之多的ui设计工具，为什么我们就只学这一个就可以了？ 看一下，当前的一个ui设计工具排行榜。 目前figma码稳居第一位，sketch第二位，xd第三位。像ai 和ps，这个占有的量就更少了。 为什么ps和ai占有的量很少。因为其实我们在去做ui的过程中，ps软件是非常臃肿。里面有大量的工具，我们根本就用不着。并且ps对电脑的性能要求也是比较偏高的。ai也是如此。 figma支持windows 以及苹果。你只要拥有一个浏览器就可以使用，它是不受这
figma组件标准化命名（个人版）
mio115的博客
06-12 1117
└ 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：右边。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

温欣2030

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

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

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

打赏作者

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

抵扣说明：

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

余额充值