目录
0 常规界面
1 设置组件，再拉到Frame下，就可以实现Frame内显示局部组件的效果。
2 json导出格式
3 参考链接
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中文社区
Figma中的自动布局要怎么用？一篇文学会官方说明文件 - 腾讯云开发者社区-腾讯云 (tencent.com)
