Figma学习一天入门
Posted yantuguiguziPGJ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Figma学习一天入门相关的知识，希望对你有一定的参考价值。
目录
1 设置组件，再拉到Frame下，就可以实现Frame内显示局部组件的效果。
0 常规界面
1 设置组件，再拉到Frame下，就可以实现Frame内显示局部组件的效果。
2 json导出格式
"type": "FRAME",
"id": "986:1292",
"name": "Test",
"x": 5947,
"y": 9779,
"width": 1294,
"height": 734,
"visible": true,
"locked": false,
"opacity": 1,
"blendMode": "PASS_THROUGH",
"isMask": false,
"cornerRadius": 0,
"cornerSmoothing": 0,
"topLeftRadius": 0,
"topRightRadius": 0,
"bottomLeftRadius": 0,
"bottomRightRadius": 0,
"fillStyleId": "S:b6a4e06f8d6cee945eddbba199906848ecee4e84,",
"strokeStyleId": "",
"strokeWeight": 1,
"strokeTopWeight": 1,
"strokeBottomWeight": 1,
"strokeLeftWeight": 1,
"strokeRightWeight": 1,
"strokeJoin": "MITER",
"strokeAlign": "INSIDE",
"dashPattern": [],
"strokeCap": "NONE",
"strokeMiterLimit": 4,
"rotation": 0,
"layoutAlign": "INHERIT",
"layoutGrow": 0,
"layoutPositioning": "AUTO",
"constraints":
"horizontal": "MIN",
"vertical": "MIN"
,
"exportSettings": [],
"relativeTransform": [
[
1,
0,
5947
],
[
0,
1,
9779
]
],
"absoluteRenderBounds":
"x": 5947,
"y": 9779,
"width": 1294,
"height": 734
,
"fillGeometry": [
"windingRule": "NONZERO",
"data": "M0 0L1294 0L1294 734L0 734L0 0Z"
],
"guides": [],
"fills": [
"type": "SOLID",
"visible": true,
"opacity": 1,
"blendMode": "NORMAL",
"color":
"r": 0.7799999713897705,
"g": 0.7250000238418579,
"b": 1
],
"strokes": [],
"effects": [],
"children": [
"type": "FRAME",
"id": "986:1293",
"name": "TestTwo",
"x": 0,
"y": 0,
"width": 296,
"height": 734,
"visible": true,
"locked": true,
"opacity": 1,
"blendMode": "PASS_THROUGH",
"isMask": false,
"cornerRadius": 0,
"cornerSmoothing": 0,
"topLeftRadius": 0,
"topRightRadius": 0,
"bottomLeftRadius": 0,
"bottomRightRadius": 0,
"fillStyleId": "S:e9888b395136f5ed64cd5d01063efb321448ac04,",
"strokeStyleId": "",
"strokeWeight": 1,
"strokeTopWeight": 1,
"strokeBottomWeight": 1,
"strokeLeftWeight": 1,
"strokeRightWeight": 1,
"strokeJoin": "MITER",
"strokeAlign": "INSIDE",
"dashPattern": [],
"strokeCap": "NONE",
"strokeMiterLimit": 4,
"rotation": 0,
"layoutAlign": "INHERIT",
"layoutGrow": 0,
"layoutPositioning": "AUTO",
"constraints":
"horizontal": "MIN",
"vertical": "MIN"
,
"exportSettings": [],
"relativeTransform": [
[
1,
0,
0
],
[
0,
1,
0
]
],
"absoluteRenderBounds":
"x": 5947,
"y": 9779,
"width": 296,
"height": 734
,
"fillGeometry": [
"windingRule": "NONZERO",
"data": "M0 0L296 0L296 734L0 734L0 0Z"
],
"guides": [],
"fills": [
"type": "SOLID",
"visible": true,
"opacity": 1,
"blendMode": "NORMAL",
"color":
"r": 0.3333333432674408,
"g": 0.3176470696926117,
"b": 1
],
"strokes": [],
"effects": []
,
"type": "FRAME",
"id": "986:1294",
"name": "TestOne",
"x": 490,
"y": 212,
"width": 653,
"height": 332,
"visible": true,
"locked": true,
"opacity": 1,
"blendMode": "PASS_THROUGH",
"isMask": false,
"cornerRadius": 0,
"cornerSmoothing": 0,
"topLeftRadius": 0,
"topRightRadius": 0,
"bottomLeftRadius": 0,
"bottomRightRadius": 0,
"fillStyleId": "S:2d8b26bdbece227d5e3042e1876976a0bdded877,",
"strokeStyleId": "",
"strokeWeight": 1,
"strokeTopWeight": 1,
"strokeBottomWeight": 1,
"strokeLeftWeight": 1,
"strokeRightWeight": 1,
"strokeJoin": "MITER",
"strokeAlign": "INSIDE",
"dashPattern": [],
"strokeCap": "NONE",
"strokeMiterLimit": 4,
"rotation": 0,
"layoutAlign": "INHERIT",
"layoutGrow": 0,
"layoutPositioning": "AUTO",
"constraints":
"horizontal": "MIN",
"vertical": "MIN"
,
"exportSettings": [],
"relativeTransform": [
[
1,
0,
490
],
[
0,
1,
212
]
],
"absoluteRenderBounds":
"x": 6437,
"y": 9991,
"width": 653,
"height": 332
,
"fillGeometry": [
"windingRule": "NONZERO",
"data": "M0 0L653 0L653 332L0 332L0 0Z"
],
"guides": [],
"fills": [
"type": "SOLID",
"visible": true,
"opacity": 1,
"blendMode": "NORMAL",
"color":
"r": 0.13333334028720856,
"g": 0.13333334028720856,
"b": 0.13333334028720856
],
"strokes": [],
"effects": [],
"children": [
"type": "COMPONENT",
"id": "986:1386",
"name": "Component 1",
"x": 404,
"y": -106,
"width": 155,
"height": 523,
"visible": true,
"locked": false,
"opacity": 1,
"blendMode": "PASS_THROUGH",
"isMask": false,
"cornerRadius": 0,
"cornerSmoothing": 0,
"topLeftRadius": 0,
"topRightRadius": 0,
"bottomLeftRadius": 0,
"bottomRightRadius": 0,
"fillStyleId": "",
"strokeStyleId": "",
"strokeWeight": 1,
"strokeTopWeight": 1,
"strokeBottomWeight": 1,
"strokeLeftWeight": 1,
"strokeRightWeight": 1,
"strokeJoin": "MITER",
"strokeAlign": "INSIDE",
"dashPattern": [],
"strokeCap": "NONE",
"strokeMiterLimit": 4,
"rotation": 0,
"layoutAlign": "INHERIT",
"layoutGrow": 0,
"layoutPositioning": "AUTO",
"constraints":
"horizontal": "MIN",
"vertical": "MIN"
,
"exportSettings": [],
"relativeTransform": [
[
1,
0,
404
],
[
0,
1,
-106
]
],
"absoluteRenderBounds":
"x": 6841,
"y": 9991,
"width": 155,
"height": 332
,
"fillGeometry": [
"windingRule": "NONZERO",
"data": "M0 0L155 0L155 523L0 523L0 0Z"
],
"guides": [],
"description": "",
"documentationLinks": [],
"fills": [
"type": "SOLID",
"visible": false,
"opacity": 1,
"blendMode": "NORMAL",
"color":
"r": 1,
"g": 1,
"b": 1
],
"strokes": [],
"effects": [],
"children": [
"type": "RECTANGLE",
"id": "986:1383",
"name": "Rectangle 5610",
"x": 0,
"y": 0,
"width": 155,
"height": 123,
"visible": true,
"locked": false,
"opacity": 1,
"blendMode": "PASS_THROUGH",
"isMask": false,
"cornerRadius": 0,
"cornerSmoothing": 0,
"topLeftRadius": 0,
"topRightRadius": 0,
"bottomLeftRadius": 0,
"bottomRightRadius": 0,
"fillStyleId": "",
"strokeStyleId": "",
"strokeWeight": 1,
"strokeTopWeight": 1,
"strokeBottomWeight": 1,
"strokeLeftWeight": 1,
"strokeRightWeight": 1,
"strokeJoin": "MITER",
"strokeAlign": "INSIDE",
"dashPattern": [],
"strokeCap": "NONE",
"strokeMiterLimit": 4,
"rotation": 0,
"layoutAlign": "INHERIT",
"layoutGrow": 0,
"layoutPositioning": "AUTO",
"constraints":
"horizontal": "SCALE",
"vertical": "SCALE"
,
"exportSettings": [],
"relativeTransform": [
[
1,
0,
0
],
[
0,
1,
0
]
],
"absoluteRenderBounds":
"x": 6841,
"y": 9991,
"width": 155,
"height": 17
,
"fillGeometry": [
"windingRule": "NONZERO",
"data": "M0 0L155 0L155 123L0 123L0 0Z"
],
"fills": [
"type": "SOLID",
"visible": true,
"opacity": 1,
"blendMode": "NORMAL",
"color":
"r": 0.8509804010391235,
"g": 0.8509804010391235,
"b": 0.8509804010391235
],
"strokes": [],
"effects": []
,
"type": "RECTANGLE",
"id": "986:1384",
"name": "Rectangle 5611",
"x": 0,
"y": 203,
"width": 155,
"height": 105,
"visible": true,
"locked": false,
"opacity": 1,
"blendMode": "PASS_THROUGH",
"isMask": false,
"cornerRadius": 0,
"cornerSmoothing": 0,
"topLeftRadius": 0,
"topRightRadius": 0,
"bottomLeftRadius": 0,
"bottomRightRadius": 0,
"fillStyleId": "",
"strokeStyleId": "",
"strokeWeight": 1,
"strokeTopWeight": 1,
"strokeBottomWeight": 1,
"strokeLeftWeight": 1,
"strokeRightWeight": 1,
"strokeJoin": "MITER",
"strokeAlign": "INSIDE",
"dashPattern": [],
"strokeCap": "NONE",
"strokeMiterLimit": 4,
"rotation": 0,
"layoutAlign": "INHERIT",
"layoutGrow": 0,
"layoutPositioning": "AUTO",
"constraints":
"horizontal": "SCALE",
"vertical": "SCALE"
,
"exportSettings": [],
"relativeTransform": [
[
1,
0,
0
],
[
0,
1,
203
]
],
"absoluteRenderBounds":
"x": 6841,
"y": 10088,
"width": 155,
"height": 105
,
"fillGeometry": [
"windingRule": "NONZERO",
"data": "M0 0L155 0L155 105L0 105L0 0Z"
],
"fills": [
"type": "SOLID",
"visible": true,
"opacity": 1,
"blendMode": "NORMAL",
"color":
"r": 0.8509804010391235,
"g": 0.8509804010391235,
"b": 0.8509804010391235
],
"strokes": [],
"effects": []
,
"type": "RECTANGLE",
"id": "986:1385",
"name": "Rectangle 5612",
"x": 0,
"y": 388,
"width": 155,
"height": 135,
"visible": true,
"locked": false,
"opacity": 1,
"blendMode": "PASS_THROUGH",
"isMask": false,
"cornerRadius": 0,
"cornerSmoothing": 0,
"topLeftRadius": 0,
"topRightRadius": 0,
"bottomLeftRadius": 0,
"bottomRightRadius": 0,
"fillStyleId": "",
"strokeStyleId": "",
"strokeWeight": 1,
"strokeTopWeight": 1,
"strokeBottomWeight": 1,
"strokeLeftWeight": 1,
"strokeRightWeight": 1,
"strokeJoin": "MITER",
"strokeAlign": "INSIDE",
"dashPattern": [],
"strokeCap": "NONE",
"strokeMiterLimit": 4,
"rotation": 0,
"layoutAlign": "INHERIT",
"layoutGrow": 0,
"layoutPositioning": "AUTO",
"constraints":
"horizontal": "SCALE",
"vertical": "SCALE"
,
"exportSettings": [],
"relativeTransform": [
[
1,
0,
0
],
[
0,
1,
388
]
],
"absoluteRenderBounds":
"x": 6841,
"y": 10273,
"width": 155,
"height": 50
,
"fillGeometry": [
"windingRule": "NONZERO",
"data": "M0 0L155 0L155 135L0 135L0 0Z"
],
"fills": [
"type": "SOLID",
"visible": true,
"opacity": 1,
"blendMode": "NORMAL",
"color":
"r": 0.8509804010391235,
"g": 0.8509804010391235,
"b": 0.8509804010391235
],
"strokes": [],
"effects": []
]
]
]
3 参考链接
Figma软件汉化-Figma中文版下载-Figma中文社区
(137条消息) 17-Figma-磨砂图标绘制技法_billycoder的博客-CSDN博客
(137条消息) 29-Figma-我的页面制作_billycoder的博客-CSDN博客_figma制作网页
(137条消息) 38-Figma-页面交互演示制作_billycoder的博客-CSDN博客_figma交互
Figma中的自动布局要怎么用？一篇文学会官方说明文件 - 腾讯云开发者社区-腾讯云 (tencent.com)
Add a little magic to your files – Figma
Figma auto layout playground – Figma
以上是关于Figma学习一天入门的主要内容，如果未能解决你的问题，请参考以下文章