figma2024년 1월 24일

개발 모드의 향후 계획 (새 탭에서 열림)

Figma는 Dev Mode 무료 베타 종료를 앞두고 주석, 변경 사항 비교 개선, 플러그인, Jira·VS Code 연동 기능을 공개했다. 이를 통해 디자이너와 개발자 간 핸드오프에 필요한 맥락을 강화하고, 조직별 기술 스택과 디자인 시스템에 맞춘 개발 워크플로를 지원한다. Dev Mode는 2024년 1월 31일부터 무료 베타를 종료하고 유료 좌석이 필요해진다. ## 디자인과 연결되는 주석 기능 - 디자이너가 디자인 레이어에 설명, 속성, 사양, 측정값을 직접 추가할 수 있다. - 클릭과 드래그만으로 치수와 간격을 표시해 개발자에게 구체적인 구현 정보를 전달한다. - 주석이 특정 레이어에 연결되므로 디자인이 변경되면 속성이나 측정값도 함께 업데이트된다. - 확대·축소 수준에 따라 주석이 자동으로 표시되거나 숨겨져 캔버스를 복잡하게 만들지 않는다. - 플러그인 API를 이용하면 여러 레이어에 주석을 일괄 생성하고 관리할 수 있다. ## 시각적·코드 기반 변경 사항 비교 - Compare Changes 기능이 개편되어 디자인 변경 사항을 시각적 차이와 코드 차이로 모두 확인할 수 있다. - 주석 기능과 결합해 어떤 디자인 요소가 바뀌었고 구현에 어떤 영향을 주는지 파악하기 쉬워졌다. - Figma for Jira 앱을 사용하면 Jira 이슈에 디자인 맥락을 삽입할 수 있다. - 디자인이 변경될 때 Jira에서 알림을 받아 핸드오프 과정에서 업데이트를 놓치지 않도록 지원한다. ## 조직별 코드 생성과 플러그인 - 조직마다 다른 개발 환경에 맞춰 HTML, React, Tailwind, Bootstrap 등 다양한 형식의 코드를 생성할 수 있다. - 디자인 시스템 컴포넌트와 실제 코드베이스의 컴포넌트 연결 여부를 확인하는 플러그인을 만들 수 있다. - 플러그인에 내부 API 안내, 디자인 시스템 문서 링크, 사용 가능한 컴포넌트 정보 등을 포함할 수 있다. - Enterprise 관리자는 특정 플러그인을 조직 전체에 고정하고 Dev Mode에서 기본 실행되도록 설정할 수 있다. - Razorpay는 자체 Dev Mode 플러그인인 RazorSharp를 구축해 디자인에 대응하는 코드를 자동 생성했다. ## Figma for VS Code 개선 - VS Code 안에서 Figma 디자인을 탐색하고 검사할 수 있도록 확장 기능의 탐색성과 검색성이 개선됐다. - 여러 페이지와 무한 캔버스를 직접 이동하는 대신 프레임을 그리드 형태로 선택할 수 있다. - Focus View를 통해 개별 프레임을 집중해서 확인할 수 있다. - VS Code를 떠나지 않고 Figma 플러그인을 실행할 수 있어, 사내 도구나 코드 생성 플러그인을 개발 환경에서 바로 사용할 수 있다. ## Dev Mode 유료 전환 - Dev Mode는 2024년 1월 31일 무료 베타에서 정식 서비스로 전환된다. - 이후 사용하려면 플랜과 좌석 유형에 따라 유료 Dev Mode 좌석이 필요하다. - 무료 베타 기간 동안 사용자 피드백을 반영해 200개 이상의 기능과 수정 사항이 추가됐다. 조직은 디자인 시스템과 실제 코드베이스의 연결이 중요하다면 주석과 플러그인을 우선 도입하고, 개발자가 VS Code 중심으로 작업한다면 Figma for VS Code와 사내 플러그인 연동을 검토하는 것이 효과적이다. 유료 전환 전 팀별 좌석과 플러그인 운영 정책도 함께 정하는 것이 좋다.

bootstrapfigmadesign-systemsdev-mode+4

figma2018년 11월 7일

Figma에서 아토믹 디자인 시스템 (새 탭에서 열림)

littleBits 팀은 약 6개월 안에 iOS·Android용 모바일·태블릿 앱 네 개를 출시해야 했고, 이를 위해 Figma에서 Atomic Design 기반의 디자인 시스템을 구축했다. 핵심은 재사용 빈도와 실제 개발 구조를 기준으로 원자·컴포넌트를 정의하고, 의미론적 색상과 텍스트 스타일을 조합해 유연성을 확보하는 것이었다. 결과적으로 Figma의 컴포넌트 구조가 React Native 컴포넌트와 자연스럽게 대응했고, 이후 반응형 레이아웃 템플릿으로 확장할 수 있는 기반이 마련됐다. ## 원자 수준의 디자인 토큰 - 텍스트 스타일과 색상은 Figma Styles로 정의했다. - 아이콘은 외부 아이콘 세트를 가져온 뒤 Figma 컴포넌트로 변환했다. - 색상 이름은 Bootstrap의 명명 방식을 참고하되, 테마 변경을 고려해 의미론적으로 지정했다. - 예: `bg-light`는 배경용 색상 - 예: `ui-dark`는 기본 전경 요소용 색상 - 기본 UI·그레이스케일 색상 외에 브랜드 색상, 배경, 오버레이, 외곽선용 색상 팔레트를 추가했다. - 색상값 자체보다 사용 목적을 이름에 반영하면 전체 디자인에서 색상을 일괄 수정하기 쉽고, 변경으로 인한 오류도 줄일 수 있다. ## 복잡한 계층 대신 ‘컴포넌트’로 단순화 - Atomic Design의 ‘분자’와 ‘유기체’가 여러 템플릿에서 반복 사용되는 경우가 많지 않다는 점을 발견했다. - 따라서 해당 계층을 세분화하지 않고 모두 `Components`로 통합했다. - 이 구조는 다음과 같은 React Native 컴포넌트 구조와도 잘 맞았다. - 카드 - 툴팁 - 버튼 - 기타 반복 UI 요소 - 이론적인 Atomic Design 분류보다 실제 재사용 패턴과 개발 구조에 맞춘 단순한 분류를 선택한 것이다. ## 스타일 조합으로 불필요한 컴포넌트 줄이기 - 텍스트 스타일과 색상 스와치를 자유롭게 조합할 수 있으므로, 색상·텍스트 스타일 조합마다 별도의 컴포넌트를 만들지 않았다. - 대신 스타일 가이드를 제공하고, 실제 템플릿에서 필요한 조합을 직접 적용했다. - 하나의 텍스트 상자 안에서도 여러 텍스트 스타일을 섞을 수 있게 해 가변적인 문구 길이에 대응했다. - Figma Styles 도입으로 컴포넌트 내부의 레이어 구조가 단순해졌고, 문서 사용성과 성능도 개선됐다. ## 버튼은 중첩 컴포넌트로 관리 - 버튼은 디자인에서 반복적으로 사용되고, 외곽선 등 중앙 관리가 어려운 속성을 포함하므로 별도의 중첩 컴포넌트로 만들었다. - 주요 버튼 유형을 다음과 같이 분리했다. - Primary - Secondary - Tertiary - 반복 사용될 가능성이 높은 특수 버튼도 별도 컴포넌트로 정의했다. - 모든 요소를 무조건 조합형 스타일로 처리하지 않고, 반복성과 관리 필요성이 높은 UI만 컴포넌트화한 것이 특징이다. ## 디자인 시스템과 개발 시스템의 연결 - Figma에서 정의한 컴포넌트 체계가 React Native에서 구현할 컴포넌트와 직접 대응하도록 설계됐다. - 디자인과 코드 사이의 구조적 차이를 줄여 협업과 구현을 쉽게 만들었다. - 완성된 컴포넌트 기반은 이후 모바일·태블릿 화면을 위한 반응형 레이아웃 템플릿 구축의 출발점이 됐다. 실무에서는 Atomic Design의 계층을 그대로 적용하기보다, 실제 재사용 빈도와 개발 컴포넌트 구조를 기준으로 단순화하는 것이 효과적이다. 색상과 텍스트는 의미론적 스타일로 관리하고, 반복성과 변경 가능성이 높은 요소만 컴포넌트로 만들면 유지보수성과 확장성을 함께 확보할 수 있다.

bootstrapfigmadesign-systemsreact-native+2