이 10가지 스킬을 시도해 보고—여러분의 스킬도 뽐내 보세요 | Figma 블로그 (새 탭에서 열림)
Figma의 ‘스킬’은 에이전트가 따를 작업 절차와 디자이너의 판단 기준을 담은 Markdown 지침 파일이다. 글은 디자이너가 자신의 스타일과 노하우를 스킬로 만들고, Figma 안에서 에이전트와 함께 작성·수정·실행할 수 있다고 설명한다. 이를 통해 반복 작업을 자동화하고, 개인의 디자인 감각을 팀의 워크플로에 확장할 수 있다.
디자이너의 판단을 담는 스킬
- 스킬은 엔지니어링 코드가 아니라, 에이전트가 따라야 할 순서화된 지침이나 프롬프트다.
- 디자이너가 평소 사용하는 미적 기준, 작업 방식, 판단 규칙을 문서화할 수 있다.
- 예시:
/image-audit: 파일 내 이미지의 내보내기 가능 여부를 검사하고 캔버스에 보고서 작성/shader-starter: 셰이더를 생성할 때 필요한 프롬프트 작성을 지원/make-a-type-scale: 선택한 텍스트를 기반으로 타입 스케일과 관련 폰트 변수를 생성
/ease-like-miggi스킬은 특정 디자이너가 선호하는 이징 커브를 키프레임에 적용해, 팀원도 동일한 모션 스타일을 사용할 수 있게 했다.
Figma 안에서 스킬을 직접 제작하는 과정
- 디자인 프레임을 참고 자료로 제공하거나, 원하는 작업 단계와 가이드라인을 설명해 에이전트에 스킬 생성을 요청할 수 있다.
- 에이전트가 초안을 만들면 미리보기로 결과를 확인한 뒤 채팅에서 바로 사용할 수 있다.
- 테스트 과정에서 다음과 같이 반복 개선할 수 있다.
- 작업 단계 수정
- Markdown 형식 변경
- 개선 방향이나 추천 요청
- Markdown 편집기를 통한 직접 수정
- 일부 스킬은 Figma MCP 서버와 연동되는 서드파티 에이전트에서도 사용할 수 있다.
- MCP 서버용 스킬은 Figma의 GitHub 저장소에서 확인할 수 있다.
이미지에 X선 효과 적용하기
- 스킬:
/xray-scan - 제작자: Adele Ix
- 이미지나 텍스트 설명을 현실적인 방사선 사진처럼 변환한다.
- 한 번에 두 가지 스타일을 생성한다.
- 검은 배경 위에 빛나는 흰색 윤곽
- 흰 배경 위의 부드러운 어두운 톤
- 여러 X선 이미지를 겹쳐 독특한 모노크롬 콜라주를 만들 수 있다.
- 빛나는 가장자리를 활용하기 때문에 여러 결과물을 겹쳐도 시각적으로 자연스럽게 섞인다.
모션이 필요한 지점 찾기
- 스킬:
/find-animation-opportunities - 제작자: Linear의 Emil Kowalski
- 디자인을 분석해 애니메이션이 필요한 부분과 오히려 애니메이션을 제거해야 할 부분을 찾아낸다.
- 다음과 같은 질문에 답하도록 설계됐다.
- 어떤 요소를 움직이면 더 생동감이 생기는가?
- 어디에 어떤 모션을 적용해야 하는가?
- 애니메이션의 구체적인 값은 무엇인가?
- 제안된 변경 사항은 Figma Motion에서 직접 구현하거나 에이전트에게 적용하도록 요청할 수 있다.
- 한 프레임을 대상으로 사용하고, 페이지의 타깃 사용자 같은 추가 맥락을 제공할 때 효과가 좋다.
- “아예 움직이지 않아야 하는 요소는 무엇인가?”라고 질문하면 과도한 애니메이션도 줄일 수 있다.
정적인 구성에 카메라 움직임 추가하기
- 스킬:
/camera-pan-and-zoom - 제작자: Figma의 Mallory Dean
- 선택한 콘텐츠 주변에 실제 카메라 리그처럼 작동하는 중첩 레이어 구조를 만든다.
- 팬, 줌, 롤 같은 카메라 움직임을 적용해 정적인 화면을 영상처럼 연출한다.
- 예를 들어 여러 카드가 있는 그리드를 순차적으로 둘러본 뒤 전체 화면으로 다시 줌아웃하는 장면을 만들 수 있다.
- 특정한 모션 연출에 특화된 스킬이지만, 복잡한 카메라 이동을 직접 구성하는 작업을 단순화한다.
실용적인 활용 방향
스킬은 단순한 자동화 명령이 아니라 디자이너의 작업 철학과 반복 가능한 판단을 팀에 공유하는 방법이다. 먼저 자신이 자주 수행하는 작업이나 고유한 스타일을 하나의 명확한 절차로 정리한 뒤, Figma 에이전트로 초안을 만들고 실제 결과를 확인하며 반복 개선하는 방식이 효과적이다.