微信公眾號(hào)無(wú)需二次登錄

重點(diǎn) (Top highlight)

The design system concept can be differently defined according to each person’s background. Designers may say that a design system is a style guide while developers may say it is UI standards, or specs, or even assets. Whatever the words used, a solid design system might have different purposes, but one can go through all backgrounds and areas: to be documentation.

可以根據(jù)每個(gè)人的背景不同地定義設(shè)計(jì)系統(tǒng)概念。 設(shè)計(jì)師可能會(huì)說(shuō)設(shè)計(jì)系統(tǒng)是樣式指南，而開(kāi)發(fā)人員可能會(huì)說(shuō)它是UI標(biāo)準(zhǔn)，規(guī)范甚至資產(chǎn)。 不管使用什么措辭，一個(gè)堅(jiān)實(shí)的設(shè)計(jì)系統(tǒng)可能都有不同的目的，但是一個(gè)系統(tǒng)可以遍及所有背景和領(lǐng)域：作為文檔。

Design systems are documentation: document how components look, how they should be used, how they made part of products.設(shè)計(jì)系統(tǒng)是文檔：記錄組件的外觀，應(yīng)如何使用它們，如何將它們制成產(chǎn)品的一部分。

There are several ways to represent one. You can have static documentation using tools like Sketch, Invision, or Figma, usually preferred and used by designers. Interactive representation using tools like Storybook, bit.dev, or Zeplin, typically lead by developers. The great benefit of the second kind of documentation is that it can show all different states, dynamically changed by you, as if you were interacting with the implementation in the “real” product. No more unexpected states or “what is the button color when hovered?” slack messages.

有幾種表示方法。 您可以使用設(shè)計(jì)人員通常首選和使用的工具(例如Sketch ， Invision或Figma)獲得靜態(tài)文檔。 使用工具，如交互式表示故事書(shū) ， bit.dev ，或Zeplin ，通常由開(kāi)發(fā)商引起。 第二種文檔的最大好處是，它可以顯示您動(dòng)態(tài)更改的所有不同狀態(tài)，就像您正在與“真實(shí)”產(chǎn)品中的實(shí)現(xiàn)進(jìn)行交互一樣。 不再出現(xiàn)意外狀態(tài)或“ 懸停時(shí)按鈕的顏色是什么？” 松弛消息。

bit.dev component explorerbit.dev組件瀏覽器

Everybody knows that naming things is hard, right? If you use the design system’s components, you no longer have to deal with that. Stop having different names for the same thing: one project with input, another with form field, and another with text field. Have just one, rich and well defined, and everybody will be on the same page.

大家都知道命名很難，對(duì)嗎？ 如果使用設(shè)計(jì)系統(tǒng)的組件，則不再需要處理。 停止為同一事物使用不同的名稱：一個(gè)帶有輸入的項(xiàng)目，另一個(gè)帶有表單字段的項(xiàng)目 ，另一個(gè)帶有文本字段的項(xiàng)目 。 只有一個(gè)，內(nèi)容豐富且定義明確， 每個(gè)人都會(huì)在同一頁(yè)面上 。

解決問(wèn)題(一次！) (Solve problems (once!))

Even the smallest component can have to deal with multiple usage scenarios. If you solve a problem properly in one place, you don’t need to solve it every time you have the same usage scenario, and you won’t forget to implement some edge and not common scenarios. Make room for productivity, implement wisely. New use case? Solve it in the design system, you’ll have it solved next time, and you can skip it in a blink of an eye.

即使是最小的組件也可能必須處理多種使用情況。 如果您在一個(gè)地方正確地解決了一個(gè)問(wèn)題，那么您不必每次都具有相同的使用場(chǎng)景時(shí)就解決它，并且您將不會(huì)忘記實(shí)施某些優(yōu)勢(shì)和不常見(jiàn)的場(chǎng)景。 為生產(chǎn)力騰出空間，明智地實(shí)施。 新用例？ 在設(shè)計(jì)系統(tǒng)中解決它，下一次您將解決它，您可以在眨眼之間跳過(guò)它。

When you implement a design system, you join all components in just one place. You can have it exported as a library to use in all projects, allowing to code reuse, avoiding code duplication. It also means less CSS and less styling, no more slightly different components that should be equal, no more different margins and colors, no more small style fixes kind of commits. However, have in mind that changing anything in the library will change in all products when updated. That can be either good or bad: be careful with breaking changes.

實(shí)施設(shè)計(jì)系統(tǒng)時(shí)，將所有組件僅放在一個(gè)地方。 您可以將其導(dǎo)出為庫(kù)以在所有項(xiàng)目中使用，從而允許代碼重用，避免代碼重復(fù)。 這也意味著更少CSS和更少的樣式，不再應(yīng)該具有相同的組件，沒(méi)有更多不同的邊距和顏色，沒(méi)有更多的小樣式修復(fù)提交。 但是，請(qǐng)記住，更改庫(kù)中的任何內(nèi)容都會(huì)在更新所有產(chǎn)品時(shí)對(duì)其進(jìn)行更改。 這可能是好事或壞事：小心更改。

重復(fù) (Iterate)

A design system is itself a project, but it shouldn’t have an end, it should grow as projects, and the company grows too. The process of defining it is iterative. Improvements are made, and components are added, don’t expect to have a finished design system from one day to the next. New projects bring new components: a design system is like a company’s baby, it starts small and will grow and improve as time goes by. Iterate. Redesign. Improve.

設(shè)計(jì)系統(tǒng)本身就是一個(gè)項(xiàng)目，但它不應(yīng)有目的，它應(yīng)隨著項(xiàng)目的發(fā)展而增長(zhǎng)，公司也應(yīng)隨之發(fā)展。 定義它的過(guò)程是迭代的。 進(jìn)行了改進(jìn)，并添加了組件，不要指望一天到一天都有完整的設(shè)計(jì)系統(tǒng)。 新項(xiàng)目帶來(lái)了新的組件：設(shè)計(jì)系統(tǒng)就像公司的嬰兒一樣，從小規(guī)模開(kāi)始，隨著時(shí)間的流逝將不斷發(fā)展和完善。 重復(fù)。 重新設(shè)計(jì)。 提高。

You can work in a project and update the design system at the same time, npm link is there for you. It allows developers to link the design system’s repository to the project that they are working on.

您可以在一個(gè)項(xiàng)目中工作并同時(shí)更新設(shè)計(jì)系統(tǒng)， npm鏈接可為您提供。 它允許開(kāi)發(fā)人員將設(shè)計(jì)系統(tǒng)的存儲(chǔ)庫(kù)鏈接到他們正在從事的項(xiàng)目。

[Design System] npm link
[Project] npm link @your-design-system-library

This way, the project will no longer look for the package online, it will consume it locally, which means that every time the design system changes, your project will be updated. When the library is updated to the next version, there are no unexpected errors or changes. No excuses not to update the design system, right?

這樣，項(xiàng)目將不再在線查找包，而將在本地使用它，這意味著每當(dāng)設(shè)計(jì)系統(tǒng)更改時(shí)，您的項(xiàng)目就會(huì)被更新。 將庫(kù)更新到下一個(gè)版本時(shí)，不會(huì)發(fā)生意外錯(cuò)誤或更改。 沒(méi)有理由不更新設(shè)計(jì)系統(tǒng)，對(duì)嗎？

真理的單一來(lái)源 (Single source of truth)

Communication has a significant role in product success. When having different teams working for the same end, they need to be aligned. They need to work with the same thing in mind and to communicate properly. Having a design system implemented improves the communication between all team members since there is only one single source of truth resulting in transparency, well-defined process, and coherent products.

溝通對(duì)于產(chǎn)品成功至關(guān)重要。 當(dāng)有不同的團(tuán)隊(duì)為同一目標(biāo)工作時(shí)，他們需要保持一致。 他們需要牢記同一件事并進(jìn)行正確溝通。 實(shí)施設(shè)計(jì)系統(tǒng)可以改善所有團(tuán)隊(duì)成員之間的溝通，因?yàn)橹挥?strong>一個(gè)單一的事實(shí)來(lái)源會(huì)導(dǎo)致透明，定義明確的流程和連貫的產(chǎn)品 。

The communication between designers and developers isn’t always clean and precisely done. If both use the same documentation, designers will know that they only need to review it in one place and not everywhere the component is implemented. On the other hand, developers will be sure that they are using the right and most updated component.

設(shè)計(jì)師和開(kāi)發(fā)人員之間的交流并非總是干凈無(wú)誤的。 如果兩者都使用相同的文檔，則設(shè)計(jì)人員將知道他們只需要在一個(gè)地方而不是在組件實(shí)現(xiàn)的所有地方進(jìn)行審閱。 另一方面，開(kāi)發(fā)人員將確保他們使用的是正確且最新的組件。

We all know that everything changes fast. A single source of truth, updated and well defined, can improve the communication between all team members, avoiding lost or incorrect information. In addition, having all implemented as reusable components lead to a faster and optimized implementation. A design system can contribute to organized teams and to product success, give it a chance.

我們都知道，一切都會(huì)快速變化。 更新并定義明確的單個(gè)事實(shí)來(lái)源可以改善所有團(tuán)隊(duì)成員之間的溝通，避免丟失或錯(cuò)誤的信息。 另外，將所有實(shí)現(xiàn)都實(shí)現(xiàn)為可重用組件可以實(shí)現(xiàn)更快，更優(yōu)化的實(shí)現(xiàn)。 設(shè)計(jì)系統(tǒng)可以為有組織的團(tuán)隊(duì)和產(chǎn)品成功做出貢獻(xiàn)，給它一個(gè)機(jī)會(huì)。

See more about npm link here.

在此處查看有關(guān)npm鏈接的更多信息。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個(gè)巴西組織，致力于通過(guò)采取行動(dòng)，賦權(quán)和知識(shí)共享的舉措來(lái)促進(jìn)科技行業(yè)中的黑人女性平等。 對(duì)系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。

翻譯自: https://uxdesign.cc/you-dont-need-to-solve-problems-twice-you-need-a-design-system-b1b9dbb76685

微信公眾號(hào)無(wú)需二次登錄

總結(jié)

以上是生活随笔為你收集整理的微信公众号无需二次登录_您无需两次解决问题-您需要一个设计系统的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。