나는 모든 사람에게 디자인 시스템을 알려주고 싶다.
10672 단어 designsystem2019
This article is an English translation of みんなに知ってもらいたいデザインシステムのこと written in December 2019.
안녕하세요.저는 2019년 10월 이후 계속 CrowdWorks, Inc 일하고 있다고 합니다.
나는 보통 학습 회의에 가서 인터넷을 돌아다니며 술을 마시고 아버지를 돌본다.그는 현재 디자인 시스템 팀의 전단 엔지니어다.
본고에서 저는 당신에게 디자인 시스템을 소개하고 싶습니다. 당신이 어디에서 그것을 필요로 하는지, 엔지니어와 디자이너가 무엇을 알아야 하는지, 그리고 당신이 무엇을 알아야 하는지.
설계 시스템 정보
설계 시스템.만약 네가 인터넷과 전단에서 일한다면, 너는 아마 최근에 이 단어를 들은 적이 있을 것이다.이것이 바로 그것의 전체 내용이다.
디자인 시스템의 정의는 다음과 같다.
A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.
문서나 라이브러리를 말할 때, UI 색상과 모양 규칙을 포함하는 스타일 안내서나 구성 요소를 다른 방식으로 배치할 수 있는 모드 라이브러리라고 생각할 수도 있습니다.
그러나 디자인 시스템의 차이점은'제품 확장 능력'에 있다. 스타일 가이드와 모델 라이브러리는 이를 할 수 없다.
스타일 가이드와 모델 라이브러리는 목록을 위한 가이드에 불과하며 그들의 디자인 목적은 완전한 것이 아니라 제품의 성장을 따라가기 위한 것이 아니다.
디자인 시스템은 이를 포함하고 디자인 원칙, 정보 디자인, 인프라 시설과 접근성을 정의했다.그것들은 또한 제품의 특성을 나타냈다. 안내서와 도서관뿐만 아니라 그들이 무엇을 할 수 있고 무엇을 해결할 수 있는지도 나타냈다.
원칙과 원칙도 기록될 것이다. 이렇게 하면'내가 어떤 기초 위에서 이렇게 해야 하는가?'를 이해하기 쉽다.새 기능을 만들거나 제품을 수정할 때.
제품 표지를 정의하는 사용자 인터페이스 구성 요소 외에 올해 초에 발표된 Adobe 스펙트럼 디자인 시스템은'음성과 음조','문법과 메커니즘'등 어휘와 작문 스타일 안내서를 포함하여 더욱 광범위하게 디자인하는 시스템도 있다.
설계 시스템은 언제 필요합니까?
니가 필요할 때야.
시간 낭비라고 하지만 그것을 세울 필요가 없다고 생각한다면너는 그것을 강요할 필요가 없다.이것은 단지 설계 시스템일 뿐만 아니라, 처음 시작한 것보다 더 무서운 것은 없다.
結局デザインシステムは何なのか : could(일본어 텍스트만)
나는 새로운 업무를 시작할 때 새로운 사용자 인터페이스를 정확하게 평가할 수 있는지 모르겠다.그러나 디자인 시스템은 일치된 체험을 제공하는 구성 요소를 개발했다.
그것들을 적절하게 결합시켜 작은 단체라도 효과적으로 제품을 개발하고 품질을 유지할 수 있다.
또 성분의 혼합을 방지하고 균일성을 확보함으로써 바퀴 2차 개발의 낭비 과정을 줄일 수 있다.
If you have 25 teams in your company and each team makes a button, it costs $1 million to make a good button.
ー Nathan Curtis
이전에 우리 회사는 이 구성 요소 간의 기능과 시각 관계를 개발하기 위해 100만 달러를 들인 회의를 열었다.
デザインシステムの基本の基を考えていくお仕事をしています。 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ(일본어 텍스트만)
우리는 우리 엔지니어가 무엇을 알기를 바란다
우리가 디자이너와 교류해야 할 것은 문자로 상태를 표현하는 것이다.
단추라고 불리는 구성 요소를 고려하십시오.
기본 상태, 초점 상태, 활성 상태, 비활성화 상태, 심지어 단추 하나만 있으면 다양한 상태가 있습니다.
단추 자체가 링크 (탭) 라면 다른 방식으로 정의해야 합니다 (비활성화, 허용되지 않음).
실현자에게 이런 것들은 상상하기 쉽지만 구성 요소가 있는 위치를 지정하지 않으면 설계할 때 구성 요소가 누설될 수 있기 때문에 명확한 설명이 필요하다.
디자인 영패라고 불리는 디자인 시스템도 있다.이것은 당신이 정의된 영패를 사용하여 이 값을 대량으로 바꿀 수 있도록 합니다.
설계 시스템은 단일한 진실한 출처(유일한 신뢰할 수 있는 정보 출처)를 보장할 수 있다.
CSS Custom Properties 또는 Sass 변수로 볼 수 있습니다.
$brand-primary: rgb(21, 137, 238);
$brand-primary-active: rgb(0, 122, 221);
$brand-primary-transparent: rgba(21, 137, 238, 0.1);
단어 정의의 혼란은 미래의 디자인 붕괴를 초래할 수 있다.
Design Tokensを考える前に俺たちは変数名について考え直すことがあるのではないか - yamaScrapbox(일본어 텍스트만)
디자이너한테 뭘 알려주고 싶어요.
디자이너는 통상적으로 시각적 표현을 책임지지만, 그들은 "왜 그것이 이 점을 표현했습니까?"를 확보해야 한다.다른 사람에게 이해되다.
Shopify 디자인 시스템'Polaris'의 한 예는 국제화에서의 문화 차이를 포착하는 것이다.
예를 들어 일본에서 우리는 국가 이후에 현의 입력 항목을 추가했고 북미 스타일의 명칭 입력표를 만들지 않았다.이 예들은 당신이 이 설계의 작업 원리를 더욱 잘 이해하는 데 도움을 줄 것입니다.
Sketch, Figma, Invision, Storybook 및 기타 도구는 디자이너가 다른 업계와 합작하는 데 도움을 줄 수 있습니다.그러나 명확한 답은 없다. 예를 들면, "너는 이것으로 할 수 있다."나는 그들이 어떤 세계를 실현하고자 하는지에 근거하여 그것을 사용하는 것이 가장 좋다고 생각한다.
Figma가 디자인 시스템을 구축하는 능력은 교차 링크뿐만 아니라 시각화와 유한한 입사와 다른 디자인 데이터를 분석함으로써 더욱 실용적으로 하는 데 있다.
제가 알려드리고 싶은 거.
마지막으로 비집행 디자인 시스템에 참여하는 모든 사람들에게 전면적으로 알리고 싶습니다.
당신이 한 제품에서 디자인 시스템을 구축할 때, 무엇을 완성이라고 합니까?그게 문제야.답은'아니오'입니다.
앞에서 언급한 바와 같이 디자인 시스템은 확장되고 모든 사람이 유지할 수 있는 품질로 설계할 수 있다고 가정한다.
따라서 확장할 수 있도록 명확한 답안(예를 들어 0 또는 1)이 없는 가설에서 조작할 필요가 있다.
The design system is a living thing. Let's raise them little by little.
If you're building a design system, you want to make it more perfect for every pattern. But I realized that the design system is not perfect.
As products and organizations grow and change, so does the design system. The design system is a living thing.
デザインシステムのプロジェクトの実践で学んだ3つの大切なノウハウ - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ(일본어 텍스트만)
실패를 설명하는 문장 중에는 조직 지원과 소통이 부족하고 초기 투자가 부족하며 사용이 부족한 예가 있다.
비록 이 글은 2017년에 썼지만, 그것은 여전히 이해하기 쉽다.
만약 설계 시스템이 잘못된 방향으로 발전한다면 나쁜 결과를 초래할 수 있다.디자인에 따라 당신은 다른 사람을 해치거나 일부 층을 제거할 수 있습니다. 그러면 당신의 제품의 목적은 무엇입니까?당신은 어떤 미래를 묘사하고 싶습니까?우리는 이런 관점이 있다는 것을 잊어서는 안 된다.
결론
이것이 바로 내가 너에게 알려주고 싶은 디자인 시스템이다.
디자인 시스템을 사용하면 당신은 일정한 품질 수준을 유지하는 동시에 유연하게 창작을 진행할 수 있다.그러나 명확한 목적감이나 하지 말아야 할 일을 이해하지 못하면 잘못된 디자인을 전파할 수 있다.
작년에 설립된 전단팀은 시행착오법을 통해 패키지 디자인 시스템을 개발하고 있다.
그것의 내부는 여전히 폐쇄적이지만, 나는 미래에 모든 사람에게 그것을 보여주고 싶다.
참조 문헌(일본어 텍스트만)
Reference
이 문제에 관하여(나는 모든 사람에게 디자인 시스템을 알려주고 싶다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yamanoku/i-want-everyone-to-know-about-the-design-system-370k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
