SSHOW Figma 플러그인은 두 디자인 환경을 잇습니다. Figma 레이아웃을 SSHOW로 넘겨 모션과 인터랙션을 더하거나, 완성한 SSHOW 프로젝트를 다시 Figma로 가져와 이어서 다듬을 수 있습니다. 모든 작업은 Figma 안에서 이루어지며 — 파일이 기기를 떠나지 않습니다.
참고 플러그인은 네트워크 접근을 요청하지 않습니다. 모든 변환은 Figma 안에서 로컬로 처리되어, 디자인에 관한 어떤 것도 외부로 업로드되지 않습니다.
Figma에서 SSHOW 보기두 방향
플러그인은 Figma의 플러그인 메뉴에 두 명령을 추가합니다 — 방향마다 하나씩.
시작하기
플러그인을 여는 것부터 첫 왕복까지.
-
1
플러그인 열기
Figma에서 플러그인 → SSHOW Figma Plugin을 실행한 뒤 Export to SSHOW 또는 Import by SSHOW를 고릅니다.
-
2
범위 고르기
내보낼 때는 원하는 프레임을 선택하거나 — All on page로 바꿔 모든 최상위 프레임을 담습니다.
-
3
변환 실행
파일 이름을 정하고 Download .sshow를 누르거나, .sshow 파일을 올려 두고 Import to Figma를 누릅니다.
-
4
이어서 작업
SSHOW에서 .sshow를 열어 모션을 더하거나, Figma에서 다시 만들어진 프레임을 계속 편집하세요 — 그런 다음 반대 방향으로 다시 보낼 수 있습니다.
Export to SSHOW
내보내기는 최상위 Figma 프레임을 SSHOW Scene으로 변환하며, 각 기능이 허용하는 한 레이아웃·타입·스타일을 충실히 보존합니다.
- 범위 — 선택한 프레임만 내보내거나, All on page로 바꿔 모든 최상위 프레임을 한 번에 포함합니다.
- 파일 이름 — 다운로드 이름을 정하면, SSHOW는 그 .sshow를 네이티브 프로젝트로 그대로 엽니다.
- 프레임이 Scene이 됩니다 — 최상위 프레임 하나가 Scene 하나이며, 첫 프레임의 크기가 프로젝트 캔버스 크기를 정합니다.
팁 내보내기 전에 함께 묶일 것들을 프레임 안에 모아 두세요. 최상위 프레임만 Scene이 되고, 페이지에 흩어진 Object는 제외됩니다.
Import by SSHOW
가져오기는 .sshow 프로젝트를 편집 가능한 Figma 노드로 다시 만들어 — SSHOW 덱을 Figma 도구로 검토·리믹스·인쇄할 때 유용합니다.
- 파일 고르기 — 드롭 영역을 눌러 .sshow를 고르거나, 파일을 패널 위로 바로 끌어다 놓습니다.
- 행당 열 수 — 새 줄로 넘어가기 전에 Scene 몇 개를 나란히 둘지 정해, 큰 덱도 깔끔하게 유지합니다.
- Scene이 프레임이 됩니다 — 모든 Scene이 그 Object와 함께 네이티브 프레임으로 다시 만들어져 Figma에서 편집할 준비가 됩니다.
무엇이 변환되나
플러그인은 각 Figma 노드를 가장 가까운 SSHOW Object로, 그리고 그 반대로 매핑합니다.
- 프레임 → Scene
- 최상위 프레임은 Scene이 되고, 그 배경 채우기는 Scene 배경이 됩니다. 컴포넌트·인스턴스·컴포넌트 세트도 프레임으로 들어옵니다.
- 사각형 & 타원
- SSHOW의 사각형·원 Object로 매핑되며, 모서리 반경과 호 데이터가 보존됩니다.
- 텍스트
- 글꼴이 있는 경우 문자열, 글꼴, 크기, 줄 높이, 정렬, 자간을 유지합니다.
- 이미지
- 이미지 채우기와 이미지 기반 사각형은 내장 이미지 Object로 옮겨집니다.
- 벡터·선·별·다각형
- SSHOW 패스 Object가 되어, 커스텀 도형이 윤곽을 그대로 유지합니다.
- 그룹
- 컨테이너와 그룹은 클리핑을 유지한 채 SSHOW 그룹과 프레임으로 들어옵니다.
충실도 & 한계
대부분은 깔끔하게 변환되지만, 두 도구가 똑같은 기능을 모두 지원하지는 않습니다. 미리 알아두면 좋은 점들입니다:
- 그라디언트
- 선형·방사형 그라디언트는 양방향으로 보존됩니다. 각도형·다이아몬드 그라디언트는 Figma에서 가져올 때는 그대로지만, Figma로 돌려보낼 때는 평균 색으로 단순화됩니다.
- 선(Stroke)
- 단색과 그라디언트 선이 두께, 끝 모양, 조인, 점선 패턴을 그대로 가져갑니다.
- 효과
- 드롭·인너 섀도와 레이어·배경 흐림은 그대로 매핑되며, 그 밖의 효과는 근사하지 않고 건너뜁니다.
- 변수
- Figma 변수(디자인 토큰)에 연결된 색은 라이브러리 변수를 포함해 실제 값으로 해석됩니다.
- 글꼴
- SSHOW나 Figma가 불러올 수 없는 글꼴은 기본 글꼴로 대체되며, 이 과정에서 줄바꿈이 달라질 수 있습니다.
- 비디오 & 오디오
- 비디오·오디오 Object는 Figma에 대응이 없어, 가져올 때 이름이 붙은 자리표시 프레임으로 들어옵니다. 미디어는 SSHOW에서 다시 추가하세요.
- 모션 & 인터랙션
- Figma는 정적 캔버스라 애니메이션·트랜지션·인터랙션은 가져올 때 함께 오지 않습니다. 움직이는 것은 .sshow를 기준으로 보관하세요.
- 그 밖의 모든 것
- 충실히 대응할 수 없는 노드는 PNG로 래스터화되어 — 더 이상 편집할 수는 없어도 모습은 그대로 유지됩니다.
참고 플러그인이 베타인 만큼, 변환은 픽셀 단위로 완벽한 복제가 아니라 충실한 출발점으로 여기세요. 구조적으로 대응되지 않는 노드도 있어 — 예컨대 불리언 도형은 이미지로 평면화되어 들어옵니다 — 양쪽의 원본을 각각 믿을 기준으로 보관해 두세요.