Pragmatism: designing a Figma library in the open-OP LABS BLOG [KOR] - stalim17

오픈 소스와 공공재는 Optimism 정신 의 핵심입니다 .

Optimism을 분산시키려는 우리의 목표 에 따라 Collective의 더 많은 부분을 소스로 공개할 계획입니다. 오늘 우리는 Figma 라이브러리인 Pragmatism을 Figma 커뮤니티에 게시하게 되어 매우 기쁩니다. 누구나 이 디자인 시스템을 보고, 분기하고, 피드백을 남길 수 있습니다.

다음은 실용주의를 정의하는 몇 가지 기능입니다.

지속적인 반복

실용주의는 우리가 우리의 필요에 맞게 시스템을 계속 형성함에 따라 지속적으로 진화할 것입니다. 반복적으로 추가 및 변경 사항을 게시하므로 Pragmatism 업데이트 사이에 오랜 시간을 기다릴 필요가 없습니다. 업데이트를 추적하는 데 도움이 되도록 모든 구성 요소에 대한 변경 로그가 있습니다.

쉬운 사용자 정의

실용주의는 해커톤에서 실험하거나 새로운 사용 사례를 시작할 때 다양한 사용 사례에 맞게 분기하고 사용자 정의하기 쉽다는 것이 우리에게 중요합니다.

이를 돕기 위해 우리가 하고 있는 한 가지는 구성 요소 디자인 토큰의 사용을 문서화하고 실제로 구성 요소에 사용하는 것입니다. 이렇게 하면 업데이트할 공유 레이어가 최소화됩니다. 예를 들어 기본 색상을 빨간색에서 보라색으로 변경하는 것은 사소한 일입니다.

FontAwesome 지원

현재 아이콘에 FontAwesome을 사용하고 있습니다 . 이를 통해 다양한 아이콘 세트에 액세스할 수 있습니다. 자산을 변경하려면 구성 요소에 아이콘 이름을 입력하기만 하면 됩니다.

필요한 경우 육각형 이미지와 마찬가지로 새로운 아이콘을 후원할 계획입니다 .

테마

모든 구성 요소에는 밝은 테마와 어두운 테마가 모두 변형되어 있어 여러 라이브러리나 외부 플러그인 없이도 Figma의 오른쪽 패널에서 쉽게 전환할 수 있습니다.

리액트 라이브러리와 스토리북

Pragmatism의 많은 구성 요소가 Optimism의 웹 사이트 에서 부분적으로 구현되었지만 디자인 시스템은 아직 공개되지 않았습니다. 내년에는 누구나 구성 요소 코드를 보고 사용할 수 있도록 전용 React 라이브러리와 Storybook 프런트 엔드를 출시할 계획입니다.

실용주의가 아닌 것

실용주의가 아닌 것을 정의하는 것은 실용주의를 정의하는 것만큼 중요합니다. 개인 또는 작업 디자인에 라이브러리를 사용할 계획이라면 이러한 제한 사항이 실용주의가 프로젝트에 적합한지 스스로 판단하는 데 도움이 될 수 있습니다.

계획하지 않은 작업은 다음과 같습니다.

국제화 지원(Pragmatism은 영어/미국).
i18n은 매우 중요하며 앱을 현지화할 때 발생할 수 있는 동작을 문서화하고 코딩할 계획입니다. 그러나 현재 유지 관리 오버헤드 때문에 Figma 라이브러리에 i18n 변형을 포함할 계획이 없습니다. 전용 변형이 필요한 오른쪽에서 왼쪽으로 쓰는 언어를 예로 들 수 있습니다.
구성 요소의 모든 상태를 변형으로 가집니다.
"Focused"와 같은 일부 상태는 모의(예: 텍스트 입력)에서 자주 사용되는 경우 변형이 되지만 다른 구성 요소(예: Pill 탭)에 대해 문서화될 수 있습니다.
"web2 전용" 구성 요소를 추가합니다. web3 컨텍스트에서 의미가 있는 구성 요소만 추가할 것입니다(예: 주소 입력 또는 신용 카드 입력은 추가하지 않을 것임).

확장 팩

오늘 우리는 핵심 Figma 파일을 공개합니다 . 앞으로는 레이아웃(브리지 머리글 및 바닥글) 또는 자산(토큰 로고, 앱 로고, 타사 파트너 색상 등) 등 공개된 많은 확장을 만들 계획입니다.

피드백 환영

Figma 파일 에 피드백을 남겨서 여러분의 생각과 변경해야 할 사항을 알려주십시오 . 우리는 그것을 읽기를 기대합니다!

Pragmatism이 다음 디자인 프로젝트를 보다 쉽고 체계적으로 만들 수 있기를 바랍니다. 결국, 당신이 낙관적이라고 해서 실용주의자가 될 수 없다는 의미는 아닙니다!

https://blog.oplabs.co/pragmatism-design-system/