90天构建高效设计系统:实用工具与策略指南

本文详细介绍了在90天内从零搭建设计系统的实用方法,包括Dan Mall的设计系统画布、Ness Grixti的战术指南及Nathan Curtis的检查清单,帮助团队高效启动并落地设计系统项目。

设计系统在90天内完成——Smashing Magazine

想要为你的产品建立一个新的设计系统?如何从零开始启动并运行?是从关键利益相关者、UI审计还是命名规范入手?早期需要哪些关键对话以避免后续问题?

幸运的是,有一些实用的小工具可以帮助你启动——它们是我在启动任何设计系统项目时经常依赖的。

90天设计系统画布

90天设计系统画布(FigJam模板) 是一组方便的有用问题,用于启动设计系统工作。本质上,它是一个路线图,用于讨论从设计系统的价值到利益相关者、涉及团队以及要开始的组件等所有内容。

非常全面和有用:Dan Mall的《90天设计系统画布》。

一个简洁的小助手,在90天内启动并运行设计系统——并被采用!为正在构建或计划建立设计系统的大小公司创建。由Dan Mall友好分享。

实用设计系统战术

设计系统战术 是对战术的实用概述,帮助设计师在每个阶段推进设计系统——从制定系统原则到组件发现,再到设计系统办公时间,以及跨品牌整合。由独一无二的Ness Grixti完成的出色工作。

Ness Grixti的《设计系统战术》实用概述。

设计系统工作表(PDF)

Nathan Curtis的设计系统检查清单(下载PDF) 是一个实用的2页工作表,用于60分钟的团队活动,旨在为你的设计系统选择正确的部分、产品和人员。

Nathan Curtis的设计系统工作表。

当然,设计系统的重点不是完全全面或覆盖你可能需要的每个组件。它旨在足够有用,帮助设计师更快地生产高质量工作,并足够灵活,帮助设计师做出决策,而不是为他们做决策。

开始使用的有用问题

设计系统的价值在于它对组织中的一大群人有用且适用。根据Dan的说法,一个好的开始是确定该价值在哪些方面最能帮助解决公司的关键挑战和目标:

  • 对我们组织在最高级别上重要的是什么?
  • 谁对我们的设计系统工作重要?
  • 设计和代码中已经存在哪些非官方系统?
  • 哪些团队有即将到来的需求,系统可以解决?
  • 哪些团队有即时需求,可以扩展我们的系统?
  • 我们应该和哪些团队谈过?
  • 我们应该和哪些利益相关者谈过?
  • 我们的利益相关者有哪些需求、愿望和担忧?
  • 产品或功能团队现在或很快需要哪些组件?
  • 系统可以解决哪些最终用户问题/机会?
  • 我们从使用其他设计系统中学到了什么?
  • 我们处理产品的可重复流程是什么?
  • 我们将从哪些组件开始?
  • 我们的利益相关者有哪些共同的需求、愿望和担忧?
  • 我们的组件目前在哪里使用或计划使用?

有用资源

以下是一些其他有用的小助手,可能帮助你在设计系统工作中:

  • Dan Mall的《前90天要回答的设计系统问题》
  • Paavan Buddhdev的《设计系统画布(PDF / Figjam)》
  • Marianne Ashton-Booth的《LeanDS框架(Figma)》
  • 笔者Vitaly Friedman的《设计师有用UX模板(Figma工具包)》
  • Romina Kavcic的《设计系统指南》

总结

画布通常是一个很好的对话启动器。它很少完整,但会提出一个人不会当场发现的话题和问题。我们不会立即得到所有问题的答案,但我们可以开始朝着正确的方向前进,将设计系统工作转化为成功。

祝顺利勾选正确的复选框!

如何衡量UX和设计影响

Meet Measure UX & Design Impact(8小时),为设计师和UX负责人提供的实用指南,用于塑造、衡量和解释你对业务的惊人UX影响。由Vitaly Friedman录制和更新。使用友好代码🎟 IMPACT今天节省20%。跳转到详情。

视频 + UX培训 $495.00 $799.00 获取视频 + UX培训 25视频课程(8小时)+ 实时UX培训。 100天退款保证。

仅视频 $250.00 $395.00 获取视频课程 25视频课程(8小时)。每年更新。 也可作为包含2个视频课程的UX捆绑包提供。

Smashing Magazine上的进一步阅读

  • Mikołaj Dobrucki的《用Penpot组件构建设计系统》
  • Anima团队的《如何用Anima Playground将Figma设计转化为实时应用》
  • Vitaly Friedman的《UX和设计文件组织模板》
  • Paul Boag的《数字Playbook:设计系统的关键对应物》

(mrn, yk)

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计