피그마 단축키 총정리 – 실무에서 진짜 쓰는 것만 모았다

피그마 실무단축기 모음 이미지

피그마를 처음 쓸 때는 마우스로 하나하나 메뉴를 눌렀다. 그게 자연스럽다고 생각했다.

그런데 옆자리 시니어 디자이너 화면을 보다가 충격을 받았다. 손이 거의 안 움직이는데 작업이 쌓이고 있었다.

단축키를 아는 사람과 모르는 사람의 속도 차이는, 실력 차이보다 먼저 눈에 보인다.


왜 단축키가 중요한가

디자인 작업은 반복의 연속이다. 레이어 선택, 이름 바꾸기, 컴포넌트 복사, 프레임 만들기. 이 동작을 하루에 수백 번 한다.

마우스를 움직이고 메뉴를 찾는 0.5초가 쌓이면, 하루 기준으로 꽤 많은 시간이 날아간다.

단축키는 그 흐름을 지키는 도구다. 생각하면서 손이 따라오는 상태, 그게 목표다.


실무에서 진짜 자주 쓰는 단축키만 모았다

전체 단축키 목록은 피그마 공식 문서에 다 있다. 하지만 그걸 처음부터 외우려 하면 오래 못 간다.

여기서는 실제 작업 흐름에서 반복되는 동작 위주로 정리했다.


1. 기본 조작 – 가장 먼저 익혀야 할 것들

단축키기능
V선택 도구 (Select)
F프레임 만들기
R사각형
T텍스트
K스케일 도구
H핸드 도구 (화면 이동)
Ctrl + Z / Cmd + Z실행 취소
Ctrl + Shift + Z / Cmd + Shift + Z다시 실행

이 정도는 첫날부터 외워두는 게 맞다. 특히 F로 프레임 만드는 것, 처음엔 사각형이랑 헷갈리는데 프레임은 컴포넌트와 오토레이아웃의 기반이라 개념부터 구분해두는 게 중요하다.


2. 선택과 이동 – 레이어 다루는 속도를 높이는 단축키

단축키기능
Ctrl + A / Cmd + A전체 선택
Enter그룹/프레임 내부 진입
Esc선택 해제 / 상위 레이어로 이동
Ctrl + Click / Cmd + Click중첩된 레이어 직접 선택
Alt + 드래그복사하면서 이동
Ctrl + D / Cmd + D마지막 복사 반복

Ctrl + D는 아는 사람만 쓰는 단축키다. 같은 간격으로 요소를 반복 배치할 때 진가가 드러난다. 한 번 복사해서 위치 잡고, Ctrl + D 계속 누르면 된다.


3. 정렬과 배치 – 픽셀 맞추는 시간을 줄여준다

단축키기능
Alt + A왼쪽 정렬
Alt + D오른쪽 정렬
Alt + W상단 정렬
Alt + S하단 정렬
Alt + H수평 중앙 정렬
Alt + V수직 중앙 정렬

마우스로 정렬 패널 눌러서 맞추던 방식에서 벗어나면 여러 오브젝트 정렬이 1초도 안 걸린다.


4. 컴포넌트와 스타일 – 실무 핵심 영역

단축키기능
Ctrl + Alt + K / Cmd + Option + K컴포넌트 만들기
Ctrl + Alt + B / Cmd + Option + B오토레이아웃 적용
Ctrl + G / Cmd + G그룹 만들기
Ctrl + Shift + G / Cmd + Shift + G그룹 해제
Ctrl + E / Cmd + E선택한 레이어 병합 (flatten)

오토레이아웃(Ctrl + Alt + B)은 외워두면 무조건 쓴다. 버튼 패딩 맞추거나, 카드 컴포넌트 만들 때 손이 먼저 가야 하는 단축키다.


5. 뷰 조작 – 화면을 빠르게 다루는 방법

단축키기능
Ctrl + 0 / Cmd + 0전체 보기 (줌 아웃 맞춤)
Ctrl + 1 / Cmd + 1100% 줌
Ctrl + Shift + H / Cmd + Shift + H선택 오브젝트에 맞게 줌
Space + 드래그캔버스 이동
Ctrl + \`` / Cmd + “UI 패널 숨기기/보이기

`Ctrl + “는 프레젠테이션 모드 바로 전에 쓰기 좋다. 패널 숨기면 실제 디자인만 보여서 리뷰할 때 깔끔하다.


6. 텍스트 작업 – 타이포 잡을 때 쓰는 단축키

단축키기능
Ctrl + B / Cmd + B볼드
Ctrl + I / Cmd + I이탤릭
Ctrl + U / Cmd + U밑줄
Alt + 방향키 좌/우자간(tracking) 조절
Alt + 방향키 상/하행간(leading) 조절

텍스트 속성은 오른쪽 패널에서 직접 수치 입력하는 경우가 많지만, 자간·행간 조절은 Alt+방향키로 감각적으로 잡는 게 더 빠를 때가 많다.


7. 검사와 측정 – 개발 핸드오프 전에 확인할 때

단축키기능
Alt (오브젝트 위에 호버)오브젝트 간 거리 측정
Ctrl + P / Cmd + PQuick actions (전체 검색)
Ctrl + Shift + E / Cmd + Shift + E에셋 내보내기
Ctrl + Shift + C / Cmd + Shift + C링크 복사

Alt 키 호버는 처음 알았을 때 진짜 편했다. 레이어 선택하고 다른 오브젝트 위에 Alt 올려두면 거리가 바로 나온다. 개발자한테 스펙 전달할 때 캡처해서 붙이기 딱 좋다.


8. 플러그인과 퀵 액션 – 속도를 한 단계 올리는 기능

단축키기능
Ctrl + / / Cmd + /퀵 액션 (메뉴 검색)
Ctrl + Alt + P / Cmd + Option + P마지막 플러그인 다시 실행

Ctrl + /는 단축키를 모를 때 쓰는 단축키다. 텍스트로 원하는 기능을 검색할 수 있어서, 처음 피그마 쓸 때 특히 유용하다.


실무에서 이렇게 쓴다 – 작업 흐름 예시

주니어 시절에 가장 많이 하는 작업 중 하나가 카드 컴포넌트 반복 배치다.

예전 방식: 사각형 그리기 → 복사 → 위치 맞추기 → 복사 → 위치 맞추기…

지금 방식:

  1. F로 프레임 만들기
  2. 내부 요소 배치 후 Ctrl + Alt + B로 오토레이아웃 적용
  3. Alt + 드래그로 하나 복사 후 Ctrl + D 반복
  4. Alt + H로 수평 정렬 끝

이렇게 하면 시간도 줄지만, 수정도 쉬워진다. 오토레이아웃이 걸려 있으면 안에 내용이 바뀌어도 레이아웃이 알아서 따라온다.

피그마 실무단축기 모음 이미지
본 카드뉴스는 AI 이미지 생성 기술을 활용해 제작되었습니다

자주 하는 실수 – 주의할 것

그룹과 프레임을 섞어 쓰는 경우 처음에 Ctrl + G로 그룹만 쓰다 보면, 나중에 오토레이아웃이나 컴포넌트로 전환할 때 손이 더 간다. 프레임(F)으로 만드는 습관을 처음부터 들이는 게 낫다.

레이어 이름을 안 바꾸는 경우 단축키는 아니지만, 더블클릭으로 레이어 이름 바꾸는 걸 귀찮다고 미루면 파일이 조금만 커져도 못 찾는다. 핸드오프할 때도 개발자가 레이어 이름 보고 구조를 파악하기 때문에, 이름 정리는 습관이 되어야 한다.


단축키 빠르게 외우는 방법

한꺼번에 외우려 하면 안 된다.

1단계 – 오늘부터 이것만 V, F, T, R, Ctrl + D, Ctrl + Alt + B 이 여섯 개만 일주일 써보면 손에 붙는다.

2단계 – 익숙해지면 추가 정렬 단축키(Alt + A/D/W/S/H/V)와 Alt 호버 측정 추가.

3단계 – 워크플로우에 맞게 개발 핸드오프 작업이 많다면 내보내기, 링크 복사 위주로. 컴포넌트 작업이 많다면 컴포넌트·오토레이아웃 단축키 중심으로.


마무리

단축키는 피그마를 잘하는 게 아니라, 방해받지 않고 생각에 집중하기 위한 도구다.

처음부터 다 외울 필요는 없다. 오늘 작업하면서 한 번이라도 쓴 단축키, 거기서부터 시작하면 된다.

쌓이면 달라진다.


함께 읽으면 좋은 글

피그마 쓰면서 진짜 몰랐으면 손해였을 플러그인 3가지

피그마 플러그인 추천

피그마 플러그인, 제대로 쓰고 있나

피그마를 쓰고 있지만, 솔직히 기본 기능만 썼다. 컴포넌트 만들고, 오토레이아웃 쓰고, 프로토타입 연결하는 정도. 플러그인은 뭔가 복잡할 것 같고, 배우기 귀찮다는 생각이 앞섰다.

그런데 어느 순간부터 해외 디자이너들 작업물을 보면서 의문이 생기기 시작했다. 분명히 나보다 속도가 빠른데, 퀄리티도 높다. 어떻게 하는 건지 파고들었더니 대부분 플러그인 활용 차이였다.

20년 넘게 디자이너로 일하면서 배운 게 하나 있다면, 시간이 곧 돈이라는 것이다. 반복 작업에 시간을 쏟을수록 정작 중요한 의사결정과 크리에이티브에 쓸 에너지가 줄어든다. 이 글에서 소개하는 플러그인 3가지는 그 반복을 대신 해주는 도구들이다.


1. Maps to Design — 주소 하나로 지도를 바로 피그마에 넣는다

이게 왜 필요한가

부동산 서비스, 배달 앱, 여행 플랫폼, 로컬 커머스. 지도가 들어가는 UI는 생각보다 훨씬 많다. 그런데 지금까지 디자인에 지도를 넣으려면 어떻게 했나? 구글 맵 캡처해서 넣거나, 스크린샷 잘라서 넣거나, 그냥 회색 직사각형으로 때웠다.

Maps to Design은 그 과정을 없애버린다.

어떻게 작동하나

사용 방법은 단순하다.

  1. 피그마에서 Maps to Design 플러그인 실행
  2. 원하는 주소 또는 좌표 입력
  3. 지도 스타일 선택 (라이트, 다크, 새틀라이트 등)
  4. 피그마 캔버스에 바로 삽입

결과물은 그냥 이미지가 아니라 실제 지도 데이터 기반의 벡터 레이어에 가깝게 들어온다. 줌 레벨도 조정 가능하고, 스타일도 커스터마이즈할 수 있다.

실무에서 이렇게 썼다

얼마 전에 부동산 스타트업 랜딩페이지 작업을 했다. 매물 위치를 보여주는 섹션이 있었는데, 클라이언트가 “실제 동네 느낌이 나야 한다”고 했다. 예전이라면 구글 맵 캡처를 여러 장 찍어서 포토샵에서 색 보정하고, 피그마에 옮기고, 다시 맥락에 맞게 자르고 하는 과정을 거쳤을 것이다.

Maps to Design을 쓰니까 주소 입력하고 스타일 선택하는 데 3분이면 됐다. 다크 모드 버전도 바로 만들었다.

특히 유용한 케이스

  • 배달/라이드헤일링 앱: 출발지-도착지 경로 UI 목업
  • 부동산/숙박 서비스: 매물 위치 표시 디자인
  • 로컬 이벤트 페이지: 행사 장소 지도 삽입
  • 투자 유치용 덱: 서비스 커버리지 시각화

2. HTML to Design — URL 하나면 웹사이트 전체가 레이어로

이게 왜 필요한가

경쟁사 분석을 해야 할 때, 레퍼런스를 정리해야 할 때, 클라이언트가 “이 사이트 참고해서 비슷하게 만들어줘”라고 할 때.

지금까지는 스크린샷 찍고, 잘라내고, 레이어 위에 올려놓고, 투명도 낮춰서 트레이싱하거나 참고했다. 번거롭고, 해상도도 안 맞고, 반응형은 따로 캡처해야 했다.

HTML to Design은 URL만 넣으면 그 웹사이트의 HTML과 CSS 구조를 피그마 레이어로 변환해준다.

어떻게 작동하나

  1. HTML to Design 플러그인 실행
  2. URL 입력
  3. 변환 옵션 선택 (페이지 전체 / 섹션 지정)
  4. 피그마 레이어 트리로 가져오기

가져온 결과를 보면 꽤 놀랍다. 텍스트는 텍스트 레이어로, 이미지는 이미지 레이어로, 컨테이너는 프레임으로 분리되어 들어온다. 완벽하게 1:1로 옮겨지진 않지만, 작업 출발점으로 쓰기엔 충분하다.

실무에서 이렇게 썼다

클라이언트가 “글로벌 SaaS 사이트들처럼 만들어달라”고 했다. 레퍼런스가 영어 사이트 5개였는데, 각 사이트의 히어로 섹션, 피처 섹션, 프라이싱 섹션을 HTML to Design으로 가져와서 나란히 놓고 비교 분석했다. 그리드 간격, 폰트 사이즈 비율, 버튼 크기 패턴을 비교하니까 클라이언트한테 설명할 때도 훨씬 설득력이 생겼다.

디자인 방향 잡는 데 반나절도 안 걸렸다.

특히 유용한 케이스

  • 경쟁사 벤치마킹: 여러 사이트 한 캔버스에서 비교
  • 레퍼런스 분석: 그리드 시스템, 타이포그래피 스케일 파악
  • 리디자인 작업: 기존 사이트 구조를 베이스로 수정
  • 클라이언트 설득: 레퍼런스를 실제 레이어로 분리해 설명

주의할 점

퍼블릭하게 공개된 웹사이트에서만 사용하는 게 맞다. 저작권 이슈가 있는 소스를 그대로 납품하면 문제가 생기니까, 어디까지나 분석과 참고 용도로만 써야 한다.


3. Wanna This — 클릭 몇 번으로 실제 같은 목업 완성

이게 왜 필요한가

디자인을 다 했는데, 클라이언트한테 보여줄 때 플랫 화면으로만 보여주면 임팩트가 약하다. 특히 앱 디자인의 경우, 실제 폰에 올라가 있는 모습을 보여줘야 “아, 이런 느낌이구나” 하고 실감한다.

기존에는 목업 만들려면 Mockup World 같은 곳에서 PSD 파일 받고, 포토샵에서 스마트 오브젝트에 디자인 끼워넣고, 피그마로 다시 가져오는 과정을 거쳤다. 한 번 만들고 끝나면 괜찮은데, 수정이 생기면 이 과정을 반복해야 한다.

Wanna This는 이 과정을 피그마 안에서 끝낸다.

어떻게 작동하나

  1. 내 디자인 프레임 선택
  2. Wanna This 플러그인 실행
  3. 원하는 디바이스 목업 선택 (아이폰, 맥북, 아이패드 등)
  4. 자동으로 해당 화면에 디자인이 삽입된 목업 생성

고퀄리티 디바이스 이미지에 내 디자인이 자연스럽게 합성되어 나온다. 조명, 그림자, 화면 반사까지 이미 잘 처리되어 있어서 별도 후작업이 거의 필요 없다.

실무에서 이렇게 썼다

포트폴리오를 정리할 때 제일 많이 쓴다. 작업물마다 목업 이미지 하나씩 만들어야 하는데, 예전에는 작업물 10개면 목업 만드는 데만 반나절이 걸렸다. 지금은 Wanna This로 작업물 10개 목업을 1시간 안에 만든다.

클라이언트 제안 덱에 넣을 때도 마찬가지다. “이렇게 만들면 실제로 이렇게 보입니다”를 보여주는 데 목업이 결정적인 역할을 한다.

특히 유용한 케이스

  • 포트폴리오 정리: 일관된 스타일로 작업물 목업 제작
  • 클라이언트 제안서: 실사 느낌의 프레젠테이션
  • 소셜 미디어 공유: 비핸스, 드리블 업로드용 이미지
  • 앱 스토어 스크린샷: 실제 디바이스 화면 합성

세 가지 플러그인 한눈에 비교

플러그인핵심 기능가장 유용한 상황난이도
Maps to Design주소 → 지도 레이어위치 기반 서비스 디자인쉬움
HTML to DesignURL → 피그마 레이어경쟁사 분석, 레퍼런스 정리보통
Wanna This디자인 → 고퀄 목업포트폴리오, 제안서, 발표쉬움

피그마 플러그인 추천
본 카드뉴스는 AI 이미지 생성 기술을 활용해 제작되었습니다

플러그인 도입할 때 고려할 것들

플러그인이 편리하다고 무조건 쓰라는 게 아니다. 실무에서 몇 가지 기준을 가지고 있다.

학습 비용 대비 시간 절감 효과를 먼저 따진다. 쓸 때마다 설정이 복잡하고 결과를 많이 수정해야 한다면, 그냥 직접 하는 게 나을 때도 있다. 위 세 가지는 처음 써보는 사람도 10분 안에 익힐 수 있는 수준이라 진입 장벽이 낮다.

팀 작업이라면 공유 가능한지 확인한다. 플러그인 결과물이 피그마 네이티브 레이어로 들어오는지, 외부 연동이 필요한지에 따라 팀 협업 시 복잡해질 수 있다. 위 세 플러그인은 모두 피그마 레이어로 결과가 떨어져서 핸드오프나 협업에 무리가 없다.

개발자 핸드오프 시 주의점도 있다. HTML to Design으로 가져온 레이어는 구조가 지저분할 수 있다. 참고용으로만 쓰고, 실제 개발에 전달할 파일은 따로 정리해서 만드는 게 맞다. Wanna This로 만든 목업도 마찬가지—최종 납품 파일에는 목업이 아닌 실제 디자인 프레임을 전달해야 한다.


마치며

20년 넘게 디자인하면서 가장 크게 든 생각 중 하나는, 도구를 잘 쓰는 것도 실력이라는 것이다. 처음엔 툴에 의존하는 게 실력을 감추는 것처럼 느껴졌는데, 지금은 반대로 생각한다. 반복 작업을 빠르게 처리할 수 있어야 진짜 중요한 판단과 결정에 에너지를 쓸 수 있다.

이 세 가지 플러그인이 모든 프로젝트에 다 맞지는 않는다. 하지만 위치 기반 서비스 디자인하거나, 레퍼런스 분석하거나, 포트폴리오 정리할 일이 있다면 한 번은 써보길 권한다.

한 번 써보면 왜 해외 디자이너들이 이걸 쓰는지 바로 이해가 된다.


이 글이 도움이 됐다면 북마크 해두고, 비슷한 고민을 하는 디자이너 동료에게 공유해 주세요.

함께 읽으면 좋은 글

Claude AI와 Figma 연동하는 법 – MCP 설정부터 Claude Design 활용까지 (2026 최신)

claude ai 와 figma 연동 카드뉴스 이미지

처음 이 조합을 써봤을 때 솔직히 반신반의했다.

AI가 Figma를 “직접 읽는다”는 말이 과장처럼 들렸다. 그런데 실제로 연결해보니 달랐다. Claude가 내 Figma 파일의 컴포넌트 이름, 오토레이아웃 구조, 스페이싱 값을 정확히 인식하고 있었다. 이건 단순히 스크린샷을 넘기는 수준이 아니었다.

이 글은 그 경험을 바탕으로 쓴다.


먼저 알아야 할 것: 연동 방식이 두 가지다

Claude와 Figma를 연결하는 방법은 현재 크게 둘로 나뉜다.

1) MCP 방식 — Claude (Desktop 또는 Code)와 Figma를 직접 연결

  • Claude가 Figma 파일을 실시간으로 읽고, 수정하고, 코드를 생성한다.
  • 설정이 조금 필요하지만, 양방향으로 작동한다.

2) Claude Design → Figma 내보내기 방식

  • 2026년 4월 출시된 Claude Design에서 만든 결과물을 HTML로 내보낸 뒤 Figma로 옮기는 방식.
  • 설정이 거의 없다. 대신 흐름이 단방향이다.

두 방식 모두 장단점이 있다. 순서대로 설명한다.


1부. MCP로 Claude와 Figma 연결하기

MCP가 뭔지부터

MCP(Model Context Protocol)는 Anthropic이 개발한 개방형 표준 프로토콜로, AI 모델과 소프트웨어를 연결하는 통신 규약이다. 흔히 “AI 분야의 USB-C 커넥터”에 비유된다. Brunch

쉽게 말하면, Claude가 Figma 안에 있는 데이터를 직접 꺼내 쓸 수 있게 해주는 다리다.

MCP 없이는 Claude가 내가 붙여넣은 내용만 알 수 있다. MCP가 있으면 파일 시스템, 데이터베이스, Figma 파일 등을 실시간으로 읽고 작업할 수 있다. AI Blogs

예전에는 Figma 스크린샷을 캡처해서 Claude에 올리고, “이 버튼 색이 뭐야?” 같은 걸 물어봤다. 이제는 그럴 필요가 없다. 파일을 연결해두면 Claude가 직접 열어본다.


연결 방법 A: Claude Desktop + Figma Desktop (비개발자도 가능)

가장 진입장벽이 낮은 방법이다. 터미널 명령어 없이 설정할 수 있다.

준비물

  • Claude Desktop 앱 (유료 플랜 필요)
  • Figma Desktop 앱 (브라우저 버전은 연결이 불안정하다)
  • Figma Professional 이상 플랜 (Dev Mode 사용 필요)

설정 순서

① Figma Desktop에서 MCP 서버 활성화

Figma Desktop을 실행한다. 상단 메뉴에서 FigmaPreferencesEnable Dev Mode MCP Server를 켠다. 이걸 켜야 Claude가 Figma에 접근할 수 있다.

Figma Desktop 앱을 실행한 뒤, 공식 문서를 따라 Figma Desktop Server를 활성화하면 된다. 이 단계는 비교적 간단하며, Figma 브라우저 버전보다 Desktop 버전을 쓰는 것을 권장한다. 브라우저도 연결은 가능하지만 Desktop 버전에 비해 안정성이 떨어진다. Brunch

② Claude Desktop에서 MCP 연결 확인

Claude Desktop을 실행한다. SettingsDeveloper로 이동하면 Figma MCP 서버가 Running 상태인지 확인할 수 있다.

Claude Code에서 Settings → Developer로 이동해 Figma Desktop MCP가 실행 중(Running)인지 확인하면 된다. Brunch

③ Figma 파일 링크로 작업 시작

연결이 완료되면, Claude 대화창에 Figma 파일 링크를 붙여넣고 바로 작업을 요청할 수 있다. "이 파일에서 카드 컴포넌트 구조 설명해줘" 같은 식으로.


연결 방법 B: Claude Code + Figma (개발자 협업용)

코드와 디자인을 동시에 다루는 워크플로우에 적합하다. 개발자와 함께 쓰거나, 직접 프론트엔드 코드까지 뽑아내고 싶을 때 효과적이다.

터미널에서 명령어 한 줄로 연결

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

위 명령어를 터미널에 붙여넣고 실행하면 된다. 완료 후 /mcp를 입력하면 메뉴가 나타나고, Discover에서 Installed로 이동해 Figma MCP 서버 인증을 진행하면 된다. 브라우저 창이 열리면서 Figma 접근 권한 허용 절차가 진행된다. Substack

또는 Claude Code 채팅창에서 직접 입력해도 된다.

claude plugin install figma@claude-plugins-official

연결이 완료되면 Claude에 ‘Authentication successful. Connected to figma’가 표시된다. Figmapedia


연결하면 실제로 뭘 할 수 있나

연결 후 파이프라인은 양방향으로 작동한다. Figma에서 Claude 방향으로는, 컴포넌트 구조, 스페이싱 값, 보더 라디우스, 폰트 크기, 컬러 토큰, 오토레이아웃 설정, 레이어 계층까지 읽어들여 코드로 정확하게 변환해준다. Claude에서 Figma 방향으로는, Claude가 만든 UI를 편집 가능한 Figma 프레임으로 캡처해 넣어준다. 실제 레이어로 구성되어 있어 바로 수정하거나 복제할 수 있다. Substack

디자이너 입장에서 가장 체감 되는 것은 맥락 설명을 반복하지 않아도 된다는 점이다.

예전 방식은 이랬다.

“이 버튼은 Primary 버튼이고, 색상은 #2563EB이고, 패딩은 상하 12px, 좌우 20px이고, 보더 라디우스는 8px야. 이 스타일로…”

MCP 연결 후엔 그냥 Figma 링크 하나 던지면 된다. Claude가 알아서 읽는다.


한계도 솔직히 말하면

  • Figma Professional 이상 플랜이 없으면 Dev Mode를 못 쓴다. 공식 MCP는 Dev Mode가 필요하다. 무료 계정 사용자라면 비공식 오픈소스 플러그인(claude-talk-to-figma-mcp)을 써야 하는데, 설정이 훨씬 복잡해진다.
  • 현재는 Figma → 코드 방향이 더 안정적이다. 코드 to Figma 같은 양방향 흐름은 현재 Claude Code에서 가장 안정적으로 구현되며, Cursor나 Windsurf 등에서는 기능 차이나 제한이 있다. Litmers
  • 디자인 시스템 정리가 먼저다. 연동 효과는 기존 디자인 시스템 완성도에 비례한다. 가이드라인이 불명확하거나 파편화된 팀은 연동 전 정비가 먼저다. 레이어 이름이 Frame 432, Rectangle 7 이런 식이면 Claude도 헤맨다. 네이밍 정리가 선행되어야 한다. Dxtalk

2부. Claude Design에서 Figma로 가져오기

Claude Design이 뭔지

Claude Design은 Anthropic이 2026년 4월 17일 출시한 AI 비주얼 창작 도구다. Claude Opus 4.7 모델을 기반으로 하며, claude.ai 좌측 내비게이션의 팔레트 아이콘을 통해 접근할 수 있다. Digit2sight

자연어 프롬프트만으로 디자인 시안, 프로토타입, 슬라이드 같은 실무 결과물을 만들 수 있는 대화형 AI 디자인 도구로, 발표 당일 Figma 주가가 약 7% 하락할 정도로 업계의 관심이 쏠렸다. Elancer

기존 Claude가 텍스트와 코드 중심이었다면, Claude Design은 시각적인 결과물에 특화된 전용 모드다.


Claude Design → Figma로 옮기는 방법

Claude Design 자체에는 아직 Figma 직접 내보내기 버튼이 없다. 현재 가장 많이 쓰는 방법은 Anima라는 Figma 플러그인을 활용하는 방식이다.

순서

  1. claude.ai에 접속해 좌측 팔레트 아이콘 클릭 → Claude Design 모드 진입
  2. 원하는 화면을 프롬프트로 생성한다
  3. 완성된 결과물에서 ShareExport as standalone HTML 선택
  4. Figma에서 Anima 플러그인 실행
  5. HTML 파일을 불러오면 Figma 편집 가능한 레이어로 변환된다

Anima Figma 에이전트는 전문 디자이너가 Claude Design에서 Figma로 이동해 편집 가능한 캔버스에서 계속 작업할 수 있도록 도와준다. Anima


Claude Design의 실제 강점

온보딩 시 디자인 시스템 연동이 가능하다.

온보딩 과정에서 코드베이스와 디자인 파일을 읽어 디자인 시스템을 구축할 수 있기 때문에, 이후 프로젝트마다 일반적인 플레이스홀더 대신 실제 컬러, 타이포그래피, 컴포넌트를 사용하게 된다. Anima

한 번 설정해두면 매번 “우리 Primary 컬러는 이거야” 같은 설명을 반복하지 않아도 된다.

Claude Code와 연결하면 코드까지 바로 나온다.

디자인이 완성되면 Claude Design이 핸드오프 번들을 자동으로 생성할 수 있다. 이 번들에는 디자인 의도와 컴포넌트 구조, 스타일 정보가 정리되어 있어서 Claude Code에 한 번의 지시로 전달할 수 있다. “여기 이 번들을 기반으로 Next.js 프로젝트에 구현해줘” 정도의 명령이면 실제 코드로 옮기는 작업이 시작된다. Daleseo

디자이너가 Figma에서 시안을 만들고, 개발자가 그걸 다시 해석하는 과정에서 생기는 갭이 여기서 상당히 줄어든다.


Claude Design의 현실적인 한계

직접 써보고 느낀 것들이다.

  • 아직 Research Preview 단계다. Claude Design은 현재 연구 프리뷰(Research Preview) 단계이며, 향후 몇 주에 걸쳐 모든 유료 사용자에게 순차적으로 공개될 예정이다. 기능이 갑자기 바뀌거나 제한될 수 있다. Apiyi.com Blog
  • Figma로 넘어갈 때 레이어 정리가 필요하다. HTML → Figma 변환이다 보니, 자동 생성된 레이어 구조가 실무에서 바로 쓰기엔 지저분하다. 이후 정리 작업은 디자이너 몫이다.
  • 복잡한 인터랙션은 아직 약하다. AI 모델은 여전히 사람의 공감 능력이 필요한 깊이 있는 UX 로직에서는 어려움을 겪는다. 기본 레이아웃과 시각 구조는 잘 잡아주지만, 복잡한 상태 변화나 엣지 케이스는 직접 다듬어야 한다. Skypage

3부. 디자이너로서 이 도구를 어떻게 쓰면 좋을까

경력을 쌓으면서 느낀 건, 좋은 도구는 내 판단을 대체하는 게 아니라 내가 판단할 시간을 더 만들어준다는 것이다.

Claude + Figma 연동도 마찬가지다.

지금 당장 효과적인 사용 시나리오:

  • 초기 와이어프레임 초안 생성 → Claude Design으로 빠르게 뽑고, Figma에서 디테일 다듬기
  • 디자인 스펙 전달 → Figma MCP 연결 후 “이 컴포넌트 패딩이 몇이야?”를 Claude에게 물어보며 개발자와 소통
  • 디자인 시스템 문서화 → Claude가 Figma 파일 읽고 컴포넌트 사용 가이드 초안 생성
  • 핸드오프 준비 → Claude Design에서 핸드오프 번들 생성 → Claude Code로 넘겨서 프론트엔드 코드 출력

이건 Claude한테 맡기지 마라:

  • 서비스의 핵심 UX 흐름 결정. 이건 아직 사람이 해야 한다.
  • 사용자 리서치 기반의 의사결정. Claude는 데이터를 줘야 분석하지, 현장 감각은 없다.
  • 디자인 시스템의 최초 구축. 정리가 안 된 상태에서 연동하면 쓰레기가 더 빠르게 만들어질 뿐이다.
claude ai 와 figma 연동 카드뉴스 이미지
본 카드뉴스는 AI 이미지 생성 기술을 활용해 제작되었습니다

마무리

솔직히 말하면, 이 조합이 Figma를 대체하진 않는다.

적어도 지금은. Claude Design이 나왔을 때 Figma 주가가 떨어졌지만, 실무에서 써보면 여전히 Figma는 디자이너의 메인 작업 공간이다. Claude는 그 앞과 뒤를 더 빠르게 만들어주는 역할에 가깝다.

그럼에도 이 연동을 지금 세팅해두는 게 의미 있는 이유는, 워크플로우는 습관이기 때문이다. 지금 세팅해두고 조금씩 쓰다 보면, 6개월 뒤에는 이게 없는 방식으로 돌아가기 싫어지는 시점이 온다.

한번 연결해보고, 직접 판단해보길 권한다.


참고 링크

함께 읽으면 좋은 글

상세페이지, 3초 안에 이탈하는 이유? UX 디자인과 AI 툴의 결합

지브리 스타일의 따뜻한 감성이 담긴, 상세페이지 작업 중인 디자이너의 이미지

웹사이트나 상세페이지를 연 고객이 구매 버튼까지 가는 길은 생각보다 험난하다. 통계적으로 고객은 페이지에 접속한 후 단 3초 만에 이 페이지를 더 읽을지, 나갈지를 결정한다. 이 3초를 잡는 것은 감각의 영역이 아니라 철저히 UX(사용자 경험) 설계의 영역이다.

25년 차 디자이너로서 현장에서 검증된 UX 팩트와, 요즘 내 작업 시간을 획기적으로 줄여주고 있는 AI 툴 활용 노하우를 공유해 보려 한다.


✅ 1. 3초의 법칙: 시선의 흐름을 디자인하라

고객의 눈은 무작위로 움직이지 않는다. 팩트는 그들이 ‘F자 형태’ 혹은 ‘Z자 형태’로 정보를 훑는다는 것이다.

  • 상단 20%에 모든 것을 걸어라: 가장 중요한 혜택(Benefit)과 제품의 정체성은 최상단에 위치해야 한다. 여기서 궁금증을 유발하지 못하면 아래의 화려한 상세페이지는 아무 의미가 없다.
  • 시각적 위계(Hierarchy): 모든 글자를 크게 만든다고 잘 보이는 게 아니다. 제목, 부제목, 본문의 크기 차이를 확실히 두어 고객의 시선이 머물 곳을 지정해줘야 한다. 이것이 UX의 기본이다.

✅ 2. AI 툴을 활용한 상세페이지 제작 효율화 (실무 팩트)

예전에는 모델 섭외부터 배경 합성까지 며칠이 걸렸던 작업들이 이제 AI 툴로 몇 시간 만에 끝난다. 내가 실무에서 직접 써보고 효과를 본 방법들이다.

  • 제품 배경 생성 (Midjourney / Adobe Firefly): 집에서 대충 찍은 제품 사진이라도 AI를 활용하면 고급 스튜디오에서 찍은 듯한 배경으로 교체할 수 있다. 특히 ‘생성형 채우기’ 기능을 쓰면 사진의 잘린 부분을 자연스럽게 늘릴 수 있어 레이아웃 잡기가 훨씬 수월해진다.
  • 카피라이팅과 구조 설계 (ChatGPT / Claude): “이 제품의 소구점 3가지를 뽑아줘”라고 요청하면 기획의 뼈대를 순식간에 잡아준다. 이를 바탕으로 UX에 최적화된 문구를 다듬으면 기획 시간이 절반으로 줄어든다.
  • 가상 모델 활용: 의류나 액세서리의 경우, 모델 섭외 비용 없이 AI가 생성한 모델에게 우리 제품을 입히는 기술이 실무에 깊숙이 들어와 있다. 이는 특히 초기 자본이 부족한 1인 사장님들에게 엄청난 무기가 된다.

✅ 3. 이탈을 부르는 상세페이지의 치명적 실수

25년 차 디자이너의 눈에 보이는 안타까운 팩트들이다.

  • 과도한 텍스트: 고객은 글을 읽지 않고 ‘이미지’로 소비한다. 설명이 길어질수록 이탈률은 높아진다. 텍스트는 이미지의 보조 수단으로만 써라.
  • 모바일 최적화 무시: 아직도 PC 화면 기준으로만 상세페이지를 만드는 경우가 많다. 유입의 80% 이상이 모바일인 시대다. 글자 크기와 버튼 크기는 반드시 모바일 화면에서 가독성을 체크해야 한다.
  • 불분명한 CTA(Call To Action): 상세페이지의 끝에서 고객이 무엇을 해야 할지 명확히 알려줘야 한다. “구매하기”, “상담하기” 버튼은 시각적으로 가장 눈에 띄는 곳에 배치되어야 한다.

✅ 4. AI 시대, 디자이너의 진짜 역할

AI 툴이 이미지를 그려주고 카피를 써준다고 해서 디자이너가 필요 없는 건 아니다. 팩트는 **’선택과 조합의 안목’**이 더 중요해졌다는 것이다.

AI가 쏟아내는 수많은 결과물 중 우리 브랜드의 톤앤매너에 맞는 것을 골라내고, 고객의 심리 흐름에 맞춰 재배치하는 것은 결국 25년 차의 경험 같은 인간의 직관이 필요하다. 툴은 도구일 뿐, 전체적인 UX 시나리오를 짜는 것은 여전히 우리의 몫이다.


💡 실무자의 시선: 결국 핵심은 ‘신뢰’와 ‘편리’

상세페이지 디자인의 본질은 화려함이 아니다. 고객이 궁금해하는 정보를 얼마나 편리하게 찾을 수 있게 해주는지, 그리고 이 제품을 믿어도 된다는 신뢰를 어떻게 시각적으로 전달하는지가 핵심이다.

기술은 계속 변하지만, 사람이 물건을 구매할 때 느끼는 심리 기제는 변하지 않는다. AI라는 강력한 도구를 손에 쥐되, 그 근간에는 늘 인간 중심의 UX 설계가 있어야 한다는 점을 잊지 말자.


🚩 성공적인 상세페이지를 위한 UX/AI 체크리스트

  • [ ] 모바일 화면에서 글자가 너무 작게 보이지 않는가?
  • [ ] 최상단 3초 안에 제품의 핵심 장점이 드러나는가?
  • [ ] AI를 활용해 배경 이미지의 퀄리티를 충분히 높였는가?
  • [ ] 정보의 흐름이 고객의 궁금증 순서와 일치하는가?
  • [ ] 구매 버튼(CTA)이 어디서든 찾기 쉬운 위치에 있는가?

마치며: 효율적으로 만들고, 효과적으로 팔기

예전처럼 밤을 새우며 픽셀 하나하나를 만지던 시대는 지났다. 이제는 스마트한 툴을 활용해 효율을 높이고, 남은 시간에 더 깊이 있는 UX 전략을 고민해야 한다.

오늘 기록한 UX 디자인 원칙과 AI 활용법이 여러분의 상세페이지를 이탈 없는 ‘수익의 창구’로 만드는 데 작은 도움이 되길 바란다.