✨ 피그마 디자인, 그대로 코드로 만든다고? ✨
"디자인은 예쁘게 짜놨는데, 클로드 코드로 넘기면 또 다른 게 나와요."
"AI가 만든 화면이 우리 디자인 시스템이랑 따로 놀아요."
지금까지 피그마 한 화면이 코드로 그대로 옮겨진 적, 있었나요?
이 줄다리기, 한 사람이 60분 라이브로 풀어드립니다. 한국 피그마 한국어 지식의 본진 Figmapedia를 만들고 Friends of Figma KR 공식 리더로 활동 중인 하이서(피튜브)님이 직접 나와요.
피그마(Figma) → 클로드 코드(Claude Code)로 디자인 시스템이 그대로 살아 넘어가는 워크플로우를, 디자인하던 그대로 화면 위에서 보여드립니다.
🛠️ 오늘의 도구
① 피그마(Figma) — 디자인 시스템·토큰·컴포넌트의 기준점
② 클로드 코드(Claude Code) — 피그마 디자인을 실제 동작 코드로 출력
필수) 피그마(Figma) 유료 구독, 클로드 코드(Cladue Code) 유료 구독 필수
사전에 하고 싶은 분들은 아래 설치법 참고하세요
👉 클로드코드 설치법📅 6/12(금) 21:00 ~ 22:00 · 온라인 라이브 60분
🎙️ 하이서(피튜브) · Figmapedia 운영 · Friends of Figma KR 공식 리더
👉 사전 신청하기
🎯 이런 분께 추천합니다
피그마에서 정한 색·간격·모서리 반경이 코드로 옮길 때마다 미세하게 어긋나서 답답한 분
클로드 코드로 화면을 뽑아봤지만 우리 디자인 시스템과 결이 다른 코드가 나오는 분
디자인 시스템을 만들고 싶은데 어디서부터 손대야 할지 막막한 분
한 번 디자인을 바꾸면 코드 화면도 같이 따라오게 만드는 운영이 궁금한 분
💡 60분에 가져가실 것
피그마의 진짜 무기를 코드까지 끌고 가는 법 — 변수·토큰·오토 레이아웃·컴포넌트 중 코드로 살아남는 것의 차이
피그마 한 화면 → 클로드 코드 라이브 변환 시연 — "AI가 우리 디자인 시스템을 따라 그렸다"는 결과물을 처음부터 끝까지
디자인이 바뀌면 코드도 따라오는 운영 노하우 — 피그마 컨텍스트를 넘기고 변경을 코드까지 동기화하는 피튜브님의 실전 흐름
🎙️ 연사 — 하이서(피튜브)
피그마 용어·단축키·플러그인·프롬프트·리소스를 한 곳에 정리해 한국 디자이너들의 실무를 바꾼 Figmapedia를 운영. Friends of Figma KR 공식 리더로, 유튜브·인스타그램 @figma_tutor에서 피그마 사용자라면 한 번쯤 봤을 튜토리얼을 만들어 왔어요.
💡 피튜브님께 들을 수 있는 것
한국 디자이너 실무에 맞춰 정리된 피그마 운영 노하우
피그마 변수·토큰·컴포넌트 중 코드까지 살아남는 것의 기준
피그마 → 클로드 코드 라이브 변환 실전 시연
디자인 변경이 코드까지 따라오게 만드는 일관성 운영 흐름
🔗 figmapedia.com · Instagram @figma_tutor · YouTube @figma_tutor
🧑💻 사전 준비
피그마 무료 계정 + 클로드 코드(Claude Code)만 있으면 그 자리에서 따라 해보실 수 있어요. 관전만 하셔도 충분합니다 — 시연 화면·결과 코드를 직접 보여드리니까요.
📌 신청하기
피그마에서 짠 그대로 코드로 살아남는 60분.
6/12(금) 21:00에 만나요.
ℹ️ 주제·세부 내용은 행사 직전까지 일부 변경될 수 있습니다. 행사까지 시간이 충분히 남아 있어 피튜브님과 흐름을 더 다듬어가고 있어요. 큰 줄기(피그마 → 클로드 코드)는 유지됩니다.