클로드 코드 figma 스킬, 연결 없이 장면 구성도 옮길까

피그마 작업을 옮기려면 먼저 연결해야 한다고 생각하기 쉽습니다.

하지만 이 스킬은 장면 순서를 다시 만드는 작업이라면 별도 연결 없이도 시작할 수 있다고 안내합니다. 디자인에서 어느 부분을 가져올지에 따라 과정은 달라집니다.

핵심 내용

figma 스킬은 Figma 작업물을 HyperFrames의 작업 구성으로 가져오는 용도입니다.
이미지 같은 고정 요소, 색상·글꼴 같은 브랜드 설정, 화면 부품, 움직임 정보는 서로 다른 방식으로 가져옵니다.
장면 순서를 다시 만드는 작업은 이미지 내보내기와 AI의 시간순 구성만으로 처리할 수 있어, 별도 연결 기능이 꼭 필요하지는 않습니다.
가져온 이미지와 관련 기록은 로컬에 고정해 두므로, 이후 결과물도 같은 원본을 기준으로 만들어지도록 설계됐습니다.
움직임과 특수 시각 효과를 가져올 때는 호환되는 Figma 연결 기능이 있으면 활용하고, 없다면 Figma에서 직접 내보낸 자료를 요청합니다.

🧩 figma 한눈에 보기

누적 설치 208,700회 · GitHub 별 56,700개
저장소: heygen-com/hyperframes
보안 감사 3종 모두 통과 (skills.sh 기준)

터미널에 붙여 넣으면 설치됩니다.

npx skills add https://github.com/heygen-com/hyperframes --skill figma

클로드 코드 figma 스킬은 뭔가요

Figma에서 만든 화면을 보며 “이 디자인의 색과 이미지, 부품을 다른 작업에도 그대로 이어 쓰고 싶다”라고 느낀 적 있으시죠? 화면을 눈으로 보며 하나씩 설명하다 보면 빠뜨리는 부분이 생기기 쉽습니다. 특히 이미지, 글꼴 느낌, 색상, 화면 안의 작은 부품이 한 파일에 섞여 있으면 어디서부터 전달해야 할지 막막합니다.

figma 스킬은 Figma 작업물을 HyperFrames의 작업 구성으로 가져오는 데 초점이 맞춰져 있습니다. 여기서 작업 구성은 화면에 들어갈 재료와 순서, 움직임 정보를 묶어 다루는 단위라고 보면 됩니다. 단순히 화면을 참고하는 데 그치지 않고, 필요한 디자인 정보를 종류별로 나눠 가져오도록 설명서가 구성돼 있습니다.

가져오는 대상은 크게 다섯 갈래입니다. 이미지처럼 고정된 요소, 색상·글꼴 등을 담은 브랜드 설정, 재사용할 화면 부품, 움직임, 특수 시각 효과입니다. 모두 같은 통로로 처리하지 않는다는 점이 핵심이죠. 고정 요소와 브랜드 설정, 화면 부품은 주로 Figma 자료를 읽어 오는 방식으로 다루고, 움직임과 특수 효과는 별도 연결 기능이나 직접 내보낸 자료를 활용합니다.

처음부터 Figma 전체를 한꺼번에 넘기려 하기보다 지금 필요한 범위를 정하는 편이 좋습니다. 예를 들어 이미지와 색상만 필요한지, 화면 부품까지 웹 화면 형태로 바꿔야 하는지부터 말해 주세요. 요청 범위가 분명해야 Claude Code도 어떤 정보를 먼저 가져올지 판단하기 쉽거든요.

💡 꿀팁 · 처음 요청할 때는 “이미지·색상·화면 부품 중 무엇이 필요한지”를 한 문장에 함께 적어 주세요.

깔면 무엇이 달라지나요

디자인 파일에는 겉으로 보이는 그림만 담긴 것이 아닙니다. 같은 색을 반복해 쓰는 규칙, 여러 화면에서 돌려 쓰는 버튼이나 카드, 장면이 움직이는 방식도 들어갈 수 있습니다. 디자인을 작업 구성으로 옮길 때 이 차이를 구분하지 않으면 필요한 것보다 적게 가져오거나, 반대로 불필요한 정보까지 붙잡게 됩니다.

이 스킬은 고정된 이미지와 브랜드 설정, 화면 부품을 구분해 다룹니다. 이미지는 독립된 재료로, 색상과 글꼴 같은 설정은 브랜드 규칙으로, 화면 부품은 웹 화면에 쓸 수 있는 형태로 가져오는 흐름입니다. 그래서 “이 화면을 닮게 만들어 줘”처럼 넓은 요청보다는 어떤 재료를 어떤 목적으로 옮길지 밝히는 요청이 더 잘 맞습니다.

원본에서 가져온 이미지는 로컬에 고정해 둡니다. 설명서가 밝힌 목적은 이후 결과물이 매번 달라지지 않도록 같은 재료를 기준으로 작업하게 하는 데 있습니다. 이미 고정된 이미지와 작업 목록 기록, 연결 정보는 가져오는 통로가 바뀌어도 영향을 받지 않는다고 안내합니다. 중간에 처리 방식이 달라질까 걱정된다면 확인해 볼 부분입니다.

개인적으로 가장 반가운 대목은 장면 순서를 다시 만드는 작업입니다. 이 경우 Figma 연결 기능 없이도 이미지 내보내기와 AI가 시간 순서를 조립하는 방식으로 진행할 수 있습니다. 반대로 화면 안의 움직임이나 특수 시각 효과까지 정확히 가져오려면 연결 기능이 있을 때 해당 정보를 쓰고, 없다면 Figma에서 직접 내보낸 자료가 필요합니다.

💡 꿀팁 · 움직임이 필요 없다면 먼저 고정 이미지와 장면 순서만 가져오도록 요청해 작업 범위를 작게 시작하세요.

Claude Code에 어떻게 시키나요

처음부터 복잡한 결과물을 요구하면 무엇이 Figma 원본에서 온 것인지 확인하기 어렵습니다. 한 화면이나 한 장면처럼 작게 정한 뒤, 가져올 대상과 원하는 결과를 함께 말해 보세요. 이 스킬은 디자인 정보를 종류별로 나누는 구조라 요청에도 그 구분을 담는 편이 좋습니다.

이미지와 브랜드 설정이 필요한 상황이라면 이렇게 말할 수 있습니다. “이 Figma 작업에서 고정 이미지와 색상·글꼴 설정을 가져와 작업 구성에 반영해 줘.” 이 문장은 이미지 재료와 브랜드 규칙을 함께 지정합니다. 화면 모양을 다시 활용하려는 목적이 더 크다면 “이 Figma 작업의 재사용 화면 부품을 웹 화면 형태로 가져와 줘.”라고 요청하면 됩니다.

장면의 흐름이 목표라면 별도 연결 기능 없이도 시도할 수 있는 범위가 있습니다. “이 Figma 작업의 이미지 내보내기를 바탕으로 장면 순서를 다시 구성해 줘.”라고 입력해 보세요. 스킬 설명서에는 이런 장면 재구성이 이미지 내보내기와 AI의 시간순 조립으로 가능하다고 적혀 있습니다. 원본의 움직임까지 그대로 옮기겠다는 요청과는 구분해야 합니다.

움직임이나 특수 시각 효과가 포함된 원본이라면 조건을 먼저 밝혀 두는 편이 낫습니다. “이 Figma 작업의 움직임 정보를 가져올 수 있는 연결 기능이 있는지 확인하고, 없다면 직접 내보낼 자료를 알려 줘.”처럼 요청하면 됩니다. 연결 기능이 없을 때 억지로 추정하기보다 필요한 내보내기 자료를 받는 흐름이 이 스킬의 안내와 맞습니다.

💡 꿀팁 · 첫 요청은 화면 하나나 장면 하나로 제한하고, 결과를 확인한 뒤 다음 범위로 넓히세요.

쓸 때 무엇을 확인할까요

Figma에 움직이는 요소가 있다고 해서 언제나 같은 방식으로 가져올 수 있는 것은 아닙니다. 설명서상 고정 이미지, 브랜드 설정, 화면 부품은 자료를 읽어 오는 흐름이 중심입니다. 반면 움직임과 특수 시각 효과는 호환되는 연결 기능의 유무에 따라 처리 경로가 달라집니다. 이 차이를 알고 시작하면 “왜 이 정보는 바로 안 들어오지?” 하는 혼란을 줄일 수 있습니다.

연결 기능이 없다고 작업 자체가 멈추는 것은 아닙니다. 장면 순서를 재구성하는 일은 연결 없이도 가능하고, 움직임이나 특수 효과 자료가 필요할 때는 Figma에서 직접 내보낸 자료를 받는 방법이 제시됩니다. 디자인의 정적인 모습과 시간에 따라 변하는 요소를 나눠 요청하는 편이 현실적입니다.

스킬을 최신 상태로 맞추는 절차도 안내돼 있습니다. 다만 갱신을 실행하기 전에는 사용자에게 확인을 받도록 되어 있습니다. Claude Code가 갱신이 필요하다고 말하더라도 무엇이 함께 바뀌는지 확인하고 동의한 뒤 진행하는 습관이 좋습니다. 이 스킬이 HyperFrames 플러그인 안에 설치된 경우에는 플러그인의 실행 규칙을 우선 따릅니다.

10월 9일부터 이어지는 사흘 휴일 전에 개인 작업을 정리한다면, 완성본 전체보다 다음에 다시 쓸 디자인 재료부터 고르는 방식도 괜찮습니다. 이미지와 색상 규칙, 재사용할 화면 부품을 구분해 두면 휴일 뒤 작업 구성을 이어 갈 때 설명을 다시 길게 쓰지 않아도 됩니다. 다만 원본의 움직임까지 필요하다면 연결 기능 또는 내보낼 자료를 미리 확인해 두세요.

💡 꿀팁 · 갱신을 제안받으면 바로 실행하지 말고, 현재 작업에 필요한 시점인지 먼저 확인한 뒤 동의하세요.

그래서 나에게 무엇이 달라질까

디자인을 말로 길게 풀어 설명하는 시간을 줄이고, Figma 안의 이미지·브랜드 규칙·화면 부품을 목적에 맞춰 나눠 Claude Code에 맡길 수 있습니다. 코드를 잘 모르는 사람도 무엇을 가져올지 구체적으로 말하면 작업의 출발점을 잡기 쉬워집니다. 다만 움직임과 특수 시각 효과에는 별도 조건이 있으므로, 정적인 요소부터 시작하는 편이 부담이 적습니다.

내일 바로 써먹기

설치 뒤 Figma 작업 하나를 골라 이미지, 색상·글꼴 설정, 재사용 화면 부품으로 나눠 적어 보세요.
Claude Code에 “이 Figma 작업에서 고정 이미지와 색상·글꼴 설정을 가져와 작업 구성에 반영해 줘”라고 요청해 보세요.
움직임이 포함된 작업이라면 연결 기능이 있는지, 직접 내보낼 자료가 필요한지부터 물어보세요.

용어사전

Figma · 화면과 앱 디자인을 만들고, 이미지·색상·글꼴·화면 부품을 한 파일에서 관리하는 디자인 도구입니다.
HyperFrames · Figma 등에서 가져온 재료를 바탕으로 작업 구성을 만들 때 쓰이는 도구 묶음입니다.
REST · 프로그램이 인터넷을 통해 필요한 자료를 요청하고 받아오는 방식입니다. 이 글에서는 Figma의 디자인 정보를 가져오는 통로를 뜻합니다.
HTML · 웹페이지의 화면 구조를 표현하는 기본 형식입니다. 스킬 설명서에서는 화면 부품을 웹 화면에 쓸 형태로 가져오는 대상과 연결됩니다.
GSAP · 웹 화면의 움직임을 만들 때 쓰이는 도구입니다. 이 스킬에서는 Figma의 움직임 정보를 다룰 때 연결될 수 있습니다.

출처

원문: skills.sh · https://skills.sh/heygen-com/hyperframes/figma

함께 읽으면 좋은 글

오늘 글이 재미있으셨다면, 제 공간에도 한 번 놀러 와 주세요 🙂

제 인포크 링크 둘러보기