디자인 시스템화가 강화되면서 Figma는 components, styles, variables, props 같은 자체 단위를 중심으로 복잡한 구조를 키웠고, 실제 구현 매체와의 거리가 커진 상태
source of truth 경쟁에서는 Figma가 canonical 위치를 내세웠지만, 잠긴 형식과 다루기 어려운 구조 때문에 agentic 환경에서 중요한 학습 기반이 코드 중심으로 기운 상태
업무 현장에서는 코드에서 직접 바뀐 디자인을 다시 Figma로 옮기는 작업까지 발생했고, color variables 946개, 다중 mode, 복잡한 variants와 props처럼 파일 구조 자체의 부담이 크게 드러난 상태
Claude Design은 Figma Make와 반대로 design file의 정준성을 전제하지 않고, 거칠더라도 HTML과 JS 기반임을 숨기지 않는 도구로 자리한 상태
Claude Code와의 형제 관계, 저장소 import 지원, 디자인과 구현을 하나의 대화로 잇는 흐름이 결합되면서, Figma의 Sketch moment가 빠르게 다가온다는 인식 형성
Claude Design와 디자인 도구 변화
디자인 시스템화는 엔지니어링 조직 안에서 정당성을 요구받으면서 강화됐고, Figma는 이를 위해 components, styles, variables, props 같은 자체 기본 단위를 만들어 온 상태
일부 개념은 프로그래밍에서 차용됐지만 전체 체계가 깔끔하게 대응되지는 않으며, 가이드 변화와 마이그레이션 누적으로 자동화도 조잡한 플러그인 몇 개에 의존하는 구조
이 복잡성 때문에 시스템 자체를 다루는 데 특화된 디자인 역할까지 생긴 상태
Figma와 코드 사이의 source of truth 경쟁이 계속됐고, Figma는 tooling이 canonical이라는 위치를 내세우며 Sketch보다 우위를 점한 상태
그러나 잠긴 형식과 부족한 문서화, 프로그래밍적으로 다루기 어려운 구조 때문에 agentic 시대에 중요해진 학습 데이터에서 스스로 배제되는 비용 발생
LLM은 Figma primitives가 아니라 코드로 학습됐고, 모델이 Figma의 내부 단위를 익히지 못한 상태
디자이너가 코드를 더 쉽게 작성하게 되고 에이전트 성능이 계속 좋아지면서 source of truth가 다시 코드로 이동하는 흐름
지난 10년간 Figma가 도입한 복잡한 인프라는 그에 비해 과도하게 보이게 되며, 실제로 구현될 매체를 손실된 근사치로 다루기보다 직접 그 매체에서 작업하는 편이 자연스러운 구조
업무 현장에서도 코드에서 직접 바뀐 디자인을 Figma로 역이식하는 작업이 있었고, 그 과정은 즐겁지 않은 상태
비교 대상으로 Figma 자체 제품의 디자인 시스템 파일을 제시하며, 가장 유능한 팀이 만들었을 것으로 가정해도 구조가 매우 복잡한 상태
Figma 파일 복잡성 사례
변수 패널에 946개의 color variables가 중첩 그룹으로 정리되어 있고, 단일 변수에 Light, Dark, FigJam-Light, FigJam-Dark, DevMode-Light, DevMode-Dark, Slides-Light, Slides-Dark의 8개 mode 값 연결 상태
모달 footer 컴포넌트의 variant 편집기에는 12개 variants가 있고, 드롭다운에 DS Library Swap, QA Plugin, Growth Stepper, Sharing Actions 같은 값 포함
오른쪽 패널에는 Border, Second CTA, Helper Text 등 8개 props 표시 상태
effect styles 패널에서 slider 컴포넌트의 style 이름이 light/elevation-300-tooltip으로 지정되어 있고, 정의를 펼치면 30% black의 0.5px drop shadow 하나가 전체 내용
해당 CSS variable과 대응 관계를 문서화하는 유일한 방법이기 때문에 이런 이름의 style이 별도로 존재하는 구조
combo input 컴포넌트에는 16개 variants가 있고, layers 패널의 자식 이름이 "Default, Default, Close Button=False", "Default, Focused, Close Button=True" 같은 형태
색상이 잘못 보이는 문제를 디버깅하는 과정도 복잡한 체인 구조
컴포넌트가 variable을 사용하고, 그 variable이 다른 variable에 alias되며, 다시 mode를 참조하고, mode는 instance 수준에서 override되며, 그 instance는 library swap이 적용된 중첩 컴포넌트 안에 존재하는 형태
갈라지는 두 가지 디자인 도구 형태
앞으로의 디자인 도구는 두 가지 뚜렷한 형태로 갈라질 가능성 제기
2016년 Figma와 다른 도구들이 겨뤘던 질문인 “디자이너가 아이디어를 가장 빨리 꺼내게 도와주는 도구가 무엇인가”가 다시 초기화되는 구도
Figma Make는 새 환경에서도 design file이 canonical이라는 전제를 유지하는 도구로 규정된 상태
Figma styles, component libraries, proprietary props를 읽고, 시스템 내부에 머무르려는 사람 또는 머물 수밖에 없는 사람에게 유리한 성격
반대로 Claude Design은 정반대 선택을 하는 첫 번째 도구로 위치한 상태
Arts and Crafts의 “truth to materials” 원칙과 연결되며, 사물이 무엇이고 어떻게 만들어졌는지에 솔직해야 한다는 관점과 맞닿은 상태
Figma는 매우 경직된 스키마 위에 자유로운 것처럼 보이는 외형을 덧씌운 반대편 사례로 배치된 상태
Claude Design은 거칠더라도 HTML과 JS 기반이라는 점을 숨기지 않는 구조
Gustav Stickley의 1902년경 lamp table 사례와 연결되며, joinery를 숨기지 않고 wood는 그대로 wood인 상태와 비슷한 비유
Claude Design의 구조적 이점
Claude Code와 형제 관계라는 점이 큰 구조적 이점
장기적으로 Claude Design이 결과물을 직접 Claude Code로 넘기고, 반대로도 연결되는 흐름 예상
Claude Design의 onboarding에서 이미 저장소 import 지원 상태
디자인과 구현 사이의 피드백 루프는 오래된 마찰 지점이었지만, 하나의 대화로 합쳐지는 방향 제시
코드와 무관한 다른 도구 가능성
다른 한 축의 새 도구는 코드에 대한 기대가 전혀 없는 순수 탐색 환경 가능성
rectangles를 놓고, layer styles를 쌓고, blend modes와 gradients를 조정하며, 시스템이나 프롬프팅 규약에 얽매이지 않고 실험하는 공간 성격
iPad app과 Pencil 지원으로 빠르게 사각형을 스케치하는 형태 가능성 언급
37signals의 Draft for iPad 링크 함께 제시
또는 더 반대 방향으로 가서 Photoshop에 가까운 고충실도 compositing 중심 도구 가능성
CSS effects의 한계에 더 이상 얽매이지 않게 되면서 상상력을 더 넓게 쓰는 방향
Figma는 수명의 90% 동안 사실상 drop shadow와 blur만 layer effect로 제공했다는 지적 포함
Figma의 Sketch moment
Figma의 Sketch moment가 빠르게 다가오는 상태라는 표현
추가 설명 없음
추가 문구
추신
Figma 내부 Slack에서 이 글이 퍼질 수 있다는 상상과 함께, 지난해 인터뷰 당시 채용했더라면 이런 일이 없었을 것이라는 문구 포함
Sketch를 향해 particle effects, debossing effects, mesh transforms, metal shaders 추가와 같은 강한 표현의 촉구 포함
Mac native라는 점에 기대지 말고 더 적극적으로 움직이라는 표현 포함
욕설에 대한 사과 문구 포함
덧붙이는 추신
@jonnyburch가 비슷한 생각을 담은 블로그 글 링크를 공유했고, 더 깊게 보고 싶다면 좋다는 언급 포함
3 hours ago
1
English (US) · 