Paint By JSON

Paint By JSON이란?

Paint By JSON은 자리표시자 텍스트 대신 실시간 REST API 데이터로 프레임을 채울 수 있게 해주는 Figma 플러그인입니다. 엔드포인트에 연결해 플러그인 안에서 JSON 응답을 미리 보고, JSON 경로를 레이어 이름에 매핑한 뒤, 그 매핑을 재사용 가능한 Palette로 저장합니다.

이 플러그인은 실제 콘텐츠 구조를 반영해야 하는 디자인 작업을 위해 만들어졌습니다. 사용자는 저장된 Palette를 프레임이나 반복되는 컴포넌트 세트에 적용하고, 파일 간에 재사용하며, 채워진 디자인을 JSON, Markdown, 또는 핸드오프용 Spec Frame으로 내보낼 수 있습니다.

주요 기능

• 실시간 엔드포인트 또는 GET으로 가져올 수 있는 모의 JSON에 연결해, 정적 예시 대신 실제 데이터 구조로 디자인을 채울 수 있습니다.
• 엔드포인트 연결 시 헤더와 인증 값을 지원해, 디자인 작업 중 보호된 API도 사용할 수 있습니다.
• Figma에서 JSON 경로를 레이어 이름에 매핑해, 파일, 라이브러리, 레이어 구조가 바뀌어도 Palette를 이동 가능하게 유지합니다.
• 엔드포인트 설정, 헤더, 매핑을 재사용 가능한 Palette로 저장해, 같은 데이터 구성을 다시 만들지 않고도 반복 적용할 수 있습니다.
• 값이 캔버스에 들어가기 전에 잘라내기, 통화 형식 지정, 날짜 파싱, 조건 분기, 연결된 변환 같은 기본 변환을 지원합니다.
• 단일 프레임 채우기와 컬렉션 모드를 모두 지원하며, 배열을 반복된 컴포넌트 인스턴스에 적용할 수 있습니다.
• 채워진 디자인을 JSON, Markdown, 또는 Spec Frame으로 내보내 디자인-코드 핸드오프를 지원합니다.
• 플러그인 iframe에서 실행되며, API 응답과 인증 값은 제품 데이터베이스로 보내지지 않고 사용자의 기기에 보관됩니다.

Paint By JSON 사용 방법

먼저 Figma에 플러그인을 설치하고, 사용할 API 또는 JSON 소스의 URL을 연결하세요. 필요하면 헤더나 인증 정보를 추가한 뒤, 플러그인 안에서 응답을 미리 봅니다.

그다음 JSON 필드를 프레임의 레이어 이름에 매핑하고, 표시나 서식에 필요한 변환을 적용합니다. 설정을 Palette로 저장한 뒤, 하나의 프레임이나 반복되는 컴포넌트 세트에 적용하세요.

프레임이 채워지면 다른 파일에서도 Palette를 재사용하거나, 결과를 JSON, Markdown, 또는 핸드오프용 Spec Frame으로 내보낼 수 있습니다.

사용 사례

• 제품이 사용할 동일한 API에서 가져온 실제 사용자 이름, 제목, 가격, 날짜로 제품 화면을 디자인할 때.
• 데이터 값이 평소의 자리표시자 문구보다 더 길거나 짧거나 구조가 다를 때 레이아웃이 유지되는지 테스트할 때.
• 카드, 목록 항목, 기타 컬렉션 기반 인터페이스처럼 배열 응답으로 반복 컴포넌트를 채울 때.
• 디자인 시스템에서 레이어 이름 규칙이 일관될 때, 여러 프레임이나 파일에 같은 데이터 매핑을 재사용할 때.
• 디자인과 기본 데이터 구조를 JSON, Markdown, 또는 Spec Frame 형태로 포함한 핸드오프 산출물을 준비할 때.

FAQ

Paint By JSON은 실시간 API에서만 작동하나요?
아니요. 페이지에 따르면 GET으로 가져올 수만 있다면 실시간 API 응답이나 모의 JSON에 연결할 수 있습니다.

보호된 엔드포인트도 처리할 수 있나요?
네. 플러그인은 엔드포인트 연결 시 헤더나 인증 값을 추가하는 것을 지원합니다.

무엇을 내보낼 수 있나요?
제품 페이지에 따르면 채워진 프레임을 JSON, Markdown, 또는 Spec Frame으로 내보낼 수 있습니다.

API 데이터를 클라우드에 저장하나요?
페이지에 따르면 플러그인은 Figma plugin iframe에서 실행되며, API 응답과 인증 값은 회사 데이터베이스로 전송되지 않고 사용자의 기기에 남아 있습니다.

저장할 수 있는 Palette 수에 제한이 있나요?
페이지에는 무료 요금제와 Pro 요금제를 포함한 요금제 제한이 언급되어 있으며, 표시된 정확한 제품 제한은 무료 플랜 2개 Palette와 Pro 50개 저장된 Palette입니다.

대안

• Figma에서 수동으로 자리표시자 콘텐츠를 넣는 방식으로, 가장 간단한 대안이지만 실제 데이터 구조로 디자인을 테스트할 수는 없습니다.
• 스프레드시트 기반 디자인 워크플로우는 구조화된 콘텐츠에는 도움이 되지만, 보통 Figma에서 JSON 경로를 직접 바인딩하는 방식과는 다른 설정이 필요합니다.
• 일반적인 Figma 데이터 채우기 플러그인은 레이어에 샘플 콘텐츠를 채울 수 있지만, 재사용 가능한 엔드포인트 기반 Palette와 내보내기에 이렇게 특화되어 있지는 않을 수 있습니다.
• 별도의 스펙 문서를 사용하는 디자인 핸드오프는 캔버스 밖에서 데이터 요구사항을 설명할 수 있지만, Figma 프레임 자체에 데이터 매핑을 붙여 두지는 못합니다.