figma·2025년 10월 5일·3분 읽기큐레이션 요약

ChatGPT 브레인스토밍을

ChatGPT의 새로운 Figma 앱은 대화 중 나온 아이디어와 첨부 파일을 분석해 FigJam 다이어그램으로 변환해준다. 손그림, PDF, PRD, 기술 문서 등을 바탕으로 플로차트·시퀀스 다이어그램·상태 다이어그램·간트 차트 등을 만들고 수정할 수 있어, 개인 브레인스토밍을 팀 협업용 산출물로 빠르게 발전시키는 것이 핵심이다. 이 기능은 Figma MCP 서버를 기반으로 하며, 글 작성 시점에는 EU 외 지역의 로그인한 ChatGPT 사용자에게 제공된다. ## ChatGPT 브레인스토밍을 FigJam으로 변환 - ChatGPT 대화 내용을 바탕으로 적절한 FigJam 다이어그램을 추천하고 자동 생성한다. - 사용자는 프롬프트에 Figma 앱을 직접 언급할 수 있다. - 예: “Figma, 이 스케치로 다이어그램을 만들어줘.” - 사진, 손그림, PDF 등의 파일을 업로드해 다이어그램 생성에 참고시킬 수 있다. - 현재 지원되는 다이어그램 유형은 다음과 같다. - 텍스트 기반 플로차트 - 시퀀스 다이어그램 - 상태 다이어그램 - 간트 차트 - 생성된 결과는 FigJam에서 팀원들과 공유하고 반복적으로 수정할 수 있다. ## 디자인 아이디어를 빠르게 발전시키기 - 냅킨이나 화이트보드에 그린 임시 스케치를 공유 가능한 FigJam 파일로 변환한다. - ChatGPT에 다이어그램 수정, 주제 확장, 다른 시각화 방식 제안을 요청할 수 있다. - 복잡한 문서와 맥락을 업로드하면 ChatGPT가 첫 번째 다이어그램 초안을 작성한다. - 디자이너는 아이디어를 손쉽게 디지털 산출물로 바꾼 뒤 팀 리뷰와 협업을 진행할 수 있다. ## 기술 아키텍처와 시스템 설계 시각화 - 기술 문서와 화면 캡처를 업로드해 소프트웨어 아키텍처 다이어그램을 생성하거나 갱신할 수 있다. - 기술 블로그와 사례 연구를 바탕으로 여러 기술 접근법을 비교하는 구조도를 만들 수 있다. - 웹페이지 스크린샷을 분석해 관련 React 컴포넌트 구조를 다이어그램으로 표현할 수도 있다. - 분산된 코드와 문서, 팀별로 나뉜 지식을 하나의 시각적 모델로 통합해 시스템 설계 논의와 기술 의사결정을 돕는다. - 생성된 다이어그램을 바탕으로 엔지니어들이 실시간으로 협업할 수 있다. ## 제품 기획과 사용자 흐름 정리 - 권한 관리처럼 여러 선택지가 있는 문제를 옵션별 다이어그램으로 만들어 장단점을 비교한다. - PRD를 업로드해 사용자 여정이나 기능 플로차트를 생성한다. - 제품·디자인·엔지니어링 요구사항을 입력해 출시 일정을 간트 차트로 구성한다. - ChatGPT에서 개인적으로 여러 아이디어를 탐색한 뒤 FigJam에서 팀과 함께 우선순위와 실행 계획을 조율할 수 있다. ## Figma MCP 서버 기반 통합 - 이 기능은 Figma MCP 서버를 기반으로 동작한다. - MCP 서버는 원격 접근을 지원하며, 사용자가 작업 중인 맥락을 Figma 작업 환경으로 연결한다. - 따라서 ChatGPT의 분석 능력과 FigJam의 멀티플레이어 협업 기능을 결합할 수 있다. - 글 작성 시점에는 로그인한 ChatGPT 사용자 중 EU 외 지역 사용자에게 제공되며, 향후 더 많은 기능과 다이어그램 유형이 추가될 예정이다. 실무에서는 먼저 ChatGPT에 원문 자료나 스케치를 제공해 초안을 만들고, FigJam에서 사실관계·구조·표현을 검토한 뒤 팀 협업 자료로 다듬는 방식이 가장 효과적이다. AI가 만든 다이어그램은 초안이므로 기술적 정확성과 일정의 현실성은 담당자가 반드시 확인해야 한다.

원문 읽기(새 탭에서 열림)

FigmafigjamReactchatgpt+4

figma·2025년 9월 23일·3분 읽기큐레이션 요약

디자인 맥락에 관심을

디자인 파일은 단순한 시각적 결과물이 아니라 개발자와 AI 코딩 도구가 이해하는 실행 가능한 맥락이어야 한다. Figma의 Dev Mode MCP 서버가 디자인을 코드로 변환할수록, 디자인 시스템과 파일 구조를 명확히 관리하는 일이 정확하고 빠른 구현의 핵심이 된다. 따라서 디자이너는 디자인 시스템을 코드와 연결하고, 개발자가 소비하기 쉬운 형태로 파일을 구성해야 한다. ## 디자인 시스템을 코드와 연결하기 - 색상, 간격, 크기, 타이포그래피를 **컴포넌트와 변수**로 표준화하면 반복 가능한 패턴과 일관성을 확보할 수 있다. - **Code Connect**를 사용하면 Figma 컴포넌트와 실제 코드 컴포넌트를 연결할 수 있다. - Dev Mode에서 실제 코드 스니펫을 제공한다. - Figma의 컴포넌트 속성 및 변형이 코드에서 어떻게 대응되는지 문서화한다. - **변수의 code syntax**를 지정하면 색상·타이포그래피·상태 등의 값이 웹과 네이티브 코드에서 어떤 문법으로 표현되는지 명확해진다. - Dev Mode MCP 서버는 이 정보를 AI 에이전트에 전달한다. - AI가 전체 코드베이스를 검색하지 않고도 적절한 컴포넌트와 변수 정보를 가져올 수 있다. - 디자인 시스템에 연결된 카드 컴포넌트라면, 정확한 간격·색상·타이포그래피와 실제 코드 구조를 반영한 코드를 생성할 수 있다. - 이러한 맥락을 Figma 라이브러리에 구축하면 조직 전체에서 재사용할 수 있어, 새로운 UI를 만드는 사람과 AI 도구 모두 같은 기준을 활용하게 된다. ## 개발자가 이해하기 쉬운 파일 구조 만들기 - 페이지 계층, 프레임, 레이어의 이름을 의도적으로 구성하면 디자인 작업뿐 아니라 개발자와 MCP가 디자인을 해석하는 데도 도움이 된다. - 파일 구조를 정리할 때는 다음 원칙이 중요하다. - **주요 반응형 브레이크포인트별 프레임을 만든다.** - 화면 크기에 따라 시각적 변화가 큰 경우 별도 프레임으로 표현한다. - 예를 들어 데스크톱 내비게이션이 모바일에서 메뉴 아이콘으로 바뀌는 동작을 명시할 수 있다. - **Auto Layout을 적극 활용한다.** - 다양한 화면 너비, 브레이크포인트, 텍스트 길이에 따라 레이아웃이 어떻게 변하는지 구조적으로 표현할 수 있다. - 단순히 픽셀 위치를 지정하는 것보다 실제 구현 방식에 가까운 정보를 제공한다. - 프레임과 레이어에 의미 있는 이름을 부여해 각 요소의 역할과 계층을 분명히 한다. - 잘 정리된 파일은 개발자가 디자인 의도를 추측하는 시간을 줄이고, AI 에이전트가 레이아웃과 컴포넌트 관계를 오해할 가능성도 낮춘다. ## 디자인 맥락이 AI 코딩의 정확도를 좌우한다 - 에이전트형 코딩 도구가 널리 사용되면서 디자인 파일의 구조와 명확성이 과거보다 중요해졌다. - AI는 시각적 결과만 보는 것이 아니라 다음과 같은 구조화된 정보를 활용해야 정확한 코드를 만들 수 있다. - 컴포넌트와 코드의 연결 관계 - 변수의 이름과 코드 문법 - 레이아웃 규칙과 반응형 동작 - 프레임 및 레이어의 계층 구조 - 디자인 시스템과 MCP 서버를 함께 사용하면 AI가 브랜드에 맞고 재사용 가능한 코드를 생성할 가능성이 높아진다. - 결과적으로 디자이너의 역할은 화면을 설계하는 데서 끝나지 않고, 개발과 AI가 활용할 수 있는 디자인 맥락을 구축하는 것까지 확장된다. 디자인을 전달할 때는 완성된 화면만 공유하기보다 컴포넌트·변수·코드 연결·반응형 구조를 함께 관리하는 것이 좋다. 특히 공통 라이브러리에 이러한 정보를 표준화해두면 개발자와 AI 모두 더 빠르고 일관되게 프로덕션 코드를 작성할 수 있다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템AI 에이전트모델 컨텍스트 프로토콜+3

figma·2025년 9월 18일·4분 읽기큐레이션 요약

Intercom AI 서밋의

Intercom의 AI 서밋 ‘Pioneer’ 브랜딩은 AI의 발전을 씨앗이 꽃피는 과정에 비유한 ‘외계적 슈퍼블룸’ 콘셉트로 제작됐다. Intercom Creative Studio는 꽃, 꽃가루 입자, 점묘 스타일, 3D 모션을 결합해 웹·영상·무대·인쇄물·굿즈까지 확장 가능한 시각 언어를 구축했다. 제작 전 과정을 Figma에서 협업하며 아이디어 탐색부터 프로토타이핑과 QA까지 하나의 작업 공간에서 진행한 점이 핵심이다. ## 인터콤의 브랜드를 확장하는 디자인 시스템 - Intercom의 Creative Studio는 일반적인 브랜드 가이드라인을 넘어, Intercom과 AI 고객 서비스 에이전트 Fin, 캠페인, 제품 출시, 웹사이트, 이벤트별 하위 디자인 시스템을 구축한다. - 약 30명으로 구성된 글로벌 팀은 Figma를 디자인 시스템과 협업의 중심, 즉 ‘핵심 허브’로 사용한다. - Pioneer 2025의 브랜드는 웹사이트와 디지털 캠페인뿐 아니라 다음 행사 요소에도 적용되어야 했다. - 무대 디자인 - 대형 디지털 스크린 - 안내 표지와 동선 표시 - 기념품 - 정적 이미지와 모션 콘텐츠 - 전년도 Pioneer의 ‘잠망경’ 콘셉트가 AI의 미래를 바라보는 시선을 표현했다면, 올해는 지난 아이디어가 성장하고 새로운 가능성으로 피어나는 모습을 표현하는 방향으로 전환했다. ## 폭넓은 크리에이티브 영역 탐색 - 팀은 Figma Design에서 다양한 무드보드를 제작하며 여러 시각적 방향을 폭넓게 실험했다. - 무드보드에는 다음 자료를 함께 배치했다. - 모션 에셋 - 정지 이미지 - 벡터 파일 - 로고 - 영상 레퍼런스 - 모션 디자이너, 브랜드 디자이너, 카피라이터가 같은 작업 공간에서 이미지 편집, 드로잉, 콜라주를 즉시 주고받았다. - 영상 임베드 기능을 활용해 초기 단계부터 모션 원칙을 검토했다. - 영상 위에 로고 스케치를 얹어 실제 커뮤니케이션에서 어떻게 보이는지 확인 - 메시지와 움직임이 함께 작동하는지 조기에 테스트 - 최종적으로 ‘AI 슈퍼블룸’이라는 콘셉트가 선택됐다. - 지난해 뿌린 씨앗이 올해 꽃으로 피어난다는 서사 - 꽃을 AI 발전과 새로운 아이디어의 상징으로 활용 - 꽃가루 입자를 연상시키는 점묘 스타일로 발표자 초상과 이미지를 표현 - 이해관계자에게 콘셉트를 공유할 때는 긴 아트보드에 설명과 시안을 배치했다. - 발표 슬라이드처럼 넘기지 않고 스크롤하며 탐색 가능 - 각 보드에 직접 댓글 작성 가능 - 피드백 단계별로 별도 페이지를 만들어 검토 과정과 결과물을 체계적으로 관리 ## 꽃과 꽃가루를 활용한 모션 언어 - 추상적인 콘셉트를 구체화하기 위해 3D 꽃 렌더링을 제작했다. - 꽃은 현실적인 식물보다는 다음과 같은 ‘외계적’ 특성을 갖도록 디자인됐다. - 비현실적인 크기 - 과장된 개화 속도 - 낯설고 변형되는 형태 - 이는 빠르게 변화하는 AI 기술의 성격과 연결된다. - 팀은 사실적인 표현 대신 꽃가루 입자에 집중해 차별화된 시각 언어를 만들었다. - 입자 밀도와 움직임을 조절해 풍부한 화면 구성 구현 - Pioneer 로고와 정적 이미지에도 입자 기반 스타일 적용 - 모션에서는 역동적으로, 인쇄물에서는 절제된 형태로 활용 가능 - 외부 스튜디오 Colors and the Kids와 협업해 꽃의 종류와 개화 애니메이션을 탐색했다. - Figma Draw로 영상의 특정 프레임 위에 직접 주석과 드로잉을 추가했다. - 움직임의 방향과 속도 표시 - 꽃잎 형태가 어떻게 바뀌어야 하는지 설명 - 별도 프로그램으로 파일을 옮기지 않고 반복 수정 ## Figma에서 진행한 웹 경험 프로토타이핑 - Pioneer 웹사이트의 디자인, 프로토타입 제작, QA를 모두 Figma 안에서 진행했다. - 플랫폼을 오가며 작업할 필요가 없어 디자인과 검수 과정이 단순해졌다. - 실시간 댓글 기능을 통해 디자이너와 협업자가 수정 중인 화면에 바로 의견을 남겼다. - Slack 등 별도 커뮤니케이션 도구로 맥락을 옮길 필요 감소 - 변경 사항과 피드백을 같은 화면에서 확인 - 개발자와 디자이너가 인터랙션을 조기에 검증 - 웹사이트 프로토타입은 브랜드가 정적인 그래픽에 머물지 않고 실제 사용자 경험으로 어떻게 작동하는지 확인하는 수단이 됐다. ## 실용적인 시사점 - 대규모 브랜딩 프로젝트에서는 초기 탐색, 모션 실험, 이해관계자 피드백, 웹 프로토타이핑을 하나의 협업 환경에 연결하면 작업 속도와 일관성을 높일 수 있다. - 콘셉트를 꽃이나 입자처럼 명확한 시각적 요소로 정의하되, 모션·인쇄·웹·공간 디자인에 모두 적용할 수 있도록 밀도와 움직임을 조절 가능한 시스템으로 설계하는 것이 중요하다. - 특히 초기 단계부터 정적 이미지와 모션을 함께 검토하면 최종 결과물에서 브랜드 경험이 매체별로 분리되는 문제를 줄일 수 있다.

원문 읽기(새 탭에서 열림)

FigmaAI디자인 시스템프로토타이핑+3

figma·2025년 9월 14일원문

자유 연상: 프로덕션 (새 탭에서 열림)

에미상 수상 프로덕션 디자이너 제레미 힌들(Jeremy Hindle)은 애플 TV+ 시리즈 <세버런스: 단절>의 무대인 루먼 코퍼레이션의 기묘하고도 고립된 세계를 구축하기 위해 건축, 고전 영화, 산업 디자인의 정수를 결합했습니다. 그는 "네 개의 책상, 넓은 방"이라는 단순한 대본 설명을 바탕으로, 시청자가 시각을 넘어 신체적으로 반응할 수 있는 '감정'을 디자인하는 데 집중했습니다. 이를 통해 현대 직장 문화의 공허함과 기이함을 시각적으로 극대화하며 독보적인 미장센을 완성했습니다. **루먼 코퍼레이션의 기틀이 된 건축적 영감** * 자크 타티의 영화 <플레이타임(1967)>의 건축적 풍자와 반복적인 그리드 구조를 통해 현대 사무실의 부조리함을 시각화했습니다. * 에로 사리넨과 케빈 로치가 설계한 존 디어(John Deere) 본부의 기념비적인 건축 양식에서 영감을 받아 루먼 산업의 거대하고 제도적인 위압감을 구현했습니다. * 특히 극 중 주요 공간인 MDR(거시 데이터 정제) 팀의 아이코닉한 데스크 디자인은 이러한 대규모 기업 건축 환경의 디테일에서 착안되었습니다. **미니멀리즘과 제품 디자인의 정수** * 디터 람스가 디자인한 브라운(Braun)의 벽면 콘솔(TS 45 & TG 60) 같은 디자인 클래식을 실제 세트장에 배치하여 시대를 초월한 정교함을 더했습니다. * '가능한 한 적은 디자인(As little design as possible)'을 지향하는 디터 람스의 철학을 반영하여, 불필요한 장식을 배제하고 핵심적인 형태와 기능만 남긴 '정갈하지만 외로운' 공간을 조성했습니다. **공간의 규모와 여백이 주는 감각적 효과** * 영화 <제로 다크 서티> 작업 당시의 경험을 바탕으로, 제작진 전체가 공간의 스케일을 직관적으로 이해할 수 있도록 실제 크기의 물리적 모델을 구축하여 세계관의 가독성을 높였습니다. * 코엔 형제의 영화 <파고> 속 한 장면에서 영감을 얻은 '부정적 공간(Negative Space)'의 활용은 감독 벤 스틸러에게 전달된 핵심 비주얼이었습니다. * 단순히 넓은 공간을 채우는 것이 아니라, 의도적인 비어있음을 통해 등장인물의 고립감과 심리적 압박을 시각적으로 전달하는 데 주력했습니다. **영속적인 시각적 문법을 향한 지향점** * 영화 <그녀(Her)>의 프로덕션 디자인을 참고하여 캐릭터의 감정과 공간, 의상이 완벽하게 동화되는 고도의 완성도를 추구했습니다. * 데이비드 린치의 <트윈 픽스>처럼 TV 시리즈라는 매체 안에서 독보적이고 영속적인 에너지를 가진 세계를 구축하고자 했습니다. 제레미 힌들의 작업은 프로덕션 디자인이 단순한 배경 설정을 넘어, 관객의 신체적 반응을 이끌어내는 핵심적인 서사 도구임을 증명합니다. 설득력 있는 가상 세계를 구축하고자 하는 창작자라면 고전 건축의 구조적 미학과 영화적 여백의 미를 결합하는 그의 접근 방식을 깊이 있게 탐구해 볼 가치가 있습니다.

Figmavisual-designindustrial-designarchitecture+3

figma·2025년 9월 9일·3분 읽기큐레이션 요약

제12호: 새로운 역할

AI와 빠른 반복 작업으로 제품 개발자의 역할 경계가 빠르게 흐려지고 있다. PM이 프로토타입을 만들고, 개발자가 디자인을 수정하며, 디자이너가 코드 기반 결과물을 생성하는 등 역할이 확장되는 만큼 협업 방식과 업무 규칙도 함께 바뀌어야 한다. Figma는 공동 제작, 실험, 디자인 시스템, AI 활용을 통해 이러한 변화를 관리하는 사례들을 소개한다. ## 역할의 확장과 변화 - 제품 개발자의 **64%가 두 개 이상의 역할**을 맡고 있다고 답했다. - 디자이너가 아닌 사람의 **56%가 디자인 관련 업무**를 수행한다. - AI 도구와 짧아진 반복 주기는 개인이 기존 직무 범위를 넘어 더 넓은 제품 개발 과정에 참여하도록 만든다. - 역할이 겹치는 환경에서는 전통적인 직무 구분보다 시간 관리와 협업 규칙을 새롭게 설계하는 것이 중요하다. ## 직접 만들어 설명하는 프로토타이핑 - Figma 제품 디자이너 Natasha Tenggoro는 Figma Buzz의 동영상 재생 동작을 말로 설명하기 어려워 Figma Make로 직접 프로토타입을 제작했다. - 여러 프로토타입을 통해 팀이 기능을 직관적으로 이해하는 세 번의 “아하” 순간을 만들었다. - 핵심은 완성된 사양서를 전달하는 것이 아니라, 작동하는 결과물을 빠르게 보여주며 논의를 구체화한 점이다. - AI 기반 제작 도구는 디자이너가 아이디어를 설명하는 데서 그치지 않고 직접 검증 가능한 형태로 구현하도록 돕는다. ## 음악에서 영감을 얻은 브러시 디자인 - Figma Draw의 새로운 산포 브러시는 음악의 장르와 표현 방식에서 영감을 받았다. - 브러시의 간격, 흔들림, 불규칙성은 음악의 템포·질감·볼륨을 조정하는 과정과 유사하게 다뤄졌다. - 두왑, 베이퍼웨이브, 컨트리풍 음악인 혼키통, 스크리모 등 **10개 장르**를 시각적 브러시 스타일로 해석했다. - 기능 설계에 다른 분야의 감각과 비유를 적용하면 단순한 도구 추가를 넘어 창작 가능성을 확장할 수 있다. ## Duolingo의 공동 제작 방식 - Duolingo의 Math 팀은 전통적인 디자인-개발 핸드오프 대신 디자인과 엔지니어링의 공동 제작을 강조한다. - “보여주고 설명하지 말라”는 원칙과 “v1과 MVP를 구분하라”는 태도를 바탕으로 빠르게 실험한다. - 스크래피한 프로토타입을 함께 만들고, 아이디어를 반복적으로 수정하며 제품 방향을 정한다. - 역할별 산출물을 순차적으로 넘기는 방식보다 문제를 함께 해결하는 방식이 더 빠른 실행과 재창작을 가능하게 한다. ## 에이전시와 프리랜서의 협업 변화 - 변화는 기업 내부 팀에만 국한되지 않고, 크리에이티브 에이전시와 프리랜서의 고객 협업 방식에도 나타난다. - 에이전시는 전통적인 클라이언트-공급자 경계를 줄이고 프로젝트 전 과정에서 고객과 함께 작업한다. - Figma 같은 협업 도구를 활용해 고객을 초기 아이디어, 시안 검토, 제작 과정에 지속적으로 참여시킨다. - 고객과의 공동 제작은 결과물의 품질뿐 아니라 의사결정 속도와 이해도도 높일 수 있다. ## 디자인 시스템과 AI 에이전트 - AI 에이전트에게 코드 생성을 맡길 때는 프롬프트만 개선하기보다 입력의 기준이 되는 디자인 시스템을 먼저 정비해야 한다. - 디자인 시스템과 MCP 서버를 결합하면 AI가 브랜드에 맞고 실제 제품 맥락에 적합한 결과물을 생성할 가능성이 높아진다. - 디자인 토큰, 컴포넌트, 패턴 같은 구조화된 정보가 AI의 출력 품질을 좌우한다. - 디자인 시스템은 사람을 위한 일관성 도구를 넘어 AI 생산성을 높이는 기반이 된다. ## 실무에 적용할 때의 시사점 - 직무 경계를 고정하기보다 팀원이 문제 정의부터 프로토타이핑과 구현까지 유연하게 참여하도록 한다. - 말로 설명하기 어려운 아이디어는 빠른 프로토타입으로 대체한다. - 디자인과 개발을 분리된 핸드오프로 운영하기보다 초기부터 공동 제작한다. - AI 활용 전 디자인 시스템과 브랜드 규칙을 구조화해 신뢰할 수 있는 입력을 마련한다. - 새로운 역할에는 새로운 협업 규칙이 필요하므로, 책임 범위와 검토 절차도 함께 재정의해야 한다.

원문 읽기(새 탭에서 열림)

FigmaAI디자인 시스템프로덕트 디자인+2

figma·2025년 9월 9일·3분 읽기큐레이션 요약

역할과 책임은 이제 과거의

제품 개발 조직에서 역할과 책임의 경계가 점점 흐려지고 있다. 디자이너뿐 아니라 PM, 개발자, 마케터 등 다양한 직군이 디자인과 프로토타이핑에 참여하며, 응답자의 64%가 두 개 이상의 역할을 수행한다고 답했다. 이러한 변화는 협업과 의사결정을 빠르게 만들지만, 도구의 과잉과 역할 혼선이라는 새로운 문제도 낳고 있다. ## 제품팀의 역할 경계가 흐려지는 현상 - Figma는 Factworks와 Fusion Hill을 통해 51건의 정성 인터뷰와 1,199명 대상 설문을 진행했다. - 응답자의 64%가 자신을 두 개 이상의 역할로 인식했으며, 3분의 1 이상은 세 개 이상의 역할을 수행한다고 답했다. - 비디자이너의 56%는 적어도 하나의 디자인 관련 업무에 “많이” 또는 “매우 많이” 참여한다고 응답했다. - PM이 프로토타입을 만들고, 개발자가 초기 디자인을 검토하며, 마케터와 콘텐츠 담당자가 Figma 파일에 직접 의견을 남기는 방식이 일반화되고 있다. ## 디자인은 디자이너만의 업무가 아니다 - 비디자이너의 디자인 관련 업무 참여는 전년보다 10% 증가했다. - PM의 70%가 저충실도 목업이나 와이어프레임을 만들고 있으며, 59%는 인터랙티브 프로토타이핑도 수행한다고 답했다. - 제품 개발자 4명 중 1명은 최근 새로운 디자인 도구를 도입했다. - 아직 디자인 도구를 사용하지 않는 사람 중 42%는 1년 안에 사용할 계획이라고 밝혔다. - 마케터는 소셜 미디어용 시각 자료를 만들고, PM은 디자이너의 작업을 기다리기 전에 아이디어를 시각화하는 식으로 업무가 확장되고 있다. ## 역할 중첩이 협업을 개선하는 방식 - PM이 초기 아이디어를 목업으로 만들면 디자이너가 더 일찍 방향을 조정하고 불필요한 수정 왕복을 줄일 수 있다. - 개발자가 구현 전에 Figma 목업을 검토하면 기술적 제약이나 실현 가능성 문제를 조기에 발견할 수 있다. - 초기 시각화는 문제와 해결책에 대한 공통 이해를 형성하고, 직군 간 커뮤니케이션을 구체화한다. - 절약된 시간은 사용자 조사, 전략 수립, 디자인 시스템 유지·확장, 전문 역량 강화에 재투자할 수 있다. - 다만 역할 확장이 전문 디자이너의 가치를 대체한다기보다, 각 직군이 더 효과적으로 협업하기 위한 수단으로 활용되어야 한다. - 이를 위해서는 팀 내 신뢰 관계, 이른 단계의 비전 정렬, 새로운 도구를 배우는 동료에 대한 개방성이 중요하다. ## 도구 확산과 AI가 역할 변화를 가속한다 - 응답자의 72%는 AI 도구를 역할 변화의 가장 큰 원인으로 꼽았다. - Figma Make, Claude Code, GitHub Copilot 등을 활용하면 몇 가지 프롬프트만으로 프로토타입이나 실행 가능한 코드를 빠르게 만들 수 있다. - Notion, Figma Buzz, Airtable 같은 도구는 마케팅 자산 제작과 프로젝트 관리도 간소화한다. - 기술이 특정 직군의 전유물이 되기보다, 여러 직군이 직접 결과물을 만들 수 있도록 진입 장벽을 낮추고 있다. ## 도구 과잉이 만드는 마찰 - 역할 변화의 결과로 더 많은 소프트웨어를 사용하게 되었다고 답한 응답자는 71%였다. - 조사 대상은 스프레드시트, 프로젝트 관리, 그래픽 디자인, 코딩 보조 등 16개 도구 범주를 사용했다. - 제품팀은 평균 7.6개 범주의 도구를 함께 사용하고 있어, 개별 도구의 효과가 분산될 수 있다. - 새로운 도구가 빠르게 등장하면서 구성원이 이를 모두 학습하고 업무 흐름에 통합하기 어려워지고 있다. - 따라서 도구를 무조건 추가하기보다 팀의 협업 방식과 목적에 맞는 도구를 선택하고, 중복되는 워크플로를 줄이는 접근이 필요하다. 역할의 경계가 사라지는 흐름은 피하기보다 효과적으로 관리해야 한다. 각 직군이 초기 단계에서 시각화와 프로토타이핑에 참여하도록 장려하되, 전문성을 존중하고 도구 수를 체계적으로 관리하면 협업 속도와 제품 품질을 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)

FigmaAI디자인 시스템프로토타이핑+3

figma·2025년 9월 8일·3분 읽기큐레이션 요약

AI가 자동화할 수

AI가 프로토타입과 콘텐츠 제작을 빠르게 만들어내는 시대일수록, 좋은 결과와 훌륭한 결과를 가르는 요소는 인간의 ‘공예적 완성도’다. 호기심, 직관, 취향, 의도 같은 능력은 AI가 자동화하기 어렵고, AI의 산출물을 실제 사용자와 맥락에 맞게 조정하는 데 필수적이다. 따라서 AI는 아이디어 탐색과 반복을 가속하는 도구로 활용하되, 최종 방향과 품질 판단은 사람이 주도해야 한다. ## 호기심: 문제를 원점에서 다시 보기 - 호기심은 정해진 경로를 따르기보다 “왜 그런가?”, “만약 다르게 한다면?”을 질문하는 태도다. - Figma Make, Claude, ChatGPT 같은 도구를 활용하면 코딩 없이 프로토타입이나 캠페인 시안을 여러 방향으로 빠르게 탐색할 수 있다. - AI는 탐색 속도와 경우의 수를 늘려주지만, 다음과 같은 판단은 스스로 내리기 어렵다. - 기존 범위를 벗어나 새로운 가능성을 시험할지 여부 - 문제의 범위 자체를 다시 정의해야 하는지 여부 - 우연히 떠오른 아이디어나 직감이 더 깊이 탐구할 가치가 있는지 여부 - 초기에 폭넓게 탐색하면 이후 선택과 개선에 대한 확신이 커지고, 재작업과 팀 내 논의를 줄일 수 있다. - Figma 디자이너 Natasha Tenggoro는 Figma Make로 Figma Buzz의 동영상 기능을 여러 방식으로 프로토타이핑했다. - 다양한 방향과 예외 상황을 조기에 테스트했다. - 기능의 범위와 구현 가능성을 엔지니어링 팀이 더 명확히 이해할 수 있었다. - 개발 단계에서 발생할 수 있는 비용 큰 왕복 논의를 줄였다. ## 호기심의 실제 적용: 아이콘 체계 전체를 다시 설계하기 - Figma가 Figma Make, Figma Buzz, Figma Sites, Figma Draw를 출시하면서 Tim Van Damme은 네 제품의 아이콘을 새로 만들어야 했다. - 처음에는 새 제품별 아이콘 네 개를 만드는 작업처럼 보였지만, 작업 과정에서 기존 아이콘과 새 아이콘의 전체적인 통일성이 문제로 드러났다. - 그는 개별 아이콘만 설계하는 대신 Figma 아이콘 체계 전체를 재설계하는 방향으로 범위를 확장했다. - 이 결정으로 프로젝트 기간은 몇 주 늘었지만, 수백 가지 변형을 검토하며 다음 목표를 달성했다. - 각 아이콘이 개별 제품을 명확히 나타냄 - 전체 아이콘군은 일관된 시각 언어를 공유함 - 큰 광고 형식에서도 잘 확장됨 - Figma만의 정체성을 유지함 - 이는 주어진 과업을 빠르게 완료하는 것보다, 문제를 더 근본적인 수준에서 다시 정의하는 호기심이 더 나은 결과를 만들 수 있음을 보여준다. ## 직관: 기술적으로 작동하는 것 이상을 판단하기 - AI는 제품을 빠르게 출시 가능한 상태로 만들 수 있지만, 무엇이 고객에게 가장 잘 전달되고 공감될지는 스스로 확정하기 어렵다. - 사람은 프로토타입이 기능적으로는 정상이어도 다음과 같은 문제를 감지할 수 있다. - 사용자가 혼란을 느낄 수 있는 상호작용 - 정보가 모두 들어갔지만 지나치게 답답한 레이아웃 - 콘텐츠가 맞더라도 충분히 편안하거나 매력적으로 느껴지지 않는 경험 - CVS Health의 Eliel Johnson은 디자인을 직함이 아니라 행동으로 보며, “이것이 사용자에게 좋은 느낌을 주는가?”를 계속 질문해야 한다고 말한다. - 직관은 명확한 데이터나 규칙으로 즉시 설명되지 않더라도, 사용자 경험의 어색함과 개선 가능성을 먼저 포착하는 인간의 판단 능력이다. AI를 단순히 결과물을 자동 생성하는 수단으로 사용하기보다, 다양한 아이디어를 빠르게 실험하고 검증하는 탐색 도구로 활용하는 것이 바람직하다. 최종적으로는 사람이 문제의 범위를 다시 정의하고, 사용자의 감정과 맥락을 고려하며, “작동하는가”를 넘어 “좋은 경험인가”를 판단해야 한다.

원문 읽기(새 탭에서 열림)

Figma사용자 경험프로토타이핑생성형 AI+2

figma·2025년 9월 8일·3분 읽기큐레이션 요약

여름 캠페인의 해부:

Instacart는 1990년대의 향수를 자극하는 간식과 디자인을 활용해 “Summer Like It’s 1999” 캠페인을 진행했다. 1999년 가격으로 Bagel Bites, Capri-Sun, Otter Pops 등을 판매하고, 뉴욕에서 Third Eye Blind 무료 콘서트를 열어 온라인과 오프라인을 연결했다. 캠페인의 성공 요인은 여러 팀과 파트너가 Figma를 중심으로 실시간 협업하며 일관된 디자인 시스템을 구축한 데 있었다. ## 1990년대 향수를 되살린 캠페인 - 버터플라이 클립, 초커, 헐렁한 청바지, 버킷햇 등 당시 유행을 현대적으로 재해석했다. - “단순하고 carefree했던 시절”에 대한 향수를 캠페인의 정서적 기반으로 삼았다. - 대표적인 1990년대 간식을 당시 가격으로 제공해 과거의 여름 경험을 재현했다. - 앱 아이콘과 스플래시 화면부터 TV 광고, 옥외 광고, 콘서트까지 수십 개의 접점을 하나의 캠페인으로 연결했다. ## 브랜드와 복고풍 사이의 균형 - Instacart의 자체 브랜드 정체성을 유지하면서도 1990년대 분위기를 강하게 표현하는 것이 핵심 과제였다. - 청키한 타이포그래피, 선명한 색상, 피시 아이 렌즈 사진을 주요 시각 요소로 사용했다. - 팀은 다양한 1990년대 디자인 자료를 폭넓게 탐색한 뒤, 브랜드와 캠페인을 연결하는 핵심 요소만 추려냈다. - 크리에이티브 스튜디오는 타이포그래피, 색상, 일러스트레이션, 사진, 로고와 락업 표현을 매일 논의하며 방향을 조정했다. ## 확장 가능한 디자인 툴킷 - 캠페인 툴킷에는 다음 요소가 체계적으로 정리됐다. - 기본 및 보조 색상 팔레트 - 일러스트레이션 스타일 - 타이포그래피와 문구 배치 - 제품 패키지 표현 방식 - 사진 및 질감 활용법 - 로고와 캠페인 락업 규칙 - 툴킷은 단순한 가이드 문서가 아니라 내부 팀과 외부 파트너가 계속 활용하는 ‘살아 있는 파일’로 운영됐다. - 캠페인 진행 중 새로운 요구사항이 생겨도 기존 규칙 안에서 자유롭게 변형할 수 있었다. - Venmo 파트너십 광고처럼 예상하지 못한 확장 프로젝트도 기존의 글꼴, 일러스트, 사진 지침을 활용해 빠르게 제작할 수 있었다. ## Figma를 중심으로 한 협업 방식 - 브랜드, 퍼포먼스, 커머셜 마케팅, 앱 제작팀이 Figma를 공동 작업 공간으로 사용했다. - 마케터도 파일에 직접 접근해 작업 진행 상황을 확인하고, 제작 중간에 의견을 제시할 수 있었다. - 완성물을 마지막에 전달하는 방식 대신, 작업 과정의 ‘중간 상태’를 공유하며 지속적으로 수정했다. - 다양한 팀과 외부 이해관계자가 빠르게 움직이는 캠페인에서는 개방성과 유연성이 중요하다는 점을 보여준다. - Figma는 디자인 제작 도구이자 캠페인의 일관성을 유지하는 단일 기준점 역할을 했다. ## 세밀하게 설계한 사진 브리프 - 사진 브리프는 무엇을 촬영할지뿐 아니라 어떤 방식으로 촬영할지도 구체적으로 규정했다. - 캠페인의 핵심 CPG 제품이 사진 속에서 어떻게 보여야 하는지 명확히 지정했다. - 여러 이해관계자의 검토를 거쳐야 했기 때문에 제품 노출 방식과 촬영 구도가 세밀하게 정의됐다. - 사진 위에 일러스트레이션, 타이포그래피, 질감을 추가해 모든 소재가 동일한 캠페인처럼 보이도록 설계했다. - 낮은 앵글, 피시 아이 효과, 햇살이 느껴지는 야외 공간 등을 활용해 1990년대의 과장되고 낙관적인 분위기를 표현했다. ## 실용적인 시사점 대규모 캠페인에서는 완성된 결과물을 일방적으로 전달하기보다, 모든 팀이 접근할 수 있는 공유 툴킷과 실시간 리뷰 구조를 마련하는 것이 효과적이다. 특히 복고풍처럼 강한 스타일을 활용할 때는 시각적 요소를 무작정 늘리기보다 브랜드와 연결되는 핵심 규칙을 먼저 정하고, 그 안에서 다양한 실행물을 확장하는 방식이 유용하다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템typographyphotography+3

figma·2025년 9월 4일·3분 읽기큐레이션 요약

회복 탄력성 있는 디자인 팀

빠르게 변하는 기술 환경과 AI의 확산 속에서 회복탄력적인 디자인 팀을 만들려면 팀의 심리적 안전과 건강을 먼저 확보해야 한다. 동시에 실험과 역할 확장을 장려하고, 디자인 완성도를 경쟁력으로 삼아 변화에 적응하면서도 높은 품질을 유지해야 한다. 글은 Figma, Twitter, 37signals에서의 경험을 바탕으로 리더가 고정된 해법보다 원칙에 기반해 팀을 운영해야 한다고 강조한다. ## 팀의 건강과 심리적 안전을 우선하기 - 스트레스, 과로, 번아웃, 발언에 대한 두려움이 있으면 구성원은 역량을 충분히 발휘하기 어렵다. - 서로 신뢰하고 공동의 목표를 공유하는 환경이 창의적인 협업의 기반이 된다. - 다양한 의견이 반영되도록 실시간 회의뿐 아니라 비동기 채널도 운영해야 한다. 그래야 회의에서 가장 목소리가 큰 사람만 의사결정을 주도하지 않는다. - 프로젝트의 초기 스케치부터 최종 디자인까지 모든 단계의 결과물을 자유롭게 공유하도록 장려한다. - 1:1 미팅, 커리어 대화, 팀 설문을 정기적으로 진행해 문제가 커지기 전에 팀의 상태를 파악한다. - 실제 가용 시간과 업무량을 고려해 과도한 약속을 피해야 한다. - 리더가 모르는 점이나 어려움을 솔직하게 드러내면 구성원도 취약함과 의견을 안전하게 공유할 수 있다. ## 실험과 역할의 유연성 장려하기 - 디자이너마다 강점과 성장 영역이 다르므로, 서로 보완적인 역량을 가진 사람들을 함께 배치하면 팀의 균형과 학습 효과가 커진다. - 리서치, 디자인, 제품, 엔지니어링의 경계가 점점 흐려지는 만큼 전통적인 직무 범위에만 머물지 않도록 해야 한다. - 디자이너가 실제 구현과 가까워지도록 AI 프로토타이핑이나 코드 실험을 장려한다. - 실제 작동하는 결과물을 빠르게 평가하면 더 나은 디자인 결정을 내릴 수 있고, 결과적으로 생산성이 높아지는 선순환이 생긴다. - 실험 결과와 학습 내용을 공유할 공간을 마련한다. Figma의 `#design-wip` 채널처럼 미완성 아이디어, 스케치, 작동하는 프로토타입도 공유할 수 있어야 한다. - 디자인 크리틱에 제품·엔지니어링 등 협업 직군을 참여시켜 새로운 관점과 포용적인 작업 방식을 만든다. - 현재 제품을 계속 출시하는 실행과 미래의 작업 방식을 탐색하는 발명을 동시에 진행해야 한다. ## 완성도를 차별화 요소로 삼기 - 경쟁이 치열한 시장에서는 유용하고 잘 실행된 제품이 사용자 충성도와 추천을 높이고 성장을 이끈다. - 특히 엔터프라이즈 소프트웨어에서는 디자인 완성도가 뒤로 밀리는 경우가 많기 때문에 세심한 품질 관리가 차별점이 될 수 있다. - 완성도 높은 결과물을 만들려면 시각적 일관성, 인터페이스의 명확성, 세부적인 사용자 경험에 주의를 기울여야 한다. - 빠른 출시와 품질 사이에는 trade-off가 발생할 수 있으며, 때로는 새 기능 추가보다 UX 개선을 우선해야 한다. - 속도를 중시하는 상황에서도 품질을 자동으로 희생하지 않도록 팀 차원의 기준과 우선순위를 명확히 해야 한다. 결국 리더는 안전하게 의견을 낼 수 있는 문화를 만들고, 실험과 직무 간 협업을 지원하며, 속도와 품질 사이의 균형을 관리해야 한다. 정기적인 팀 상태 점검과 현실적인 업무량 조정, 작게라도 지속적인 프로토타이핑이 회복탄력적인 디자인 팀을 만드는 실용적인 출발점이다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템사용자 경험프로덕트 디자인+2

figma·2025년 9월 3일·3분 읽기큐레이션 요약

코프코어는 왜 갑자기

소프트웨어 기업의 로고와 굿즈가 더 이상 평범한 판촉물이 아니라 스트리트웨어와 문화적 상징으로 소비되고 있다. 이를 ‘코프코어(corpcore)’라 부르며, 빈티지 기술 기업에 대한 향수와 현대 브랜드의 한정판·패션화 전략이 이러한 흐름을 이끌고 있다. 결국 기업 굿즈는 소속감과 성취를 드러내는 동시에, 진지함과 아이러니를 오가는 자기표현 수단이 되었다. ## 코프코어의 부상 - 소프트웨어 로고가 들어간 티셔츠, 토트백, 모자, 물병 등이 밴드 티셔츠나 스포츠 유니폼처럼 착용되고 있다. - 과거에는 기업 굿즈가 촌스럽고 실용적인 판촉물로 여겨졌지만, 최근에는 패션 아이템으로 재평가된다. - 빈티지 Apple 티셔츠는 디자인이 단순함에도 Depop과 Grailed 같은 리셀 플랫폼에서 수백 달러에 거래된다. - 1997년에 출간된 Apple 티셔츠 역사서 초판도 최대 850달러에 판매될 정도로 수집 가치가 형성됐다. ## 컨퍼런스 굿즈에서 한정판 스트리트웨어로 - Figma의 연례 컨퍼런스 Config에서는 대형 설치물과 체험형 공간뿐 아니라 Season 4 컬렉션 팝업 스토어가 큰 인기를 끌었다. - 매장 앞에 긴 줄이 생겼고, Otto 캐릭터 봉제인형과 의류를 구매하려는 참석자가 몰렸다. - Figma Brand Studio는 Garrett Elizabeth Office와 8개월 동안 컬렉션을 개발했다. - 한정된 수량, 독창적인 디자인, 브랜드 팬덤이 결합하면서 기업 굿즈가 Supreme의 드롭처럼 소비됐다. - 이는 브랜드 충성도가 단순한 제품 선호를 넘어 패션과 소장 문화로 확장된 사례다. ## 초기 기술 문화에 대한 향수 - 빈티지 굿즈의 매력은 초기 웹과 개인용 컴퓨터 시대의 유물을 소유한다는 데 있다. - 현재 기술 업계 종사자 중 상당수는 어린 시절 Microsoft나 Apple을 통해 기술을 처음 접했기 때문에 해당 브랜드에 개인적인 애정과 존경을 갖고 있다. - 과거의 기술 기업은 기존 질서에 도전하는 젊은 코더와 혁신의 상징으로 인식됐다. - 빈티지 Apple 티셔츠는 단순한 로고 상품이 아니라 “성공한 집단에 속한다”거나 “성취를 지지한다”는 메시지를 전달하는 표식으로 기능한다. - 다만 오늘날 착용자는 그 시대를 직접 경험하기보다, 이미 지나간 성공 신화를 아이러니한 거리감과 함께 소비한다. ## 진지함과 아이러니의 결합 - 현대 코프코어에는 브랜드에 대한 진정한 애정뿐 아니라 과장과 부조리를 즐기는 태도도 포함된다. - Cash App은 2023년 디자이너 Marshall Columbia와 협업해 Julia Fox가 착용한 클럽 키드 스타일의 대담한 의류를 선보였다. - 기술 기업을 넘어 Dunkin’ Donuts, Lockheed Martin 같은 브랜드도 한정판 의류와 패션 컬렉션에 활용되고 있다. - 기업 굿즈 디자인의 핵심 과제는 브랜드를 진지하게 표현하면서도 지나치게 홍보물처럼 보이지 않게 만드는 것이다. - 성공적인 코프코어 상품은 회사 로고를 그대로 노출하는 대신, 패션성과 유머·아이러니를 더해 착용자가 스스로 선택한 문화적 표현처럼 보이게 한다. ## 실용적인 시사점 기업 굿즈를 만들 때는 단순히 로고를 크게 넣기보다 브랜드의 역사, 팬덤, 문화적 맥락을 디자인에 반영하는 것이 중요하다. 한정성, 협업, 독창적인 세계관을 결합하면 굿즈는 광고물을 넘어 사람들이 자발적으로 소장하고 착용하는 브랜드 경험이 될 수 있다.

원문 읽기(새 탭에서 열림)

Figmagithubmicrosoftapple+3

figma·2025년 9월 2일원문

IDC 조사: 전 세계 (새 탭에서 열림)

글로벌 시장 분석 기관인 IDC의 최신 연구에 따르면, 소프트웨어 디자인 및 개발에 참여하는 인력은 2025년 107만 명에서 2029년 144만 명으로 약 30% 이상 급증할 것으로 전망됩니다. 이는 디자인이 기업의 핵심적인 경쟁 우위 요소로 자리 잡고 있음을 시사하며, 특히 사용자 경험(UX) 중심의 솔루션에 대한 수요가 폭발적으로 늘어나고 있음을 보여줍니다. 생성형 AI의 발전은 이러한 흐름을 가속화하여 더 정교하고 시각적으로 뛰어난 디지털 제품의 생산을 촉진할 것으로 보입니다. **소프트웨어 디자인 인력의 양적 팽창** - IDC는 디지털 제품 및 인터페이스 디자인에 참여하는 지식 근로자와 개발자의 수가 2025년 1억 7백만 명에서 2029년 1억 4천 4백만 명으로 증가할 것으로 예측했습니다. - 이러한 성장은 전 산업군과 기업 규모를 막론하고 소프트웨어 디자인의 중요성이 비즈니스 전략의 핵심으로 부상했음을 의미합니다. - 디자인 중심의 문제 해결을 위한 전문 인력에 대한 수요는 향후 몇 년간 지속적으로 강화될 것입니다. **UX 디자인 직무의 독보적인 성장세** - UX 디자인 전문가 집단은 2025년부터 2029년까지 연평균 성장률(CAGR) 7.6%를 기록할 것으로 보입니다. - 이는 다른 지식 근로자 하위 범주의 성장 속도를 앞지르는 수치로, 복잡한 기술을 사용자 친화적으로 풀어내는 디자인 집약적 솔루션의 중요성을 방증합니다. - 기업들은 단순한 기능 구현을 넘어, 차별화된 인터페이스와 사용자 경험을 제공하기 위해 UX 인력을 공격적으로 확충할 전망입니다. **생성형 AI가 가져올 개발 속도와 품질의 변화** - 생성형 AI는 소프트웨어 개발의 속도와 물량을 비약적으로 증가시켜 사용자에게 더 넓은 선택지를 제공하는 촉매제 역할을 할 것입니다. - 제품 내 AI 기능 통합이 보편화됨에 따라, 디자이너와 개발자는 고도로 사용 가능하고 시각적으로 매력적인 AI 인터페이스를 구현해야 한다는 도전에 직면하게 됩니다. - 결과적으로 AI는 디자인 과정을 보조하는 동시에, 더 높은 수준의 디자인 표준을 유지해야 하는 압박으로 작용하여 숙련된 디자인 인력의 가치를 높일 것입니다. 디자인은 이제 단순한 미적 요소를 넘어 제품의 성패를 가르는 전략적 자산이 되었습니다. 기업들은 증가하는 디자인 인력 수요에 대비하고, 특히 생성형 AI를 디자인 프로세스에 효과적으로 통합하여 고도화된 사용자 경험을 신속하게 제공할 수 있는 역량을 갖추어야 합니다. 이러한 변화의 흐름 속에서 디자인과 개발의 경계를 허물고 협업 효율을 극대화하는 것이 미래 소프트웨어 시장의 핵심 경쟁력이 될 것입니다.

Figma사용자 경험생성형 AI사용자 인터페이스+3

figma·2025년 8월 12일·3분 읽기큐레이션 요약

활성화의 해부학 |

Figma는 IPO를 기념해 뉴욕증권거래소 앞에서 대규모 공개 행사인 ‘Figma Commons’를 열고, “Design is everyone’s business”라는 메시지를 시민과 커뮤니티에 전달했다. 행사는 단순한 상장 기념식을 넘어 mural, 포스터, 디지털 광고, 무료 초대, 디자인 중심의 현장 경험을 결합해 Figma의 공동체적 브랜드 정체성을 대중에게 확장한 사례였다. 엄격한 도시 규정과 촉박한 홍보 일정 속에서도 접근성과 세부 디자인을 모두 놓치지 않는 방식으로 기획됐다. ## IPO를 커뮤니티와 함께 축하하기 - 7월 31일 뉴욕증권거래소 건물에 대형 Figma 배너를 설치하고 “Design is everyone’s business”라는 메시지를 내걸었다. - 뉴욕증권거래소 상장은 Figma가 더 넓은 대중에게 소개되는 계기인 동시에, 지금까지 함께 성장한 커뮤니티를 초대하는 행사로 기획됐다. - 이벤트·커뮤니티 경험 팀은 Config Commons와 같은 기존 팝업 경험을 확장해 도시 전체를 활용하는 형태를 선택했다. - 주요 프로젝트로 브루클린 대형 mural, 뉴욕 곳곳의 포스터, 타임스스퀘어 디지털 빌보드, NYSE 앞 Figma Commons가 포함됐다. ## 복잡한 행정·현장 제약을 해결한 설계 - 행사 준비에는 수주가 걸렸으며, 뉴욕시 건축국, NYPD, 시장실 등 여러 기관의 승인 절차가 필요했다. - 긴급 차량 통행 규정 때문에 모든 임시 구조물은 바퀴가 달려 이동 가능한 형태여야 했다. - 금속 구조물 설치 중 번개가 치면 도시 규정에 따라 매번 30분간 작업을 중단해야 했다. - 폭풍우로 설치 작업이 지연되는 상황에서도 행사의 규모와 완성도를 유지해야 했다. - 커뮤니티·이벤트 담당자인 Jordan Scott과 Kelley Sauer가 행사 콘셉트와 세부 실행을 주도했다. ## 도시 전체로 확장한 초대 - 행사 홍보는 보도자료 발표 전까지 비공개로 유지해야 했기 때문에 실제 홍보에 사용할 수 있는 시간이 15시간도 되지 않았다. - 팀은 온라인 캠페인보다 현장 중심의 방식을 택했다. - 지하철역과 페리 터미널에서 전단 배포 - 맨해튼과 브루클린 곳곳에 포스터를 붙이는 와일드포스팅 - 기존 장기 고객과 지역 커뮤니티에 직접 연락 - 포스터의 QR 코드는 누구나 무료로 Figma Commons에 참석할 수 있는 초대 페이지로 연결됐다. - 초대의 대상을 기존 Figma 사용자로 한정하지 않고 “누구에게나 열려 있는” 행사로 인식시키는 데 초점을 맞췄다. ## 세부 디자인으로 완성한 현장 경험 - Figma 커뮤니티가 제품뿐 아니라 디자인의 세부 요소에도 관심이 많다는 점을 행사 설계에 반영했다. - 브랜드 팀이 행사 전용 사인과 그래픽을 제작해 공간 전체에 일관된 시각적 경험을 만들었다. - 한정판 굿즈는 로고를 과도하게 노출하기보다 신선하고 디자인 중심적인 방향으로 제작했다. - 뉴욕에서 인기 있는 음식점의 간식을 제공하는 푸드·드링크 트럭을 운영해 지역성과 접근성을 더했다. - 뉴욕 그래피티 아티스트 Greg Lamarche가 행사 중 “make”라는 문구의 mural을 직접 완성했다. - 타임스스퀘어에서는 Figma Make 광고를 상장 전부터 연말까지 디지털 빌보드로 노출했다. - 브루클린의 Figma Make mural에는 브랜드 스튜디오가 직접 만든 200개 이상의 손그림 글리프가 사용됐다. ## 브랜드 메시지를 공개 경험으로 전환하기 - Figma는 상장을 기업의 재무적 사건으로만 다루지 않고, 디자인이 더 많은 사람의 일이 된다는 브랜드 메시지를 도시 공간에서 체험하게 했다. - 대형 광고와 설치물은 인지도를 높였고, 무료 초대와 현장 프로그램은 실제 참여 장벽을 낮췄다. - 제품 커뮤니티, 지역 시민, 처음 Figma를 접하는 사람 모두가 행사에 참여할 수 있도록 규모와 접근성을 함께 설계했다. - 결과적으로 Figma Commons는 상장 기념식과 브랜드 activation, 커뮤니티 행사를 결합한 공개형 캠페인으로 기능했다. 실용적으로는 대형 브랜드 행사를 기획할 때 규모만 키우기보다, 핵심 메시지·참여 방식·현장 제약·세부 디자인을 하나의 경험으로 연결하는 것이 중요하다. 특히 홍보 시간이 제한된 상황에서는 지역 접점과 직접 초대처럼 빠르게 실행할 수 있는 채널이 효과적인 대안이 될 수 있다.

원문 읽기(새 탭에서 열림)

Figmafigma-makegraphic-designqr-code+1

figma·2025년 8월 6일·3분 읽기큐레이션 요약

리듬을 타고: 음악이 Figma

Figma는 Figma Draw에 점묘와 음영 표현에 적합한 산란 브러시(scatter brush) 10종을 추가했다. 이 브러시들은 반복되는 획의 패턴이 음악의 비트와 닮았다는 발상에서 출발해, Doo-wop·Vaporwave·Screamo 등 음악 장르의 분위기를 시각적 질감으로 구현했다. 디자이너 Rogie King은 99개의 시안을 제작한 뒤 팀 투표를 거쳐 가장 유연하고 표현력 있는 브러시를 선정했다. ## 음악을 브러시의 출발점으로 삼은 이유 - 산란 브러시는 작은 형태가 반복적으로 흩뿌려지는 방식으로 선을 만든다. - 획의 간격(gap), 흔들림(wiggle), 무작위성(jitter)을 조절할 수 있어 음악의 템포·질감·볼륨을 조정하는 과정과 비슷하다. - UX Writer Molly Rosen Marriner는 `Every Noise At Once`와 Figma 직원들의 추천을 참고해 시각적으로 연상하기 쉬운 장르를 수집했다. - Electroclash, Drone, Witch house처럼 전자음악의 반복적이고 깨진 듯한 분위기를 브러시 디자인에 적용하기 좋았고, Nu metal·Italo disco·Samba 등 다양한 장르도 후보에 포함됐다. ## 장르의 분위기를 시각적 질감으로 변환 - 먼저 점묘(stippling)처럼 사용자가 바로 활용할 만한 기본적인 산란 표현부터 설계했다. - 이후 특정 장르의 대표 음악을 듣고, 해당 장르의 패션·문화·시각적 특징을 조사하며 브러시의 성격을 구체화했다. - Screamo 브러시는 AFI의 곡과 2000년대 초반의 검은 후드티, 진한 아이라이너, 모시 핏에서 영감을 받아 거칠고 혼란스러운 느낌으로 제작됐다. - Shoegaze처럼 디자이너가 직접 이해하기 어려운 장르는 해당 음악을 잘 아는 가족이나 주변 사람에게 추천을 받아 시각적 방향을 잡았다. ## 99개 시안에서 10개 브러시로 - Rogie King은 다양한 장르를 탐색하며 총 99개의 산란 브러시 디자인을 만들었다. - 팀원들은 각 시안을 검토하고 캔버스에서의 활용도와 표현력을 기준으로 선호하는 디자인에 투표했다. - 최종 브러시는 다음 10개 장르의 이름을 갖게 됐다. - Bubblegum - Witch house - Shoegaze - Honky-tonk - Screamo - Drone - Doo-wop - Spoken word - Vaporwave - Oi! - 일부 디자인은 장르와 직관적으로 연결됐지만, 어떤 브러시는 결과물에 맞춰 새로운 장르 이름을 찾아야 할 정도로 해석의 여지가 컸다. ## 전문 지식 없이도 예술 표현을 확장 - 산란 브러시는 점묘와 음영뿐 아니라 안개, 얼룩, 반복되는 기호 등 다양한 감정과 스타일을 표현할 수 있다. - Figma Draw의 기존 스트레치 브러시가 캘리그래피나 목탄처럼 선의 형태를 강조했다면, 산란 브러시는 작업에 질감·깊이·움직임을 더한다. - 브러시 이름을 `플랫 브러시`, `과슈 브러시` 같은 전통적인 미술 용어 대신 음악 장르로 정한 것은 미술 교육을 받지 않은 사람도 부담 없이 접근하도록 하기 위한 선택이다. - 이름 자체가 브러시의 분위기를 상상하게 하며, 정식 미술 교육이나 물리적 도구 경험이 없어도 예술가처럼 창작할 수 있다는 메시지를 전달한다. Figma Draw의 새 산란 브러시는 단순한 장식 도구라기보다 반복·무작위성·질감을 조합해 작업의 분위기를 빠르게 바꾸는 표현 도구다. 점묘, 음영, 배경 질감, 감정적 효과가 필요한 작업에서 브러시 이름의 음악적 이미지를 참고해 다양한 스타일을 실험해볼 수 있다.

원문 읽기(새 탭에서 열림)

Figmagraphic-designfigma-drawvector-editing+2

figma·2025년 8월 5일·4분 읽기큐레이션 요약

디자인 시스템과 AI: MCP 서버

디자인 시스템은 AI가 브랜드와 팀의 표준에 맞는 코드를 생성하도록 만드는 핵심 맥락이며, MCP 서버는 이 맥락을 디자인 도구와 개발 환경 사이에서 전달하는 연결 고리다. Figma MCP 서버는 컴포넌트, 스타일, 변수, Code Connect 정보 등을 AI 에이전트에 제공해 생성 코드의 정확도와 일관성을 높인다. 결과적으로 디자인 시스템과 AI는 서로를 강화하는 선순환을 만들며, 더 빠르면서도 품질 높은 제품 개발을 가능하게 한다. ## 디자인 시스템과 AI의 선순환 - 디자인 시스템은 디자인과 엔지니어링 팀이 확장된 환경에서도 일관된 결정을 내리도록 돕는 기반이다. - 성공적인 디자인 시스템의 요소인 문서화, 공통 언어, 재사용 패턴, 브랜드 가이드는 AI 활용에도 필수적인 맥락이 된다. - AI가 디자인 시스템을 이해하면 단순히 “작동하는 결과물”이 아니라 팀의 표준과 의도에 맞는 결과물을 생성할 수 있다. - AI가 디자인 시스템을 활용해 더 나은 코드를 만들면, 디자인 시스템의 활용도와 품질도 다시 향상되는 선순환이 형성된다. ## MCP 서버가 제공하는 역할 - Figma MCP 서버는 Figma의 디자인 정보를 IDE와 AI 에이전트에 전달한다. - AI가 활용할 수 있는 정보에는 다음이 포함된다. - 컴포넌트와 스타일 - 디자인 변수와 변수의 코드 문법 - Code Connect를 통해 연결된 실제 코드 리소스 - 디자인 요소가 코드와 연결되어 있을수록 AI는 기존 컴포넌트와 구현을 재사용할 수 있어 더욱 정확한 코드를 생성한다. - 디자인 시스템이 아직 충분히 구축되지 않은 조직에서도 토큰과 컴포넌트 구현을 시작하는 데 MCP 서버를 활용할 수 있다. ## 디자인 시스템은 디자인과 AI의 공통 언어 - LLM을 통해 아이디어를 실행으로 옮기기 쉬워질수록, 기능뿐 아니라 시각적 완성도와 브랜드 정체성이 차별화 요소가 된다. - 디자인 시스템은 다음과 같은 기반을 제공한다. - **확장 가능한 기반:** 색상, 간격, 타이포그래피 등의 토큰을 정의해 플랫폼 전반의 일관성을 유지 - **재사용 가능한 컴포넌트:** 다양한 사용 사례에 대응하면서도 단일한 기준점 유지 - **내장된 접근성:** 처음부터 포용적이고 사용 가능한 인터페이스 설계 - 디자인 시스템이 없으면 AI가 생성한 결과가 비슷하고 일반적인 UI의 조합으로 수렴할 수 있다. - 디자인 시스템은 AI를 조직의 브랜드, 품질 기준, 개발 관행에 연결하는 매개체가 된다. ## 속도와 정확도를 높이는 디자인 맥락 - 글에서 인용한 Figma AI 보고서에 따르면 개발자의 68%가 코드 작성에 AI를 사용하지만, 생성 결과를 신뢰하는 디자이너와 개발자는 32%에 그친다. - AI가 디자인 시스템 없이 코드를 생성하는 것은 팀의 온보딩을 거치지 않은 신입 개발자에게 바로 코드를 배포하게 하는 것과 비슷하다. - 디자인 시스템 맥락이 제공되면 AI는 다음을 수행할 수 있다. - 기존 컴포넌트와 패턴을 재사용해 중복과 불일치 감소 - 디자인 토큰을 자동 적용해 브랜드 및 접근성 기준 준수 - 개발자가 바로 개선할 수 있는 품질 높은 초기 코드 제공 - 디자인과 개발 사이의 오해 및 QA 시간을 줄여 피드백 주기 단축 ## Figma MCP 서버의 코드 생성 방식 - Figma 프레임을 검사하면 MCP 서버가 해당 화면의 컴포넌트, 스타일, 변수 등의 맥락을 AI 에이전트에 전달한다. - Code Connect와 변수 코드 문법이 설정되어 있으면 AI는 실제 코드베이스의 컴포넌트와 리소스를 직접 활용할 수 있다. - 연결 정보가 없더라도 MCP 서버는 색상, 스타일, 레이아웃 등 디자인 정보를 제공해 AI가 디자인에 맞는 코드를 새로 작성하도록 돕는다. - 자동 디자인 시스템 규칙 생성 기능은 코드베이스를 분석해 다음 내용을 포함한 구조화된 규칙 파일을 만들 수 있다. - 토큰 정의 - 컴포넌트 라이브러리 - 스타일 계층 구조 - 명명 규칙 - 이 규칙 파일은 AI 에이전트의 시스템 수준 지침으로 작동해, 개발자가 매번 간격·토큰·이름 규칙을 상세히 프롬프트하지 않아도 팀의 기본값을 적용하게 한다. - 주석(annotations)을 사용하면 접근성 요구사항, 상호작용 방식, 콘텐츠 관련 추가 맥락도 AI에 전달할 수 있다. ## 실용적인 적용 방향 - AI 코드 생성 전에 디자인 토큰, 컴포넌트, 변수의 이름과 구조를 정리한다. - Figma 컴포넌트와 실제 코드 컴포넌트를 Code Connect로 연결한다. - 코드베이스의 규칙과 명명 체계를 AI가 참조할 수 있는 규칙 파일로 관리한다. - 접근성, 상호작용 동작, 콘텐츠 제약은 주석으로 명시한다. - MCP 서버는 AI를 대체하는 도구라기보다, 조직의 디자인 시스템을 AI가 활용할 수 있도록 변환하는 인프라로 보는 것이 적절하다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템AI 에이전트모델 컨텍스트 프로토콜+2

figma·2025년 8월 3일·3분 읽기큐레이션 요약

디자인에 마우스가 필요

Figma는 마우스 없이도 디자인 작업을 수행할 수 있도록 키보드 접근성 기능을 대폭 강화했다. 이제 키보드만으로 캔버스 이동, 객체 삽입, 정밀한 선택이 가능하며, 스크린 리더가 작업 내용을 읽어줘 사용자가 현재 위치와 상태를 파악하기 쉬워졌다. 이는 키보드나 스크린 리더를 주로 사용하는 디자이너도 디자인 프로세스에 온전히 참여할 수 있도록 장벽을 낮추려는 업데이트다. ## 키보드만으로 이어지는 디자인 작업 - 기존에는 키보드만 사용할 경우 프레임 간 이동, 컴포넌트 선택, 새 요소 추가가 어려웠다. - 캔버스 상단에 갇히거나 잘못된 영역으로 확대·축소되는 등 작업 흐름이 끊기는 문제가 있었다. - 이번 업데이트는 기존 단축키에 더해 패닝, 삽입, 선택 기능을 보완해 디자인 스프린트, 공동 작업, 디자인 리뷰까지 마우스 없이 수행할 수 있게 한다. - 기능 개발 과정에서 키보드와 스크린 리더를 사용하는 디자이너 및 알파 사용자들의 피드백을 반영했다. ## 방향키 기반 캔버스 이동 - 방향키로 캔버스를 상하좌우로 이동할 수 있다. - `Shift` 키를 함께 사용하면 더 빠르게 이동하거나 스크롤할 수 있다. - 새 키보드 단축키를 통해 확대·축소를 세밀하게 조정할 수 있다. - 이동 도구와 손 도구에도 키보드로 접근할 수 있어 캔버스 탐색의 유연성이 높아졌다. ## 키보드로 객체 삽입과 배치 - 도형, 텍스트 등 대부분의 객체 유형을 키보드만으로 캔버스에 추가할 수 있다. - 프레임은 키보드 단축키와 십자선 형태의 안내 화면을 이용해 원하는 위치에 삽입할 수 있다. - `Enter` 키를 사용하면 화면 중앙에 텍스트를 배치할 수 있다. - 마우스 포인터 없이도 삽입 위치를 확인하고 객체를 생성할 수 있다. ## 키보드 기반 객체 선택 - 새로운 키보드 박스 선택 도구로 캔버스의 객체를 선택할 수 있다. - 방향키로 분홍색 커서를 이동해 객체 위에 놓은 뒤 `Enter`를 누르면 해당 객체를 선택한다. - 객체를 하나씩 선택하거나 선택 상자를 이용해 여러 객체를 동시에 선택할 수 있다. - 선택한 객체의 위치 조정 역시 키보드 중심으로 처리할 수 있다. ## 스크린 리더와 포용적인 디자인 - 사용자가 수행하는 작업을 스크린 리더가 읽어주므로 현재 상태와 위치를 파악하기 쉬워졌다. - 이번 기능은 단순히 Figma 사용성을 개선하는 것을 넘어, 더 많은 사람이 창작 과정에 참여하도록 하는 데 목적이 있다. - Figma는 색상 선택기의 대비 검사기를 통해 텍스트와 그래픽이 WCAG 기준을 충족하는지 확인할 수 있도록 지원한다. - 디자인에서 의미 있는 HTML 시맨틱 태그를 지정할 수 있어 스크린 리더를 지원하는 제품 설계에도 활용할 수 있다. - 접근성을 일회성 점검 항목이 아니라 지속적으로 개선해야 할 제품 개발 원칙으로 보고 있다. 마우스 사용이 어렵거나 키보드·스크린 리더를 선호하는 사용자는 Figma의 키보드 단축키와 스크린 리더 지원을 활성화해 작업 흐름을 점검해볼 만하다. 팀 차원에서도 이러한 기능을 활용하면 접근성을 고려한 디자인 협업 환경을 더 쉽게 구축할 수 있다.

원문 읽기(새 탭에서 열림)

Figmakeyboard-navigationwcagscreen-readers+2