2分钟上手用Figma绘制网站页面设计图

最新推荐文章于 2025-02-02 21:09:17 发布

weixin_47301844

最新推荐文章于 2025-02-02 21:09:17 发布

阅读量1.1k

点赞数 1

文章标签： figma

本文链接：https://blog.csdn.net/weixin_47301844/article/details/143103123

版权

1.登陆官网下载应用或网页端使用

2.注册\登录及走完新手指引

3.创建一个新页面

4.按A键在页面右侧选择你要设计的页面的大小规格

5.如果要使用模板：在左侧的Assets中搜索下载你需要的模板例如 shop

6.如果想绘制矩形等图形，在最下方工具栏中选择相应图形绘制和移动缩放

7.如果想输入文字，在最下方工具栏中选择“T”

8.如果想对页面中各元素的位置布局更有把握，可以打开右边栏中Design里倒数第二个Layout Grid 选择网格或其他参考线

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_47301844

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Figma入门-基本操作制作登录页

我码玄黄的博客

11-25

730

Figma我一注册进入没有任何操作的情况下，已经在设计文件的Assets中找到了很多常用的资源，包括iOS和安卓的，这对新手来说确实非常友好。基本操作总结：点按、拖动这些操作忽略，界面还是非常直观的Space+ 鼠标左键：移动画布Ctrl+ 滚轮：缩放画布右侧属性栏但凡是数字的地方，都可以alt键 + 鼠标左右滑动进行调整，这个很方便。

Figma入门-实战列表页

我码玄黄的博客

12-12

1377

本文介绍Figma上手过程，实操实现Web端经典列表页，包括标题、搜索框、列表项和分页。采用侧边栏+主内容区布局，使用自动布局实现内外边距，绘制内容列表和分页器，最后进行微调。

参与评论您还未登录，请先登录后发表或查看评论

简洁的figma网页模板_基于网格设计.zip

12-28

简洁的figma网页模板，基于网格设计 adobe xd网页模板、figma网页模板、xd ui素材、网页模板

Tempa:将Figma Design转换为TailwindCss网页设计

03-19

Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行： npm start 在开发模式下运行该应用程序。打开在浏览器中查看它。如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。生成被最小化，并且文件名包括哈希值。您的应用已准备好进行部署！有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！如果您对构建工具和配置选择不满意，则可以随时eject 。此命令将从您的项目中删除单个生成依赖项。相反，它将所有配置文件和传递依赖项（webpack，Babel，E

尝试ai生成figma设计

热门推荐

weixin_60523038的博客

07-14

1万+

无

29-Figma-我的页面制作

billycoder的专栏

01-23

887

29-Figma-我的页面制作效果 1.绘制三个圆 2.设置图层模糊 3.让三个圆只在矩形画框中显示拖动3个圆，同时按住ctrl，把3个圆放入画框中，利用画框的裁剪功能，只显示画框区域内容不想3个圆的位置发生改变，可以在图层面板锁定3个圆，减少误触 4.内容部分吸管工具，i 5.4个图标（图标+文字）自动布局 4x（图标+文字）自动布局图标切换，选中图标，属性面板中有交换实例 6.列表组件自动布局 ...

27-Figma-发现页面制作

billycoder的专栏

01-23

857

27-Figma-发现页面制作效果 1.搜索完成搜索图标+文字，自动布局（搜索图标+文字）+语音按钮，自动布局，等距进行靠左靠右 ios规范，这部分高度为44 2.切换效果变体组件 3.框的阴影效果 4.绘制列表组件主要自动布局控制位置就好了 ...

figma-html:将Figma设计转换为HTML，React，Vue，Angular等！

04-30

通过将Figma设计转换为高质量HTML，React，Vue，Svelte，Angular，Solid等代码它是如何工作的将设计导出为代码确保要导入的所有图层均按照所述使用自动布局单击“获取代码”按钮以启动Builder.io编辑器进行最后的调整，然后单击Builder顶部的“获取代码”以查看代码输出，或将其复制并粘贴到Builder帐户的内容以实时发布将网页导入到Figma设计在Figma中，打开一个新的或现有的文档，然后单击cmd + /并搜索“ html figma”，然后按Enter 输入您要导入的URL 为什么？立即将设计转换为实时网页和代码轻松导入真实的现场样式，以作为设计和原型的起点快速将实际站点组件转换为设计组件易于从故事书等导入 Chrome扩展程序想要捕获身份验证墙后面的页面，还是要导航到的特定状态？程序适合您！使用图书馆 // npm

figma_website

03-03

figma_website

ChromedFigma：Figma html导出chrome扩展

01-30

镀Chrome 将Figma页面的原型从浏览器中打开的当前文件导出为使用图像映射链接的静态html文件。重要提示：请首先在扩展选项页面中设置您的Figma个人访问令牌。笔记：为了模拟Figma的“后退”交互，您可以在元素名称中使用字符串__back__ （该元素尚未过渡到另一个元素），并且该元素将使用[removed]history.back();导出到链接[removed]history.back(); 。假定您已经将帧导出到文件夹中的* .png图像文件中。然后，将导出的* .html文件复制到同一文件夹中，然后打开其中一个。如何使用在本地硬盘驱动器的./unpacked文件夹中下载存档文件并解压缩，在Chrome扩展程序中启用开发人员模式，单击“加载解压缩”，然后选择解压缩的ChromedFigma文件夹。

页面设计画草图

07-13

2. **草图绘制**：画草图是页面设计的第一步，它允许设计师在纸上或数字平台上快速勾勒出页面的大致结构。草图可以是非正式的，主要目的是捕捉初步的想法和布局。 3. **线框图制作**：在草图基础上，设计师会制作更...

设计网页线框图

03-16

- 设计线框图：绘制页面布局，添加基本的交互元素。 - 用户测试：与目标用户进行测试，收集反馈并调整设计。 - 迭代优化：根据测试结果持续改进线框图，直至满足设计要求。 6. 结论：设计网页线框图是网站成功...

Figma中的插画设计技巧

# 1. 认识Figma插画工具 ## 1.1 什么是Figma插画工具 ...在本小节中，我们将探讨为何设计师应该选择Figma作为插画设计工具，结合其易用性、功能丰富性和团队协作的优势来说明选择Figma的理由。 # 2. 插画设计基础知识

设计效率APP素材包：Figma/Sketch/Adobe XD

- 可用性：设计应基于用户的需求和使用习惯，使应用容易上手、易于导航和操作。 5. **效率应用app界面设计**: - 应用的设计应专注于提供高效的日程管理体验，如快速添加任务、灵活的事件编辑、直观的视图切换等。...

【Figma】入门第一篇页面和功能简介初学者必看

JU_OLG的博客

10-10

3438

本文以网页版 figma 英文为例，简单介绍一下工作台界面上的各个模块的功能，给刚开始使用 figma 的学习者提供一些参考，加速上手。

【UI设计】Figma —— 响应式栅格系统

2401_83303206的博客

08-25

3870

本文简述栅格系统与响应式设计概念及效用，并阐述在Figma中设置栅格、实现响应布局的方法，助力设计师高效打造优质网页体验。

Figma入门-设计过程基本操作

我码玄黄的博客

11-20

941

Figma原型图制作友好，内置组件多。本文记录Figma入门过程，讨论页面设计基本操作，包括汉化插件、多选整理、Alt+拖动复制、组件属性配置及画布拖动技巧。