希望和自由
技术探索2026-10-08

从 Figma 到代码：设计师的跨界笔记

8 分钟阅读456 次阅读
从 Figma 到代码：设计师的跨界笔记

为什么要学代码？

很多设计师对代码有天然的抗拒感，觉得那是程序员的事。但我的经历告诉我，了解代码反而让我的设计更加落地。

我的学习路径

  • **HTML/CSS 基础**：理解盒模型、布局方式
  • **Flexbox 和 Grid**：掌握现代布局方案
  • **React 基础**：理解组件化思维
  • **Tailwind CSS**：原子化 CSS 的优雅

    • 设计师学代码的好处

  • 知道什么设计容易实现，什么是高成本低收益
  • 和开发沟通更顺畅，能理解技术约束
  • 快速原型验证，不需要等开发排期

    • 推荐资源

  • [MDN Web Docs](https://developer.mozilla.org) - 最权威的 Web 技术文档
  • [Tailwind CSS](https://tailwindcss.com) - 设计师友好的 CSS 框架
  • [React](https://react.dev) - 组件化开发的最佳实践
    • 学习代码不是为了成为开发者，而是成为更好的设计师。
    Figma前端开发设计协作
    上一篇秋日午后的咖啡馆随想下一篇 设计中的留白，像生活中的呼吸

    评论 (1)

    代码爱好者
    代码爱好者2026-10-09

    同感！学了代码之后，和开发的沟通确实顺畅了很多，设计也更接地气了。

    相关文章

    Tailwind CSS 实战：构建响应式博客
    技术探索2026-09-25

    Tailwind CSS 实战：构建响应式博客

    用 Tailwind CSS 从零搭建一个响应式博客，记录开发过程中的思考和技巧。

    10 分钟阅读
    Tailwind前端开发