如何用FIgma制作个人作品集教学

最新推荐文章于 2025-06-02 21:20:25 发布
最新推荐文章于 2025-06-02 21:20:25 发布
阅读量944 收藏 1
点赞数
分类专栏： 设计 文章标签： figma html5 css3 交互 ux 平面 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JayLinXR/article/details/131623076
版权
文章介绍了如何利用Figma这个免费工具进行创意发想、草稿绘制、原型制作、线框图设计和UX/UI设计，特别强调了其在制作个人作品集中的应用，并提供了一个从设计到开发的简单作品集制作教程，同时也指出Figma是有效的团队协作平台，便于与工程师和其他设计师沟通。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

制作个人作品集有很多方法，Figma是一个免费又支援很多其他套件的工具，你可以用它来制作许多用途:


创意发想 (Ideation)
草稿 (Sketch)
原型 (Prototyping)
线框图 (Wireframe)
视觉图 (Muck up)
UX/UI 设计在网站和手机

以下展示如何用Figma工具制作一个个人作品集(Pofolio)希望能帮助大家初步学习


影片教学

从设计到开发如何用Figma 设计一个简单的作品集(Portfolio) - 1

总结
Figma 是一个很好的团队沟通工具，可以跟工程师、其他设计师以及产品经理表达你的想法，你也可以在准备设计Muck up之前做Wireframe去确保大家的想法是否大致同方向

Figma：矢量图形编辑与设计技术教程_2024-07-22_00-08-46.Tex
11-17 1301
在开始使用Figma进行矢量图形编辑与设计之前，了解其界面布局至关重要。
Figma入门-实战列表页
我码玄黄的博客
12-12 1479
本文介绍Figma上手过程，实操实现Web端经典列表页，包括标题、搜索框、列表项和分页。采用侧边栏+主内容区布局，使用自动布局实现内外边距，绘制内容列表和分页器，最后进行微调。
portfolio-2:我的作品集版本 2。我使用 figma 设计了布局并使用 React.js 开发
08-04
个人网站 | 作品集:cat_face:‍:bust_in_silhouette::cat_face:‍:motorcycle: 几周以来我一直在学习React。 既然，这是一个简单的静态网站，您会想知道为什么要做出React吗？ 为什么不是一个简单的 HTML、CSS 和 Vanilla Javascript。 这个网站不仅仅是我的新作品集，也是一个学习 React 和获得一些 React 实践经验的个人项目。 所以，我创建了这个项目来展示我在 React、HTML、CSS 和 Javascript 方面的技能。 React的东西 - All the components I have developed are functional components - Used useState() hook to change the state. - used Props for communication between parent and child. 感谢您查看 repo。
UI设计/交互设计/视觉设计项目汇报/作品集Figma/PPT模板
weixin_46664875的博客
04-14 930
组织你的作品集：决定你的作品集的格式和结构。如果您正在申请特定的工作或客户，请定制您的作品集以突出符合其需求的相关技能和经验。提供项目描述：对于您的投资组合中的每个项目，提供一个简短的描述，解释项目的目标、挑战和解决方案。展示您的流程：如果可能，包括对您的设计流程的见解，例如草图、线框图、情绪板和设计迭代。选择您的最佳作品：选择您最强大且最相关的设计项目，将其纳入您的作品集。通过遵循这些步骤并花心思和精力来策划你的作品集，你可以创建一个引人注目的展示你的设计技能并吸引潜在的客户或雇主。
教培机构办公管理系统B端实战项目作品集Figma源文件
weixin_46664875的博客
03-27 493
这套系统包含了销售报表、学员管理、教务管理、就业管理、OA办公等功能，公司内部员工自己用，为了体现互联网培训机构的产品属性，选择了常见的蓝色作为主色。这个是实战项目作品（不是模板），里面的设计思路、设计目标，都是很清晰明了的，不是那种套话。交付文件：设计复盘作品集源文件+作品集里面的B端设计项目+包装样机+字体文件。B端常见的工作台、表格页、表单页、数据可视化图表页、看板页也都有。这是一套教培机构办公管理系统的源文件+设计复盘作品集的源文件。B端项目文件页数：15页。作品集文件页数：19页。
在线设计工具Figma（流畅强大轻量级）
graphyer的博客
03-28 727
在线使用非常方便，而且非常快，超级快，打开PS的时间都做完了而且figma是自动保存而且figma页面交互设计真的好好高效，比起PS的属性头都看晕了。
Figma最全面的新手指南，从基础到高级，一网打尽
2301_79599164的博客
11-22 4376
Figma基础界面与传统设计软件没有太大区别，有Sketch使用经验的用户几乎可以无缝连接到Figma。顶部导航栏顶部是导航栏，所有打开的文档都将显示在这里。左边的Figmaicon是Home键。点击返回团队主页。右边的导航Tab可以通过快捷键Command+123切换。这里的快捷键与Sketch查看所有视图的快捷键相冲突。在Figma中，查看所有视图的快捷键是Shift+1，查看目标视图到全图大小的快捷键是Shift+2。
【Figma】入门第一篇 页面和功能简介 初学者必看
JU_OLG的博客
10-10 3687
本文以网页版 figma 英文为例，简单介绍一下工作台界面上的各个模块的功能，给刚开始使用 figma 的学习者提供一些参考，加速上手。
Figma入门-文字、样式、链接、动作
我码玄黄的博客
11-23 2066
Figma原型图制作入门，记录文字工具使用（快捷键T，修改字体苹方、semibold、16号），链接设置及actions面板常用操作，包括复制组件链接，提高制作效率。
Figma快速上手教程--学习笔记
weixin_42219180的博客
12-24 2609
Figma快速上手教程--学习笔记
Figma 新手教程学习笔记
shr177180的博客
05-15 1135
30min快速入门figma
figma下载_最佳的免费Figma资源：模板，图标，UI工具包等
Web design 教程小屋
07-06 7160
Figma在2016年成为强大的新参与者，允许设计和软件开发团队在任何平台上进行协作。 这个基于浏览器的应用程序消除了诸如更新软件，同步屏幕以及等待团队成员上载最新设计之类的问题。 实时协作是Figma最耀眼的地方。 它在Mac，Windows，Linux和Chrome上启动时具有多人编辑和轻松文件共享等功能。 与现有UI设计工具相似的功能也使学习曲线最小化。 微软，Slack和U...
figma设计_设计原型的最简单方法：Figma速成课程
weixin_26732881的博客
08-03 6139
figma设计It doesn’t matter if you haven’t used any prototyping tools before or you’re transitioning from other ones (like Sketch, Adobe XD); This guide is for beginners and professionals alike. So for a...
Figma实用小技巧
热门推荐
设计の诗
05-17 3万+
1. 介绍 原作：lijxse 视频地址 文字版整理：岩鸣杨子 2. 快速拖拽调整数值 按住option可在数值上拖拽调整，不按option时只能在X/Y/W/H/旋转/圆角等的图标上拖拽调整，不能调整透明度的数值。 3. 属性粘贴复制 shift+X：互换填充和描边 选中图层的某个属性，然后cmd+C，则可复制这个图层特定的属性。 选中图层的某个属性，然后cmd+V，则可粘贴到这个图层特定的属性上。 4. 列表切换&快速搜索 option+1：切换到Layers option+2：切换到Asse.
figma客户端_小白的Figma入门手册
weixin_39815925的博客
11-30 6128
全世界都在用Figma不知道你们有没有这种感觉，仿佛有一天，很突然的，全世界都在使用figma,一个软件从无人问津到现在的如日中天，用了不到3年，而现在，它不仅仅是当下的最优生产力工具，在疫情掀起的远程办公的风潮下，它更为我们揭示了未来设计协作的方式。事实正是如此，大批专业设计团队不惜成本尝试由传统设计软件(sketch等)向Figma转型，只因他们于此看到了代表未来的生产力工具及协作方...
PS、AI、Sketch已经老了？这个新生代工具，大家都在偷学！
传智播客的专栏
10-08 324
UI设计岗位日趋火热的当下，UI设计软件也日渐受到关注。掌握更高效的生产力工具，已成为职场人的加薪技能！毫不夸张的说，设计师的日常工作只有 20 %的时间在发挥创意解决问题，80% 的时间...
figma 使用中文
weixin_34378922的博客
09-11 1万+
使用 Noto Sans SC 字体 下载插件 Figma Font Helper 转载于:https://www.cnblogs.com/ajanuw/p/9625676.html
Figma 中构建 Master Control Panel (MCP) 的完整设计方案
主攻大数据 人工智能 物联网 安全 低空经济等方向。mtsc 、gtest特邀分享嘉宾
06-02 945
并行开发，设计系统维护成本降低65%。该方案已在某金融科技公司落地，管理。触发 Webhook 推送变更。添加Dev Mode描述。
Figma 与 Cursor 深度集成的完整解决方案
最新发布
主攻大数据 人工智能 物联网 安全 低空经济等方向。mtsc 、gtest特邀分享嘉宾
06-02 763
该方案已在某FinTech企业落地，使设计-开发协同效率提升。Cursor代码生成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值