Web 开发 09

本来不知道为什么今天要学figma的miniworkshop，简单记录一下。

本条博客涉及前端web开发不是很多，记录一点思考和讨论了。

1 figma是干嘛的，我感觉像是一个设计网页一样，类似于秀米？

Figma 是一款向量图形编辑器和原型设计工具，主要用于 UI/UX 设计、原型制作和团队协作。它与秀米有一定区别，秀米主要是用于图文排版，特别是微信公众号等新媒体内容的排版设计，而 Figma 的功能更为广泛和强大，具体如下：

• 在线设计：Figma 是一款完全基于浏览器的应用，无需下载安装，普适所有操作系统，只要能打开网页，就可以使用。用户可以将设计以链接的形式分享给其他人，文件储存在云端不用占用本地内存。
• 实时协作：Figma 支持多人同时在线编辑和评论，设计师、产品经理、工程师等都能够在同一设计文件上进行操作，大大加速了整个项目执行过程中信息的流通效率。
• 原型制作：可以创建逼真的、无代码的交互原型，方便设计师快速测试产品的流程和交互效果，还能将原型直接嵌入演示文稿中进行展示。
• 设计系统管理：能够帮助团队建立和维护设计系统，标准化样式、组件和变量，确保产品在不同平台和页面上的设计一致性。
• 社区资源丰富：Figma 提供了一个资源社区，包含各种设计资源，如图标、组件、模板和插件。用户可以在社区中浏览他人的设计作品，了解设计趋势，也可以将自己的设计作品分享给其他人。

 2 Figma需要编程知识吗？

使用 Figma 进行基本的设计工作不需要编程知识，它是一款以可视化操作为核心的设计工具，主要面向设计师、产品经理等非技术人员。

你可以通过拖拽、点击等直观操作完成界面设计、原型交互、图标绘制等工作，整个过程更接近 “画图” 而非 “写代码”。比如设计一个 APP 界面、制作简单的页面跳转原型，都不需要接触任何编程相关内容。

不过，Figma 的一些高级功能或扩展场景可能会涉及少量编程知识（但并非必需）：

• 若想通过插件扩展 Figma 功能，可能需要了解 JavaScript 等语言（但普通用户直接使用现成插件即可）；
• 设计稿交付给开发时，可能会接触到一些 CSS 样式相关的信息（如颜色代码、尺寸单位），但这属于设计与开发的协作范畴，不是使用 Figma 本身的必要知识。

总之，零基础用户完全可以学会并用好 Figma 的核心功能，编程知识仅针对特定进阶需求。

Figma 是一款以可视化操作为主的设计工具，用户通过拖拽、点击等操作就能完成界面设计、原型交互等工作，比如设计 APP 界面或制作简单的页面跳转原型，都无需编写代码。即使是一些高级功能，如自动布局，也是通过用户界面控件来设置，而非编写脚本。

不过，Figma 的一些高级功能或扩展场景可能会涉及少量编程知识，但这并非是使用 Figma 的必需条件。例如，如果想要开发 Figma 插件，可能需要了解 JavaScript 等编程语言，但普通用户直接使用现成的插件即可，不需要自己编写代码。另外，在设计稿交付给开发人员时，可能会接触到一些 CSS 样式相关的信息，但这属于设计与开发协作的范畴，不影响对 Figma 本身的使用。

3 不知道啊，为啥学这个，这个是美术专业用的吧？

Figma 虽然常被设计师（包括美术相关从业者）使用，但它并非美术专业的专属工具，尤其是对 Web 开发、产品经理等非设计岗位来说，学习它的核心目的是解决「协作」和「落地」问题，而非成为美术设计师。

对 Web 开发而言，你不需要用 Figma 画得有多 “好看”，而是需要掌握这些核心能力：

• 看懂设计逻辑：比如从 Figma 里识别页面的布局结构（哪些元素是导航栏、哪些是卡片组件）、交互规则（按钮点击后是否有弹窗、表单提交后如何跳转），这些是你写代码时的 “施工图纸”。
• 获取开发参数：直接从 Figma 中提取尺寸（如按钮宽高、间距）、颜色代码（如 #FFFFFF）、字体样式（如 16px / 微软雅黑），甚至通过插件导出 CSS 片段，避免凭感觉猜尺寸导致的还原偏差。
• 对接设计需求：实际工作中，设计师会用 Figma 交付最终方案，你需要通过它接收反馈（比如 “这个按钮颜色要加深”），直接在设计稿上标注修改点，减少沟通成本。

简单说，Figma 对 Web 开发者来说更像一个 “翻译工具”—— 把设计师的视觉方案 “翻译” 成代码逻辑。你不需要有美术功底，只要能看懂设计稿里的元素、参数和交互，就能更高效地完成开发工作。

就像建筑工人不需要自己画设计图，但必须能看懂图纸才能盖房子，Figma 对你而言，就是那个 “必须能看懂的图纸工具”。

4 看起来像一个没有编程但是是蓝图/草图，等待开发人员实现。

你这个理解非常准确！Figma 对开发者来说，确实确实可以看作是「可视化的蓝图 / 草图」—— 设计师用它输出产品的视觉和交互方案，开发者则根据这份 “蓝图” 将其转化为可运行的代码。

具体来说，这种 “蓝图” 的价值体现在：

• 明确视觉细节：比如按钮的圆角是 8px 还是 12px、文字的行高是 1.5 倍还是 2 倍、卡片阴影的参数是多少，这些都在 Figma 里精确标注，避免开发时凭感觉猜测。
• 定义交互逻辑：通过 Figma 的原型功能，可以直观看到点击按钮后是跳转到新页面，还是弹出弹窗；表单输入错误时会显示什么提示，这些交互规则是开发时实现逻辑的依据。
• 统一设计规范：如果是大型项目，Figma 里会有统一的组件库（比如 “主要按钮”“次要按钮”“输入框” 的标准样式），开发者可以据此写出可复用的代码组件，保证页面风格一致。

所以对 Web 开发者来说，Figma 更像是 “开发前的说明书”—— 你不需要用它来创作设计，只需要能看懂这份 “说明书”，就能更精准地把设计落地成实际的网页或应用。

5 明白了，现在就是教我们看图纸画图纸

你的总结很到位！对于 Web 开发学习来说，Figma 的核心作用确实可以概括为「看懂图纸 + 理解图纸逻辑」，甚至在某些场景下需要「简单画草图」，具体可以拆解为这几个层面：

1. 看懂图纸：精准提取开发信息
   就像建筑工人看施工图纸要找尺寸、材料参数一样，你用 Figma 要学会：

   • 查看元素的精确尺寸（宽高、间距、圆角）、颜色代码（HEX/RGB）、字体属性（字号、字重、行高）；
   • 识别图层结构（哪个元素在上方、哪些是组合组件），对应到 HTML 的嵌套逻辑；
   • 理解原型中的交互路径（点击 A 跳转到 B 页面、滚动时元素如何动），转化为 JavaScript 的交互逻辑。

2. 理解图纸逻辑：对接设计思维
   设计稿不只是 “好看的图片”，背后有用户体验的考量。比如：

   • 为什么导航栏在移动端会变成汉堡菜单？（响应式设计逻辑）
   • 为什么按钮 hover 时颜色会变深？（反馈机制）
     这些通过 Figma 能直观看到，帮你理解 “为什么要这样实现”，而不只是 “怎么实现”。

3. 简单画草图：快速验证想法
   开发中有时需要自己画简单原型（比如验证一个交互方案是否可行），用 Figma 的基础功能拖几个按钮、输入框，画个页面跳转流程，比纯文字描述更清晰，也能帮你提前发现逻辑漏洞。

总之，你不需要成为设计师，但学会用 Figma “读” 和 “画” 基础图纸，能让你从 “被动实现需求” 变成 “主动理解并优化实现”，这也是前端开发进阶的重要能力～

6 话说全栈工程师是说要会什么？

全栈工程师（Full Stack Engineer）简单来说，是指能独立完成「前端」+「后端」+「数据库」+「部署上线」全流程开发的工程师，核心是具备覆盖产品从 “界面展示” 到 “数据存储与处理” 的完整技术能力。具体需要掌握的技能可以分为以下几类：

1. 前端技术（用户能看到的部分）

• 基础三件套：HTML（结构）、CSS（样式）、JavaScript（交互）
• 前端框架：至少熟练掌握一个主流框架，如 React、Vue、Angular
• 工程化工具：webpack、Vite 等构建工具，npm/yarn 包管理，ESLint 代码规范等
• 辅助技能：响应式设计（适配不同设备）、前端性能优化、浏览器兼容性处理、UI 库使用（如 Ant Design、Element UI）

2. 后端技术（用户看不到的逻辑与数据处理）

• 编程语言：至少掌握一门一种后端语言，如 JavaScript（Node.js）、Python（Django/Flask）、Java（Spring）、PHP（Laravel）、Go 等
• 框架与生态：对应语言的主流框架（如 Node.js 的 Express/NestJS，Python 的 Django）
• API 开发：设计和实现 RESTful API 或 GraphQL，处理前后端数据交互
• 业务逻辑：用户认证（登录 / 注册）、权限管理、数据验证、业务流程处理等

3. 数据库（数据存储）

• 关系型数据库：MySQL、PostgreSQL 等，掌握 SQL 语句、表设计、索引优化
• 非关系型数据库：MongoDB（文档型）、Redis（缓存）等，了解适用场景
• 数据操作：增删改查（CRUD）、事务处理、数据备份与恢复

4. 部署与运维（让产品跑起来）

• 服务器基础：了解 Linux 命令、服务器配置（如 Nginx）
• 部署流程：将代码部署到云服务器（如 AWS、阿里云、腾讯云），使用 Docker 容器化部署
• 基础运维：日志查看、简单故障排查、性能监控（如服务器负载、数据库压力）

5. 软技能与综合能力

• 技术选型：根据项目需求选择合适的技术栈（如小项目用 Node.js + MongoDB 快速开发，大项目考虑 Java + MySQL 稳定性）
• 全流程思维：能从产品需求出发，设计前后端架构、数据库结构，直到最终上线
• 问题解决：跨领域排查问题（比如前端交互异常可能是后端接口问题，也可能是数据库查询错误）

关键误区：不是 “什么都学但什么都不精”

全栈的核心是「能打通全流程」，而非所有技术都要达到专家水平。实际工作中，全栈工程师通常会有 1-2 个擅长的领域（比如前端更熟，或后端更精），同时具备其他领域的实战能力，能独立负责小型项目，或在大型项目中衔接前后端协作。

简单说：全栈 = 能自己做一个 “从网页点按钮，到数据存进数据库，再到线上能访问” 的完整产品。

7 我觉得表示一个比较擅长，全部让ta干也都能上的那种感觉吧（），全栈是网页吗，还是app开发什么的？

你的理解很贴合全栈工程师的实际状态 ——「有擅长领域，同时能覆盖全流程」。至于全栈是否局限于网页，其实它的范围更灵活，既可以是网页开发，也可以包含 App 开发，核心是「覆盖某个产品的完整技术链路」。

具体来说，全栈的 “栈” 会根据产品形态不同而变化：

1. Web 全栈（最常见）

覆盖「网页前端 + 服务器后端 + 数据库 + 部署」的完整链路：

• 前端：用 HTML/CSS/JS + React/Vue 等框架开发网页（PC 端、移动端 H5）；
• 后端：用 Node.js/Python/Java 等语言写接口、处理业务逻辑；
• 数据库：MySQL/MongoDB 等存储数据；
• 部署：将代码上线到云服务器，让用户能通过浏览器访问。

比如独立开发一个博客网站：自己写前端页面，自己搭后端接口，自己设计数据库存文章，最后部署上线 —— 这就是 Web 全栈的典型场景。

2. App 全栈

如果产品是手机 App，全栈可能包含：

• 移动端前端：用 Flutter/React Native 开发跨平台 App（iOS/Android 都能跑），或原生开发（Swift/Objective-C for iOS，Kotlin/Java for Android）；
• 后端：和 Web 全栈类似，用同一套后端技术提供接口（比如用户登录、数据同步）；
• 数据库 / 部署：和 Web 全栈复用，因为 App 的数据也需要存在服务器上。

比如开发一个简单的记账 App：自己写 App 界面，自己搭后端存用户的账单数据，用户打开 App 能同步数据 —— 这就是 App 全栈的逻辑。

3. 甚至可以更 “全”

有些全栈工程师还会涉及：

• 小程序开发（微信 / 支付宝小程序，技术栈接近 Web 但有专属框架）；
• 基础运维（简单的服务器配置、监控，不用深入到专业运维的程度）；
• 简单的 DevOps（用工具自动部署、测试，提升开发效率）。

核心：“全” 是相对的，取决于产品边界

全栈的本质不是 “所有技术都要会”，而是 “能搞定自己负责的产品从 0 到 1 跑起来的所有技术环节”。比如：

• 做网页产品的，就是 Web 前后端 + 数据库 + 部署；
• 做 App 产品的，就是 App 前端 + 后端 + 数据库；
• 做小程序的，就是小程序前端 + 后端 + 数据库。

你可以理解为：全栈是 “产品技术链路的闭环能力”，而不是固定某类技术的集合。这种能力的优势在于，无论产品是网页、App 还是小程序，你都能独立推进，或者在团队中衔接不同环节，避免 “前端不懂后端逻辑，后端不懂前端需求” 的沟通壁垒。

8 乱问的一些

Q：内容还是很多的，普通计算机科班学生（分层次，985 211 一本双非）一般在什么时候可以变成全栈？

A：

普通计算机科班学生成长为全栈工程师的时间，会受学校层次（资源、氛围）、个人主动性（自学、实践）、项目经验等因素影响，但整体遵循 “从基础到全栈” 的递进规律。以下按不同层次学生的常见路径拆解，供参考：

一、985/211 院校学生：通常 2-3 年（本科阶段内可达成）

这类院校的优势在于：课程体系完善（覆盖前后端基础）、实验室资源多、同学竞争氛围强，更容易获得优质实践机会。

• 大一至大二上：打基础
  学校课程会覆盖计算机网络、操作系统、数据库原理、编程语言（C/C++/Java/Python）等，此时可同步自学前端基础（HTML/CSS/JS），完成简单网页开发（如个人博客静态页）。
• 大二下至大三上：分方向深入 + 跨领域入门
  多数学生会先深耕一个方向（比如跟着老师做后端项目，用 Java+SpringBoot 写接口；或参加前端竞赛，学 React/Vue），同时主动接触另一领域（后端转前端，或前端转学 Node.js 后端），完成 “单栈 + 跨栈入门”。
• 大三下至大四：全流程实践
  借助实验室项目、企业实习（大厂日常实习多有全栈场景），独立负责小型项目（如开发一个带用户系统的 Web 应用：前端页面 + 后端接口 + MySQL 数据库 + 部署到云服务器），此时已具备全栈核心能力。

特点：依托学校资源，能更早接触完整项目，2-3 年可从 “零基础” 成长为能独立开发全流程的全栈工程师。

二、一本院校学生：通常 3-4 年（本科中后期或毕业后 1 年内）

一本院校课程体系较完整，但优质实践资源（如大厂合作项目、顶尖实验室）相对少，更多依赖个人主动规划。

• 大一至大二：夯实技术基础
  学校课程覆盖核心理论（数据结构、数据库、编程），但实践机会较少，需主动自学：比如用 Python 写爬虫（练后端逻辑），用 Vue 做电商页面（练前端），初步建立 “前后端分离” 概念。
• 大三：突破单栈，补齐短板
  确定一个主方向（如前端），深入学习框架（React+TypeScript），同时系统补学后端（如学 Node.js+MongoDB），用 “前端 + 简易后端” 做小项目（如在线笔记应用），理解数据交互逻辑。
• 大四至毕业后 1 年：全栈落地
  通过企业实习（中小厂多有全栈需求）或个人项目（如开发带支付功能的小程序：前端小程序 + 后端接口 + Redis 缓存 + 云部署），补齐部署、运维等 “最后一公里” 技能，最终形成全栈能力。

特点：需更多自主学习和资源挖掘，3-4 年可达成，实习和毕业后的项目经验是关键催化剂。

三、双非院校学生：通常 4-5 年（毕业后 1-2 年）

双非院校的挑战在于：课程偏理论、实践资源有限、行业认可度相对较低，成长更依赖 “实践倒逼学习”。

• 本科阶段（4 年）：聚焦 “能落地的技能”
  学校课程可能侧重基础编程（C 语言、Java），需主动跳出课程：比如用 HTML+CSS+JS 做静态页，用 PHP+MySQL 搭简单网站（入门门槛低），先解决 “能做出东西” 的问题，避免陷入纯理论困境。
• 毕业后 1-2 年：在工作中补全全栈链路
  初期可能从 “单一岗位” 切入（如前端开发、后端开发），在工作中接触跨领域需求（比如前端需要自己写简单接口调试，后端需要理解前端交互逻辑），逐步学习部署（Docker、云服务器）、数据库优化等技能，最终通过独立负责小项目（如公司内部管理系统）打通全流程。

特点：成长周期更长，需在工作中主动 “跨界”，用实际项目驱动学习，4-5 年可具备全栈能力。

关键结论：全栈成长的核心，与学校层次关联但非绝对

• 学校层次影响 “起点资源”，但不决定 “终点高度”：985 学生可能更早接触全栈场景，但双非学生通过毕业后的持续实践，完全可以弥补差距。
• 核心变量是 “实践深度”：无论哪类院校，能独立完成 3 个以上 “从设计到上线” 的完整项目（小到个人博客，大到带用户系统的应用），比单纯学技术更能加速全栈成长。
• 全栈是 “动态能力”：不必追求 “所有技术都精通”，而是 “需要时能快速学会并落地”—— 这也是科班学生相比非科班的优势（系统理论基础让跨领域学习更快）。

简单说：全栈的本质是 “解决问题的闭环能力”，而这种能力的养成，更多取决于你 “做过多少完整项目”，而非 “来自哪类学校”。

Q:计算机本来就是实践倒逼学习，所以多自己找事情干，多做项目，多参加技术赛事（我个人觉得什么大创赛这种ppt大赛其实帮助不大），去线下技术lab社区或者黑客松，开源之夏，犀牛鸟这种？

A:

你说得非常到位！计算机领域的 “实践” 从来不是纸上谈兵，而是要真的动手写代码、解问题、推项目落地。你提到的这些方向 —— 自主项目、技术赛事、线下社区、开源活动 —— 恰恰是避开 “PPT 式实践”、真正提升能力的核心路径。

为什么这些实践比 “PPT 大赛” 更有价值？

技术成长的核心是 **“解决具体问题”**：

• 写项目时，会遇到 “前端样式错乱”“后端接口超时”“数据库查询慢” 等真实问题，逼你去查文档、调 bug、优化逻辑；
• 技术赛事 / 黑客松中，要在有限时间内完成功能，会倒逼你权衡技术选型、提升协作效率（比如和队友分工前后端）；
• 参与开源项目，要读懂别人的代码、遵循社区规范、修复 bug 或开发新功能，本质是在 “真实工程环境” 中学习。

而很多 “PPT 主导的比赛”，重心往往在 “包装方案” 而非 “落地实现”，容易陷入 “概念先行，代码为空” 的误区 —— 这和计算机 “用结果说话” 的逻辑背道而驰。

具体怎么选这些实践？可以分阶段规划：

1. 入门期（大一大二）：从 “小而具体” 的自主项目起步

不用追求复杂，先保证 “能跑通”：

• 比如做一个「个人任务管理器」：前端用 Vue 写页面，后端用 Node.js 写接口，数据库用 MySQL 存任务，最后部署到云服务器（花几十块买个轻量服务器即可）。
• 遇到问题就搜教程、查 Stack Overflow，过程中自然会掌握 “前后端交互”“数据库增删改查”“基础部署” 等核心技能。
• 好处：完全自主掌控，不用迁就他人，适合打基础。（是这样的，自己先学会好吧）

2. 提升期（大二大三）：参加技术赛事 / 黑客松，练 “快速落地” 能力

这类活动的核心是 “限时交付”，非常锻炼技术熟练度和抗压能力：

• 黑客松（Hackathon）：比如「腾讯 Techo Day 黑客松」「阿里天池大赛」，通常 48 小时内组队完成一个产品原型，需要快速拆分需求、分工开发（有人写前端、有人写后端、有人负责部署），结束后直接演示功能 —— 这种 “实战压力” 比自学高效 10 倍。
• 技术类竞赛：比如「全国大学生计算机设计大赛（软件应用方向）」「蓝桥杯（算法 + 应用开发）」，侧重功能完整性和技术深度，获奖能积累履历，但更重要的是过程中逼自己啃硬骨头（比如优化性能、解决并发问题）。

3. 进阶期（大三及以上）：参与开源项目 / 企业级实践，接触 “工程化”

到了这个阶段，需要跳出 “个人玩具项目”，理解真实世界的开发规范：

• 开源之夏 / 犀牛鸟：这些项目由企业或高校主导，比如给 Apache 旗下的框架贡献代码、给开源工具修复 bug，需要遵循严格的代码规范、提交 PR（Pull Request）、和社区开发者沟通 —— 这是提前适应大厂开发流程的最佳途径。
• 线下技术社区 / Lab：比如本地的「GDG（谷歌开发者社区）」「前端沙龙」，能认识行业内的开发者，甚至组队参与实际业务（比如帮小公司开发简单工具），了解真实业务场景的技术选型（比如为什么企业更爱用 PostgreSQL 而不是 MySQL，为什么部署要用 Docker）【有一说一，这就是校园里面古老知识所缺失的，还要学会用当下流行的先进的tools】。

关键心态：“完成” 比 “完美” 更重要

很多人一开始会怕项目太简单、代码写得烂，但实际上：

• 哪怕是一个只有 “登录 + 展示列表” 的简陋系统，只要能从前端到后端全流程跑通，就已经超越了 80% 只停留在 “看教程” 的人；
• 开源贡献哪怕只是修复一个文档错别字、优化一行注释，也是参与真实项目的开始，后续再逐步挑战更复杂的任务。

计算机领域的成长，从来都是 “在实践中暴露问题，在解决问题中变强”—— 你选的这些方向，正是踩在了这个核心逻辑上，坚持下去，比任何 “理论包装” 都更有说服力。

Q:我现在是新大二，意识到了这些。（突然有点焦虑时间了，其实剩下来的时间并不是很多啊啊啊）

A:你在大二就能有这样的认知，其实已经走在很多人的前面了 —— 计算机领域的成长，“方向感” 往往比 “起步早晚” 更重要。

大二正是打基础 + 试错的黄金期：课程上刚接触核心专业知识（数据结构、操作系统、数据库），时间相对灵活，有足够空间去折腾项目、参加实践。你现在意识到 “实践倒逼学习” 的价值，相当于提前避开了两个常见坑：

• 陷入 “纯理论焦虑”：总觉得 “学完所有知识再动手”，结果迟迟不敢开始做项目；
• 被 “形式化实践” 消耗精力：为了竞赛加分去凑数，做一些没有技术深度的 “PPT 项目”。

【是的大一下我还有这种焦虑症状。。嗯，现在好多了。】

接下来其实可以更有针对性地规划：
比如用 1-2 个小项目（比如你提到的 Web 相关，先用 HTML+CSS+JS 做个静态页，再用 Node.js 搭个简单后端）把课堂上学的编程、数据库知识串起来；同时关注一些入门级的技术活动（比如本地的黑客松、高校开源社团的分享），哪怕一开始只是围观，也能慢慢积累对 “真实开发场景” 的感知。【围观过啦哈哈】

不用急着追求 “做出多厉害的东西”，大二的核心是 “建立手感”—— 知道遇到问题该去哪查（MDN、官方文档、Stack Overflow），知道一个功能从 “想法” 到 “实现” 的大致步骤。这种 “解决问题的路径感”，会成为你后续成长的核心竞争力。

你现在的状态，其实已经赢在 “清醒” 上了，继续保持这种 “动手优先” 的节奏就好～