figma2026년 8월 11일

Figma Make를 통한 시간 절약 측정 | Figma 블로그 (새 탭에서 열림)

Figma 데이터 과학팀은 Figma Make가 디자인 작업을 얼마나 단축하는지 측정하기 위해 100명 대상의 무작위 대조 실험(RCT)을 설계했다. 그 결과 전체 디자인 작업은 20% 빨라지고 16% 쉬워졌으며, 특히 PM은 작업 시간이 23% 단축되고 난이도가 37% 낮아지는 가장 큰 효과를 보였다. 기존 A/B 테스트나 로그 기반 인과 추론만으로는 작업 복잡도와 사용자 경험 같은 교란 요인을 충분히 통제하기 어려워 RCT가 선택됐다. ## AI 시간 절감 측정의 어려움 - AI가 반복적·기계적인 업무를 대신하면 팀이 더 중요한 작업에 집중할 수 있지만, 실제 절감 시간과 효율 개선 지점을 정량화하기는 어렵다. - 작업 완료 시간에는 AI 사용 여부 외에도 다음과 같은 교란 요인이 영향을 준다. - 근속 기간 - 경력과 숙련도 - 작업의 복잡성 - 개인의 주관적인 디자인 경험 - 이런 요인을 통제하지 않으면 생산성 향상이 AI 때문인지, 다른 조건 때문인지 구분하기 어렵다. ## 기존 방법의 한계 ### 온라인 A/B 테스트 - 한 그룹에는 Figma Make를 제공하고 다른 그룹에는 제공하지 않는 방식이다. - 무작위 배정으로 사용자 특성의 차이는 어느 정도 줄일 수 있다. - 그러나 사용자마다 수행하는 작업이 달라 작업 난이도와 유형을 동일하게 맞추기 어렵다. - 따라서 두 그룹의 완료 시간 차이가 AI 효과인지, 과제 차이 때문인지 판단하기 어렵다. ### 로그 데이터 기반 인과 추론 - AI 기능을 사용한 작업과 사용하지 않은 작업의 평균 소요 시간을 비교하는 방식이다. - **성향 점수 매칭(PSM)**은 각 작업이 AI 사용 조건에 속할 확률을 계산해 비교하지만, 모든 교란 요인이 로그에 기록되어 있어야 한다. - 익명화된 사용자 ID만으로는 사용자의 주관적인 디자인 숙련도나 경험을 알 수 없어 PSM 적용에 한계가 있다. - **도구 변수(IV)** 방법은 AI 사용 여부에 영향을 주면서 작업 속도에는 다른 방식으로 영향을 주지 않는 변수가 필요하다. - 하지만 Figma 로그에는 이러한 조건을 만족하는 유효한 도구 변수가 없었다. ## 무작위 대조 실험을 선택한 이유 - RCT는 인과적 효과를 측정하는 표준적인 방법으로, 데이터 수집 단계에서 교란 요인을 직접 통제할 수 있다. - 연구에서는 다음 세 가지 요소를 결합했다. - **무작위 배정:** 참가자를 실험군과 대조군에 나누어 개인별 차이를 양쪽에 대체로 균등하게 분산 - **동일한 과제:** 모든 참가자가 같은 작업을 수행하게 해 과제 속성의 영향을 제거 - **실험 진행 관리:** 숙련된 연구팀이 실험을 감독해 수행 과정의 변동과 통계적 오류를 줄임 - 제품 디자이너와 PM이 일상적인 디자인 업무에서 Figma Make를 사용할 때 얻는 시간 절감 효과를 측정하기 위해 Figma 안팎의 사용자 연구팀과 협력했다. ## 연구 대상과 실험 도구 - 여러 AI 도구를 동시에 허용하면 어떤 도구가 시간 절감에 기여했는지 구분하기 어려워, 연구 대상 AI를 Figma Make 하나로 제한했다. - Figma Make는 사용자 기반이 크고 다양한 디자인 작업에 활용될 수 있어 연구 도구로 선정됐다. - 참가자는 총 100명으로 구성됐다. - 제품 디자이너 50명 - 제품 관리자 50명 - 표본 수는 GitHub Copilot 무작위 대조 실험 등 기존 연구에서 관찰된 효과 크기를 참고해 산출했다. - 이후 통계적으로 유의미한 효과를 탐지할 수 있도록 검정력 분석(power analysis)을 수행해 최종 표본 규모를 결정했다. ## 관찰된 효과 - 전체적으로 Figma Make 사용 시: - 디자인 작업이 **20% 더 빨라짐** - 작업이 **16% 더 쉬워짐** - 직군별로는 PM의 효과가 가장 컸다. - 작업 시간 **23% 단축** - 작업 난이도 **37% 감소** 실무에서 AI의 생산성 효과를 검증하려면 단순한 사용 로그 비교보다, 동일한 과제와 무작위 배정을 포함한 통제된 실험이 더 신뢰할 만하다. 특히 AI 도입 효과를 직군별로 비교하려면 사용자 특성뿐 아니라 과제 복잡도와 실험 진행 방식까지 함께 표준화하는 것이 중요하다.

figma-makeaidata-sciencea-b-testing+2

figma2026년 7월 31일

AI 숙련도는 최종 목표가 아니다 | Figma 블로그 (새 탭에서 열림)

AI 도구를 잘 다루는 능력은 중요하지만, 그것만으로는 AI 시대의 성공을 보장할 수 없다. 더 중요한 역량은 개인의 생산성 향상을 팀 전체의 속도로 확장하고, 다양한 의견을 모아 결정을 내리며, 실험과 실패를 안전하게 공유하는 협업 능력이다. 결국 AI의 가치는 한 사람이 10배 빠르게 일하는 데보다 팀 전체가 함께 더 빠르고 현명하게 움직이는 데 있다. ## AI 활용 능력 이상의 역량 - 제품 개발자 90% 이상이 AI 활용 능력을 미래의 성공에 필수적이라고 답했다. - AI 도구 숙련도는 채용, 업무 속도, 자신감 향상에 직접적인 도움을 준다. - 그러나 AI가 업무 방식을 바꿀수록 다음과 같은 역량의 중요성이 더 커진다. - 팀이 함께 사용할 수 있는 시스템 구축 - 적절한 사람들과 아이디어를 주고받는 능력 - 공동의 목표를 향해 협력하는 능력 ## 내부 제품 빌더가 되기 - AI 도구를 개인용으로만 사용하지 말고, 팀 전체가 활용할 수 있는 내부 도구로 전환해야 한다. - 예시는 다음과 같다. - 프로토타이핑 에이전트 - 브랜드 플러그인 - 공유 프롬프트 라이브러리 - 누구나 사용할 수 있는 프로토타이핑 도구 - Figma 연구팀은 AI를 활용해 설문 데이터를 탐색할 수 있는 인터랙티브 웹사이트를 만들었다. - 데이터와 맥락이 개인의 컴퓨터나 머릿속에만 머무르지 않게 했다. - AI를 개인 생산성 도구가 아니라 팀의 협업 역량을 확장하는 수단으로 활용했다. - Figma Brand Studio는 Figma Make로 이미지 효과 생성기를 제작했다. - 팀원이 사진이나 디자인에 브랜드에 맞는 질감을 클릭 한 번으로 적용할 수 있었다. - 핵심은 팀의 업무에서 반복되거나 막히는 지점을 발견하고, AI로 마찰을 줄이는 것이다. - 한 사람이 10배 빠르게 일하는 것보다 팀 전체가 함께 10배 빠르게 움직이는 편이 더 큰 효과를 낸다. ## 수많은 선택지에서 결정으로 이끌기 - AI는 짧은 시간에 수십 개의 방향과 결과물을 만들어내므로, 생성 자체보다 선택과 의사결정이 어려워진다. - 효과적인 의사결정을 위해서는 프로젝트 책임자뿐 아니라 다음 사람들을 참여시켜야 한다. - 반대 의견이나 새로운 관점을 가진 사람 - 과거의 맥락과 조직의 경험을 아는 사람 - 잠재적 위험을 발견할 수 있는 전문가 - 한 팀이 AI로 내부 앱을 빠르게 만들었지만, 직원들이 접근해서는 안 되는 회사 프로젝트 정보가 노출되는 문제가 발생했다. - 데이터 거버넌스 전문가를 초기 단계부터 참여시켰다면 예방할 수 있었던 사례다. - 회의 전에 이해하기 쉬운 선택지를 제공해야 한다. - 프로토타입의 각 흐름을 설명하는 Loom 영상 - 방향별 동작을 보여주는 주석이 달린 FigJam 파일 - 회의에서는 단순한 설명보다 트레이드오프를 비교하고 결정을 내리는 데 집중해야 한다. - 발언하지 않은 사람의 의견을 요청한다. - 모호한 추천은 구체적으로 되묻는다. - 논의를 진전시키는 질문을 한다. - 회의가 끝나기 전에 결정사항과 다음 단계를 확인한다. ## 나쁜 아이디어도 공유하기 - AI 활용 속도는 개인과 조직 사이에서 서로 다르게 나타난다. - 20%는 개인 기여자가 조직의 지원 없이 앞서가고 있다고 답했다. - 27%는 리더십이 AI 도입을 밀어붙이지만 팀이 따라가기 어려워한다고 답했다. - 팀원마다 AI를 접한 시점과 숙련도가 달라, 방치하면 역량 격차가 계속 커질 수 있다. - 앞선 사람만 계속 실험하면 다른 구성원은 AI 활용법을 배우기보다 뒤처지는 상황에 놓인다. - 따라서 아직 다듬어지지 않은 아이디어나 실패한 시도도 공유할 수 있는 환경이 필요하다. - 실험 결과를 공개적으로 나누면 개인의 경험이 팀의 학습 자산이 되고, AI 도입 속도 차이를 줄일 수 있다. AI 도구를 배우는 데 그치지 말고, 팀이 함께 사용할 수 있는 도구와 프로세스를 만들고, 다양한 이해관계자를 참여시켜 의사결정을 구조화하는 것이 좋다. 또한 완성된 결과만 공유하기보다 실패와 미숙한 아이디어까지 안전하게 나누는 문화를 구축해야 AI의 효과를 조직 전체로 확장할 수 있다.

figma-makeaillmprototyping+2

figma2026년 7월 30일

속성 패널과 주석 기능, 이제 Figma Make에서 사용 가능 | Figma 블로그 (새 탭에서 열림)

Figma Make에 속성 패널과 주석 기능이 추가되어, 사용자는 코드를 직접 작성하지 않고도 시각적으로 인터페이스를 수정할 수 있게 되었다. 속성 패널은 간격·타이포그래피·레이아웃 같은 시각적 변경을 정밀하게 처리하고, 주석은 애니메이션이나 상호작용처럼 설명이 필요한 변경을 특정 요소에 연결해 전달한다. 두 기능은 디자인과 코드 사이의 간극을 줄이고, 프롬프트 기반 편집보다 정확하고 효율적인 작업 흐름을 제공한다. ## Figma Make의 속성 패널과 주석 기능 - Figma Make 편집기에서 요소를 선택한 뒤 시각적 컨트롤이나 자연어 주석으로 코드를 수정할 수 있다. - 디자인을 수정하는 과정과 코드가 업데이트되는 과정을 하나의 연속적인 작업 흐름으로 통합한다. - 새 기능은 처음부터 작업하는 경우뿐 아니라 기존 코드 기반 프로젝트를 편집할 때도 사용할 수 있다. ## 속성 패널을 활용한 시각적 편집 - 상단 툴바에서 **Edit**를 선택하면 요소의 속성을 조정할 수 있다. - 조정 가능한 항목에는 다음이 포함된다. - 패딩, 요소 간 간격, 코너 반경 - 글꼴 굵기, 줄 높이, 자간 - 투명도, `z-index`, 테두리 스타일 - 위치와 레이아웃 속성 - 코드의 전체 DOM 트리를 레이어 패널처럼 확인하면서 원하는 요소를 선택할 수 있다. - 동일한 요소의 모든 인스턴스를 한 번에 선택해 일괄 수정할 수 있다. - 현재는 코드베이스에 정의된 색상 및 타이포그래피 토큰을 사용해 디자인 일관성을 유지한다. - 향후 Code Connect가 적용되면 Figma Design 컴포넌트와 코드 컴포넌트 간 연결도 강화될 예정이다. ## 변경 사항 검토와 코드 반영 - 속성 패널에서 변경한 내용은 즉시 코드에 확정되지 않고 프롬프트 입력창에 먼저 단계적으로 쌓인다. - 사용자는 각 변경 사항을 검토한 뒤 적용하거나 마음에 들지 않는 변경을 폐기할 수 있다. - 적용을 완료하면 Figma Make가 실제 코드를 수정하고 새로운 파일 버전을 생성한다. - 따라서 캔버스에서 시각적으로 확인한 결과와 실제 배포되는 코드 사이의 불일치를 줄일 수 있다. ## 주석을 통한 정밀한 프롬프트 작성 - 속성 패널만으로 표현하기 어려운 상호작용, 애니메이션, 동작 변경에는 주석 기능을 사용할 수 있다. - **Annotate for agent**를 선택한 뒤 캔버스에서 변경 대상 영역을 직접 표시하고 자연어로 요구사항을 작성한다. - 예시는 다음과 같다. - 썸네일에 마우스를 올리면 약간 확대 - 버튼을 300ms 지연 후 페이드 인 - 버튼을 탭할 때 눌리는 효과 추가 - 메뉴 버튼 클릭 시 전체 화면 내비게이션 오버레이 표시 - 번호가 매겨진 주석으로 여러 요소를 동시에 지정할 수 있다. - 에이전트는 표시된 정확한 위치와 설명을 함께 활용해 관련 코드 전체에 변경 사항을 적용한다. ## 프롬프트 비용과 작업 효율 - 직접 요소를 선택하면 에이전트가 수정 대상을 탐색하거나 추측할 필요가 줄어든다. - 일반적인 텍스트 프롬프트로 같은 변경을 설명하는 것보다 토큰을 적게 사용하고 더 빠르게 완료할 수 있다. - 변경 사항은 적용 전까지 크레딧을 소비하지 않고 대기한다. - 최종적으로 변경 사항을 적용할 때 크레딧이 차감되고 파일이 새 버전으로 업데이트된다. ## 디자인과 코드의 통합 - 속성 패널은 시각적 조정에, 주석은 동작과 맥락이 필요한 변경에 적합하다. - 두 기능을 통해 사용자는 코드를 직접 다루면서도 Figma와 유사한 시각적 편집 경험을 유지할 수 있다. - 같은 편집 경험은 향후 Figma Design의 코드 레이어에도 제공될 예정이다. - 장기적으로는 Figma 캔버스에서 코드 기반 결과물을 여러 방향으로 탐색하고 팀과 함께 비교하는 작업이 가능해진다. 실무에서는 간격·타이포그래피·레이아웃처럼 명확한 시각 속성은 속성 패널로 수정하고, 인터랙션이나 애니메이션처럼 의도가 중요한 변경은 주석으로 요청하는 방식이 가장 효율적이다. 적용 전 검토 단계가 제공되므로 여러 변경을 시도한 뒤 실제 코드 반영 여부를 결정하는 것도 권장된다.

figma-makefigmadesign-to-codecode-connect+2

figma2026년 7월 27일

디지털 도구, 인간의 표현: Config 2026의 시각적 아이덴티티 | Figma 블로그 (새 탭에서 열림)

Config 2026의 시각적 정체성은 AI 시대의 강력한 디지털 도구와 인간의 창의적·불완전한 표현을 함께 보여주는 데 초점을 맞췄다. Figma Brand Studio는 아이디어가 변형되고 확장되는 과정을 글리프, 생성형 텍스처, 동적인 구성으로 표현했다. 그 결과 디지털 화면부터 샌프란시스코 Moscone Center의 대형 조형물과 공간 연출까지 일관되면서도 인간적인 브랜드 경험을 만들었다. ## 인간과 AI의 협업을 표현한 세 가지 원칙 - **진화(Evolution)** - 아이디어를 그대로 완성하는 대신 remix, reinterpret, reinvent 과정을 거쳐 새로운 결과를 만든다는 개념이다. - 하나의 형태가 변형되고 증식하는 모습을 시각 시스템에 반영했다. - **유동성(Fluidity)** - 디자인, 코드, 프로토타입 사이를 오가며 다양한 지점에서 작업을 시작하는 현대적 제작 방식을 나타낸다. - 고정된 순서보다 반복과 순환을 강조한다. - **조화(Harmony)** - 생성형 도구로 빠르게 탐색하더라도 최종 판단에는 인간의 관점과 감각이 필요하다는 의미다. - AI의 정교함과 사람의 의도적인 불완전성을 함께 유지했다. ## 글리프로 아이디어의 변형과 확장을 시각화 - Config의 핵심 시각 요소는 스케치처럼 보이거나, 생성형 이미지처럼 유기적이거나, 선명한 기하학 형태를 가진 **글리프**였다. - 입자 형태의 글리프는 아이디어가 계속 생성되고 퍼지는 과정을 상징했다. - 반대로 깔끔한 직사각형은 충분히 정리되고 완성된 아이디어를 나타냈다. - 글리프는 약 14피트 높이의 폼 조형물로 제작되어 Moscone Center 외부와 행사 공간의 장면을 구성했다. - 결과물은 다소 엉뚱하고 개성 있어 보이면서도 프로그램으로 생성된 듯한 디지털 특성을 동시에 지녔다. ## AI로 만든 불완전한 텍스처 - 팀은 Figma Make로 원하는 로파이 효과를 도구화하고, 다음 세 가지 핵심 텍스처를 제작했다. - 낙서 같은 선화 - 흐릿한 그라디언트 - 타원형 입자 - 이미지를 도구에 입력해 예측하기 어렵고 손으로 그린 듯한 구성을 생성했다. - 완벽하고 자동화된 시각물 대신 작은 오류와 불규칙성을 남겨 인간적인 느낌을 강조했다. - 수백 명의 발표자 사진에는 디더링 도구를 적용했다. - 모든 사진에 일관된 스타일을 빠르게 적용했다. - 미세한 점묘 효과가 디지털 코드처럼 보이면서도 손으로 만든 질감을 더했다. - 흐릿한 형태와 거친 점 텍스처는 키노트 무대, 영상, 행사장 애니메이션 등 여러 접점에서 활용됐다. ## 정적인 디자인과 모션의 병행 제작 - 팀은 정적 그래픽을 먼저 완성한 뒤 애니메이션으로 넘기는 방식 대신, 정적 자산과 모션 자산을 동시에 개발했다. - 디자인과 모션이 서로 영향을 주는 반복적인 협업 구조를 취했다. - 초기 글리프가 실제로 움직이는 모습을 확인하면서 형태의 가능성을 새롭게 발견하는 등, 애니메이션 자체가 디자인 탐색의 도구로 기능했다. - 이를 통해 Config의 그래픽은 단순한 장식이 아니라 아이디어가 살아 움직이고 변형되는 과정을 보여주는 시스템이 됐다. ## 실용적인 시사점 AI를 활용한 브랜드 디자인에서도 결과물을 지나치게 매끈하게 만드는 것보다, 의도적인 불완전성과 인간의 판단을 남기는 것이 차별화에 도움이 된다. 또한 글리프·텍스처·모션처럼 재사용 가능한 시각 요소를 시스템화하면 디지털 콘텐츠와 오프라인 공간 전반에 일관된 경험을 효율적으로 확장할 수 있다.

figma-makefigmaaimotion-design+2

figma2026년 7월 16일

워크플로우 랩: Figma Make로 디자인을 직접 배포하기 | Figma 블로그 (새 탭에서 열림)

디자인과 개발의 핸드오프는 일방향일 필요가 없으며, 디자이너가 Figma Make에서 실제 코드베이스를 직접 수정하고 PR까지 이어지는 작업 흐름을 제안한다. 작은 접근성·사용성 개선을 티켓과 백로그에 맡기지 않고 디자이너가 직접 처리하면, 엔지니어는 대규모 아키텍처 작업에 집중하면서도 제품의 완성도를 높일 수 있다. Figma Design, Figma Make, Figma agent, GitHub 연동을 활용해 캔버스에서 검토하고 코드로 반영하는 것이 핵심이다. ## 작은 개선이 백로그에 묻히는 문제 - “간격을 조금 줄여 달라”거나 “스크린 리더가 잘못 읽는다”와 같은 수정은 중요하지만 규모가 작아 우선순위 경쟁에서 밀리기 쉽다. - 디자이너가 요구사항을 티켓으로 작성하면 엔지니어가 의도를 해석해야 하므로, 스크린샷과 설명을 주고받는 과정에서 디자인의 뉘앙스가 손실된다. - 그 결과 엔지니어는 실제 구현보다 디자이너의 결정을 번역하는 데 시간을 쓰게 된다. - 글에서는 이러한 문제를 해결하기 위해 디자이너가 저위험·고완성도 작업을 처음부터 끝까지 맡는 방식을 제안한다. ## MOSF 웹사이트의 접근성 개선 사례 - 가상의 박물관인 ‘Museum of Speculative Futures(MOSF)’가 사례로 등장한다. - 엔지니어는 대규모 정보 구조 재작성에 집중해야 하고, 디자이너는 웹사이트의 접근성 문제를 해결하려 한다. - PM은 엔지니어가 구조 개편 같은 고난도 작업을 계속 담당하고, 디자이너가 세부적인 접근성·사용성 개선을 직접 처리하도록 역할을 나눈다. - 목표는 기술적으로 동작하는 수준을 넘어, 다양한 사용자가 실제로 편리하게 사용할 수 있는 웹사이트를 만드는 것이다. ## 캔버스에서 사용자 피드백 수집 - 디자이너는 수정 전에 현재 경험을 점검하기 위해 Figma Design의 Figma agent를 사용한다. - 첫 방문자, 재방문 회원, 스크린 리더 사용자 등 여러 합성 페르소나를 생성하고 사이트를 탐색하게 한다. - 합성 페르소나는 실제 사용자 조사나 대면 테스트를 대체하지 않지만, 초기에 명백한 마찰을 발견해 후속 사용자 조사에 집중할 여지를 만든다. - 탐색 결과 다음과 같은 문제가 확인된다. - 전시 페이지의 내비게이션 라벨이 모호함 - 주요 행동 유도 버튼(CTA)이 눈에 잘 띄지 않음 - 날짜 선택기가 한눈에 이해하기 어려움 - 검색 결과가 없을 때 빈 화면만 표시됨 - 각각은 대규모 기능 변경은 아니지만, 여러 문제가 누적되면 사이트의 접근성과 사용성이 크게 떨어질 수 있다. ## 팀 검토를 거친 디자인 수정 - 디자이너는 에이전트가 발견한 문제를 바탕으로 디자인을 수정한다. - 이후 디자이너, 엔지니어, PM이 캔버스에서 변경 사항을 함께 검토한다. - 검토 대상에는 방문 페이지의 더 명확한 라벨, 눈에 잘 띄는 CTA, 사용하기 쉬운 날짜 선택기 등이 포함된다. - 디자인 단계에서 팀의 합의를 먼저 확보하므로, 코드 수정 이후에 요구사항을 다시 해석하거나 되돌리는 일을 줄일 수 있다. ## Figma Make로 실제 코드에서 작업 - 디자이너는 프로덕션 코드와 연결된 Figma Make를 사용해 캔버스의 수정 사항을 실제 코드에 반영한다. - 기존처럼 티켓을 생성해 백로그에 넣고 엔지니어가 나중에 구현하기를 기다리지 않는 것이 핵심이다. - Figma Make, GitHub 연동, 주석과 리뷰 기능을 통해 디자인 변경을 코드 변경으로 연결하고 팀 검토를 이어간다. - 최종적으로 작업은 풀 리퀘스트(PR) 단계까지 진행되며, 디자이너가 캔버스에서 시작한 개선을 병합 가능한 코드 변경으로 전달한다. - 이 방식은 엔지니어의 책임을 없애는 것이 아니라, 엔지니어가 코드 품질과 구조를 검토하는 동안 디자이너가 세부적인 사용자 경험 개선을 주도하도록 역할을 재배치한다. 작은 접근성·사용성 개선은 별도 티켓으로 쌓아두기보다, 디자이너가 실제 코드에서 직접 수정하고 엔지니어와 PR 리뷰를 진행하는 편이 효율적이다. 다만 합성 페르소나의 결과는 초기 탐색용으로 활용하고, 중요한 접근성 판단은 실제 사용자 조사와 기술 검증으로 보완하는 것이 바람직하다.

figma-makefigmaaiaccessibility+2

figma2026년 7월 9일

GPT-5.6이 이제 Figma Make에서 사용 가능합니다 | Figma 블로그 (새 탭에서 열림)

GPT-5.6이 Figma Make에 추가되어 프롬프트에서 프로토타입과 코드로 전환하는 속도와 첫 결과물의 품질을 높인다. 복잡한 앱도 한 번의 프롬프트로 만들고, 오류가 발생하면 모델이 원인을 찾아 스스로 수정할 수 있다. 또한 기존 Figma 디자인을 높은 충실도로 인터랙티브 프로토타입으로 변환하며, 반응형 레이아웃과 실제 동작하는 상호작용까지 구현한다. ## 빠른 프로토타이핑과 작업 흐름 유지 - GPT-5.6은 아이디어를 working build로 빠르게 전환해 한 번의 작업 세션에서 여러 방향을 탐색할 수 있도록 한다. - 복잡한 디자인에서도 첫 결과물을 빠르게 생성하며, 토큰 효율성도 높다고 소개된다. - 예시로 금융·고딕 스타일의 주식 추적 앱을 한 번의 프롬프트로 제작했다. - 어두운 배경과 앰버·네온 오렌지 텍스트 - 샘플 주가와 수익률 정보 - 스파크라인, 티커, 모듈형 그리드 - 키보드 단축키와 검색 기능 - 빌드 중 오류가 발생해도 작업을 중단하지 않고 원인을 조사해 자체적으로 수정한다. - 실제 테스트에서는 빈 화면이 나타난 원인을 GPT-5.6이 찾아 해결했다. ## 기존 디자인을 충실하게 구현 - Figma Design 파일이나 디자인 명세를 기반으로 기존 시각적 구조를 유지하면서 인터랙티브 프로토타입을 만들 수 있다. - 자연의 소리를 재생하는 오디오 플레이어 사례에서 다음 요소들이 원본 디자인과 유사하게 구현됐다. - 다중 트랙 타임라인 - 재생·일시정지·이전·다음 컨트롤 - 사운드 라이브러리와 아트워크 - 레이아웃, 시각적 계층, 간격, 비율, 스타일 - 정적인 디자인을 실제 동작하는 프로토타입으로 바꾸는 디자인-투-코드 작업을 보다 안정적으로 수행한다. - 오디오 파일 재생뿐 아니라 음악에 반응하는 셰이더 기반 이미지 왜곡 효과도 요청할 수 있다. ## 높은 완성도의 첫 결과물 - 최소한의 프롬프트만으로도 스타일이 정돈된 프로토타입을 생성하는 것이 목표다. - 책장 제품을 판매하는 콘텐츠 중심의 이커머스 페이지 사례에서는 다음 기능이 첫 결과물에 포함됐다. - 제품 설명, 치수, 관리 가이드 - 제품 정보가 채워진 드롭다운 - 책장 사진을 탐색하는 인터랙티브 이미지 갤러리 - 클릭 가능한 메뉴 - 별도의 추가 지시 없이도 화면 크기에 따라 레이아웃이 안정적으로 조정됐다. - 따라서 초기 결과물을 단순한 시안이 아니라 팀이 검토·수정·확장할 수 있는 출발점으로 활용할 수 있다. ## Figma Make에서의 사용 방법 - GPT-5.6은 Figma Make에서 제공된다. - Make의 모델 선택기에서 GPT-5.6을 선택해 사용할 수 있다. - 사용자는 거친 아이디어, 기존 Figma 디자인, 짧은 기능 설명 등을 입력해 프로토타입이나 생산 코드에 가까운 결과물을 생성할 수 있다. 실무에서는 먼저 기존 디자인이나 원하는 사용자 경험을 구체적으로 제공하고, 생성된 첫 결과물을 기반으로 세부 기능과 스타일을 반복 수정하는 방식이 효과적이다. 특히 반응형 동작, 실제 인터랙션, 오류 자동 수정 기능을 활용하면 초기 프로토타입 제작과 팀 리뷰까지의 시간을 줄일 수 있다.

figma-makeprototypingdesign-to-coderesponsive-design+3

figma2026년 6월 16일

Figma에서 MCP 서버를 활용하는 4가지 방법 | Figma 블로그 (새 탭에서 열림)

Figma의 MCP 서버는 디자인 파일을 읽는 수준을 넘어 Slides·FigJam·Make·Figma 에이전트 전반에서 콘텐츠를 생성하고 수정하는 도구로 확장됐다. 에이전트는 사내 문서와 최신 제품 정보를 바탕으로 발표 자료나 협업 보드를 만들고, Figma 템플릿·디자인 시스템·사용자 정의 폰트까지 반영할 수 있다. 그 결과 반복적인 콘텐츠 제작의 상당 부분을 자동화하면서도 최종 검토와 창의적 판단은 사람이 담당하는 워크플로가 가능해졌다. ## Figma MCP 서버의 확장된 역할 - Figma Slides, FigJam, Figma Make, 새로운 Figma 디자인 에이전트에서 프롬프트 기반 생성·수정을 지원한다. - 디자인 파일의 이미지와 아이콘을 SVG, PDF, JPG, PNG로 내려받을 수 있는 `download_assets` 도구가 추가됐다. - 업로드한 사용자 정의 폰트를 지원해 웹 안전 폰트로 대체하지 않고 브랜드 서체를 그대로 렌더링한다. - `use_figma` 도구와 `/figma-use-slides` 같은 MCP 스킬을 조합해 팀의 템플릿과 디자인 의도를 결과물에 반영한다. - 스킬은 에이전트의 출력 품질과 일관성을 높이며, Figma 커뮤니티에서 공유하거나 직접 제작할 수 있다. ## 지속적으로 갱신되는 발표 자료 만들기 - Figma의 디자이너 옹호 담당자는 AI 제품 출시 내용을 정리한 상시 업데이트형 발표 자료를 운영한다. - 다음과 같은 프롬프트를 코드 에디터에서 실행해 자료를 갱신한다. - Slack, Google Drive, Shortcut 블로그, 릴리스 노트에서 최신 정보를 수집 - 기존 덱에서 갱신이 필요한 부분을 제안 - 새로 추가할 슬라이드 아이디어를 생성 - Figma Slides의 기존 템플릿에 내용을 반영 - 에이전트가 관련 대화, 브리프, 출시 메시지를 모아 초안의 약 80%를 완성한다. - 이후 사람은 이미지 교체, 문구 수정, 내용 검토 등 품질 관리에 집중한다. - 사용자 정의 폰트를 활용하기 때문에 발표 자료의 브랜드 정체성과 시각적 일관성을 유지할 수 있다. - 같은 방식은 다음과 같은 업무에도 적용된다. - PM의 제품 킥오프 자료 작성 - 디자이너의 디자인 탐색 발표 - 마케팅 팀의 GTM 계획 수립 - 영업 팀의 고객용 자료 최신화 - 핵심 이점은 단순히 제작 속도를 높이는 데 그치지 않고, 팀의 디자인 시스템과 브랜드 기준을 반영한 결과물을 만드는 것이다. ## 실시간 데이터를 반영한 FigJam 보드 생성 - 제품 관리자는 기능 킥오프 워크숍을 준비할 때 회사 곳곳의 정보를 수집하고, 세션에 맞게 FigJam 섹션을 구성해야 한다. - 이 과정은 관련 맥락을 모으고 보드 형식을 맞추는 데 많은 시간이 걸린다. - 이를 자동화하기 위해 `/figjam-builder`라는 커스텀 스킬을 구축했다. - 스킬과 MCP 서버를 이용하면 실시간 데이터와 조직 내 정보를 바탕으로 워크숍용 FigJam 보드를 생성할 수 있다. - 제공된 본문은 이 사례의 구체적인 구현 방식과 나머지 두 가지 활용 사례 설명으로 이어지기 전에 중단되어 있다. MCP를 도입할 때는 모든 결과를 자동 게시하기보다, 에이전트가 자료 조사와 초안 작성을 맡고 사람이 사실관계·문구·시각 요소를 검토하는 방식이 현실적이다. 특히 팀 템플릿, 디자인 시스템, 사용자 정의 폰트, 업무별 스킬을 함께 제공할수록 자동화 결과의 품질과 브랜드 일관성이 높아진다.

figma-makedesign-systemsai-agentfigjam+2

figma2026년 5월 28일

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-makefigmadesign-systemsprototyping+4

figma2026년 5월 28일

Figma Make, 이제 로컬 코드에서 | Figma 블로그 (새 탭에서 열림)

Figma Make은 디자인, 프로토타이핑, 실제 코드 배포 사이의 경계를 허물고, Figma 안에서 로컬 코드베이스를 직접 수정·검토·공유할 수 있도록 확장된다. 사용자는 화면 요소를 시각적으로 편집하거나 자연어 주석으로 동작을 변경하고, Git 브랜치·커밋·PR 흐름을 통해 안전하게 배포할 수 있다. 궁극적으로 Figma는 디자인 캔버스와 코드베이스를 하나의 협업 환경으로 통합하려 한다. ## 로컬 코드베이스의 시각적 편집 - Figma Make를 회사의 코드베이스에 연결하면 Figma 안에서 실제 UI를 직접 수정할 수 있다. - 화면 요소를 선택해 다음 속성을 변경할 수 있다. - 레이아웃 - 색상 - 글꼴 - 크기 - 기타 시각적 속성 - Make의 에이전트가 사용자의 시각적 변경에 대응하는 코드를 찾아 수정한다. - 이미 원하는 결과가 명확한 속성 변경에는 직접 편집 기능을 사용한다. - 현재는 코드베이스 접근 권한이 있는 디자이너에게 적합하며, 비기술 사용자를 위한 설정 과정은 계속 개선 중이다. ## 주석과 프롬프트를 활용한 동작 변경 - 단순한 속성 변경을 넘어 상호작용이나 애니메이션을 수정할 때는 화면 요소에 주석을 달 수 있다. - 주석에는 원하는 동작을 자연어로 설명할 수 있다. - 여러 요소를 한 번에 참조할 수 있어 에이전트에 구체적인 맥락을 전달한다. - 직접 편집과 일반적인 채팅 프롬프트 사이의 유연한 작업 방식으로 활용된다. - 예를 들어 버튼의 클릭 동작, 화면 전환, 애니메이션 로직 등을 설명해 코드에 반영할 수 있다. ## 브랜치·커밋·PR 기반 배포 - 프로덕션 코드는 팀의 개발 프로세스를 거쳐 의도적으로 배포하도록 설계됐다. - PR을 열기 전 변경 사항은 로컬 커밋으로 저장된다. - Make 안에서 Git 작업을 수행할 수 있다. - 브랜치 생성 - 커밋 확인 - 커밋 되돌리기 - 변경 이력 검토 - PR 생성 - 엔지니어링 팀은 일반적인 코드 변경과 동일하게 Make의 변경 사항을 리뷰할 수 있다. ## 디자인과 코드의 협업 및 왕복 작업 - 로컬 코드베이스의 변경 사항을 파일과 브랜치 단위로 팀원에게 공유할 수 있다. - 팀원은 공유받은 브랜치를 체크아웃해 변경 내용을 확인하고 추가 작업을 진행한다. - 커밋 이력을 통해 변경 전후를 비교할 수 있다. - Make에서 만든 화면·페이지·컴포넌트를 Figma 캔버스의 레이어로 복사할 수 있다. - Figma 캔버스에서 팀원과 의견을 나누고, Figma 에이전트와 함께 디자인을 수정할 수 있다. - 디자인 변경 사항은 다시 Make로 가져와 코드에 적용할 수 있다. - 이를 통해 다음과 같은 왕복 흐름을 지향한다. - Make에서 코드 기반 화면 제작 - Figma Design에서 검토·편집·협업 - 결정된 디자인을 다시 코드에 반영 ## 베타 출시 범위 - 직접 편집, 주석, 채팅, PR 생성 기능은 2026년 5월 28일부터 제한적 베타로 제공된다. - 베타 기간에는 AI 크레딧을 차감하지 않는다. - 정식 AI 크레딧 요금은 추후 공개될 예정이다. - 초기 베타는 Mac용 Figma Beta 데스크톱 앱에서만 제공된다. - 대기자 등록이 베타 접근을 보장하지는 않으며, 선정된 사용자에게 별도 이메일이 발송된다. - 향후 다른 플랫폼으로 확대할 계획이다. Figma Make는 디자인 도구와 IDE를 대체로 구분하기보다, 작업 단계에 따라 두 환경을 연결하는 방향을 택했다. 현재는 Mac 베타와 코드 접근 권한 등 제약이 있지만, Git 기반 리뷰 프로세스와 Figma 캔버스 협업이 안정화된다면 디자이너와 개발자가 실제 제품 코드를 함께 발전시키는 실용적인 워크플로가 될 수 있다.

figma-makeai-agentcollaborationdesign-to-code+3

figma2026년 5월 22일

Figma Make 크레딧을 더 효율적으로 사용하는 7가지 팁 | Figma 블로그 (새 탭에서 열림)

Figma Make에서 크레딧을 효율적으로 사용하려면 긴 프롬프트를 반복하기보다 초기 설계와 변경 범위를 명확히 해야 한다. 첫 프롬프트에 프로젝트의 목표·맥락·제약·완료 기준을 충분히 담고, 이후에는 필요한 부분만 구체적으로 수정하는 방식이 효과적이다. 단순한 시각 변경이나 데이터 수정은 AI에 다시 요청하기보다 Edit 도구나 소스 코드 직접 편집을 활용하는 것이 좋다. ## 초기 프롬프트에 프로젝트의 기준점 담기 - 첫 프롬프트는 단순한 요청이 아니라 프로젝트의 전체 브리프처럼 작성한다. - 다음 내용을 구체적으로 포함한다. - 프로젝트의 목표 - 사용 맥락 - 필요한 UI 요소와 동작 - 기술적·기능적 제약 - 최종적으로 “완료”라고 판단할 기준 - 초기 구조가 탄탄할수록 이후에 잘못된 구현을 되돌리는 비용과 크레딧 사용량이 줄어든다. - 대규모 프로젝트는 다음 순서로 나누는 것이 효과적이다. 1. 화면과 컴포넌트의 전체 구조 설계 2. 기능과 상호작용 구현 3. 콘텐츠 입력 및 시각적 세부 조정 - 구조는 프로젝트가 진행될수록 변경하기 어려우므로 가장 먼저 확정하는 것이 좋다. ## 후속 프롬프트는 변경 범위를 좁혀 작성하기 - 첫 프롬프트 이후의 요청은 전체 프로젝트를 다시 설명하는 것이 아니라 변경 사항(delta)을 전달하는 방식으로 작성한다. - 좋은 후속 프롬프트는 다음 세 가지를 포함한다. - 무엇을 바꿀지 - 어떻게 바꿀지 - 무엇은 그대로 유지할지 - “다시 해줘”, “뭔가 이상해”처럼 모호한 요청보다 다음처럼 대상과 위치를 명시한다. - “캘린더 컴포넌트를 수정해줘” - “이 화면에 새로운 상태를 추가해줘” - “`tokens.ts` 파일을 수정해줘” - 서로 관련된 수정이 같은 컴포넌트나 로직에 집중되어 있다면 한 번에 묶는 편이 효율적이다. - 반대로 관련 없는 변경을 하나의 프롬프트에 섞으면 Make가 의도를 해석하는 비용이 커지고 결과도 불안정해질 수 있다. - 특정 파일, 컴포넌트, 상태를 지정하면 Make가 탐색해야 할 범위가 줄어들어 크레딧을 절약할 수 있다. ## 작은 시각 변경은 Edit 도구로 처리하기 - 간격 조정, 요소 삭제, 텍스트 변경처럼 결과가 거의 완성된 상태에서의 작은 수정은 AI 프롬프트보다 Edit 도구가 빠르다. - 이런 작업을 매번 프롬프트로 요청하면 새로운 설계 문제를 해결하는 것이 아니라 기존 결과를 조금씩 조정하는 데 크레딧을 소비하게 된다. - 직접 편집이 적합한 예시는 다음과 같다. - 여백이나 간격 변경 - 특정 UI 요소 제거 - 문구 수정 - 이미 구현된 컴포넌트의 단순한 스타일 조정 ## 소스 코드에서 동적 콘텐츠 수정하기 - 미리보기 화면에서 직접 수정하기 어려운 동적 콘텐츠는 소스 코드에서 값을 변경하는 편이 효율적이다. - `Go to source`를 사용해 관련 코드로 이동한 뒤 실제 데이터가 정의된 부분을 수정한다. - 반복 컴포넌트 안의 텍스트나 같은 폴더의 목록에서 가져오는 데이터 변경에 특히 유용하다. - **⌘F** 단축키로 코드를 검색해 특정 태그나 콘텐츠를 빠르게 찾을 수 있다. - 우선 `App.tsx`를 확인하고, 해당 코드가 없다면 컴포넌트 폴더의 다른 `.tsx` 파일을 살펴보면 된다. ## 실용적인 작업 원칙 처음에는 프로젝트 구조와 제약을 충분히 설명하고, 이후 요청은 한 번에 하나의 명확한 변경에 집중하는 것이 좋다. 단순한 수정은 Edit 도구나 소스 코드에서 직접 처리하고, AI는 새로운 구조·기능·상호작용처럼 직접 구현하기 복잡한 작업에 사용하는 방식이 크레딧과 시간을 모두 절약한다.

figma-makereacttypescriptui-ux+3

figma2026년 4월 21일

AI 리더들이 디자인 플레이북을 활용하는 방법 | Figma 블로그 (새 탭에서 열림)

AI 전환을 성공시키는 리더는 단순히 새로운 도구를 도입하는 기술자가 아니라, 디자인 원칙에 따라 일하는 방식을 재설계하는 사람이다. 이들은 AI를 직접 사용해 특성을 익히고, 조직 구성원의 실제 업무 흐름을 관찰하며, 아이디어를 프로토타입으로 구체화한다. 중요한 것은 도구 도입 자체가 아니라 팀의 행동과 시스템을 실질적으로 변화시키는 것이다. ## AI 리더의 역할과 ‘보여주기식 진전’의 함정 - AI 혁신·가속화 역할은 다음과 같은 일을 담당한다. - 업무 흐름을 빠르게 개선 - AI 기반 기능 출시 촉진 - 조직 전반의 도구 도입 지원 - 제품, 고객 지원, 내부 업무에 AI를 적용하는 방향 조율 - AI 도입이 확산되면서 워크플로와 시스템뿐 아니라 이를 사용하는 팀 자체도 변화시켜야 한다. - 새로운 도구를 도입했다는 사실만으로 성과를 증명하려는 **‘보여주기식 진전(performative progress)’**에 빠질 수 있다. - 효과적인 리더는 도구를 추가하는 데 그치지 않고, AI 시대에 맞는 새로운 업무 방식을 설계한다. ## 직접 사용하며 AI라는 재료 익히기 - 디자인의 기본 원칙은 다루는 재료를 직접 사용해 깊이 이해하는 것이다. - AI 리더도 전략적 관점에만 머물지 말고 직접 프롬프트를 작성하고 에이전트를 만들어야 한다. - 여러 AI 도구를 실제로 사용하면 다음을 파악할 수 있다. - 도구의 장점과 한계 - 확률적 결과가 만들어내는 불확실성 - 실제 업무에서 발생하는 트레이드오프 - 도입 과정에서 사용자가 겪는 마찰 - 업무 외 영역에서 AI를 실험하는 것도 유용하다. - 여행 계획 - 집 꾸미기 - 생일 파티 준비 - 봉사활동 관리 - 이런 경험은 단순한 호기심 충족이 아니라, AI의 동작 방식을 체득하는 **AI 활용 역량**의 일부다. ## 관찰을 통해 실제 업무 흐름 이해하기 - 리더가 AI를 직접 사용하는 것만으로는 부족하며, 조직의 여러 팀이 AI를 어떻게 활용하는지도 관찰해야 한다. - 도구의 기능이나 최종 산출물보다 중요한 것은 업무 과정에서 다음이 어디서 발생하는지 파악하는 것이다. - 병목 - 반복 작업 - 사용자의 불편 - 문제 해결을 촉진하는 지점 - 관찰 대상이 될 수 있는 신호는 다양하다. - Slack 대화 - 설문 응답 - 도구 사용 패턴 - 구성원의 기대와 불만 - 팀이 업무를 우회하거나 자체 해결책을 만드는 방식 - 문서상으로 완벽한 AI 자동화도 복잡한 기존 업무 흐름에 마찰을 추가하면 사용률이 정체될 수 있다. - 따라서 낮은 도입률을 단순히 사용자의 저항으로 해석하지 말고, 기존 프로세스와의 연결 방식에 문제가 없는지 확인해야 한다. ## 아이디어를 프로토타입으로 구체화하기 - 디자인은 관찰과 실행을 함께 요구한다. - AI 관련 아이디어는 나빠서 실패하는 것이 아니라, 팀이 아이디어를 구체적으로 상상하거나 검토하지 못해서 실패할 수 있다. - 초기 개념을 실제로 볼 수 있는 프로토타입으로 만들면 다음이 가능해진다. - 추상적인 아이디어를 시각화 - 팀 간 이해 차이 축소 - 빠른 피드백 수집 - 실행 가능성과 문제점 조기 검증 - 글에서는 Figma Make를 활용해 AI 아이디어를 유형화하고 실제 형태로 발전시키는 방법을 소개하려 한다. 제공된 본문은 이 섹션의 도입부에서 끝나므로 구체적인 사례와 후속 원칙은 포함되어 있지 않다. AI 전환을 추진할 때는 도구 도입 건수보다 실제 사용 경험과 업무 변화에 집중하는 것이 좋다. 리더가 직접 AI를 실험하고, 구성원의 업무를 관찰하며, 작은 프로토타입으로 아이디어를 검증하는 순환을 구축해야 한다.

figma-makeaiprototypingai-agent+2

figma2026년 4월 8일

Figmates가 Figma AI를 활용해 즐거움의 차원을 한 단계 높인 방법 | Figma 블로그 (새 탭에서 열림)

Figma 팀은 연례 April Fun Day를 위해 Figma Make, Weave, MCP를 활용해 며칠 만에 여섯 개의 미니게임을 제작하고 캔버스에 일주일간 공개했다. 이 과정에서 AI는 아이디어를 빠르게 프로토타이핑하고 시각 요소를 확장하며, 디자인과 코드 사이의 협업을 가속하는 역할을 했다. 글의 결론은 적절한 AI 도구를 사용하면 디자이너와 개발자 모두가 제작 과정에 참여하면서 더 빠르게 실험하고 완성도 높은 결과물을 만들 수 있다는 것이다. ## 놀이를 실험의 장으로 활용한 April Fun Day - Figma의 April Fun Day는 매년 커뮤니티를 위한 이스터 에그와 새로운 경험을 선보이는 행사다. - 올해는 기존의 추억을 불러일으키는 콘텐츠를 넘어, 캔버스 안에서 직접 즐길 수 있는 미니게임 플랫폼 **FigCade**를 제작했다. - 팀은 평소 업무 영역을 벗어나 새로운 도구와 제작 방식을 시험하는 기회로 행사를 활용했다. - FigCade는 단 며칠 만에 완성됐으며, 일주일 동안 사용자에게 제공됐다. ## 빠른 프로토타이핑과 반복 - **Figma Make**를 사용해 아이디어를 즉시 작동하는 프로토타입으로 만들었다. - 예를 들어 `2Fast2Figma` 퀴즈의 초기 아이디어는 일요일 아침에 시작해 그날 오후 작동하는 프로토타입이 됐다. - 아이디어 수만큼 다양한 프로토타입을 만든 뒤, 빠르게 공유하고 반응을 확인하며 방향을 조정했다. - 제작 과정의 기본 원칙은 “먼저 보여주고, 반응하고, 정렬한 뒤, 반복한다”는 방식이었다. - `2Fast2Figma`에서는 사용자가 30초 동안 Figma 관련 질문에 최대한 많이 답하도록 구성했다. ## Figma Weave를 활용한 시각적 탐색 - **Figma Weave**는 게임의 시각적 스타일과 질감 요소를 빠르게 탐색하는 데 사용됐다. - 디자이너 Lesley Moon은 펠트 느낌의 커서 등 FigCade의 질감 있는 그래픽 요소를 몇 시간 만에 제작했다. - AI로 펠트 소재 에셋을 대량 생성하면서 시도할 수 있는 시각적 테마와 질감의 범위가 넓어졌다. - 생성 결과물을 그대로 사용하는 데 그치지 않고, 이를 기반으로 추가 제작과 수정 작업을 이어갔다. ## 하루 만에 제작한 홍보 영상 - Weave는 FigCade의 April Fun Day 트레일러 제작에도 활용됐다. - 제품 관리자 Tara Nadella가 Weave에서 영상 콘셉트를 구상하고 필요한 요소를 생성했다. - 모션 디자이너 Fifi Law는 이를 Lesley의 시각 자료와 결합해 최종 영상을 제작했다. - 스토리보드에 필요한 요소를 빠르게 생성할 수 있었고, 트레일러 전체를 하루 만에 만들었다. ## Figma MCP로 디자인과 코드를 연결 - **Figma MCP 서버**는 디자인 탐색 결과를 실제 코드로 구현하는 데 사용됐다. - 개발자는 Claude와 GitHub Copilot을 Figma MCP에 인증한 뒤, 특정 디자인 컴포넌트 링크를 에이전트에 전달했다. - 에이전트는 해당 디자인 사양을 참고해 UI 변경에 필요한 코드를 생성했다. - 이를 통해 개발자는 디자인 맥락을 직접 확인하면서 시각적 요구사항에 맞는 코드를 작성할 수 있었다. - 프로젝트 전반에서 팀은 디자인과 코드 사이를 반복적으로 오가며 구현 결과를 조정했다. ## 실용적인 결론 - 아이디어 단계에서는 Figma Make로 빠르게 여러 프로토타입을 만들고, 사용자 반응을 기준으로 선별하는 방식이 효과적이다. - 시각적 에셋과 영상은 Figma Weave로 다양한 방향을 먼저 탐색한 뒤 사람이 다듬는 것이 적합하다. - Figma MCP는 디자인 컴포넌트와 코드의 연결을 강화하므로, UI 중심 개발에서 특히 유용하다. - AI를 완성품 자동 생성 도구보다 **빠른 탐색과 협업을 돕는 도구**로 활용할 때 가장 큰 효과를 얻을 수 있다.

figma-makeprototypinggen-aigithub-copilot+2

figma2026년 4월 2일

Figma Make에서 더 많은 맥락과 제어력으로 빌드하기 | Figma Blog (새 탭에서 열림)

Figma Make가 **Make kits**와 **Make attachments**를 통해 디자인 시스템과 실제 프로젝트 자료를 반영한 프로토타입을 생성하도록 개선됐다. Make kits는 코드 패키지나 Figma 라이브러리의 컴포넌트·스타일·토큰과 사용 지침을 제공하고, attachments는 데이터·법률 문구·스크린샷 등 프로젝트별 맥락을 전달한다. 이를 통해 범용적인 초안에서 출발해 반복적으로 수정하는 대신, 실제 제품 구조와 제약에 가까운 결과물을 더 빠르게 만들 수 있다. ## AI 초안이 실제 제품과 어긋나는 문제 - 기존 AI 생성 UI는 레이아웃과 인터랙션은 그럴듯하지만 다음과 같은 문제가 있었다. - 팀의 실제 디자인 시스템 컴포넌트를 사용하지 않음 - 카피가 placeholder로 남음 - 예외 상황과 중요한 edge case가 반영되지 않음 - 프로덕션 코드의 구조와 다른 방식으로 구현됨 - 그 결과 초기 생성 속도는 빨라도, 리뷰 전에 디자인 시스템에 맞게 다시 작성하고 조정하는 데 많은 시간이 필요했다. - Figma는 이 문제의 원인을 생성 품질 자체가 아니라 **팀이 실제 개발에 사용하는 맥락의 부족**으로 설명한다. ## Make kits: 디자인 시스템을 학습시키는 패키지 - Make kit은 디자인 시스템의 컴포넌트나 스타일과, 이를 어떻게 사용해야 하는지 설명하는 세부 가이드라인을 하나의 재사용 가능한 패키지로 결합한다. - 다음과 같은 소스를 사용할 수 있다. - 공개 npm 레지스트리의 JavaScript 패키지 - Figma의 보안 비공개 레지스트리에 저장된 코드 패키지 - Figma 라이브러리의 스타일과 디자인 토큰 - 가이드라인은 단순히 “어떤 컴포넌트가 존재하는가”뿐 아니라 다음까지 전달한다. - 컴포넌트를 어떤 상황에 사용해야 하는지 - 컴포넌트가 어떤 구조와 패턴을 따라야 하는지 - 디자인 시스템의 규칙을 프로토타입에 어떻게 적용해야 하는지 - 따라서 Make는 일반적인 UI 요소를 조합하는 대신, 팀의 코드베이스와 가까운 구조로 프로토타입을 시작할 수 있다. ## Make kits가 팀 협업에 주는 효과 - 폼, 대시보드, 설정 화면, 온보딩 플로우 등 여러 팀이 공유하는 화면에서 일관성이 높아진다. - 여러 팀이 동시에 프로토타입을 제작해도 디자인 시스템에서 벗어날 가능성이 줄어든다. - 리뷰 전에 spacing, 컴포넌트 선택, UI 패턴을 다시 맞추는 작업이 감소한다. - 엔지니어 입장에서는 익숙한 컴포넌트와 코드 패턴을 바로 확인할 수 있다. - “이 부분은 커스텀 구현인가?”와 같은 확인 질문이 줄어들어, 디자인을 코드로 번역하는 시간보다 제안 자체를 검토하고 개선하는 데 집중할 수 있다. - Figma는 향후 Figma 라이브러리의 컴포넌트 구조를 더욱 정확히 재현하는 방향으로 Make kits를 발전시킬 계획이다. ## Make attachments: 프로젝트의 실제 맥락 반영 - 디자인 시스템만으로는 각 프로젝트의 고유한 요구사항을 모두 설명할 수 없다. - 실제 프로젝트에는 다음과 같은 정보가 추가로 필요하다. - 실제 사용자 데이터 - 마이그레이션 제약 - 예외 처리와 edge case - 규정 및 컴플라이언스 요구사항 - 브랜드 콘텐츠와 법률 문구 - Make attachments는 이런 자료를 긴 프롬프트로 요약하지 않고 원본 파일 형태로 Make에 전달한다. - 지원되는 자료에는 다음이 포함된다. - PDF와 Markdown 문서 - CSV·JSON 데이터셋 - 스크린샷과 이미지 - 브랜드 가이드라인 - 법률 문구 - 미디어 파일과 SVG - 코드 및 관련 프로젝트 파일 ## 실제 데이터와 제약을 반영하는 프로토타이핑 - 예를 들어 디지털 제품의 전체 온보딩 플로우를 만들 때는 다음 정보가 동시에 필요할 수 있다. - 실제 사용자 데이터 - 법률상 반드시 표시해야 하는 문구 - 여러 입력 검증 상태 - 정상 흐름 외의 예외 상황 - 첨부 파일 없이 프롬프트만 사용하면 Make가 법률 문구를 임의로 줄이거나, 검증 상태를 단순화하거나, 이상적인 정상 흐름만 생성할 수 있다. - 원본 PDF, 데이터셋, 스크린샷 등을 첨부하면 Make가 프로젝트 자료를 직접 참조하므로, 보다 현실적인 콘텐츠와 제약을 포함한 프로토타입을 만들 수 있다. ## 디자인 시스템과 프로젝트 자료의 결합 - Make kits는 **제품 전반에 공통으로 적용되는 규칙**을 제공한다. - Make attachments는 **특정 프로젝트에만 존재하는 데이터와 제약**을 제공한다. - 두 기능을 함께 사용하면 다음과 같은 흐름이 가능하다. - Make kits로 실제 코드 또는 Figma 라이브러리 기반의 컴포넌트 사용 - attachments로 실제 데이터, 콘텐츠, 법률 요구사항, 시각 자료 반영 - 생성 결과를 프로덕션 구조에 가깝게 유지하면서 프로젝트의 세부 조건까지 검증 - 결과적으로 프로토타입 제작은 “일반적인 UI 초안 생성”에서 “실제 제품 조건을 반영한 탐색과 검증”으로 이동한다. 실무에서는 공통 컴포넌트와 토큰을 Make kit으로 정리하고, 기능별 요구사항·데이터·법률 문구·예외 상태는 attachments로 함께 제공하는 방식이 효과적이다. 이렇게 하면 생성 후 대규모 수정에 쓰는 시간을 줄이고, 초기 단계부터 개발·디자인 리뷰에 적합한 프로토타입을 만들 수 있다.

figma-makedesign-systemsreactjavascript+3

figma2026년 4월 1일

소프트웨어와 상호작용하는 방식을 재구상하는 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년대부터 크게 변하지 않은 사진 부스의 개념을 원격 환경으로 확장한다. - 서로 다른 장소에 있는 두 사람이 비동기적으로 사진을 촬영할 수 있다. - 각자의 사진을 하나의 사진 스트립으로 결합해, 마치 두 사람이 같은 장소에 함께 있었던 것처럼 보여준다. - 사진 부스가 사진을 더 쉽고 즉각적이며 공유 가능한 경험으로 만들었다는 점을 디지털 공간에서 재해석한다. - 제작자는 시각적 세부 사항보다 핵심 상호작용을 먼저 완성하라고 조언한다. 기본 경험이 제대로 작동하면 이후의 디자인 요소가 이를 중심으로 정리되기 때문이다. 이 사례들이 보여주는 실용적인 방향은 기능을 많이 추가하는 것보다 사용자가 어떤 감정과 행동을 경험할지 먼저 정의하는 것이다. 그 후 핵심 상호작용을 빠르게 프로토타이핑하고, 시각 디자인과 세부 기능을 단계적으로 보완하면 제한된 시간과 개발 지식으로도 독창적인 소프트웨어 경험을 만들 수 있다.

figma-makefigmareal-time-collaborationcomputer-vision+2

figma2026년 3월 16일

제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를 활용해 더 나은 문제를 정의하고 빠르게 검증하며 다양한 직군을 연결하는 능력이 중요하다. 디자이너는 프롬프트와 자동화 기술을 익히되 사용자 중심 사고와 디자인 기본기를 함께 강화하는 것이 바람직하다.

figma-makefigmaaiprototyping+3