跳到主要内容

网页设计图
创建美观、响应迅速的网页设计

Figma是一个免费的在线平台,人们可以在这里一起设计世界上最好的网站。从线框到设计,从原型到开发,Figma使网页设计无缝衔接。

一个充满彩虹插图的网页设计屏幕的图形表示。一个充满彩虹插图的网页设计屏幕的图形表示。

受到团队的信任

美洲狮标志spotify徽标巴塔哥尼亚标志条纹标志《纽约时报》标志netflix徽标

针对任何设备的响应式web设计

通过在任何地方都能很好地工作的设计,快速实现想法。

团队光标选择网页上的颜色样式和自动布局。团队光标选择网页上的颜色样式和自动布局。

使用正确的工具更快地进行设计

启动您的项目,并使用自动布局、组件、样式等工具进行一致的大规模设计。

在开发之前,让它成为现实

使用交互式无代码原型展示您的愿景。只需点击几下即可获得真实的网络体验。

更快地从设计转到现场

Dev Mode为切换添加了结构,使开发人员很容易找到他们需要的内容。

浏览网页设计的功能

更快地设计更好的web体验,并使用可帮助您从头到尾构建的功能。

具有紫色背景、按钮文本示例和颜色样式的组件设计工具包文件。具有紫色背景、按钮文本示例和颜色样式的组件设计工具包文件。

UI工具包和模板入门

使用Figma社区构建的免费基于组件的线框工具包加快网站设计工作流

浏览社区

团队光标围绕着移动应用程序设计。一条评论说:“这个方向感觉很牢固,让我们开始原型制作。”团队光标围绕着移动应用程序设计。一条评论说:“这个方向感觉很牢固,让我们开始原型制作。”

邀请合作者

邀请跨职能合作伙伴和利益相关者为您的web设计添加上下文注释,以获得即时反馈。

开始合作

从按钮的自定义变量菜单中选择的光标从按钮的自定义变量菜单中选择的光标

使设计系统与代码保持一致

轻松创建、维护和共享组件和样式,并使用令牌在设计文件和代码中使用相同的语言。

了解有关设计系统的更多信息

两个队友光标使用注释在电子商务产品页面上记录工程设计注释。两个队友光标使用注释在电子商务产品页面上记录工程设计注释。

使用开发模式构建

让你的网页设计更加清晰,并为开发人员提供将其转换为代码所需的工具。

进入开发模式

无论学科如何,每个人都有一个集中的位置来查看、理解并为工作做出贡献。
Lauren LoPrete,设计系统主管Dropbox
阅读这个故事
升降箱徽标升降箱徽标

为web开发人员提供更多资源

多色背景上的Figma标志,带有黄色光标聊天,上面写着“甜心!”多色背景上的Figma标志,带有黄色光标聊天,上面写着“甜心!”

我们如何构建网站设计系统

看看Figma营销团队是如何建立并继续建立Figma.com的设计系统的。

阅读文章

Figma社区中“web”的搜索结果。Figma社区中“web”的搜索结果。

网页设计社区资源

浏览Figma社区创建和管理的网页设计灵感、工具和模板。

探索社区

光标创建一个原型链接,将紫色产品登录页连接到详细信息页。光标创建一个原型链接,将紫色产品登录页连接到详细信息页。

Figma的原型制作指南

了解如何开始使用Figma中的原型功能。

获取指南

常见问题解答