---------------
개요
The right code for your design system
피그마가 디자인-개발에 프레임웍 효율 향상을 위해 디자인 영역의 더 많은 부분을 베리어블과 스타일로 정의하고 변경할 수 있게 해주고, 조금 더 코드에 가깝게 변환할 수 있는 수단을 만들었다고 발표했습니다.

Code Connect는 Dev-mode에서 대규모 디자인 시스템에 따라 커스텀된 코드 스니펫을 더 효율적으로 만들어주는 도구입니다. 기존에 사용하는 코드를 붙여 넣으면, 피그마에서 사용하기 편리한 상태로 변경해 준다고 합니다. 개발자가 아니어서 정확한 표현은 어렵네요. 곧 베타가 시작되어 피그마에서 볼 수 있습니다.

---------------
요약
Code Connect는 개발자가 디자인 시스템의 코드에 더 쉽게 접근하고 활용할 수 있도록 하는 새로운 도구입니다.

Code Connect를 사용하면 개발자들은 자동 생성된 CSS 대신 실제 디자인 시스템 코드를 볼 수 있어서 개발이 더욱 효율적으로 이뤄집니다. 조직은 디자인 시스템을 보다 일관되게 사용할 수 있게 되며 중복된 구성 요소의 생성과 유지 관리 비용이 줄어듭니다.

Code Connect는 Figma의 디자인 도구에 코드 기능을 도입하여 디자인과 코드 사이의 간극을 줄이는 데 목적이 있습니다. 현재는 Figma Organization 및 Enterprise 요금제의 베타 버전으로 제공되며 일반 출시는 올해 말에 예정되어 있습니다.

---------------
번역
오늘 우리는 개발자가 코드에 더 쉽게 접근하고 유용하게 사용할 수 있도록 하여 디자인 시스템 채택을 개선하기 위해 구축된 기능인 Code Connect의 베타 버전을 발표합니다.

디자인 시스템은 디자인과 코드 사이의 격차를 해소하는 가장 강력한 도구 중 하나입니다. 공유 언어를 생성함으로써 디자이너와 개발자는 각자의 워크플로우에서 효율적으로 협업할 수 있습니다. 우리 는 작년에 출시한 자동 레이아웃 , 변수 , 구성 요소 소품 및 개발 모드 와 같은 기능을 통해 디자인 시스템을 코드에 더 가깝게 만들기 위해 열심히 노력해 왔습니다 .

이러한 발전에도 불구하고 채택이라는 한 가지 주요 과제는 여전히 남아 있습니다. 엔지니어링 관리자로서 저는 이 사실을 직접 목격했습니다. 고객과 대화할 때 우리는 "디자인 시스템을 구축했지만 잠재력을 최대한 활용하지 못하고 있습니다."라는 같은 말을 계속해서 듣습니다. 개발자는 디자인 시스템의 일부를 사용할 수 있지만 포함된 모든 것을 인식하지 못하는 경우가 많습니다. 그리고 이를 사용할 때 시스템의 의도된 지침에 맞지 않는 방식으로 구성 요소나 패턴을 의도치 않게 오용할 수 있습니다. 디자인 시스템의 성공은 이를 사용하는 것뿐만 아니라 올바르고 일관되게 사용하는 사람들에 달려 있기 때문에 이는 매우 중요한 문제입니다.
이것이 개발자가 코드에 더 쉽게 접근하고 유용하게 만들어 조직이 디자인 시스템 채택을 촉진하는 데 도움이 되는 새로운 도구인 Code Connect를 소개하게 된 것을 매우 기쁘게 생각합니다. Code Connect를 사용하면 개발자 모드에 표시되는 코드 조각을 사용자 정의할 수 있으므로 개발자는 자동 생성된 CSS 대신 실제 디자인 시스템 코드를 볼 수 있습니다. 그 결과 개발이 더 빠르고 효율적이며 조직 전체에서 디자인 시스템의 채택률이 높아지고 중복된 일회성 구성 요소의 생성 및 유지 관리가 줄어듭니다.

이것이 개발자가 코드에 더 쉽게 접근하고 유용하게 만들어 조직이 디자인 시스템 채택을 촉진하는 데 도움이 되는 새로운 도구인 Code Connect를 소개하게 된 것을 매우 기쁘게 생각합니다. Code Connect를 사용하면 개발자 모드에 표시되는 코드 조각을 사용자 정의할 수 있으므로 개발자는 자동 생성된 CSS 대신 실제 디자인 시스템 코드를 볼 수 있습니다. 그 결과 개발이 더 빠르고 효율적이며 조직 전체에서 디자인 시스템의 채택률이 높아지고 중복된 일회성 구성 요소의 생성 및 유지 관리가 줄어듭니다.

대규모 디자인 시스템 채택은 우리가 오랫동안 생각해 왔던 것입니다. 채택의 장벽은 단순히 개별 워크플로나 선호도의 문제가 아닙니다. 이는 디자인과 코드 사이의 더 넓은 단절을 보여주는 증거입니다. CEO Dylan Field가 설명 했듯이 디자인과 코드는 전통적으로 서로 다른 세계를 차지했습니다. “디자인과 코드 사이에는 자연스러운 긴장이 있습니다. 디자인의 세계에서 초점은 무엇을 구축할지 결정하는 것입니다. 코드의 세계에서 초점은 그것을 구축하는 것입니다. 실제로 그들은 제품에 생명을 불어넣기 위해 노력하는 파트너입니다.”

디자이너와 개발자는 서로 다른 제약 조건과 고려 사항을 바탕으로 서로 다른 도구를 사용하여 작업합니다. 디자이너는 창의성과 탐구를 위해 최적화하고, 개발자는 구조와 유지 관리 가능성을 위해 최적화합니다. Figma에서는 디자이너와 개발자가 자유 형식 탐색과 구조화되고 체계적인 구현 사이를 원활하게 이동할 수 있는 세상을 상상합니다. Code Connect는 그 방향으로 나아가는 또 다른 단계입니다.

Code Connect는 코드의 힘을 디자인 도구에 도입하여 이러한 격차를 해소하는 것을 목표로 합니다. 내부적으로 Code Connect는 JavaScript 및 TypeScript 프로젝트용 npm 과 SwiftUI 프로젝트용 Swift Package Manager를 통해 제공되는 유틸리티입니다. 이를 통해 개발자는 작업 중인 플랫폼에 관계없이 자신의 프로젝트에 Code Connect를 쉽게 설치하고 사용할 수 있습니다. 곧 더 많은 플랫폼 지원이 예정되어 있는 Code Connect는 개발자가 있는 곳에서 기존 도구 및 작업 흐름에 원활하게 통합되는 것을 목표로 합니다.
패키지 및 설정 지침은 GitHub에 있으며 개발자는 간단한 명령줄 인터페이스를 통해 설치할 수 있습니다. 이는 개발자가 이미 알고 사용하는 도구 및 워크플로에 매핑됩니다.

Code Connect를 설치하면 디자인 시스템 팀은 상황에 맞게 모형과 연결된 디자인 시스템 사용 방법에 대한 모범 사례와 문서를 표면화하고 배포할 수 있습니다. 따라서 개발자가 모형을 클릭할 때 디자인 시스템에서 모형을 구축하는 방법을 파악하기 위해 수많은 문서와 코드를 검색할 필요가 없습니다. 대신, 이를 클릭하면 디자인 시스템 팀에서 게시한 필요한 승인되고 유지 관리되는 코드 샘플을 얻을 수 있습니다.

여기에는 큰 이점이 있습니다. 개발자가 구성 요소를 다시 작성하지 않으므로 유지 관리할 코드가 줄어듭니다. 처음부터 구성 요소를 만드는 대신 이미 있는 것을 사용함으로써 개발자는 보다 효율적이고 효과적으로 작업할 수 있습니다. 그리고 디자인 시스템을 더 잘 준수하면 애플리케이션 전반에 걸쳐 접근성과 일관성을 더 쉽게 향상시킬 수 있습니다.

개발자가 Code Connect를 사용하면 새 코드가 생성되지 않습니다. 그들은 디자인 시스템 팀이 게시한 승인되고 유지 관리되는 코드 샘플과 문서에 액세스하고 있습니다. 이는 오류나 불일치를 초래할 수 있는 자동화된 코드 생성에 의존하지 않고 디자인 시스템 지침의 일관성과 준수를 보장하는 데 도움이 됩니다. Code Connect는 디자인 시스템에서 기존 코드와 문서를 표면화하고 배포하는 것입니다. 디자인 시스템을 저항이 가장 적은 경로로 만듦으로써 채택을 장려하고 모든 사람이 동일한 소스에서 작업하도록 할 수 있습니다.

이는 팀 규모가 커질 때 특히 중요합니다. 소규모 팀인 경우 모든 사람이 동일한 정보를 공유하는 것이 쉽습니다. 그러나 성장함에 따라 사일로가 형성되기 시작합니다. 디자이너와 개발자는 분리되어 작업하기 시작하고 디자인 시스템은 공유 표준이라기보다는 느슨한 지침 집합에 가깝습니다. Code Connect를 사용하면 팀의 규모에 관계없이 팀이 쉽게 동기화를 유지할 수 있기를 원합니다.

Code Connect는 시작에 불과합니다. 앞으로 Code Connect는 설계 및 개발 워크플로를 더욱 통합하기 위한 많은 흥미로운 가능성을 열어줍니다. 예를 들어 코드와 디자인 모두에서 디자인 시스템 사용에 대한 자동 감사를 활성화하여 디자인과 코드가 동기화되지 않은 영역을 식별할 수 있습니다. 또한 디자인 시스템 사용에 대한 분석 및 통찰력을 제공하여 팀이 시스템이 실제로 어떻게 사용되는지 더 잘 이해할 수 있는 기회를 열어줄 수도 있습니다. 또 다른 가능성은 구성 요소 업데이트에 대한 설계와 엔지니어링 간의 승인 흐름을 활성화하여 디자인 시스템의 변경 사항을 팀 전체에서 적절하게 검토하고 조정할 수 있다는 것입니다.

이러한 특정 기능은 현재 로드맵에 없지만 디자인과 코드를 연결하면 미래 탐색과 혁신을 위한 완전히 새로운 기회의 세계가 열립니다. 우리의 비전은 단순한 디자인 시스템이나 구성 요소를 넘어 디자인과 코드 사이에 더욱 깊은 연결을 만드는 것입니다. 변수, 아이콘, 타이포그래피 등 디자인과 관련된 모든 것들이 연결되는 미래를 상상해 보세요. Code Connect는 그 기반을 다지고 있으며, 이 기술이 앞으로 더욱 강력한 워크플로를 지원하도록 어떻게 발전할지 기대됩니다.

Code Connect는 Figma Organization 및 Enterprise 요금제 에 대해 베타 버전으로 제공될 예정 이며 일반 출시는 올해 말에 예정되어 있습니다. 베타는 아이디어를 제시하고, 테스트하고, 커뮤니티로부터 피드백을 받는 것입니다. 우리는 Android 및 웹 프레임워크와 같은 추가 플랫폼에 대한 지원을 통해 구성 요소 플레이그라운드를 포함하여 Code Connect를 Figma 워크플로에 완전히 통합할 계획입니다.

https://www.figma.com/blog/introducing-code-connect/