Figma怎么创建设计文件 Figma如何新建项目画布和设置画板Frame尺寸【操作】

风婷同学_8625

风婷同学_8625

2026-04-05

1289人浏览

原创

在figma中需先创建空白设计文件,再利用自动生成的画布插入画板(frame),可通过工具栏选择、预设模板或快捷键shift+k快速设置尺寸。

figma怎么创建设计文件 figma如何新建项目画布和设置画板frame尺寸【操作】

如果您希望在Figma中开始一个新的设计工作,需要先创建一个空白设计文件,并在其中建立画布与画板(Frame),以便组织界面元素。以下是完成该操作的具体步骤:

一、创建新的Figma设计文件

Figma设计文件是所有设计内容的容器,必须先新建文件才能添加画布和画板。新文件默认以云端项目形式存在,无需本地保存设置。

1、登录Figma官网或打开Figma桌面应用。

2、点击左上角“New file”按钮(网页版位于主界面中央,桌面版位于顶部菜单栏)。

3、页面将自动跳转至一个空白编辑界面,左上角显示文件名称为“Untitled”,此时即为一个已创建但未命名的设计文件。

二、在文件中新建画布(Canvas)

画布是Figma中无限延展的工作区域,所有画板、组件和图层均放置于其上。Figma不提供独立的“新建画布”命令,画布随文件自动生成,但可通过缩放与拖拽确认其存在。

1、使用快捷键Space + 鼠标左键拖拽,可在当前视图中自由平移画布。

2、按住鼠标滚轮并上下滚动,可缩放画布显示比例。

3、观察右下角状态栏,若显示“Canvas”字样且无其他图层遮挡,说明当前处于顶层画布区域。

三、插入画板(Frame)并设置尺寸

画板是用于模拟设备屏幕或设计区域的容器,支持预设尺寸(如iPhone、Desktop)或自定义宽高,所有UI元素应置于画板内部以确保结构清晰。

1、点击左侧工具栏中的“Frame”工具(快捷键 F)。

2、在画布任意位置点击并拖拽,松开后生成一个默认尺寸为800×600像素的画板。

Figma Mac版
Figma Mac版

Figma Mac版 126.8.16 官方下载,提供 macOS PKG 安装包,适合 Mac 设计团队使用 Figma、Figma AI 与桌面端协作功能。

下载

3、选中该画板,在右侧属性检查器(Properties Panel)中找到“Size”字段。

4、手动输入宽度与高度数值,例如375×812(iPhone SE 屏幕尺寸),按回车确认。

四、使用预设设备模板快速创建画板

Figma内置常用设备尺寸模板,可一键插入标准画板,避免手动输入错误,适用于移动端、桌面端及平板等场景。

1、确保左侧工具栏处于“Frame”工具(F)激活状态。

2、点击右侧属性检查器中的“+ Add frame”下拉箭头。

3、在弹出菜单中选择“Mobile” → “iPhone 15 Pro”(或其他目标设备)。

4、在画布上单击,即插入对应尺寸与方向(竖屏/横屏)的画板。

五、通过快捷键组合高效设置画板尺寸

当画板已存在时,可通过键盘输入快速调整尺寸,无需依赖鼠标点击属性面板,提升操作效率。

1、使用Selection工具(V)选中目标画板。

2、按下Shift + K,光标自动聚焦至尺寸输入框。

3、直接键入“375x812”(注意用小写字母 x 分隔),按回车完成设置。

4、若需统一修改多个画板尺寸,可按住Ctrl/Cmd 并依次点击多个画板,再执行上述快捷操作。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

figma

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

3771

6

canva可画使用技巧汇总
canva可画使用技巧汇总

本专题汇集了PHP中文网精心整理的Canva可画新手使用技巧大全,专为零基础用户打造。无论你是想制作精美海报、PPT还是社交媒体配图,这里都有从注册登录、模板搜索到AI辅助设计、导出分享的全流程保姆级教程。通过深入浅出的图文指南,帮助你快速跨越设计门槛,轻松掌握Canva可画的实用操作,让每个人都能成为设计达人!

2026.05.19

224

21

iPhone文本消息乱序错误如何解决?
iPhone文本消息乱序错误如何解决?

解决办法:1、强制关闭消息应用程序;2、重启你的iPhone;3、自动禁用设置并再次启用;4、关闭iMessage并重新打开;5、重置所有设置;6、使用ReiBoot修复iOS。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.11.19

2798

5

删除iPhone上所有照片的方法
删除iPhone上所有照片的方法

删除iPhone上所有照片的方法;1、删除整个照片库;2、从相册中删除所有照片;3、仅从图库中删除照片;4、仅删除视频,屏幕截图,自拍,实时或人像照片;5、删除某人的所有照片;6、永久删除已删除的照片等等。想了解更多相关的内容,请阅读专题下面的文章。

2024.12.11

5790

9

iPhone静音开关不起作用
iPhone静音开关不起作用

若 iPhone 静音开关失效,先检查硬件,看开关状态、清洁缝隙。接着重启手机,查看静音及勿扰模式设置,更新系统。若都不行,可恢复出厂设置(提前备份)。若仍无效,可能是严重硬件问题,需联系苹果客服或去授权维修中心。

2025.03.20

400

5

Figma AI 设计辅助与原型快速迭代实战
Figma AI 设计辅助与原型快速迭代实战

本专题围绕 Figma AI 工具展开,讲解智能设计辅助、原型快速迭代、组件库管理及设计协作流程优化。通过实战案例,帮助设计师提升设计效率,快速完成高质量原型与界面交互设计。

2026.06.08

227

18

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

60

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

40

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

40

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Figma AI使用手册
Figma AI使用手册

共0课时 | 0人学习

Figma基础操作+APP项目实战教程
Figma基础操作+APP项目实战教程

共20课时 | 3.6万人学习