Figma 프레임은 씬으로, 씬은 Figma 프레임으로.
SSHOW Figma 플러그인은 Figma 프레임을 .sshow 파일로 만들고, .sshow 파일의 씬을 다시 Figma 프레임으로 만듭니다. 변환은 인터넷에 연결하지 않고 Figma 안에서만 이루어집니다.
Figma 디자인을 SSHOW로 보내기
Figma 디자인 파일에서 씬으로 만들 프레임을 먼저 선택하세요. 섹션이나 그룹 안에 들지 않고 페이지에 바로 놓인 최상위 프레임 하나가 씬 하나가 됩니다.
플러그인이 처음이라면 Figma 커뮤니티의 SSHOW에서 SSHOW Figma Plugin을 찾아, 이 디자인 파일에서 한 번 실행하거나 저장해 두세요. 그다음부터 플러그인 메뉴에 보입니다.
-
Export to SSHOW 열기
선택한 프레임의 이름(캔버스에서 프레임 위에 보이는 이름)을 우클릭해 플러그인 메뉴를 여세요. SSHOW Figma Plugin › Export to SSHOW를 고르세요. 패널이 열리고, Selected 옆에 선택한 프레임 수가 보입니다. 패널을 연 채로 프레임을 다시 선택해도 수가 바로 바뀝니다.
Export to SSHOW를 고르면 패널이 열리고, Selected 옆에 선택한 프레임 수가 보입니다. 영상: Figma에서 Export to SSHOW를 고르면, 빈 바탕에 플러그인 창이 나타나 채워지고 Selected 옆에 3, File name에 Cover가 보입니다. -
범위와 이름 정하기
페이지의 최상위 프레임을 모두 보내려면 All on page를 누르세요. File name에는 첫 프레임의 이름이 들어 있습니다. 한글과 띄어쓰기는 _로 바뀌거나 빠지고, 남는 글자가 없으면 design이 됩니다. 바꾸려면 영문으로 입력하세요.
-
.sshow 파일 내려받기
Download .sshow를 누르세요. 파일이 내려받아지고, 패널 아래 줄에 'Downloaded'와 파일 이름이 보입니다. 옵션 아래 상자에는 변환 결과가 영어로 나옵니다. 모두 그대로 옮겨졌으면 'All properties converted faithfully.'입니다. 아니면 바뀌거나 빠진 것이 개수와 함께 적힙니다.
Download .sshow를 누르자 'Downloaded'와 파일 이름이 뜨고, 위 상자에 변환 결과가 나옵니다. 영상: File name이 launch-deck인 Export to SSHOW 패널에서 Download .sshow를 누르자, 아래 줄이 Building .sshow…에서 Downloaded launch-deck.sshow로 바뀌고 옵션 아래 상자에 All properties converted faithfully.가 보입니다. -
업로드 창 열기
SSHOW Studio 홈 오른쪽 위의 새 프로젝트를 누르세요. 창이 열리면 .sshow 파일 업로드를 누르세요. 파일을 고르는 창이 열립니다.
새 프로젝트를 누르고 .sshow 파일 업로드를 누르자 파일을 고르는 창이 열립니다. 영상: Studio 홈 오른쪽 위의 새 프로젝트를 누르자 무엇을 만들까요? 창이 열리고, .sshow 파일 업로드를 누르자 파일을 고르는 창이 열립니다. -
파일 올리기
방금 내려받은 .sshow 파일을 고르세요. 파일이 올라가면 그 프로젝트가 에디터에서 열립니다. 씬 목록(왼쪽 위)에 Figma 프레임의 이름이 씬으로 보입니다.
파일을 고르자 에디터가 열리고, 씬 목록에 Figma 프레임의 이름이 씬으로 보입니다. 영상: launch-deck.sshow를 고르자 올라가는 막대가 차고 에디터가 열리며, 씬 목록에 Cover · Feature · Closing이, 오브젝트 목록에 Card · Title이 보입니다.
글자마다 모양이 다른 텍스트는 한 가지 모양으로 합쳐집니다
SSHOW의 텍스트는 오브젝트 하나에 모양이 하나입니다. 한 텍스트 안에 폰트나 굵기가 섞여 있으면 전체가 Pretendard 보통 굵기가 되고, 크기가 섞여 있으면 26px이 됩니다. 색이 섞여 있으면 채우기가 빠져 글자가 보이지 않습니다.
보내기 전에 모양이 다른 낱말을 따로 텍스트 레이어로 나누세요. 이미 보냈다면 SSHOW에서 그 텍스트를 선택하고 채우기와 그라디언트에서처럼 칠을 더하세요.
보낸 디자인에 움직임 더하기
보낸 씬에는 트랜지션이 없어서, 재생하면 다음 씬으로 바로 넘어갑니다. Figma의 프로토타입 연결과 애니메이션도 넘어오지 않습니다.
Figma에서 프레임마다 이름이 같은 레이어는 SSHOW에서도 이름이 같은 오브젝트가 됩니다. 트랜지션을 켜면 그 오브젝트가 다음 씬의 자리로 이어서 움직입니다. Figma의 Smart Animate처럼 이름으로 짝을 짓고, 그룹이나 프레임 안의 레이어라면 그 그룹 · 프레임의 이름도 같아야 합니다.
-
첫 씬 선택하기
씬 목록에서 첫 씬을 선택하세요. 트랜지션은 다음 씬으로 떠나는 씬에 켭니다.
씬 목록에서 첫 씬을 선택하면 그 씬이 열리고, 선택한 오브젝트는 없습니다. 영상: 씬 목록에서 첫 씬을 클릭하자 첫 씬이 열리고, 원이 왼쪽의 처음 자리에 작게 보입니다. -
트랜지션 켜기
오른쪽 위 버튼 줄의 첫 번째, 곡선 모양 버튼을 누르세요. 모션 - 트랜지션 패널이 열립니다. 이징을 누르고 적용을 누르세요. 길이와 곡선은 트랜지션 다듬기에서 고칩니다.
곡선 모양 버튼으로 모션 패널을 열고, 이징을 누른 뒤 적용을 누릅니다. 영상: 오른쪽 위 곡선 모양 버튼을 누르자 모션 - 트랜지션 패널이 열립니다. 이징을 누르자 곡선이 나타나고, 적용을 누릅니다. -
트랜지션 복사하기
패널 제목 줄에서 네모 두 개가 겹친 모양의 복사 버튼을 누르세요. 이 씬의 트랜지션이 기억됩니다.
-
다음 씬에 붙여넣기
씬 목록에서 다음 씬을 선택하고, 클립보드 모양의 붙여넣기 버튼을 누르세요. 같은 트랜지션이 바로 적용됩니다. 마지막 씬을 뺀 씬마다 되풀이하세요.
다음 씬을 연 모션 패널에서 붙여넣기를 누르자, 복사해 둔 이징이 바로 적용됩니다. 영상: 둘째 씬을 대상으로 연 모션 패널에서 붙여넣기 버튼을 누르자, 트랜지션 없음이던 패널에 첫 씬에서 복사한 이징 곡선이 바로 적용됩니다. -
재생해서 보기
세모 모양 재생 버튼 옆의 재생 선택지를 누르고 처음부터 재생을 고르세요. F5 키를 눌러도 됩니다. 화면을 클릭하면 이름이 같은 오브젝트가 다음 씬의 자리로 이어서 움직입니다. esc 키를 누르면 편집 화면으로 돌아옵니다.
재생 화면을 클릭하자 카드가 다음 씬의 자리로 미끄러지며 커집니다. 영상: Figma에서 보낸 덱의 재생 화면을 클릭하자, Card가 다음 씬의 자리로 미끄러지며 커지고 Title의 글자와 자리가 바뀝니다.
SSHOW 프로젝트를 Figma로 가져오기
Figma 데스크톱 앱이나 Chrome에서 하세요. Safari에서는 플러그인이 파일을 읽지 못합니다.
-
.sshow 파일 받기
SSHOW 에디터 왼쪽 위의 SSHOW 로고를 눌러 메뉴를 여세요. 사본 저장을 고르면 프로젝트가 .sshow 파일로 내려받아집니다. ⌘⇧S를 눌러도 됩니다.
메뉴에서 사본 저장을 고르자 .sshow 파일이 내려받아집니다. 영상: 왼쪽 위 SSHOW 로고를 눌러 메뉴를 열고 사본 저장을 고르자, 브라우저가 .sshow 파일을 내려받습니다. -
Import by SSHOW 열기
Figma 디자인 파일을 여세요. 플러그인 메뉴에서 SSHOW Figma Plugin › Import by SSHOW를 고르세요. 파일을 고르는 상자가 있는 패널이 열립니다.
-
파일 고르기
점선 상자 Choose a .sshow file을 누르고 받은 파일을 고르세요. 파일을 그 상자 위로 끌어다 놓아도 됩니다. 아래 줄에 'Ready'와 이미지 수가 보이면 준비된 것입니다.
파일을 고르자 상자에 파일 이름이, 아래 줄에 'Ready'가 보입니다. 영상: Import by SSHOW 패널에서 Choose a .sshow file을 누르고 launch-deck.sshow를 고르자, 상자에 파일 이름이, 아래 줄에 Ready가 보입니다. -
Figma에 만들기
Import to Figma를 누르세요. 씬마다 프레임이 하나씩 생기고, 모두 선택된 채 화면에 맞춰집니다. 아래 줄에 'Imported to Figma.'가 보이고, 상자에 변환 결과가 나옵니다.
Import to Figma를 누르자 프레임이 생기고 'Imported to Figma.'가 뜹니다. 영상: Import to Figma를 누르자 씬마다 프레임이 생겨 선택된 채 화면에 맞춰지고, 아래 줄에 Imported to Figma.가 보입니다.
가져온 프레임은 모두 한 자리에 겹쳐 생깁니다
지금은 Columns per row 값과 상관없이, 모든 프레임이 캔버스의 같은 자리(X 0, Y 0)에 겹쳐 만들어집니다. 마지막 씬이 맨 위에 덮여 보이니, 레이어 목록에서 프레임을 하나씩 선택해 옆으로 옮기세요.
옮겨지는 것과 빠지는 것
| 대상 | Figma에서 SSHOW로 | SSHOW에서 Figma로 |
|---|---|---|
| 프레임 · 씬 | 최상위 프레임 하나가 씬 하나가 되고, 이름과 배경색이 따라옵니다. 레이어 목록의 맨 아래 프레임이 첫 씬입니다. 씬 크기는 첫 프레임의 크기를 따르니, 크기가 같은 프레임끼리 보내세요. 프레임 배경의 이미지는 빠집니다. | 씬 하나가 프레임 하나가 되고, 이름과 배경이 따라옵니다. |
| 도형 · 패스 | 사각형과 타원은 그대로 옮겨지고, 가운데를 비운 원도 남습니다. 일부만 그린 호는 온전한 원이 됩니다. 벡터 · 선 · 별 · 다각형은 패스가 되고, 불리언 도형처럼 옮길 수 없는 레이어는 PNG 이미지가 됩니다. | 사각형 · 원 · 패스가 사각형 · 타원 · 벡터가 됩니다. |
| 텍스트 | 글자 · 폰트 · 크기 · 굵기 · 줄 높이 · 자간 · 정렬이 옮겨지고, 폰트는 SSHOW의 폰트 목록이나 이 컴퓨터에서 찾습니다. 대소문자 바꾸기 · 목록 · 들여쓰기 · 문단 간격은 빠집니다. | Figma에서 쓸 수 없는 폰트는 같은 굵기의 Inter로 바뀌어, 줄바꿈이 달라질 수 있습니다. |
| 이미지 | 이미지로 채운 사각형은 이미지 오브젝트가 되고, 사진이 사각형 크기에 맞춰 늘어납니다. 바둑판처럼 반복한 이미지는 채우기로 남습니다. | 이미지 오브젝트는 이미지로 채운 사각형이 됩니다. 비율을 바꿔 늘인 이미지는 비율을 지킨 채 잘립니다. |
| 그룹 · 프레임 | 그룹은 그룹이 되고, 안쪽의 프레임 · 컴포넌트 · 인스턴스는 SSHOW 프레임이 됩니다. 오토 레이아웃은 지금 자리에 고정됩니다. 마스크는 그룹의 맨 아래 레이어일 때만 남습니다. | 그룹과 프레임은 그대로 옮겨집니다. 마스크는 그룹의 맨 아래 레이어가 마스크가 되고, 마스크 반전은 보통 마스크가 됩니다. |
| 채우기 · 선 · 효과 | 단색 · 선형 · 원형 · 각도 · 다이아몬드 그라디언트, 선의 두께 · 끝 모양 · 이음 모양 · 파선, 드롭 섀도 · 이너 섀도 · 흐림 · 배경 흐림이 옮겨집니다. 화살표 끝, 칠마다 정한 블렌드, 그 밖의 효과는 빠집니다. | 같은 것이 옮겨집니다. 선의 화살촉과 트림, 유리 · 노이즈 · 보정은 빠집니다. 아우터 글로우는 그림자가 되고, 그라디언트를 켠 흐림은 고른 흐림이 됩니다. |
| 위치 · 회전 · 3D | 위치 · 크기 · 회전 · 뒤집기가 옮겨집니다. 회전의 기준점인 앵커는 오브젝트의 왼쪽 위 모서리에 놓입니다. | 평면 회전은 옮겨지고, 3D 회전 · 깊이 · 원근과 네 모서리 왜곡은 빠집니다. |
| 영상 · 오디오 · 표 | Figma의 영상 채우기는 빠집니다. | 영상 · 오디오 · 표는 오브젝트 이름이 그대로 붙은 회색 빈 프레임이 됩니다. |
| 변수 | Figma 변수에 연결한 색과 모서리 곡률은 그 값으로 바뀌고, 연결은 끊깁니다. | 변수를 쓴 색은 검정이 됩니다. 글자 속 변수는 값 대신 중괄호로 쓴 이름이 그대로 들어갑니다. |
| 움직임 · 노트 | 프로토타입 연결과 애니메이션은 빠지고, 씬에는 트랜지션이 없습니다. | 트랜지션 · 애니메이션 · 인터랙션 · 노트 · 씬 설명은 빠집니다. |
| 이름 · 표시 · 핀 | 레이어 이름 · 숨김 · 잠금 · 불투명도 · 블렌드 모드가 옮겨지고, 제약은 핀이 됩니다. | 같은 것이 옮겨지고, 핀은 제약이 됩니다. |
프로젝트 이름 · 로컬 파일 · 회전 기준점
한글 이름을 붙이려면. Studio의 프로젝트 이름은 올린 파일의 이름을 따릅니다. 에디터 왼쪽 위의 이름 칸을 누르면 원래 이름이 모두 선택됩니다. 새 이름을 입력하고 ↩ 키를 누르면 프로젝트 이름도 함께 바뀝니다.
이 컴퓨터의 파일로 열려면. SSHOW 데스크톱 앱의 파일 메뉴에서 .sshow 파일 열기를 고르세요. 로컬 파일은 저절로 저장되지 않으니 ⌘S로 저장하세요. 자세한 것은 저장과 실행 취소에 있습니다.
가운데를 축으로 돌리려면. Figma에서 온 오브젝트는 앵커가 왼쪽 위 모서리에 있어, 돌리면 그 모서리를 축으로 돕니다. 툴바의 앵커 편집(A)을 고르고, 십자 모양 앵커를 정가운데로 끄세요. 앵커는 정가운데에 달라붙습니다.
보내기 · 가져오기가 안 될 때
-
SSHOW Figma Plugin이 왜 보이지 않나요?
Figma 디자인 파일에서만 실행되는 플러그인입니다. FigJam 같은 다른 종류의 파일이라면 디자인 파일을 여세요. 플러그인이 처음이라면 Figma 커뮤니티의 SSHOW에서 SSHOW Figma Plugin을 찾아, 이 디자인 파일에서 한 번 실행하거나 저장해 두세요. 그다음부터 플러그인 메뉴에 보입니다. -
프레임 수가 왜 0으로 나오나요?
지금 페이지의 최상위 프레임만 셉니다. 섹션이나 그룹 안의 프레임은 페이지로 꺼내고, 최상위에 놓인 컴포넌트는 프레임 안에 넣으세요. Selected는 프레임 자체를 선택했을 때만 셉니다. 프레임 안의 레이어를 선택했다면 프레임을 다시 선택하세요. -
재생하면 왜 씬이 바로 바뀌나요?
보낸 씬에는 트랜지션이 없습니다. 앞 씬을 선택하고 모션 패널에서 이징과 적용을 누르세요. -
폰트가 왜 다르게 보이나요?
Figma에서 쓴 폰트가 SSHOW의 폰트 목록에도 이 컴퓨터에도 없을 때입니다. 폰트 파일을 에디터에 끌어다 놓아 프로젝트 폰트로 만든 뒤, 텍스트를 선택하고 폰트 패밀리에서 그 폰트를 고르세요. -
사진이 왜 늘어나 보이나요?
Figma에서 사진과 비율이 다른 사각형에 채운 사진은, SSHOW에서 사각형 크기에 맞춰 늘어납니다. 사진을 선택하고 오른쪽 이미지 패널의 비율에서 원점을 누르세요. 너비는 그대로, 높이가 사진의 원래 비율로 바뀝니다. -
Safari에서는 왜 파일을 고르지 못하나요?
Safari는 Figma 플러그인이 파일을 읽는 것을 막아, 'Could not read the file.'이 뜹니다. Figma 데스크톱 앱이나 Chrome에서 다시 하세요.
2026년 10월 13일에 고침 · 이 페이지의 영상은 현재 에디터로 녹화했습니다.