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

피그마 캔버스에서 코딩하기 | 피그마 블로그

Figma는 코드 레이어를 통해 실행 가능한 코드를 디자인 캔버스 안에서 생성·비교·수정할 수 있도록 한다. 디자이너와 개발자는 코드와 디자인을 오가는 대신 같은 Figma 파일에서 아이디어를 함께 탐색하고, 팀의 피드백을 반영하며, 최종 코드를 저장소에 반영할 수 있다. 코드 레이어는 디자인과 개발의 경계를 좁혀 협업 중심의 프로토타이핑을 가능하게 하는 기능이다. ## 캔버스에서 코드 시작하기 - Figma Design의 툴바에서 코드 레이어를 추가하거나, 기존 프레임을 코드로 변환할 수 있다. - Figma Agent에게 원하는 결과를 설명해 코드를 생성할 수도 있다. - 템플릿에서 시작하거나 직접 만들고 싶은 내용을 프롬프트로 입력할 수 있다. - GitHub 저장소를 가져오거나 로컬 폴더를 업로드해 기존 코드베이스를 불러올 수 있다. - Figma Make에서 생성·수정한 코드도 캔버스의 코드 레이어로 가져와 팀과 공유할 수 있다. ## 여러 대안을 나란히 비교하기 - 기존 프레임을 복제해 여러 디자인 방향을 시험하듯 코드 레이어도 복제해 대안을 만들 수 있다. - 실제로 작동하는 화면을 캔버스에서 비교하므로 정적인 시안만 볼 때보다 사용 경험을 구체적으로 평가할 수 있다. - 요소를 이동·조정·리사이즈하면 코드에 즉시 반영된다. - 프롬프트로 새 버전을 생성하면서도 기존 버전은 보존할 수 있다. - 팀원은 공유 파일 안에서 댓글을 남기거나 동일한 코드 레이어를 대상으로 Agent에 추가 작업을 요청할 수 있다. ## 코드와 디자인 레이어 오가기 - `Extract designs` 기능을 사용하면 코드의 현재 상태를 편집 가능한 Figma 레이어로 변환할 수 있다. - 전체 화면뿐 아니라 특정 화면, 상태, 사용자 플로우만 선택해 캔버스로 가져올 수 있다. - 코드로 구현된 인터랙션과 상태를 시각적으로 분석하고, 일반적인 Figma 디자인 요소처럼 편집할 수 있다. - 캔버스에서 수정한 내용은 한 번의 클릭으로 코드 레이어에 업데이트할 수 있어 디자인과 구현 사이의 반복 작업이 짧아진다. ## 코드 편집과 저장소 반영 - 코드 에디터에서 원하는 변경 사항을 주석이나 설명으로 작성하고 Agent에게 수정을 요청할 수 있다. - 필요하면 개발자가 직접 코드를 편집할 수도 있다. - 수정 결과를 다시 코드 레이어로 변환해 팀에 공유할 수 있다. - 최종적으로 확정한 변경 사항은 저장소에 push해 실제 소스 코드에 반영할 수 있다. - 따라서 Figma 캔버스는 단순한 시각화 공간이 아니라, 아이디어 탐색부터 코드 변경 및 공유까지 이어지는 협업 환경이 된다. ## 출시 계획 - 코드 레이어는 2026년 6월 기준 향후 몇 주 동안 비공개 베타로 제공될 예정이다. - 초기 접근 권한은 Figma의 베타 신청 페이지를 통해 요청할 수 있다. - 기능 세부 사항과 Config에서 발표된 다른 업데이트는 Figma Help Center와 Figma Learn에서 확인할 수 있다. 실무에서는 코드 레이어를 최종 구현을 자동화하는 도구라기보다, 디자인·개발팀이 여러 구현안을 빠르게 실험하고 합의하는 공동 프로토타이핑 환경으로 활용하는 것이 적합하다. 특히 기존 코드베이스를 불러와 실제 동작을 검토한 뒤 디자인과 코드를 반복적으로 조정하는 워크플로에 유용하다.

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

FigmaAI 에이전트Reactgithub+2

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

Figma의 디자인 에이전트, 이제 맞춤형 도구와 더욱 풍부한 컨텍스트 지원 | Figma 블로그

Figma의 디자인 에이전트가 오픈 베타에서 더 많은 사용자에게 제공되며, 단순한 프롬프트를 넘어 사용자 정의 도구와 팀의 작업 맥락을 활용할 수 있게 됐다. 사용자는 에이전트에게 재사용 가능한 플러그인과 셰이더를 만들도록 요청해 Figma 캔버스 안에서 자신만의 디자인 워크플로를 구축할 수 있다. 이를 통해 에이전트는 결과물을 생성하는 도구를 넘어 사용자의 작업 방식을 이해하고 협업하는 파트너에 가까워진다. ## Figma 디자인 에이전트의 확장 - 에이전트는 Figma 캔버스에서 직접 작동하며, 디자인 작업의 유연성·정밀도·창작 제어력을 높인다. - 팀의 작업 방식과 실제 디자인 맥락을 이해할수록 단순히 결과물을 만드는 것을 넘어 협업할 수 있다는 점을 강조한다. - Figma는 에이전트와 사용자 정의 도구를 직접 시험할 수 있는 커뮤니티 플레이그라운드 파일도 제공한다. - 사용자의 요구를 자연어로 설명하면 에이전트가 도구 제작과 문제 해결 방법까지 제안한다. ## 프롬프트로 만드는 생성형 플러그인 - 기존에는 플러그인을 만들려면 개발 지식과 별도의 개발 환경이 필요했지만, 이제 에이전트에게 재사용 가능한 플러그인 제작을 요청할 수 있다. - 생성형 플러그인은 다음과 같은 작업에 활용될 수 있다. - HTML을 Figma 캔버스로 가져오기 - 대시보드 레이아웃 생성 - 데이터를 시각화하기 - 이미지 자산 자동 배치 - `PropsKit`을 사용하기 때문에 Figma의 기본 기능처럼 자연스럽게 동작한다. - 캔버스 안에서 직접 결과를 확인하고 반복 수정할 수 있어, 외부 도구를 오가는 번거로움이 줄어든다. - Figma 밖의 AI 서비스나 서드파티 API와 연동해야 하는 경우에는 기존 방식의 클래식 플러그인을 사용해야 한다. - 플러그인이나 셰이더 자체는 제작자, 팀원, 커뮤니티 사용자 모두 무료로 사용할 수 있지만, 에이전트에게 제작을 요청하는 기능은 일반 출시 후 AI 크레딧을 사용하게 된다. ## WebGPU 기반 셰이더 효과 - 에이전트는 픽셀이 렌더링되는 방식을 정의하는 작은 프로그램인 셰이더도 생성할 수 있다. - Figma의 WebGPU 기반 렌더러를 활용해 다음과 같은 시각 효과를 만들 수 있다. - 디더링 - 리퀴드 메탈 - 프랙털 노이즈 - 렌즈 왜곡 - 입자 늘이기 - 색상 외곽선 - 셰이더 효과는 네이티브 Figma 효과처럼 쌓아 사용할 수 있으며, 속성을 조절하거나 기본 효과와 결합할 수 있다. ## 셰이더 효과와 셰이더 필 - **셰이더 효과** - 레이어에 적용되는 사용자 정의 시각 효과다. - 입자 효과, 렌즈 왜곡, 컬러 아웃라인 등 다양한 효과를 만들 수 있다. - 여러 효과를 조합해 복합적인 결과를 만들 수 있다. - **셰이더 필** - 단색이나 일반 그라디언트를 넘어서는 동적·생성형 채우기다. - 수채화, 모아레, 패턴 그리드 등을 표현할 수 있다. - 디더 웨이브, 유체 하프톤, 파티클 웹, 마그네틱 필드 같은 프리셋으로 활용할 수 있다. - 사용자는 셰이더의 기능을 정의하고, 에이전트와 대화하며 UI와 조정 가능한 매개변수를 발전시킬 수 있다. - 사진에 콜라주, 마블링, 빛샘, 금속 엠보싱, 프리즘 효과를 적용하는 등 개인의 시각적 스타일을 재사용 가능한 워크플로로 만들 수 있다. ## 디자이너와 에이전트의 협업 방식 - 제품 디자이너 Edward Chechique는 과거 개발자 지원이나 여러 외부 도구가 필요했던 생성형 플러그인 제작을 Figma 안에서 직접 처리할 수 있게 됐다고 설명한다. - 크리에이티브 테크놀로지스트 Anna Zhang은 에이전트와 기능과 UI를 주고받는 과정을 “협상”에 비유한다. - 에이전트가 제안한 해결책과 생성 결과가 다음에 추가할 매개변수와 기능에 영향을 주면서, 일회성 생성보다 반복적인 공동 설계가 가능해진다. 자신만의 레이아웃·효과·데이터 시각화 도구가 필요하다면 에이전트로 생성형 플러그인이나 셰이더를 만들어 보는 것이 유용하다. 다만 외부 API 연동은 클래식 플러그인을 사용해야 하며, 에이전트 기반 제작 기능은 AI 크레딧 비용과 지원 범위를 확인하는 것이 좋다.

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

FigmaAI 에이전트HTMLshaders+2

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

색의 언어로 말하기 | Figma 블로그

색은 단순한 시각 요소가 아니라 감정과 문화적 의미를 전달하는 언어이며, 브랜드의 메시지와 정체성을 형성하는 중요한 도구다. Pantone Color Institute(PCI)는 자연, 문화, 사회 분위기, 지역별 관습을 분석해 색이 사람들에게 어떻게 받아들여지는지 연구한다. 효과적인 색상 선택은 유행을 따르는 데 그치지 않고, 전달하려는 메시지와 사용 환경에 맞춰 색의 의미를 설계하는 데서 출발한다. ## 색이 감정과 인식에 미치는 영향 - 색에 대한 무의식적 반응은 자연환경과 밀접하게 연결되어 있다. - 노란색은 태양의 따뜻함과 즐거움을 연상시킨다. - 초록색은 재생과 성장을, 갈색은 안정감과 뿌리내림을 나타낸다. - 파란색은 변함없이 존재하는 하늘의 이미지 때문에 신뢰와 안정성을 전달한다. - 주황색은 과일의 새콤달콤한 맛과 연결되어 활기와 감각적인 즐거움을 불러일으킨다. - 자연을 반영하는 색은 문화와 시대가 바뀌어도 비교적 오래 지속되는 힘을 가진다. - 영화, 음악, 예술가, 여행, 스포츠, 신기술, 사회 분위기와 경제 상황도 색에 대한 감각을 변화시킨다. - 경제가 위축되면 사람들이 선호하는 색상 팔레트 역시 달라질 수 있다. ## 지역과 문화에 따른 색의 의미 - 색의 의미는 전 세계적으로 동일하지 않으며, 지역마다 고유한 “색의 방언”이 존재한다. - 서양에서는 장례식에 검은색을 입지만, 동양 일부 문화권에서는 흰색을 입는다. - 빨간색도 문화권에 따라 사랑·분노·긴급함을 뜻할 수 있고, 동양에서는 행운·번영·축하를 상징하기도 한다. - 따라서 브랜드와 마케팅 팀은 색상 트렌드나 보편적 의미만 믿어서는 안 된다. - 일본과 프랑스 소비자는 같은 제품을 보더라도 각자의 문화적 경험에 따라 색을 다르게 해석할 수 있다. ## 색으로 브랜드 스토리 만들기 - 효과적인 브랜드 색상은 회사가 무엇을 지향하는지 시각적으로 표현해야 한다. - 코카콜라의 빨간색은 흥분과 에너지를 전달하며, 시간이 지나면서 브랜드 자체를 상징하는 색이 되었다. - Airbnb는 2014년 기존의 베이비 블루를 연어색으로 변경했다. - 따뜻하고 인간적인 인상을 주며, 낯선 사람의 집에 머무는 데서 오는 불안감을 완화하려는 의도가 담겼다. - 이후 현지 문화를 연결하는 Experiences 서비스와도 자연스럽게 연결되었다. - Charli XCX의 ‘Brat Green’은 패션에서 먼저 관찰된 이질적인 색이 대중문화의 상징으로 발전한 사례다. - 병들거나 불쾌한 느낌을 줄 수 있는 색에 새싹과 생명력의 이미지를 결합했다. - 강렬한 색감과 노란 기운이 소셜미디어에서 눈에 띄는 대담함과 활력을 만들어냈다. - 브랜드 색은 고립된 색상값이 아니라 브랜드가 전달하려는 감정, 시대정신, 소비자 경험과 함께 설계해야 한다. ## 재료와 매체를 고려한 색상 설계 - 같은 색이라도 화면, 직물, 플라스틱, 종이 등 재료와 표면에 따라 다르게 보인다. - 디지털 화면에서 매력적인 색이 실제 제품에서는 지나치게 자극적으로 보일 수 있다. - 직물 염료로 구현 가능한 색이 의료용 밴드 같은 다른 소재에서는 구현되지 않을 수도 있다. - 따라서 색상은 디자인 후반에 추가하는 요소가 아니라 초기 기획 단계부터 고려해야 한다. - 색을 선택할 때는 색상 자체뿐 아니라 재료, 표면 마감, 조명, 실제 사용 환경까지 함께 검토해야 한다. ## 팬톤 컬러 연구와 시대정신 - Pantone Color Institute는 1986년 설립되었으며, 색채 심리학자와 트렌드 예측가로 구성된 글로벌 조직이다. - 연구 결과는 다음과 같은 분야에 활용된다. - PANTONEVIEW 트렌드북 - Pantone Connect 같은 디자인 도구 - 팬톤의 실물 컬러 가이드 - 매년 발표되는 Pantone Color of the Year - 매년 선정되는 올해의 색은 26년 이상 이어진 교육·문화 프로그램으로, 디자인 업계에서 큰 영향력을 행사한다. - PCI는 색을 단순히 예쁜 조합으로 고르는 것이 아니라, 사회 변화와 문화적 분위기, 소비자의 감정 변화를 반영하는 방식으로 해석한다. 제품이나 브랜드에 색을 적용할 때는 먼저 “어떤 메시지를 전달할 것인가”를 정한 뒤, 목표 시장의 문화적 맥락과 실제 소재·매체에서의 구현 가능성을 함께 검토하는 것이 좋다. 유행하는 색을 그대로 따라가기보다 브랜드의 가치와 사용자의 감정을 연결하는 색상 체계를 설계해야 한다.

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

Figma디자인 시스템brandingcolor-theory+2

toss·2026년 6월 16일·4분 읽기큐레이션 요약

디자이너가 시안 대신 앱을 만든 이유

AI를 활용하면 디자이너가 정적인 시안을 넘어 실제로 동작하는 프로토타입을 직접 만들 수 있고, 디자인과 개발 사이의 번역 과정도 줄어든다. 토스의 underlay 프로젝트는 화면 위에 겹치는 대신 화면 아래에 있던 정보가 드러나는 방식을 통해, 사용자의 흐름을 방해하지 않고 다음 경험으로 연결하려 했다. 이 과정에서 동작하는 코드 자체가 디자인 명세이자 개발 가능한 구조가 될 수 있음을 보여준다. ## 데드엔드를 다음 경험의 시작으로 바꾸기 - 송금 완료나 결제 완료처럼 사용자의 할 일이 끝나는 화면을 ‘데드엔드’로 정의했다. - 목표는 특정 화면을 개선하는 것이 아니라, 앱 어디서든 현재 경험을 자연스럽게 다음 경험으로 연결하는 공통 장치를 만드는 것이었다. - 이를 위해 여러 화면에서 재사용할 수 있는 컴포넌트 개발부터 시작했다. ## 기존 알림 UI의 한계와 underlay의 발상 - 바텀시트, 토스트, 푸시 등 기존 UI는 화면 위에 나타나 사용자의 시선을 끌지만, 보고 있던 화면이나 진행 중인 행동을 방해할 수 있다. - 전화처럼 등장하거나 화면 한쪽·채팅창처럼 나타나는 방식도 같은 문제를 가졌다. - 택배 송장을 떼자 아래에 있던 책의 문구가 드러난 경험에서 아이디어를 얻었다. - 새로운 정보를 화면 위에 올리는 대신, 화면 아래에 존재하던 정보가 드러나게 하는 컴포넌트를 **underlay**라고 정의했다. ## AI와 코드로 인터랙션을 디자인하기 - underlay는 외형보다 움직임과 반응 방식이 중요한 컴포넌트였다. 인터랙션 자체가 디자인의 핵심이었다. - 프로토파이나 프레이머 대신 SwiftUI와 Xcode로 iOS 앱 형태의 프로토타입을 직접 만들었다. - SwiftUI를 처음 사용했지만 AI에게 구현을 요청하며 디자인을 구체화했다. - 디자이너의 역할은 다음 세 가지로 정리됐다. - 만들고 싶은 경험을 설명하기 - AI가 제안한 여러 방향 중 적절한 것을 선택하기 - 실제 기기에서 결과를 보고 판단하기 - AI와의 디자인 과정은 설계, 선택, 검증을 반복하는 과정이었다. ## 실제 기기에서 반복하며 완성도 높이기 - 먼저 자유롭게 실험하고 지울 수 있는 플레이그라운드 환경을 만들고, 피그마 시안을 AI에게 참고 자료로 제공했다. - 버튼, 텍스트, 레이아웃을 정지 화면이 아니라 실제 기기에서 움직여 보며 수정했다. - 상상한 움직임과 실제 구현된 움직임의 차이가 컸기 때문에 수백 번 반복해서 조정했다. - 화면의 맥락을 읽고 적절한 정보를 찾는 느낌을 표현하기 위해 빛이 화면을 훑는 스캔 인터랙션을 도입했다. - 빛의 번짐, 틴트, 폭, 속도, 배경 어두워짐 등은 Metal 셰이더로 구현했다. - AI가 작성한 셰이더 코드를 출발점으로 삼되, 최종 질감은 직접 수치를 조정하며 완성했다. - 등장하거나 스캔이 지나갈 때의 미세한 출렁임 같은 디테일도 코드로 다듬었다. ## 디자인 가이드 대신 동작하는 레포 전달하기 - 기존 방식이라면 등장 타이밍, 이징 커브, 딜레이 등을 문서로 정리했을 것이다. - 이번에는 간단한 플로우만 설명하고, 직접 만든 코드 레포를 개발자에게 전달했다. - 동작하는 레퍼런스가 있었기 때문에 개발자는 시안의 구조와 인터랙션을 빠르게 이해할 수 있었다. - 개발 과정의 파인튜닝에서도 opacity나 모션 값을 말로 주고받기보다, 디자이너가 직접 실행 결과를 보며 수정했다. - AI에게 원하는 모션을 자연어로 설명하고 결과를 확인하는 과정을 개발자의 환경에서도 반복하면서 인터랙션 완성도를 높였다. - “느낌이 이상하다”는 추상적 표현 대신 실제 코드와 동작을 기준으로 소통할 수 있었다. ## 시각적 결과뿐 아니라 코드 구조까지 디자인하기 - 프로토타입 레포의 구조가 실제 iOS 개발 코드와 거의 동일하게 활용됐다. - 처음부터 개발을 위한 구조를 의도한 것은 아니었지만, UT와 빠른 버전 변경을 위해 만든 구조가 자연스럽게 개발 가능한 형태가 됐다. - 잘 만든 시안은 보기 좋은 화면에 그치지 않고, 재사용·수정·확장이 가능한 방식으로 만들어져야 한다. - 일회용 코드라면 개발자가 다시 구현해야 하지만, 개발 가능한 구조의 시안은 그대로 구현 명세가 될 수 있다. - AI가 “어떻게 만들지”를 지원하는 시대에는 디자이너가 “무엇을 만들지” 상상하고 결정하는 역량이 더 중요해진다. ## 적용 방법 - 도구의 제약에 맞춰 디자인하기보다, 가장 좋은 사용자 경험을 먼저 상상한다. - 정적인 그림으로 끝내지 말고 AI와 코드를 활용해 실제 기기에서 작동하는 프로토타입을 만든다. - 인터랙션을 문서로만 설명하기보다, 직접 만든 동작하는 레포를 개발자에게 전달한다. - 최종 결과뿐 아니라 코드 구조와 수정 가능성까지 디자인의 일부로 고려한다. 실용적으로는 작은 인터랙션부터 SwiftUI나 웹 기술로 직접 구현해 보고, 실제 기기에서 반복 검증하는 방식이 효과적이다. 완성된 코드는 단순한 시안이 아니라 개발자와 AI 모두가 이해할 수 있는 실행 가능한 디자인 스펙이 될 수 있다.

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

FigmaiOSdesign-to-codeinteraction-design+3

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

이 템플릿을 가져가세요: Figma Weave로 사용자 페르소나에 생동감을 불어넣기 | Figma 블로그

정적 이미지와 반복되는 프로필 사진만으로는 이상적 고객 프로필(ICP)을 실제 고객처럼 생생하게 전달하기 어렵다. Dropbox의 Sara Clayton은 Figma Weave를 활용해 사용자의 얼굴 사진과 간단한 프롬프트를 현실적인 작업 환경 이미지로 바꾸고, 참고 이미지를 추가해 의상과 스타일을 조정했다. 이를 통해 ICP의 스토리텔링을 강화하고, 고객에 대한 공감과 전략적 활용도를 높일 수 있었다. ### 정적인 ICP의 한계 - ICP는 제품을 만들 대상 고객을 구체적으로 묘사하는 문서다. - Dropbox Replay 팀은 영상 편집자, 오디오 엔지니어, 제작 관리자 등을 주요 사용자로 정의했다. - 기존에는 다이어그램, 사용자 스토리, 슬라이드 덱, 동일한 인물 사진을 반복 사용했다. - 이런 방식은 사용자가 실제로 어떤 환경에서 일하고 어떤 도구를 사용하는지 충분히 보여주지 못했다. - Sara Clayton은 사용자의 직업적 맥락과 현실감을 시각적으로 표현할 필요성을 느꼈다. ### 스토리 중심의 사용자 페르소나 - ICP 관점에서 상황을 시간 순서대로 보여주는 슬라이드 덱이 기존 방식보다 효과적이었다. - 예를 들어 미디어 제작자가 타임라인이나 믹싱 보드 앞에서 일하는 모습을 보여주면 사용자의 업무 맥락을 더 쉽게 이해할 수 있다. - 반복되는 증명사진 대신 실제 작업 공간, 복장, 주변 도구를 포함한 장면이 필요했다. - 이러한 시각적 디테일은 페르소나를 단순한 데이터 묶음이 아니라 현실적인 인물로 느끼게 한다. ### Figma Weave를 활용한 이미지 생성과 수정 - 사용자의 얼굴 사진과 한 줄 프롬프트만으로 재택근무 공간에서 작업하는 미디어 제작자 이미지를 생성했다. - 생성된 인물은 Premiere Pro 화면 앞에 앉아 있는 등 직업적 환경이 반영됐다. - 동료의 피드백을 받은 뒤 참고 이미지를 업로드해 의상과 전체적인 스타일을 수정했다. - 일반적인 챗봇형 이미지 생성 도구보다 변수별 결과를 확인하고 반복 수정하기 쉬웠다. - 여러 생성 결과를 시각적으로 비교하면서 원하는 인물, 복장, 환경을 구체화할 수 있었다. ### 페르소나 템플릿과 활용 방식 - 글에서 소개한 템플릿은 현실적인 장면을 포함한 ICP 이미지를 약 2분 안에 만드는 데 초점을 둔다. - 바로 사용할 수 있는 Figma Weave 템플릿에는 다음과 같은 유형이 포함된다. - 자동차 내부의 캐릭터 이미지 생성 - 전문적인 캐릭터 레퍼런스 시트 제작 - 변수 기능을 활용한 다양한 의상과 캐릭터 생성 - 템플릿을 활용하면 반복적인 페르소나 프로필을 여러 상황과 스타일로 확장할 수 있다. ### Figma Weave의 의미 - Figma가 인수한 Weavy를 기반으로 한 Figma Weave는 생성형 AI와 전문 편집 기능을 오픈 캔버스에 결합한다. - 이미지뿐 아니라 동영상, 애니메이션, 모션 디자인, VFX 생성 및 편집까지 지원하는 방향을 지향한다. - 단순히 이미지를 생성하는 것보다 결과를 보고 다양한 요소를 조정하는 반복 작업에 강점이 있다. - Dropbox 사례에서는 더 인간적이고 높은 해상도의 스토리텔링을 가능하게 해 ICP가 제품 전략에 실제로 영향을 주도록 했다. 팀의 ICP나 사용자 페르소나가 텍스트와 반복적인 스톡 이미지에 머물러 있다면, 실제 업무 환경과 행동을 보여주는 장면으로 확장하는 것이 효과적이다. Figma Weave 같은 도구를 사용할 때는 얼굴, 직업 환경, 복장, 참고 이미지 등의 변수를 단계적으로 조정하면 더 일관되고 설득력 있는 페르소나를 만들 수 있다.

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

Figma생성형 AImotion-designfigma-weave+2

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

AI 도구로 아이디어를 제품으로 발전시키는 4가지 새로운 방법 | Figma 블로그

AI 도구는 제품 개발의 시작점을 아이디어나 정적 목업에서 실행 가능한 프로토타입으로 확장하고 있다. 팀은 코드를 통해 복잡한 제약과 실제 데이터를 먼저 검증한 뒤 Figma에서 함께 탐색·개선하고, 필요하면 디자인 맥락을 유지한 채 다시 코드로 돌아갈 수 있다. 글은 FloQast, Merkle, Affirm, Accor의 사례를 통해 속도와 의도적인 협업을 결합하는 네 가지 AI 기반 워크플로를 소개한다. ## AI 시대의 제품 개발 방식 변화 - 제품팀은 초기부터 프로토타입을 만들며 아이디어를 검증하는 방향으로 이동하고 있다. - AI 코딩 도구를 활용하면 디자이너나 기획자도 개발자의 큰 투입 없이 복잡한 상호작용을 시험할 수 있다. - 제품 탐색은 코드, Figma 캔버스, 다시 코드로 이어지는 순환형 과정이 된다. - AI는 탐색 범위를 넓힐 뿐 아니라, 기존에 핸드오프 과정에서 사라지던 디자인 시스템과 맥락을 개발 단계까지 전달하는 데 활용된다. ## 코드로 복잡한 제약 검증 - 정적 목업만으로 평가하기 어려운 다음과 같은 상황을 코드 기반 프로토타입으로 테스트할 수 있다. - 한 작업이 완료되어야 다음 작업이 활성화되는 다단계 흐름 - 실제 데이터에 따라 화면과 동작이 달라지는 인터페이스 - 사용자 권한, 조건부 상태, 외부 시스템 간 데이터 일치 여부 - 제품 담당자는 AI 코딩 도구로 실제 동작하는 프로토타입을 만들고, 이후 **Codex to Figma**를 통해 Figma 캔버스로 가져와 팀과 함께 검토할 수 있다. - 디자인에서 추가 조정이 필요하면 Figma에서 작업한 뒤 MCP를 통해 코드로 되돌릴 수 있으며, 디자인 맥락도 함께 유지된다. ## FloQast의 복잡한 회계 워크플로 테스트 ### 문제 상황 - FloQast의 회계 소프트웨어에서는 작업 간 의존성, 결제 처리업체와 은행 간 기록 대조, 검토 및 승인 절차 등이 중요하다. - 기존 워크플로에서는 사용자가 불일치를 확인하기 위해 여러 페이지를 오가야 했다. - 팀은 작업 목록, 차단된 작업, 문제 해결 기능을 하나의 화면에 통합하려 했다. - 초기 프로토타입은 가능성을 보였지만, 실제 데이터와 연결된 여러 단계의 상호작용을 정적 디자인만으로는 검증하기 어려웠다. ### AI 코딩 프로토타입의 활용 - UX 매니저 Benjamin Ellis는 AI 코딩 도구로 시뮬레이션 백엔드와 실제 고객 워크플로를 기반으로 한 현실적인 데이터를 구성했다. - 팀은 한 단계의 완료가 다음 단계의 상태를 바꾸는 실제 시나리오를 직접 실행했다. - 겉보기에는 자연스러워 보였지만 실제 데이터와 로직을 적용하면 무너지는 흐름을 조기에 발견했다. ### 결과와 적용 시점 - 디자인 방향을 확정하기 전에 실제 시나리오를 충분히 검증해 후속 개발 단계의 예상치 못한 문제를 줄였다. - 다음과 같은 경우에 이 방식을 적용할 수 있다. - 권한이나 조건에 따라 UI 동작이 달라지는 경우 - 한 동작이 다른 동작과 상태에 연쇄적으로 영향을 주는 경우 - 작은 수정은 디자인 툴을 거치는 것보다 코드에서 직접 처리하는 편이 빠른 경우 - 디자이너와 개발자가 복잡한 경험을 함께 정의해야 하는 경우 정적인 화면을 먼저 완성하려 하기보다, AI 도구로 실제 데이터와 로직을 포함한 작동 가능한 프로토타입을 빠르게 만든 뒤 디자인과 개발을 오가는 방식이 효과적이다. 특히 복잡한 제품일수록 초기 코드 검증을 통해 잘못된 상호작용을 일찍 발견하고, Figma를 협업과 refinement의 공간으로 활용하는 것이 유리하다.

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

Figma디자인 시스템프로토타이핑모델 컨텍스트 프로토콜+4

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

이슈 16호: 프로세스를 믿으세요 | Figma 블로그

AI와 에이전트 도구의 발전으로 디자인과 개발 workflow가 빠르게 결합되고 있다. 하지만 제작 속도보다 중요한 것은 올바른 방향을 선택하고, 실제로 가치 있는 결과물을 출시하는 판단력이다. 이 글은 Figma의 MCP, Weave, 디자인-코드 왕복 작업 등을 통해 속도·맥락·완성도를 함께 높이는 방법을 소개한다. ## 빠른 제작보다 중요한 출시 판단 - AI는 제품 아이디어와 결과물을 빠르게 만들어 주지만, 잘못된 방향으로 빠르게 나아갈 위험도 키운다. - “충분히 괜찮은 결과물”에 머무르지 않고, 경쟁 제품과 차별화되는 결과를 만들려면 무엇을 출시할지 판단하는 능력이 필요하다. - Figma의 Chief Product Officer Yuhki Yamashita는 AI 시대의 제품팀이 터널 비전을 피하고, 사용자와 제품에 실질적인 가치를 주는 방향을 검증해야 한다고 설명한다. ## MCP로 디자인 맥락을 코드에 연결 - Model Context Protocol(MCP)은 에이전트형 코딩 도구가 Figma 파일과 디자인 시스템의 정보를 활용하도록 해준다. - 코드 작성 도구가 컴포넌트, 스타일, 레이아웃 등 디자인 의도를 직접 참고할 수 있어 디자인과 구현 사이의 불일치를 줄인다. - Figma MCP 서버는 디자인 결정이 코드가 작성되는 환경으로 전달되도록 하며, 결과적으로 실제 구현물이 원래 디자인에 더 가까워진다. - 디자이너와 개발자는 MCP가 제공하는 맥락을 더 구조화하고 명확하게 관리할수록 에이전트의 결과 품질을 높일 수 있다. ## Figma Weave를 활용한 시각 자산 제작 - Figma Weave는 영상, 사진, 일러스트레이션, 3D 효과 등 다양한 시각 작업에서 AI 이미지 생성과 정밀한 편집을 지원한다. - 단순히 프롬프트 하나로 이미지를 생성하는 것이 아니라, 시각적 언어와 제작 규칙을 반복적으로 적용하는 workflow가 중요하다. - 두 개의 참고 이미지만으로도 전체 자산 라이브러리를 확장할 수 있으며, 20개 이상의 workflow 템플릿이 이를 지원한다. - 주요 작업 방식은 다음과 같다. - 이미지 생성 - 기존 이미지 편집 - 프롬프트의 구조와 의도 조정 - 여러 자산에 일관된 스타일 적용 - 반복 가능한 시각 제작 프로세스 구축 ## 디자인과 코드의 왕복 작업 - 오늘날 팀은 캔버스에서 코드를 만들고, 코드에서 다시 캔버스로 돌아오는 방식으로 작업한다. - 디자인과 개발이 분리된 순차 과정이 아니라 서로 영향을 주고받는 반복 루프로 변하고 있다. - 실제 제품 상태를 디자인 캔버스로 가져오면 디자이너가 정적인 목업이 아니라 실제로 출시될 화면과 상호작용을 다듬을 수 있다. - 이러한 왕복 작업은 다음 효과를 준다. - 디자인과 코드 사이의 간극 축소 - 구현 결과에 대한 빠른 피드백 - 제품 상태와 예외 상황을 디자인에 반영 - 개발 속도를 유지하면서도 완성도 향상 ## 실무 workflow와 생산성 팁 - Figma MCP를 활용해 비디오 export flow의 문제를 점검하고, 실제 제품 상태를 캔버스에 반영하는 사례가 소개된다. - 팀이 빠르게 제작할수록 디자인과 코드가 서로 다른 방향으로 움직일 가능성도 커지므로, 두 환경을 연결하는 장치가 중요하다. - Figma Make를 자주 사용하는 사용자를 위해 크레딧을 효율적으로 사용하고 작업 속도를 높이는 7가지 팁도 제공된다. - AI 도구의 활용도는 단순 사용 횟수보다 프롬프트 품질, 맥락 제공, 반복 가능한 프로세스 설계에 좌우된다. AI 도구를 도입할 때는 생성 속도만 평가하지 말고, 디자인 맥락이 코드까지 전달되는지, 결과를 반복적으로 개선할 수 있는지, 실제 출시 가치가 있는지를 함께 검토하는 것이 좋다. Figma MCP와 Weave 같은 도구를 활용하되, 최종 방향과 품질 기준은 사람이 명확히 관리해야 한다.

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

FigmaAI모델 컨텍스트 프로토콜design-to-code+2

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

Friends of Figma의 브랜드 리뉴얼이 글로벌 커뮤니티의 이야기를 전하다 | Figma 블로그

Friends of Figma는 전 세계 지역 커뮤니티의 다양성과 연결성을 표현하기 위해 브랜드를 새롭게 개편했다. 새 디자인은 Figma와의 연관성은 유지하면서도 각 지역 챕터가 도시와 문화를 반영해 자유롭게 활용할 수 있도록 설계됐다. 핵심은 통일된 결과물을 강요하기보다, 공통된 정신과 최소한의 규칙 안에서 챕터들이 직접 브랜드를 소유하고 발전시키도록 하는 것이다. ## 전 세계로 확장된 Friends of Figma - Friends of Figma는 Figma 사용자를 연결하고 서로 배우며 영감을 나누는 공식 사용자 그룹 프로그램이다. - 2026년 기준 전 세계 **82개국, 250개 이상의 챕터**가 운영되고 있다. - 지난해에는 워크숍, 웨비나, 디자인 토크, 시청 파티, 친목 모임 등 **900개 이상의 행사**가 열렸다. - 2018년부터 커뮤니티 주도의 모임이 형성됐고, Figma는 2020년 Friends of Figma 프로그램을 출범해 챕터 리더 선정, 행사 지원, 신기능 사전 공개 등을 제공했다. - AI로 산업이 빠르게 변화하는 상황에서, 지역 기반의 실제 만남과 사람 간 연결이 더욱 중요해졌다는 점이 브랜드 개편의 배경이다. ## Figma와 연결되면서도 지역적인 브랜드 - 새 디자인 시스템은 두 가지 목표를 동시에 추구한다. - Figma와 구별되지만 Figma의 정체성은 유지할 것 - 각 챕터가 도시와 지역의 특성을 반영해 자신만의 방식으로 표현할 수 있을 것 - Figma 브랜드와 연결된 시각적 정체성은 지역 커뮤니티가 신규 참가자와 후원자를 유치하는 데 도움을 준다. - 특히 디자인 커뮤니티가 충분히 형성되지 않은 지역에서는 Figma와의 공식적인 연계가 신뢰와 참여를 높이는 역할을 한다. - 이 시스템은 모든 챕터가 똑같은 결과물을 만드는 방식이 아니라, 공통된 정신을 공유하는 **민주적 디자인 시스템**을 지향한다. ## Figma 로고의 기본 형태를 활용한 심벌 - 새 Friends of Figma 로고는 기존 Figma 로고를 구성하는 기본 도형을 분리해 새로운 조합의 building block으로 활용한다. - 각각의 도형은 서로 다른 지역 챕터를 상징하고, 이들이 모여 하나의 글로벌 커뮤니티를 구성한다는 의미를 담는다. - 따라서 로고는 단순한 브랜드 변형이 아니라, 독립적인 챕터들이 공동체로 연결되는 과정을 시각화한다. ## 제약을 줄이고 창의성을 여는 디자인 규칙 - 브랜드 가이드라인은 색상, 챕터 배지, 스티커 등 기본적인 공통 요소를 제공한다. - 모든 챕터는 핵심 색상 체계를 공유하지만, 제공된 팔레트에서 **추가 색상 6개를 직접 선택**할 수 있다. - 스티커 템플릿은 최소한의 형태만 제공하며, 그 안에 어떤 그래픽과 메시지를 담을지는 각 챕터가 결정한다. - 즉, 브랜드가 모든 표현을 통제하기보다 “창의성을 발휘할 수 있을 만큼만 제한”하는 접근이다. - 최종 결과물보다 각 지역의 사람, 장소, 행사처럼 실제 커뮤니티를 구성하는 요소가 중심이 된다. ## 지역의 현실을 담는 사진과 콘텐츠 - 새 사진 가이드는 전문적인 연출보다 지역의 일상과 거리에서 포착되는 모습을 중시한다. - 해당 지역 주민이 알아볼 수 있는 장소와 분위기, 실제 행사 참여자의 모습을 통해 챕터의 정체성을 표현한다. - 이를 통해 Friends of Figma가 전 세계적으로 통일된 브랜드이면서도, 서울·상파울루·바쿠·나이로비 등 각 지역에서 서로 다른 모습으로 존재하도록 한다. ## 실용적인 시사점 - 글로벌 커뮤니티 브랜드는 모든 지역에 동일한 디자인을 적용하기보다, **공통 요소와 지역 자율성의 균형**을 설계하는 것이 효과적이다. - 브랜드 가이드라인을 세밀하게 통제하기보다 핵심 원칙, 기본 자산, 선택 가능한 범위를 제공하면 참여자들의 소유감과 창의성을 높일 수 있다. - 특히 사용자 그룹이나 지역 지부를 운영하는 조직이라면 로고보다 실제 사람과 장소, 활동이 드러나는 콘텐츠를 브랜드의 중심에 두는 것이 바람직하다.

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

Figma디자인 시스템brandingvisual-identity+1

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

디자인-코드 루프가 열어 주는 가능성 | Figma 블로그

AI는 디자인과 코드 사이의 장벽을 낮춰 두 영역을 하나의 연속적인 작업 흐름으로 만들고 있다. 이제 디자이너는 정적인 시안을 반복 제작하는 대신 기능하는 프로토타입을 코드로 만들고, 이를 다시 Figma 캔버스에서 편집하며 방향을 재탐색할 수 있다. 중요한 변화는 단순한 코드 생성 속도가 아니라, 디자인과 코드 간 변환이 기계적 번역에서 의미 중심의 협업으로 바뀐다는 점이다. ## 디자인과 코드의 경계가 사라지는 흐름 - 과거에는 코드가 복잡하고 수정 비용이 높아 디자인 단계에서 여러 정적 시안을 먼저 탐색하는 방식이 일반적이었다. - AI를 활용하면 기능하는 와이어프레임을 빠르게 만들고, 레이아웃뿐 아니라 상호작용과 동작까지 직접 실험할 수 있다. - 코드에서 Figma 캔버스로 이동하면 이미 구현한 방향에 고정되지 않고 새로운 구조와 시각적 대안을 다시 탐색할 수 있다. - Figma의 Alex Kern은 핵심 변화가 “코드를 더 빠르게 생성하는 것”이 아니라 디자인과 코드 사이의 변환을 더 의미론적이고 덜 기계적으로 만드는 것이라고 설명한다. ## 양방향 디자인-코드 루프 - 기존 개발 환경은 코드베이스에 이미 존재하는 구조와 패턴을 중심으로 한 방향으로 작업하기 쉽다. - AI 모델 역시 기존 코드의 관성에 영향을 받아 완전히 다른 제품 방향을 제안하는 데 한계가 있을 수 있다. - Figma 캔버스에서는 코드에서 구현한 결과를 다시 시각적으로 검토하고, 전혀 다른 방향으로 되돌아가 탐색할 수 있다. - 이처럼 `코드 → 캔버스 → 코드`를 반복하는 루프가 디자인과 엔지니어링의 협업 범위를 넓힌다. ## 협업 참여자의 확대 - 과거에는 “디자이너가 코딩을 배워야 하는가”가 주요 논점이었다면, 이제는 “디자이너가 AI에게 코드를 요청할 수 있는가”가 더 현실적인 질문이 되었다. - AI는 디자인 시스템이나 내부 개발 환경에 직접 접근하지 못하는 사람도 실제 제품을 Figma의 편집 가능한 프레임으로 가져와 작업할 수 있게 한다. - 결과적으로 특정 도구, 전문 지식, 조직 내 접근 권한이 협업의 진입장벽이 되는 문제가 줄어든다. - 디자인과 개발이 일부 전문가만의 영역이 아니라 더 많은 팀원이 참여할 수 있는 공동 작업 공간으로 변화한다. ## 학습 곡선에서 학습 램프로 - AI는 초보자의 출발점을 높여 복잡한 프레임워크와 개발 환경을 처음부터 모두 익히지 않아도 작업을 시작하게 한다. - 작업 중인 실제 맥락에서 “이 코드가 무엇을 하는지”, “React 라우팅이 어떻게 동작하는지”를 질문할 수 있어 추상적인 교육보다 이해가 쉽다. - 디자이너는 자신의 제품과 문제를 기반으로 학습하면서 점진적으로 전문성을 쌓을 수 있다. - Gui Seiz는 AI를 통해 셰이더, 3D, 자체 제작 도구처럼 과거에는 기술적 지식 부족으로 시도하지 않았던 영역까지 탐색하게 되었다고 말한다. ## 도구보다 중요한 호기심과 취향 - AI 도구 자체는 점점 많은 사람에게 동일하게 제공되므로 도구 접근성만으로는 차별화하기 어려워진다. - 앞으로는 무엇을 만들지 판단하는 취향과, 새로운 가능성을 계속 시험하는 호기심이 중요한 경쟁력이 된다. - AI는 문법, 프레임워크, 개발 환경을 설명해 주는 인내심 있는 튜터 역할을 할 수 있다. - 따라서 AI 시대에는 기존 전문성을 유지하는 것뿐 아니라 새로운 방식으로 배우고 실험하는 태도가 중요하다. ## 실용적인 결론 디자이너와 개발자는 디자인과 코드를 분리된 인수인계 단계로 보기보다, 서로 오가며 반복 개선하는 하나의 루프로 운영하는 것이 유리하다. AI를 최종 결과물을 자동 생성하는 도구로만 사용하기보다, 기능 프로토타이핑·코드 이해·대안 탐색·협업 진입장벽 완화에 활용할 때 가장 큰 효과를 얻을 수 있다.

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

Figma디자인 시스템생성형 AIReact+2

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

이제 FigJam은 코딩 에이전트의 화이트보드이기도 합니다 | Figma 블로그

FigJam이 코딩 에이전트의 작업을 시각화하고 팀과 함께 검토하는 협업 공간으로 확장된다. Figma는 `figma-use-figjam`, 확장된 `generate_diagram`, `get_figjam` 등의 MCP 도구와 스킬을 통해 에이전트가 코드베이스와 문서를 분석하고, FigJam에 아키텍처를 작성하며, 팀 피드백을 다시 구현 단계로 전달하도록 한다. 이를 통해 빠른 에이전트 개발로 발생하는 숨은 복잡성을 줄이고, 코딩 전에 설계를 검토할 수 있다는 것이 글의 결론이다. ## 에이전트 개발 속도와 코드 복잡성의 간극 - 에이전트 덕분에 과거 몇 분기 걸리던 기능을 몇 주 만에 구현할 수 있다. - 그러나 사람이 충분히 검토하지 않은 에이전트 생성 PR이 쌓이면 코드베이스에 다음 문제가 생긴다. - 숨은 복잡성 증가 - 기존 구조와 새로운 구현 간의 불일치 - 팀원이 전체 시스템 변화를 파악하기 어려움 - 글의 저자는 이러한 문제를 한눈에 파악하고 논의하기 위해 텍스트 문서보다 시각적인 시스템 표현이 필요하다고 설명한다. ## FigJam과 MCP 도구의 결합 - 기존 `use_figma` MCP 도구는 AI 에이전트가 실제 Figma 컴포넌트를 사용해 디자인을 생성하거나 수정하도록 한다. - `create_new_file`은 에이전트가 새 Figma 파일 안에 디자인을 생성할 수 있게 한다. - 새롭게 확장된 `generate_diagram`은 단순한 다이어그램을 넘어 다음과 같은 복잡한 시각 자료를 생성한다. - 시스템 아키텍처 다이어그램 - ERD(Entity Relationship Diagram) - 서비스 및 데이터 관계 구조 - `figma-use-figjam` MCP 스킬은 에이전트가 FigJam 보드를 직접 읽고 쓸 수 있도록 한다. - `generate-project-plan` 같은 워크플로 스킬은 문서, 코드베이스, 대화 내용을 시각적인 프로젝트 계획으로 변환한다. ## 1단계: 조사와 계획을 시각화 - 먼저 코딩 에이전트가 새 기능에 필요한 맥락을 수집한다. - 관련 MCP 서버 문서 - 코드베이스 구조 - 기존 구현 패턴 - 영향을 받는 서비스와 파일 - 에이전트는 가능한 구현 방안과 트레이드오프를 조사한다. - 이후 작업을 여러 개의 stacked PR로 나누고 테스트 전략을 세운다. - 기존에는 이 결과가 긴 Markdown 문서로 남았지만, 이제 FigJam 보드로 변환할 수 있다. - 보드에는 다음 자료를 함께 배치할 수 있다. - `generate_diagram`으로 생성한 아키텍처 및 ER 다이어그램 - `figma-use-figjam`으로 작성한 노트 - 코드 블록 - 주석과 설계 근거 - 텍스트 중심의 계획보다 팀원이 구조와 대안을 빠르게 비교하고, 적절한 아키텍처를 논의하기 쉬워진다. ## 2단계: 코드 작성 전 협업 - 생성된 FigJam 보드를 팀에 공유해 구현 전에 기술적 피드백을 받는다. - 팀원은 다이어그램 위에서 질문과 결정을 직접 남길 수 있다. - 특정 도구가 디자인 파일 외에 여러 파일 형식을 지원해야 하는가? - `folderId`를 입력받을 것인가? - 새 파일은 사용자의 Drafts 폴더에 생성할 것인가? - 원격 팀도 회의실에서 화이트보드를 사용하는 것처럼 기술 맥락을 공유하고 논의할 수 있다. - 에이전트가 만든 다이어그램도 사람이 검토하는 협업 산출물로 활용된다. ## 3단계: FigJam의 결정을 구현으로 전달 - 리뷰가 끝나면 에이전트가 보드의 결과를 다시 읽어 구현 계획을 갱신한다. - `get_figjam` 도구를 사용하면 다음 정보를 코딩 환경으로 가져올 수 있다. - 아키텍처 다이어그램 - 팀의 결정 사항 - 보드의 주석과 논의 내용 - 과거처럼 다이어그램을 캡처하고 댓글을 수동으로 요약해 에이전트에게 설명할 필요가 줄어든다. - 최종 PR에는 FigJam 보드 링크를 함께 연결해 설계 맥락을 보존할 수 있다. - 아키텍처가 코드 작성 전에 이미 검토되므로 PR 리뷰와 병합이 더 수월해진다. 에이전트에게 구현을 맡기더라도 계획·아키텍처·팀 의사결정은 사람이 먼저 검토하는 흐름을 만드는 것이 중요하다. FigJam과 MCP 도구를 함께 사용하면 에이전트의 빠른 실행력과 팀의 설계 검토를 연결해, 코드 품질과 협업 가시성을 높일 수 있다.

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

FigmaAI 에이전트figjam모델 컨텍스트 프로토콜+3

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

MCP 핵심 요약: 컨텍스트의 중요성과 활용 방법 | Figma 블로그

MCP(Model Context Protocol)는 AI가 Figma의 디자인 파일과 컴포넌트, 토큰, 레이아웃 결정 같은 맥락을 코드 작성 도구에서 활용하도록 연결한다. 이를 통해 AI가 단순히 화면을 모방하는 대신 디자인 시스템에 맞는 코드를 생성하고, 코드와 캔버스를 오가며 제품을 반복적으로 개선할 수 있다. 글의 결론은 MCP의 효과가 기술 자체뿐 아니라 팀이 얼마나 구조적이고 일관된 디자인 맥락을 구축했는지에 달려 있다는 것이다. ## MCP가 제품 개발에 필요한 이유 - MCP는 AI 도구가 팀이 사용하는 도구와 데이터에서 맥락을 가져올 수 있도록 하는 표준화된 연결 방식이다. - 기존 제품 개발의 선형적인 흐름은 디자인 → 개발 순서로만 진행되지 않는다. - 팀은 필요에 따라 어느 단계에서든 시작한다. - 개발 중 디자인으로 돌아가거나, 완성된 UI를 다시 캔버스에서 검토할 수 있다. - Figma MCP 서버는 디자인 정보를 개발자의 코드 작성 환경으로 전달한다. - 반대로 코드로 구현된 실제 UI를 Figma 캔버스로 가져와 탐색·수정하고, 다시 개발 환경으로 돌려보낼 수도 있다. ## 스크린샷만 보는 AI의 한계 - AI 코딩 도구가 Figma 화면만 참고하면 최종 결과의 시각적 형태만 파악하고, 그 결과를 만든 설계 의도는 알기 어렵다. - 예를 들어 AI는 다음과 같은 문제를 일으킬 수 있다. - 브랜드 색상과 비슷하지만 실제 토큰에 연결되지 않은 색상을 선택한다. - 팀이 반복적으로 사용한 기존 카드 컴포넌트 대신 새 카드를 처음부터 만든다. - 여러 중첩 컴포넌트로 구성된 폼을 하나의 단순한 요소로 평탄화한다. - 결과물은 겉보기에는 비슷해도 디자인 시스템에서 벗어난 코드가 되고, 화면과 컴포넌트가 늘어날수록 불일치가 누적된다. - MCP는 컴포넌트, 디자인 토큰, 레이아웃 구조 등 Figma 파일의 구조화된 정보를 AI에 제공해 이러한 번역 오류를 줄인다. ## 디자이너에게 달라지는 점 - 디자인 시스템은 제품의 시각적 일관성을 유지하는 수단을 넘어, AI가 생성하는 코드의 품질과 방향을 결정하는 입력값이 된다. - 파일의 구조와 명명, 컴포넌트 재사용성, 토큰의 일관성이 AI 생성 결과에 직접 영향을 준다. - AI가 대규모로 코드를 생성하기 때문에 작은 파일 정리 문제도 여러 화면에 반복될 수 있다. - 과거에는 개발자가 구현 과정에서 한 번 수정하면 끝날 문제가 될 수 있었다. - 이제는 하나의 불일치가 AI를 통해 여러 곳에 복제될 수 있다. - MCP를 사용하면 개발자가 코드로 구현한 결과를 디자이너가 다시 캔버스에서 확인할 수 있다. - 디자이너는 누락된 상태를 추가하고 세부 사항을 다듬어, 기존 구현을 다시 만드는 대신 제품을 완성도 있게 개선할 수 있다. ## 개발자에게 달라지는 점 - AI 코딩 도구는 개발 속도를 높이지만, 디자인 맥락이 없으면 개발자가 디자인 의도를 코드로 번역하는 작업을 여전히 직접 해야 한다. - MCP는 개발 도구 안에서 다음 정보를 활용할 수 있게 한다. - 재사용해야 할 컴포넌트 - 색상·간격·타이포그래피 등의 디자인 토큰 - 레이아웃과 계층 구조 - 디자인 시스템에 포함된 구성 방식 - 따라서 개발자는 화면을 추측하거나 비슷하게 재현하는 데 쓰는 시간을 줄이고, 실제 기능 구현과 제품 완성도 향상에 집중할 수 있다. - 디자인과 코드가 연결된 상태로 유지되므로 구현 과정에서 발생한 차이를 더 빠르게 발견하고 수정할 수 있다. ## 디자인 시스템이 AI 품질을 좌우한다 - MCP의 성능은 연결 방식만으로 결정되지 않고, AI가 읽는 디자인 파일의 품질에 크게 의존한다. - 명확하게 정리된 컴포넌트와 토큰은 AI가 일관된 결과를 생성하도록 돕는다. - 반대로 중복 컴포넌트, 불명확한 이름, 임의의 스타일 값이 많으면 AI가 잘못된 패턴을 학습하고 이를 여러 곳에 확산시킬 수 있다. - 디자인 시스템은 AI 기반 워크플로에서 생산성을 높이는 기준점이자, 생성 결과가 브랜드와 제품 규칙에 맞도록 제한하는 장치가 된다. 실무적으로는 Figma 파일을 AI가 읽기 쉬운 구조로 정리하고, 컴포넌트·토큰·상태를 명확히 관리하는 것이 우선이다. MCP는 디자인 시스템을 대체하는 기술이 아니라, 잘 구축된 디자인 시스템을 개발과 AI 생성 과정에 연결해 주는 기술로 활용해야 한다.

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

FigmaAI디자인 시스템AI 에이전트+3

toss·2026년 4월 3일원문

토스가 디자인 직무를 2개로 줄인 이유 (새 탭에서 열림)

토스 디자인 챕터는 기술의 발전으로 도구 활용에 대한 장벽이 낮아짐에 따라, 기존의 세분화된 6개 직무를 'Product Designer'와 'Visual Designer' 2개로 전격 통합했습니다. 이번 개편은 "어떤 도구를 사용하는가" 혹은 "어떤 화면을 만드는가"라는 수단 중심의 경계를 허물고, "무엇이 좋은 경험인가"를 판단하는 디자이너 본연의 감각과 판단력에 집중하기 위한 결정입니다. 이를 통해 디자이너가 고민할 수 있는 영역을 넓히고, 매체나 기법에 갇히지 않는 본질적인 문제 해결을 지향합니다. **수단과 매체가 만든 직무 경계의 한계** * 기존의 직무 세분화(Platform, Interaction, Graphic, Brand 등)는 조직의 성장에 따라 전문성을 쌓는 데 기여했으나, 실무에서는 점차 경계가 모호해지는 문제가 발생했습니다. * 인터랙션 적용이나 디자인 시스템 구축 시 특정 직무의 영역인지 모호한 상황이 반복되었으며, 이는 협업의 효율을 저해하는 요소가 되었습니다. * 과거의 직무 구분은 "무엇을 판단하느냐"가 아니라 Lottie, 코드, PC/모바일 등 다루는 도구와 화면의 크기라는 '수단'에 매몰되어 있었다는 점이 한계로 지적되었습니다. **기술 발전과 하드스킬 장벽의 붕괴** * AI와 디자인 도구(Figma 등)의 비약적인 발전으로 영상 제작, 프로토타이핑, 코드 구현 등 과거 전문 영역이었던 기술적 난이도가 낮아졌습니다. * 이미 실무에서는 직무에 구애받지 않고 브랜드 디자이너가 제품을 디자인하거나, 그래픽 디자이너가 시스템을 구축하는 등 '경계를 넘는 디자이너'들이 등장하고 있었습니다. * 하드스킬 습득 시간이 단축됨에 따라 디자이너에게 가장 중요한 역량은 도구 숙련도가 아닌, 결과물의 질을 결정하는 '판단력'과 '감각'으로 이동했습니다. **통합된 두 가지 핵심 직무** * **Product Designer**: 기존의 제품 디자이너와 툴즈 제품 디자이너를 통합하여, 모바일과 PC라는 화면 구분을 없앴습니다. 사용자의 맥락과 문제를 발견하고 해결책을 설계하는 본질에 집중합니다. * **Visual Designer**: 플랫폼, 인터랙션, 그래픽, 브랜드 디자이너를 통합했습니다. 특정 매체에 국한되지 않고 "무엇이 아름답고 올바른 시각적 판단인가"를 고민하며, 필요에 따라 아이콘 제작부터 인터랙티브 웹까지 직접 수행하는 조형 전문가를 지향합니다. **산업 전반에서 나타나는 역할 수렴 현상** * 디즈니 애니메이션이 복잡한 물리적 공정을 소프트웨어로 대체하고 기획 중심의 구조로 바뀐 것처럼, 디자인 역시 도구 중심에서 판단 중심으로 진화하고 있습니다. * 음악 산업에서 DAW(디지털 오디오 워크스테이션)의 등장으로 작곡과 엔지니어링의 경계가 사라진 사례처럼, 도구가 하나로 모이면 역할도 자연스럽게 하나로 흐려집니다. * 영화와 TV 연출의 경계가 디지털 시네마 등장 이후 사라진 것과 마찬가지로, 디자인 매체의 통합은 거스를 수 없는 흐름입니다. **디자이너를 위한 실용적인 제언** 이제 디자이너는 특정 툴의 숙련도에 안주하기보다, 자신이 만드는 결과물이 사용자에게 어떤 가치를 전달하는지 '판단하는 힘'을 길러야 합니다. 직무의 이름에 스스로를 가두지 않고 문제 해결을 위해 필요한 모든 수단을 자유롭게 활용할 수 있는 역량을 갖추는 것이 중요합니다. 토스의 사례처럼 조직 차원에서도 디자이너가 더 넓은 범위에서 사고할 수 있도록 제도적 제약을 제거해 나가는 변화가 필요할 것입니다.

Figma디자인 시스템프로덕트 디자인interaction-design+4

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

소프트웨어와 상호작용하는 방식을 재구상하는 6가지 디자인 | Figma 블로그

이번 Figma Make-a-thon 수상작들은 소프트웨어가 단순히 효율을 높이는 도구를 넘어, 사람들의 연결·놀이·창작 방식을 새롭게 설계할 수 있음을 보여준다. 공통적으로 기존의 익숙한 상호작용을 비틀고, 제약과 감각적 경험을 활용해 더 인간적인 디지털 경험을 만든다. 특히 Figma Make는 전문 개발 지식이 부족한 사람도 아이디어를 빠르게 프로토타입으로 구현하도록 돕는 도구로 소개된다. ## 소프트웨어 상호작용을 다시 상상한 Make-a-thon - Figma Make-a-thon은 핀치 줌, 좋아요 탭, 오른쪽 스와이프처럼 일상화된 상호작용의 다음 가능성을 탐구했다. - 수상작에는 총 10만 달러의 상금이 수여됐다. - 작품들은 새로운 기능보다 사람 사이의 연결, 놀이, 창의성, 장인정신에 초점을 맞춘다. - 얼굴 움직임으로 인터페이스를 조작하거나, 16비트 세계를 구현하는 등 익숙한 소프트웨어 사용 방식을 확장한다. ## 낯선 사람과 함께 만드는 자수 캔버스 **수상 부문: Best Overall — Common Thread** - 전통적인 자수 견본천(sampler)에서 영감을 얻은 멀티플레이어 디지털 캔버스다. - 사용자는 실의 색상과 스티치 유형을 선택해 공동 캔버스에 자신의 흔적을 남긴다. - 한 사람의 작업물이 아니라 여러 방문자가 이어서 완성하는 구조이며, 캔버스의 제한된 공간 자체가 중요한 경험이 된다. - 10만 개가 넘는 스티치가 쌓였으며, 작품은 완성되지 않은 채 계속 확장된다. - 제작자는 기능 목록보다 먼저 “어떤 느낌의 경험을 만들 것인가”를 설명하고, Figma Make로 구조를 만든 뒤 시각 디자인을 덧입히는 방식을 추천한다. - 실시간 협업과 인터랙티브 캔버스 기능을 개발 지식 없이 하루 만에 구현했다는 점도 강조된다. - 핵심 메시지는 속도와 규모를 중시하는 디지털 환경에서, 제한과 느린 공동 작업이 오히려 의미 있는 상호작용을 만든다는 것이다. ## 클릭 대신 입술 움직임으로 조작하기 **수상 부문: New Interaction — Pucker** - 손을 사용할 수 없거나 음성 명령을 원하지 않는 상황을 위해 얼굴 움직임을 입력 방식으로 활용한다. - 고개를 기울여 커서를 움직이고, 일정 시간 멈춰 항목을 선택하며, 입술을 오므리는 동작으로 선택을 확정한다. - 뜨개질, 요리, 베이킹, 디자인처럼 손이 바쁜 상황에서도 화면을 조작할 수 있다. - 전면 카메라로 실시간 추적하지만, 데이터는 저장하거나 전송하지 않는 방식으로 설계됐다. - 제작자는 기본적인 코드 구조를 이해하면 프로토타입을 수정하고 문제를 해결하는 데 큰 도움이 된다고 조언한다. - Pucker는 특정 제품이라기보다 여러 앱과 플랫폼에 적용할 수 있는 “유연한 인터랙션 레이어”로 제시된다. - 새로운 상호작용이 충분히 자연스러워지면 사용자가 의식하지 않고도 사용할 수 있으며, 이것이 접근성 높은 디자인으로 이어질 수 있다는 관점을 담고 있다. ## 시간과 공간의 제약을 없앤 사진 부스 **수상 부문: Reimagining Iconic Interactions — Duet Booth** - 1920년대부터 크게 변하지 않은 사진 부스의 개념을 원격 환경으로 확장한다. - 서로 다른 장소에 있는 두 사람이 비동기적으로 사진을 촬영할 수 있다. - 각자의 사진을 하나의 사진 스트립으로 결합해, 마치 두 사람이 같은 장소에 함께 있었던 것처럼 보여준다. - 사진 부스가 사진을 더 쉽고 즉각적이며 공유 가능한 경험으로 만들었다는 점을 디지털 공간에서 재해석한다. - 제작자는 시각적 세부 사항보다 핵심 상호작용을 먼저 완성하라고 조언한다. 기본 경험이 제대로 작동하면 이후의 디자인 요소가 이를 중심으로 정리되기 때문이다. 이 사례들이 보여주는 실용적인 방향은 기능을 많이 추가하는 것보다 사용자가 어떤 감정과 행동을 경험할지 먼저 정의하는 것이다. 그 후 핵심 상호작용을 빠르게 프로토타이핑하고, 시각 디자인과 세부 기능을 단계적으로 보완하면 제한된 시간과 개발 지식으로도 독창적인 소프트웨어 경험을 만들 수 있다.

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

Figmareal-time-collaborationfigma-makecomputer-vision+2

figma·2026년 3월 24일·3분 읽기큐레이션 요약

에이전트, Figma 캔버스를 만나다 | Figma 블로그

Figma는 이제 AI 에이전트가 디자인 캔버스에서 직접 파일과 컴포넌트를 생성·수정할 수 있도록 지원한다. MCP 서버의 `use_figma` 도구와 Markdown 기반 스킬을 통해 에이전트가 팀의 디자인 시스템, 컴포넌트, 변수, 작업 규칙을 활용하게 되며, 결과적으로 코드와 디자인 사이의 단절을 줄이는 것이 목표다. 이 기능은 현재 베타 기간 동안 무료로 제공되지만 향후 사용량 기반 유료 기능으로 전환될 예정이다. ## AI 에이전트가 Figma 캔버스에서 작업 - Claude Code, Codex 등 MCP 클라이언트가 `use_figma` 도구를 통해 Figma 파일과 컴포넌트를 직접 생성하고 수정할 수 있다. - 에이전트는 색상, 버튼 패딩, 타이포그래피, 인터랙션 같은 팀의 디자인 결정을 Figma 안에서 참조한다. - 기존처럼 AI가 일반적이고 브랜드와 동떨어진 디자인을 만드는 대신, 조직의 디자인 시스템에 연결된 결과물을 생성할 수 있다. - 코드에서 시작한 작업도 Figma에서 검토·수정할 수 있고, Figma에서 결정한 내용을 다시 개발 과정에 반영할 수 있다. ## `generate_figma_design`과 `use_figma`의 역할 분담 - `generate_figma_design` - 실제 웹사이트나 애플리케이션의 HTML을 Figma 레이어로 변환한다. - 코드와 디자인이 달라졌을 때 최신 UI를 Figma로 가져오는 데 사용된다. - `use_figma` - Figma 캔버스에서 기존 디자인을 수정하거나 새로운 디자인 자산을 생성한다. - 팀의 컴포넌트, 변수, 자동 레이아웃 등 실제 디자인 시스템을 활용한다. - 두 도구를 함께 사용하면 코드의 최신 상태를 Figma로 가져온 뒤, 에이전트가 디자인 시스템에 맞춰 재구성하고 개선할 수 있다. ## Markdown으로 정의하는 Figma 스킬 - 스킬은 에이전트가 Figma에서 작업하는 방법을 설명하는 Markdown 파일 기반 지침이다. - 특정 작업의 순서, 적용해야 할 규칙, 팀의 디자인 관례와 품질 기준을 명시할 수 있다. - 플러그인을 개발하거나 별도의 코드를 작성하지 않아도 누구나 스킬을 만들 수 있다. - 기본 스킬인 `/figma-use`는 Figma의 구조와 핵심 원칙을 에이전트에게 알려주며, 팀은 이를 확장해 자체 업무 방식에 맞출 수 있다. - 스킬은 단순한 문서가 아니라 에이전트가 실제 작업 중 따라야 하는 실행 규칙으로 작동한다. ## 제공되는 스킬 사례 - `/figma-generate-library`: 코드베이스에서 Figma 컴포넌트 라이브러리 생성 - `/figma-generate-design`: 기존 컴포넌트와 변수를 사용해 새로운 디자인 생성 - `/create-voice`: UI 명세에서 VoiceOver, TalkBack, ARIA용 스크린 리더 사양 생성 - `/apply-design-system`: 기존 디자인을 디자인 시스템 컴포넌트와 연결 - `/rad-spacing`: 변수와 폴백을 사용해 계층적인 간격 적용 - `/sync-figma-token`: 코드와 Figma 변수 사이의 디자인 토큰 동기화 및 변경 감지 - `/multi-agent`: 여러 에이전트가 디자인 구현 작업을 병렬로 수행 - 커뮤니티 실무자가 만든 JSON 기반 컴포넌트 생성, 디자인 워크플로 오케스트레이션 등의 스킬도 제공된다. ## 구조 기반의 자기 수정 - 에이전트는 화면을 생성한 뒤 스크린샷을 찍고, 결과가 목표와 다른 부분을 확인해 반복적으로 수정할 수 있다. - 수정 대상이 단순한 픽셀이 아니라 실제 컴포넌트, 변수, 자동 레이아웃, 레이어 구조이므로 디자인 시스템과 상호작용하며 개선된다. - AI 모델의 비결정성 때문에 같은 프롬프트라도 결과가 달라질 수 있지만, 스킬이 작업 순서와 기준을 고정해 결과를 더 예측 가능하게 만든다. - 기존의 디자인 규칙과 팀 관례가 정적인 문서에 머무르지 않고, 에이전트가 작업 중 실제로 적용하는 규칙이 된다. ## 실용적인 의미 팀은 `use_figma`와 `/figma-use`를 기반으로 자체 디자인 스킬을 만들고, 컴포넌트·변수·토큰 사용 규칙을 명시하는 것이 좋다. 특히 코드와 Figma가 자주 어긋나는 조직이라면 `generate_figma_design`으로 최신 UI를 동기화한 뒤, `use_figma`와 스킬을 이용해 브랜드와 디자인 시스템에 맞게 다듬는 워크플로가 효과적이다.

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

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

figma·2026년 3월 16일·3분 읽기큐레이션 요약

제15호: 디자인의 현주소 | 피그마 블로그

AI 도구와 워크플로가 디자인 방식을 근본적으로 바꾸면서, 디자인은 더 이상 특정 매체나 툴에 한정되지 않고 코드와 캔버스를 오가는 활동이 되고 있다. Figma의 조사에 따르면 디자이너의 91%가 AI가 업무 수준을 높인다고 답했으며, 채용 담당자의 82%는 디자이너 수요가 유지되거나 증가했다고 응답했다. 따라서 AI 시대의 디자이너에게는 전통적인 디자인 역량과 함께 문제 해결, 협업, AI 활용 능력이 중요해지고 있다. ## AI가 바꾸는 디자이너의 역할 - AI 도구는 디자이너의 작업 방식을 변화시키고 있으며, 단순한 제작 자동화를 넘어 아이디어 발상과 문제 해결에도 활용된다. - 디자이너가 무엇을 통해 가치를 만드는지는 사람마다 다르다. - 시각적 완성도 향상 - 복잡한 문제에 대한 사고 - 직관적인 사용자 경험 설계 - 이러한 가치 기준은 디자이너의 직무 만족도와 업무 경험에도 직접적인 영향을 준다. - 디자인 업무는 특정 매체에 고정되지 않고, 코드와 시각적 캔버스 사이를 자유롭게 오가는 방향으로 확장되고 있다. ## 디자인 채용 수요는 여전히 증가 - AI의 확산이 디자인 채용을 줄일 것이라는 전망과 달리, 조사 결과 기업의 디자이너 수요는 안정적이거나 증가하고 있다. - 전 세계 채용 담당자의 82%가 디자이너 채용 수요가 유지되거나 늘었다고 답했다. - 수요 증가는 기술 기업에만 국한되지 않고 다양한 산업으로 확산되고 있다. - AI가 제품 개발 속도를 높일수록 다음과 같은 역할이 더 중요해진다. - 사용자 문제를 정의하는 능력 - 제품 방향성을 시각화하는 능력 - 기술과 비즈니스 요구를 사용자 경험으로 연결하는 능력 - AI가 결과물을 생성하더라도, 어떤 문제를 풀고 무엇을 만들어야 하는지 판단하는 일은 여전히 사람의 역할이다. ## AI 시대에 요구되는 역량 - 프롬프트 작성 능력과 MCP 같은 AI 연동 기술을 이해하는 역량이 새로운 경쟁력으로 부상하고 있다. - AI 워크플로를 실제 디자인·개발 과정에 연결하고 자동화하는 능력이 중요하다. - 서로 다른 직군 사이에서 정보를 번역하고 협업을 이끄는 능력도 높은 가치를 갖는다. - 디자이너와 개발자 간 커뮤니케이션 - 제품 관리자와 디자인팀 간 요구사항 조율 - 기술적 제약과 사용자 요구의 연결 - 새로운 도구를 익히는 것만으로는 충분하지 않으며, 디자인의 기본기 역시 계속 중요하다. - 사용자 중심 사고 - 시각적 계층 구조 - 인터랙션 설계 - 문제 정의와 검증 - 결국 AI 활용 능력은 기존 디자인 역량을 대체하기보다 이를 확장하는 방향으로 작동한다. ## 프로토타이핑과 제품 의사결정의 변화 - Figma Make를 활용하면 제품 관리자도 아이디어를 빠르게 프로토타입으로 구현할 수 있다. - 프로토타입은 단순한 시각 자료를 넘어 제품의 복잡한 동작과 가능성을 검증하는 수단이 된다. - ServiceNow, Ticketmaster, Affirm 등의 제품팀은 프로토타이핑을 통해 다음을 수행하고 있다. - 복잡한 동작을 구체적으로 전달 - 아이디어의 한계를 빠르게 실험 - 제품 로드맵의 다음 방향에 대한 확신 확보 - 아이디어가 디자인팀에서만 시작되는 것이 아니라 제품, 개발, 기획 등 어느 직군에서든 시작될 수 있는 환경이 만들어지고 있다. ## 코드와 캔버스가 결합하는 미래 - 디자인의 미래는 코드와 시각적 캔버스가 서로 분리된 영역으로 남는 것이 아니라, 두 환경이 유기적으로 연결되는 방향으로 제시된다. - 아이디어는 코드로 구현되거나 캔버스에서 시각화된 뒤, 다시 서로 다른 형태로 발전할 수 있다. - 이 변화는 디자이너가 코드를 반드시 전문적으로 작성해야 한다는 의미라기보다, 구현 가능성과 기술적 구조를 이해해야 한다는 뜻에 가깝다. - 디자인 도구는 특정 직군만 사용하는 제작 프로그램에서, 여러 직군이 함께 사고하고 검증하는 협업 환경으로 확장되고 있다. AI 시대에는 새로운 도구를 많이 아는 것보다, AI를 활용해 더 나은 문제를 정의하고 빠르게 검증하며 다양한 직군을 연결하는 능력이 중요하다. 디자이너는 프롬프트와 자동화 기술을 익히되 사용자 중심 사고와 디자인 기본기를 함께 강화하는 것이 바람직하다.

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

FigmaAI프로토타이핑모델 컨텍스트 프로토콜+3