figma 基础使用 —— 常用方法

梦里梦外; 2024-04-22 15:20 70阅读 0赞

## 一、 导入组件 ##

分成两种方式  
（1）离线的包导入（iOS 常用组件.fig 直接拖拽到figma最近网页）  
（2）在插件市场下载  
[https://www.figma.com/community][https_www.figma.com_community]  
![1d4bae19e2a64c15b3fc2065638852ff.png][]

##    二、figma中使用标尺 ##

快捷键：shift + R  
![8c5213bc04d041ba8ae852b2d27eb75e.png][]

## 三、插件自动填充头像 ##

直接选中右键，找到plugin中的已下载的插件填充  
  
![5154f366fe214d75877e24cfaa0e4ad7.png][]

## 四、组的概念 ##

![2d14b0ecb4bb41ac8e5a09027d4212ce.png][]

##    五、画矢量图 和 导入现成矢量图 ##

导入现成矢量图，直接复制粘贴在figma里面，可以直接修改尺寸和颜色，但是它头上有一个frame的名字，不知道为什么弄不掉。后来我将这个图层拖拽到我的手机图层里面，那个frame的标识就不见了。  
![204980f50ea64997a980027f2dff93a8.png][]

## 六、定义Fill、定义Text、定义常用阴影 ##

### 1. 定义Fill ###

当元素需要设置颜色时，找到Fill填充部分，点击style按钮，我们在Libraries里面创建一个颜色变量，也可选择已经创建好的变量颜色。  
![95506896650940a6a34f8e090c51822f.png][]

### 2.定义Text（字体、粗体、字号、上下左右间距、文字排列方式） ###

我们一般设计时用什么字体？

答：pingfangSC是苹果的，目前我就采用默认的**Tahoma**：显示效果比Arial好

![84bc716757a2471894704f5d4d831272.png][]

## 七、定义Component组件、给Component组件添加变种、使用组件 ##

定义组件：第一选中元素，第二，右键 create component  
![73048016ebb54b81be164cc3a40fe53f.png][]  
  
给组件添加变种：选中组件，右键，在弹出的菜单中选择 Main Component中的add variant（添加变种）

![fc9092e939d94787933c684733995c2c.png][]

注意：只有将变种添加到变量中去，才可以在组件的状态下拉种看到。

**可以点击右上角图标，可看到全部Component**

![f9961dd94f9744b7bfa2b5a1de3c7af1.png][]

##  ##

## 八、将组件转化为 frame ##

选中组件，右键，选择Frame selection

![b64df8b15e014da0903c93ea828ad1bb.png][]

[https_www.figma.com_community]: https://www.figma.com/community
[1d4bae19e2a64c15b3fc2065638852ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c5f75a5750d14cfba0188b1ebc2bc9d3.png
[8c5213bc04d041ba8ae852b2d27eb75e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/65f7659c65724087a6bf0ac2be9413e8.png
[5154f366fe214d75877e24cfaa0e4ad7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/098ac0a86a3a45c38242823c259f066c.png
[2d14b0ecb4bb41ac8e5a09027d4212ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2027194ed1694c06880501ae8979a525.png
[204980f50ea64997a980027f2dff93a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/00f1badbda144d519c448067964fd38e.png
[95506896650940a6a34f8e090c51822f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/4ff2f4c7b2f747f2bbd22d895f105f33.png
[84bc716757a2471894704f5d4d831272.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/62bb41b3b1104624b84d2030a1a8aa95.png
[73048016ebb54b81be164cc3a40fe53f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d959a3fdd8a0430a88d9656202efbcd0.png
[fc9092e939d94787933c684733995c2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e302966f2ed648b4ac749821d03b663c.png
[f9961dd94f9744b7bfa2b5a1de3c7af1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/426ba7ca8d454cce84a9c584888a7c47.png
[b64df8b15e014da0903c93ea828ad1bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/a0ee6030e566462fad454bf7b0200c58.png