3.1 Design System - 管理平台

万事起头难 爬山一开始总会比较喘、比较累
但逐渐靠近山头後 身体就慢慢适应环境了
登山者也较能欣赏山头上的风景
这个过程就像学习任何的新东西一样

因为目前还没有用过管理设计元件的平台
所以只能线上搜集文章看看资深设计的分享
再汇整资讯

目前有听过的设计管理平台有

  1. Storybook
  2. Invision DSM
  3. Zerohight
  4. Frontify
  5. Figma
    其实还有更多,可以看看这两篇汇整的工具(文中有针对各面向作评比)
    Design System Tools
    The best tools for documenting design systems

不过考量到维护有分成几个面向 设计、协作、更新、文件说明、适用性、易於分享
如果一个平台可以符合全部面向应该会是最好的

一开始有提过我们是决定先不做设计系统的,考量不外乎是人力与时间成本
NN/g也有提做与不做的情况→看这篇

不过对於新创来说可以做的方向与这篇3tips to make your design system easier to setup and maintain作者分享的蛮类似:
1.先做平常频繁用到的东西,不需要一次将全部的项目做完
2.PDF跟网页都有管理上的缺点,他们采用 Sketch+Plug-in(该文章有点久远,相信现在有更多新的工具可以克服PDF查阅不便跟网页不易随时更新的缺失)

後续维护元件,我觉得原子设计中分享的决策树很适用,若无法决定应该要更新什麽内容,可以照着这个 flow 检视看看
https://ithelp.ithome.com.tw/upload/images/20211012/20142064andUxzZkir.png

至於文件跟元件的架构
观察了几个设计系统,大部分都会有元件拆解、尺寸、Do and Don't等等
https://ithelp.ithome.com.tw/upload/images/20211012/20142064X28HUCXGZh.png
来源:Carbon Design

Adobe Spectrum 还有changelog & checklist,这个对於多人协作真的很必要且有帮助
https://ithelp.ithome.com.tw/upload/images/20211012/20142064a4gscV15Sa.png

这边有位设计师在制作设计系统前执行一个前置作业,包含:其他设计系统的拆解分析、团队 Workshop
「团队 Workshop」是一个很好搜集共识的方式,也可以藉此看到不同岗位的同事对於同一件事情的不同看法
很推荐大家在做设计系统前试试看

Day 27 End


<<:  27 - 有效的使用 Observability 的资料 (1/4) - 透过 Machine Learning 发现异常的问题

>>:  DAY 29:Iterator Pattern,迭代各种不同的物件

Day14 用React Component去规划整个画面

今天要学习如何用React的Component的概念来设计你的UI画面,下面用React官网提供的素...

JavaScript Day18 - 阵列操作(filter、find、findIndex)

filter filter() 会建立一个新的阵列,其内容为原阵列的每一个元素经由回呼函式判断後所回...

D7 allauth 采坑日记 Extending & Substituting User model (2)

接续上一篇 这次要讲的是我研究中途试过的另一个方法 Substituting 这其实是我一开始的想法...

[第19天]理财达人Mx. Ada-Telegram Bot

前言 本文说明使用Python建立Telegram Bot 。 注册 telegram帐号 找 @B...

[2021铁人赛 Day09] General Skills 06

引言 昨天的题目让大家知道可以做反组译这件事, 其实这是一个大主题,归在逆向工程中, 该分类会大量...