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

디자인의 미래는 코드와

AI 시대의 디자인은 코드와 캔버스 중 하나를 선택하는 것이 아니라, 두 방식을 오가며 가능성을 탐색하는 방향으로 발전한다. Figma는 Claude Code와의 MCP 연동을 통해 코드로 만든 결과물을 편집 가능한 Figma 레이어로 변환하고, 디자인 수정 사항을 다시 코드에 반영하는 워크플로를 제시한다. 이를 통해 개발 과정에서 첫 번째 결과물에 매몰되지 않고 여러 대안을 시각적으로 비교·검토할 수 있다는 것이 글의 결론이다. ## 코드와 캔버스의 결합 - 제품을 만드는 방식은 코드, 프롬프트, 시각적 UI, 손그림 등 어디에서든 시작할 수 있다. - 중요한 것은 특정 도구를 고집하는 것이 아니라, 아이디어를 발전시키는 데 적합한 도구를 선택하는 것이다. - 코드는 빠르게 실행 가능한 결과물을 만들고, 캔버스는 다양한 가능성을 시각적으로 탐색하고 비교하는 데 강점이 있다. - 따라서 디자인과 개발은 경쟁 관계가 아니라 서로의 장점을 보완하는 관계가 된다. ## Claude Code와 Figma MCP 연동 - Figma MCP를 설치하면 Claude Code에서 “Send this to Figma”와 같은 명령으로 작업물을 Figma로 보낼 수 있다. - 브라우저에 렌더링된 현재 상태를 분석해 Figma의 편집 가능한 레이어로 자동 변환한다. - 코드로 구현된 화면을 단순 이미지로 가져오는 것이 아니라, Figma 안에서 요소를 개별적으로 수정할 수 있다. - Figma에서 다듬은 디자인 변경 사항은 다시 MCP를 통해 코드베이스에 반영할 수 있다. - Claude Code는 Figma MCP와 연결되는 여러 에이전트 도구 중 하나로 소개된다. ## 캔버스가 제공하는 탐색 능력 - IDE나 프롬프트 환경에서는 하나의 구현 방향을 빠르게 밀어붙이기 쉽다. - Figma 캔버스에서는 여러 디자인 시안을 나란히 배치해 차이점을 비교할 수 있다. - 전체 화면의 구조와 사용자 경험을 한눈에 파악하면서 세부 요소는 직접 조작해 수정할 수 있다. - AI가 표현 가능한 수많은 결과물을 만들어낼수록, 최종적으로 좋은 방향을 선택하는 디자인 감각과 관점이 더 중요해진다. ## 선형적 개발 프로세스의 변화 - 과거에는 일반적으로 아이디어 구상 → 디자인 → 코딩 순서로 작업이 진행됐다. - 이제는 터미널에서 구현을 시작한 뒤 디자인 도구로 이동하거나, Figma에서 시작해 코드로 넘어가는 등 순서가 고정되지 않는다. - 작업은 “어디서 시작하느냐”보다 “지금 올바른 방향으로 만들고 있는가”를 지속적으로 점검하는 것이 중요하다. - 첫 번째 구현물이 관성 때문에 최종 버전으로 굳어지는 ‘터널 비전’을 피해야 한다. ## 실용적인 적용 방향 - AI로 빠르게 만든 초기 구현물을 Figma로 가져와 여러 변형안을 비교한다. - 캔버스에서 레이아웃, 시각적 계층, 인터랙션 방향을 검토한 뒤 세부 디자인을 다듬는다. - 확정된 디자인 변경 사항을 MCP를 통해 코드에 다시 반영한다. - 코드와 디자인을 순차적으로 분리하기보다, 탐색 단계에서는 반복적으로 양쪽을 오가며 검증하는 것이 효과적이다.

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

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

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

Claude Code에서 Figma로: 프로덕

Claude Code에서 실행 중인 UI를 Figma로 가져와 편집 가능한 프레임으로 변환할 수 있게 되었다. 이를 통해 코드의 빠른 프로토타이핑과 Figma 캔버스의 협업·탐색 기능을 연결하고, 개발자·디자이너·PM이 동일한 결과물을 바탕으로 더 이른 시점에 의견을 나눌 수 있다. 핵심은 코드를 최종 결과로 고정하지 않고, Figma에서 여러 방향을 비교·발전시키는 것이다. ## 코드에서 캔버스로 확장하는 이유 - Claude Code를 사용하면 실제 데이터와 상호작용을 포함한 UI를 빠르게 구축하고 테스트할 수 있다. - 코드 기반 작업은 한 번에 하나의 상태를 구현하고 확인하는 데 강하다. - 반면 Figma 캔버스는 전체 흐름과 여러 대안을 한눈에 배치하고, 팀과 함께 논의하는 데 유리하다. - 따라서 코드는 아이디어를 빠르게 수렴시키고, 캔버스는 아이디어를 다시 확장하고 탐색하는 공간이 된다. ## 브라우저 화면을 편집 가능한 Figma 프레임으로 변환 - 프로덕션, 스테이징, 로컬호스트에서 실행 중인 UI를 캡처할 수 있다. - 캡처한 화면은 클립보드로 복사하거나 Figma 파일로 전송할 수 있다. - Figma에 붙여넣은 결과는 단순한 이미지가 아니라 정리·복제·수정 가능한 프레임으로 변환된다. - 여러 화면을 한 세션에서 캡처하면 화면 간 순서와 흐름도 함께 보존할 수 있다. ## 혼자 만드는 프로토타입에서 팀 협업으로 - 코드 우선 작업은 초기에는 빠르지만, 화면과 상태가 늘어나면 한 사람이 브랜치·개발 서버·전체 맥락을 모두 관리해야 한다. - 기존에는 피드백을 받기 위해 스크린샷이나 녹화 영상을 공유하거나, 다른 사람이 직접 로컬에서 빌드를 실행해야 했다. - Figma로 가져오면 팀원들이 같은 캔버스에서 직접 주석을 달고, 불명확한 부분을 표시하며, 개선 방향을 제안할 수 있다. - 다른 사람이 코드 환경으로 전환하거나 여러 파일을 수정하지 않아도 대안을 논의할 수 있다. ## 첫 번째 아이디어가 아닌 최선의 아이디어 찾기 - AI로 작동하는 프로토타입을 빠르게 만들 수 있게 되면서, 논의의 초점은 “어떻게 만들까”에서 “어떤 버전을 발전시킬까”로 이동했다. - Figma Make의 결과물을 캔버스로 가져오는 방식과 마찬가지로, Claude Code의 구현 결과도 편집 가능한 디자인 산출물로 전환된다. - 출발점이 Figma Make인지 Claude Code인지와 관계없이, 구체적인 결과물을 먼저 만든 뒤 반복적으로 발전시키는 것이 목표다. ## Figma에서 가능한 네 가지 탐색 - **전체 시스템을 시각적으로 확인** - 여러 화면과 단계별 흐름을 나란히 배치할 수 있다. - 반복되는 패턴, 누락된 단계, 디자인 불일치, 트레이드오프를 쉽게 발견할 수 있다. - **코드를 다시 작성하지 않고 변형 실험** - 프레임을 복제하고 순서를 재배치하며 구조적 대안을 비교할 수 있다. - 단순한 아이디어 검증을 위해 코드를 다시 구현할 필요가 없다. - 폐기한 대안도 남겨둘 수 있어 이후 재검토가 가능하다. - **더 이른 시점에 의사결정** - 디자이너, 엔지니어, PM이 동일한 맥락과 완성도의 결과물을 함께 검토한다. - 정답이 명확하지 않은 문제도 초기에 질문과 쟁점을 드러낼 수 있다. - 변경 비용이 낮을 때 방향을 조정할 수 있다. - **구현된 UI를 팀의 방향성으로 전환** - 실제로 작동하는 UI를 개인의 코드 환경에만 머무는 결과물이 아니라 공유 가능한 디자인 자산으로 만든다. - 팀은 구현 결과를 기준으로 제품의 사용감, 사용자 안내 방식, 가치 전달 방법을 함께 논의할 수 있다. ## 실용적인 결론 Claude Code는 빠른 구현과 실제 동작 검증에 사용하고, 방향을 비교하거나 팀의 피드백을 모을 때는 결과물을 Figma로 가져오는 방식이 효과적이다. 특히 여러 화면으로 구성된 사용자 흐름이나 대안 비교가 필요한 작업에서는 코드와 캔버스를 오가는 과정이 초기 의사결정과 협업을 크게 단순화할 수 있다.

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

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

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

디자이너의 현주소 2026: 디자이너들은 복잡한 중간 지대에 뛰어들고 있다 | Figma 블로그

디자인 업계는 AI로 인해 빠르게 변하고 있지만, 디자이너들은 불확실성을 피하기보다 AI를 실무에 통합하며 새로운 기회로 전환하고 있다. 조사에 따르면 AI는 작업 속도와 협업뿐 아니라 디자인 품질도 높이며, 인간 고유의 세심한 완성도와 창의적 판단인 ‘크래프트’의 중요성은 오히려 커지고 있다. 조직이 디자인의 우수성을 중시할수록 디자이너의 만족도와 기업 성과도 함께 높아진다는 것이 글의 결론이다. ## 조사 배경과 디자이너들이 처한 변화 - Figma는 NewtonX와 함께 북미, APAC, 유럽, LATAM, 중동의 디지털 디자이너 906명을 조사했다. - 설문은 영어, 스페인어, 프랑스어, 이탈리아어, 포르투갈어, 일본어, 한국어로 진행됐다. - 디자이너들은 AI 도입으로 업무 방식이 흔들리고 있지만, 단순히 산출물의 양만 늘리는 것이 아니라 더 빠르고 높은 품질의 결과물을 만들고 있다고 응답했다. - 글은 이러한 불확실성과 낙관이 공존하는 상태를 디자이너들이 변화의 ‘어수선한 중간 단계(messy middle)’를 지나고 있는 상황으로 묘사한다. ## AI가 작업 속도와 품질을 함께 높이다 - 91%의 디자이너가 AI 도구가 디자인을 개선한다고 답했다. - 89%는 AI 덕분에 더 빠르게 일할 수 있다고 응답했다. - 80%는 협업이 개선됐다고 답했으며, 대부분은 AI 도구가 업무를 늦춘다고 생각하지 않았다. - AI는 반복 작업과 워크플로 최적화를 지원해 디자이너가 더 많은 결과물을 출시하고, 영향력이 큰 아이디어에 시간을 쓸 수 있게 한다. - AI를 적극 활용하는 디자이너는 그렇지 않은 디자이너보다 직업 만족도가 25% 높았다. - 이들은 자신의 업무가 비즈니스 성과와 기업 성장에 기여한다고 느낄 가능성도 더 높았다. - 따라서 AI는 디자이너의 역할을 대체하는 도구라기보다, 디자이너가 더 빠르게 실험하고 중요한 판단에 집중하도록 돕는 도구로 제시된다. ## 크래프트는 인간적인 차별점이다 - 누구나 AI로 프롬프트를 작성해 프로토타입을 만들 수 있는 환경에서는 제품을 구별하는 요소로 디자인의 완성도와 의도성이 중요해진다. - 조사에서 디자이너들이 생각하는 크래프트의 의미는 다음과 같았다. - 시각적 완성도: 58% - 사려 깊은 문제 해결: 47% - 명확하고 직관적인 UX: 36% - 감정과 즐거움을 주는 경험: 35% - 제품 전반의 일관성: 15% - 한 응답자는 크래프트를 “기술, 디테일, 의도적인 노력이며, 배려와 정밀함, 예술성을 담아 만드는 것”이라고 설명했다. - 시각적 완성도나 감정적 경험처럼 결과물에서 바로 드러나는 요소는 리더나 사용자에게 인정받기 쉽다. - 반면 어려운 문제를 해결하거나 복잡한 트레이드오프를 조정하는 전술적 작업은 중요하더라도 외부의 인정을 덜 받을 수 있다. ## 조직의 디자인 투자와 성과 - 경영진이 디자인의 우수성을 중시하는 조직의 디자이너는 그렇지 않은 조직보다 자신의 일에 만족할 가능성이 약 2배 높았다. - 크래프트를 중요하게 여기는 팀은 더 높은 사기, 빠른 비즈니스 성장, 명확한 추진력을 보고했다. - 디자인에 대한 지원과 투자가 늘어난 조직일수록 성장 속도와 디자이너의 낙관적 전망이 함께 높아졌다. - 효과적인 투자는 다음을 포함한다. - 리더십 차원의 디자인 품질 지원 - 디자이너의 역량 개발 기회 제공 - 좋은 작업에 대한 공식적 인정과 보상 - 이는 개인의 창의성만으로 품질을 유지하기보다, 조직 차원에서 높은 기준을 뒷받침해야 한다는 점을 보여준다. AI를 도입할 때는 단순히 생산량을 늘리는 데 집중하기보다 반복 작업을 자동화하고, 디자이너가 문제 정의·사용자 경험·감정적 완성도·최종 품질 판단에 더 많은 시간을 쓰도록 설계하는 것이 바람직하다. 또한 디자인 품질을 평가하고 인정하는 조직 문화를 함께 구축해야 AI의 속도와 인간의 크래프트를 모두 살릴 수 있다.

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

프로토타이핑FigmaAI사용자 경험+2

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

제약 사항을 활용한

디자인과 요리 모두 결과를 좌우하는 것은 사전 준비이며, AI 프롬프트도 마찬가지다. LLM은 공감이나 예의보다 명확한 지시와 제약 조건을 필요로 하므로, 자연어로 막연하게 요청하기보다 구조화된 입력을 제공해야 한다. 글은 디자이너가 AI의 확률적 결과를 의도적이고 반복 가능한 디자인 결과로 바꾸기 위한 프레임워크로 TC-EBC(Task, Context, Elements, Behavior, Constraints)를 제안한다. ## 명확성이 예의보다 중요한 이유 - LLM은 감정을 느끼는 존재가 아니라 입력을 해석하는 시스템이므로 “부탁해”, “고마워” 같은 표현은 필요하지 않다. - 지나치게 공손한 표현은 요구사항을 더 명확하게 만들기보다 모호성을 늘릴 수 있다. - 모델은 깨끗한 지시문, 분명한 맥락, 구체적인 제약 조건을 바탕으로 더 안정적인 결과를 만든다. - LLM의 출력은 확률적이고 가변적이지만, 디자인은 정밀하고 반복 가능하며 의도적이어야 한다. - 따라서 디자인 분야의 프롬프트 작성에는 단순한 언어 능력보다 시스템적 사고가 필요하다. ## 미장플라스: 프롬프트도 사전 준비가 핵심 - 요리에서 미장플라스(mise en place)는 조리 전에 재료와 도구를 모두 준비해 혼란을 줄이는 과정이다. - 프롬프트 역시 실행 전에 다음 요소를 정리해야 한다. - 명확한 작업 - 충분한 맥락 - 필요한 UI 요소 - 예상되는 동작 - 구체적인 제약 조건 - 사전 준비를 잘하면 결과물을 만든 뒤 수정하고 보완하는 비용을 줄일 수 있다. - 프롬프트 엔지니어링에서도 의도 정의, 모듈화, 예측 가능성, 제약 조건이 중요한 원칙으로 강조된다. - 중요한 것은 고정된 문법을 외우는 것이 아니라, 사용자의 의도와 모델의 해석을 일치시키는 것이다. ## TC-EBC 프레임워크 - **Task**: AI가 수행해야 할 핵심 작업을 정의한다. - **Context**: 제품의 목적, 사용자, 사용 환경을 설명한다. - **Elements**: 필요한 화면, 기능, 컴포넌트, 콘텐츠를 나열한다. - **Behavior**: 사용자의 행동과 시스템의 반응을 구체적으로 기술한다. - **Constraints**: 플랫폼, 접근성, 레이아웃, 대상 기기 등 지켜야 할 조건을 지정한다. ## 모호한 프롬프트와 구조화된 프롬프트의 차이 - 막연한 요청의 예시는 다음과 같다. - “식료품 저장 공간이나 냉동고 사진으로 레시피를 추천하는 앱을 만들어 주세요. 알레르기와 선호도도 기억해 주세요.” - 이 방식은 핵심 기능이 한 문장 안에 섞여 있고, 화면 구성과 동작 방식이 명확하지 않다. - 그 결과 기본 기능은 갖추지만 와이어프레임에 가까운 평범하고 제한적인 결과가 나올 수 있다. - 같은 요구를 TC-EBC로 바꾸면 다음처럼 구체화할 수 있다. - **Task**: 식료품 저장 공간·냉장고 사진을 활용한 AI 식사 추천 앱 제작 - **Context**: 식이 제한이 있는 가정을 위한 요리 보조 앱 - **Elements**: 카메라 입력, 식재료 스캐너, 식이 설정 폼, 식사 추천 목록, 레시피 카드 - **Behavior**: 사진 업로드 → 재고 분석 → 식이 선호도 필터링 → 레시피 추천 - **Constraints**: 모바일 우선, iOS·Android 지원, 접근성 UI, 여러 가족 프로필 지원 - 이렇게 작성하면 모델이 요구사항을 빠르게 파악하고, 원하는 UI와 동작을 포함한 결과를 생성할 가능성이 높아진다. ## 디자이너에게 필요한 프롬프트 작성 방식 - 프롬프트를 한 번에 길게 작성하기보다 요구사항을 역할별로 분리하면 모델의 추측 영역을 줄일 수 있다. - 특히 “무엇을 만들 것인가”뿐 아니라 “누가 사용하는가”, “어떻게 동작하는가”, “무엇을 반드시 지켜야 하는가”를 함께 제공해야 한다. - 구조화된 프롬프트는 디자인 시스템처럼 AI에게 적절한 방향과 범위를 제공한다. - Figma Make 같은 프롬프트 기반 프로토타이핑 도구에서는 시각적 결과와 상호작용이 모두 중요하므로, 기능 목록만 제시하는 것보다 화면 요소와 사용자 흐름까지 명시해야 한다. AI에게 원하는 결과를 얻으려면 자연어로 희망사항을 늘어놓기보다 TC-EBC 형식으로 요구사항을 정리하는 것이 좋다. 특히 Task와 Behavior를 분명히 하고, Elements와 Constraints를 구체적으로 적으면 확률적인 모델 출력을 더 예측 가능하고 실용적인 프로토타입으로 유도할 수 있다.

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

프로토타이핑디자인 시스템대규모 언어 모델생성형 AI+2

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

프로토타입은

제품 관리자는 정적인 PRD를 작성해 검토받는 대신, 초기 아이디어를 인터랙티브한 프로토타입으로 구현하며 문제를 더 빠르게 이해하고 팀의 합의를 이끌어낼 수 있다. Figma는 Figma Make를 활용하면 불확실한 문제를 탐색하고 여러 해결책을 비교하며, 실제 디자인 시스템에 가까운 결과물로 가설을 검증할 수 있다고 설명한다. 따라서 프로토타입은 단순한 시각 자료를 넘어 의도와 동작을 보여주는 새로운 형태의 PRD로 자리 잡고 있다. ## 제품 관리자의 역할 변화 - 기존에는 PM이 요구사항 문서와 정적인 자료를 작성해 디자인·엔지니어링 팀의 검토를 받는 방식이 일반적이었다. - 이제는 팀과 함께 프롬프트를 작성하고 직접 프로토타입을 만들며, 아이디어를 구체적인 형태로 발전시키는 역할이 중요해지고 있다. - 문서만으로는 제품의 동작과 미묘한 사용 경험을 충분히 전달하기 어렵지만, 프로토타입은 “설명하는 것” 대신 “보여주는 것”을 가능하게 한다. - 작동하는 예시는 논의를 촉진하고, 팀이 같은 대상을 보며 빠르게 의견을 조율하도록 돕는다. ## 탐색: 불확실한 문제를 구체화하기 ### 문제 공간 정의 - 초기 단계에는 문제와 제약 조건이 명확하지 않아, 정답에 해당하는 해결책을 바로 정하기 어렵다. - Figma PM Tara Nadella는 문제 공간을 충분히 이해하지 못했을 때 Figma Make로 직접 여러 흐름과 상호작용을 실험했다. - 이를 통해 팀에 다시 가져갈 질문을 정리하고, 플러그인 사용 방식이나 전체 경험을 더 직관적으로 만드는 디자인 변경점에 대해 의견을 형성할 수 있었다. - 프로토타이핑은 해결책을 확정하기 전에 PM이 문제를 이해하고 자신의 관점을 세우는 수단으로 활용된다. ### 초기 아이디어를 여러 방향으로 발전시키기 - Figma Make는 빈 캔버스에서 시작하는 부담을 줄이고, 짧은 시간 안에 여러 접근 방식을 생성하게 해준다. - 손그림이나 텍스트 설명만으로 아이디어를 전달하는 대신, 실제로 반응하는 화면을 보고 어느 방향을 발전시킬지 판단할 수 있다. - Make kits를 사용하면 실제 제품의 디자인 라이브러리와 컴포넌트를 기반으로 프로토타입을 만들 수 있어, 일반적인 목업보다 출시 가능한 결과물에 가깝다. - Figma Design의 **Copy design** 기능으로 Figma Make 프리뷰를 편집 가능한 디자인 레이어로 변환할 수 있다. - 여러 시안을 빠르게 파생할 수 있다. - 디자이너가 시각적 완성도를 수동으로 보완할 수 있다. - 수정한 디자인을 다시 Figma Make에 연결해 프로토타입을 업데이트할 수 있다. - Figma Slides의 브랜드 색상 자동 적용 사례에서는 기존 템플릿을 복제하고, 프롬프트에 포함된 단서에 따라 색상 팔레트를 바꾸는 동작을 시뮬레이션했다. - 이처럼 프로토타입은 아이디어를 글로 설명하는 것보다 접근 방식에 대한 확신을 높이고, 실제 동작을 팀에 시연하는 데 유리하다. - Figma Make의 AI 이미지 기능을 이용하면 배경 제거, 객체 분리, 이미지 재구성 등 시각적 탐색도 캔버스에서 빠르게 수행할 수 있다. ## 디자인 시스템과 템플릿으로 탐색의 품질 유지하기 - 프로토타입을 실제 제품과 동떨어진 일반적인 목업으로 만들지 않으려면 디자인 시스템을 연결해야 한다. - Make kits에 팀의 디자인 라이브러리를 연결하면 생성 결과가 실제 제품의 UI와 컴포넌트에 기반하도록 만들 수 있다. - 프롬프트를 작성할 때는 기본 UI를 먼저 설정하고 관련 라이브러리를 첨부하는 것이 권장된다. - 완성도 높은 프로토타입은 Make 템플릿으로 게시할 수 있다. - 팀원이 수정할 수 있는 범위를 가이드로 제한할 수 있다. - 모든 사람이 동일한 기반에서 탐색할 수 있다. - 브랜드와 제품 경험의 일관성을 유지할 수 있다. - 장시간 프로토타이핑한 뒤 잠시 떠났다가 다시 검토하면, 처음에는 놓쳤던 세부적인 불일치나 사용성 문제를 발견하기 쉽다. ## 검증: 투자할 아이디어를 선별하기 - 아이디어를 자유롭게 생성하는 단계에서 실제로 자원을 투입할 대상을 검증하는 단계로 넘어가려면, 내부 이해관계자의 동의와 사용자 피드백이 필요하다. - 프로토타입은 정적인 설명 자료보다 실제 경험에 가까운 형태로 의견을 받을 수 있게 한다. - 사용자는 문서의 의도를 추측할 필요 없이 화면의 흐름과 동작을 직접 경험할 수 있으므로, 오해에 기반한 피드백을 줄이고 방향이 타당한지 확인하는 데 도움이 된다. 실무적으로는 문제를 충분히 이해하지 못한 상태에서 PRD부터 완성하려 하기보다, 실제 디자인 시스템을 연결한 낮은 비용의 프로토타입을 먼저 만들어 여러 방향을 비교하는 방식이 효과적이다. 이후 프로토타입을 내부 검토와 사용자 피드백의 기준점으로 활용하면, 문서만으로 합의하는 것보다 빠르게 실행 가능한 방향을 정할 수 있다.

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

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

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

어려운 문제는 여전히 어렵다

Figma의 디자이너 출신 제품 관리자 Nikolas Klein은 7년간 프로토타이핑 도구를 만들어 온 경험을 돌아보며, AI가 도구와 작업 방식을 빠르게 바꾸더라도 어려운 문제 자체는 여전히 어렵다고 말한다. AI는 새로운 도구일 뿐이며, 복잡한 문제를 정의하고 반복적으로 해결하는 과정에는 여전히 인간의 판단과 협업이 필요하다는 것이 글의 결론이다. ### 프로토타이핑 도구를 만드는 일 - 저자는 Figma에서 인턴으로 시작해 디자이너로 일한 뒤 제품 관리자가 되었다. - 약 7년 동안 인터랙티브 프로토타이핑 도구를 만드는 일을 담당했다. - 프로토타이핑은 단순히 화면을 그리는 작업이 아니라, 아이디어를 실제 상호작용으로 구현하고 검증하는 과정이다. - 애니메이션, 여러 디자인을 동시에 편집하는 기능, 디자인과 코드를 결합하는 기능 등은 모두 복잡한 문제를 단계적으로 해결한 결과다. ### AI가 바꾼 도구와 커진 불확실성 - AI의 등장으로 디자인과 프로토타이핑 작업의 속도와 방식이 크게 달라졌다. - 기존에는 사람이 직접 만들고 수정하던 작업을 AI가 생성하거나 보조할 수 있게 되었다. - 그러나 새로운 도구가 생겼다고 해서 무엇을 만들어야 하는지, 어떤 경험이 좋은지, 문제가 실제로 해결되었는지가 자동으로 결정되지는 않는다. - AI는 생산성을 높일 수 있지만, 오히려 디자이너가 자신의 역할과 미래의 작업 방식을 다시 질문하게 만든다. ### AI는 만능 해결책이 아니라 또 하나의 도구 - 글은 AI를 기존의 디자인 도구와 완전히 단절된 혁신이라기보다, 도구 상자에 추가된 새로운 도구로 바라본다. - 중요한 것은 AI를 사용하는 것 자체가 아니라 어떤 문제에 어떻게 적용할지 판단하는 능력이다. - AI가 아이디어나 결과물을 빠르게 만들어도, 결과의 품질과 적합성을 평가하고 방향을 정하는 일은 사람에게 남는다. - 생성 속도가 빨라질수록 문제 정의, 선택, 수정, 검증의 중요성이 오히려 커진다. ### 어려운 문제에는 반복과 판단이 필요하다 - 복잡한 디자인 문제는 한 번의 생성이나 명령으로 해결되지 않는다. - 실제 작업에는 아이디어를 만들고, 시도하고, 실패한 부분을 발견하고, 다시 수정하는 반복 과정이 포함된다. - 인터랙션과 애니메이션처럼 사용자의 감각과 맥락이 중요한 영역에서는 물리 법칙이나 기술 구현뿐 아니라 “어떤 느낌을 전달해야 하는가”에 대한 판단도 필요하다. - AI가 일부 과정을 자동화해도 문제의 본질을 이해하고 적절한 결과를 선택하는 어려움은 사라지지 않는다. ### 디자이너와 엔지니어의 협업 - 복잡한 제품을 만들려면 디자인 감각과 기술적 구현 능력이 함께 필요하다. - 디자이너와 엔지니어는 각자의 전문성을 바탕으로 아이디어를 현실적인 제품으로 발전시킨다. - AI 역시 독립적인 대체자라기보다 사람이 사고하고 협업하는 과정에 참여하는 파트너로 묘사된다. - 좋은 결과는 특정 도구 하나보다 사람, 기술, 반복적인 협업이 결합될 때 만들어진다. ### 변하지 않는 일의 본질 - 도구는 빠르게 바뀌지만 사용자를 이해하고 문제를 정의하는 일은 여전히 어렵다. - 무엇을 만들지 결정하고, 결과가 실제로 유용한지 판단하며, 세부적인 경험을 다듬는 책임은 계속 사람에게 있다. - 따라서 AI 시대의 디자이너와 제품 담당자에게 필요한 역량은 도구 사용법만이 아니라 문제를 바라보는 관점과 판단력이다. AI는 작업을 더 빠르게 만들 수 있지만, 좋은 제품을 만들기 위한 탐구와 검증까지 대신하지는 않는다. 새로운 도구를 적극적으로 활용하되, 문제 정의와 인간의 판단, 디자이너·엔지니어 간 협업을 중심에 두는 것이 현실적인 접근이다.

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

프로토타이핑FigmaAIdesign-tools+2

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

이제 정부용 피그마

Figma Make이 Figma for Government에 추가되어 연방 기관이 보안 환경에서 대화형 프로토타입을 더 빠르게 제작할 수 있게 됐다는 내용이다. Figma는 이를 통해 정책 담당자, 디자이너, 개발자, 연구자, IT 담당자가 협업하며 시민 대상 서비스를 더 일찍 검증하고 접근성과 일관성을 높일 수 있다고 설명한다. Figma for Government는 FedRAMP Moderate 인증 환경을 기반으로 하며, 일부 클라우드 인프라의 완전한 규정 준수는 2026년에 완료될 예정이지만 Make은 현재 승인된 환경에서 사용할 수 있다. ## 공공 서비스 디지털화의 복잡성 - 정부 서비스는 시민 생활과 직접 연결되므로 사용성, 접근성, 신뢰도가 중요하다. - 정책 담당자, 기술 담당자, 운영 책임자 등 다양한 이해관계자의 요구를 조율해야 한다. - 요구사항이 계속 변하고 디자인·개발 인력이 제한적이어서 정적인 목업만으로는 빠른 검증이 어렵다. - 2024년 온라인 여권 갱신 시스템 사례에서는 2025년까지 200만 명 이상이 온라인으로 갱신했으며, 이용자의 97%가 긍정적인 경험을 보고했다. - 미국 행정명령도 시민 대상 서비스에서 사용성, 접근성, 디자인 일관성의 중요성을 강조했다. ## Figma Make의 역할 - 텍스트 프롬프트를 활용해 아이디어를 대화형 프로토타입으로 구현한다. - 기존에는 정적 시안을 주고받으며 수주가 걸리던 작업을 수시간 내에 탐색할 수 있다. - 다양한 사용자 흐름과 화면 구성을 빠르게 만들어 초기 단계에서 비교·수정할 수 있다. - 시민과 실제 사용자를 개발 전에 참여시켜 업무 흐름과 가정을 검증할 수 있다. - Figma 내부의 공유 라이브러리, 디자인 패턴, 접근성 기준과 연계해 결과물의 일관성을 유지한다. ## 협업과 서비스 품질 향상 - 디자이너, 정책 담당자, 연구자, 엔지니어, IT 담당자가 하나의 실시간 협업 공간에서 작업할 수 있다. - 아이디어 구상부터 프로토타입, 사용자 테스트, 개발 전달까지의 단절을 줄인다. - 연방 혜택, 금융 커뮤니케이션, 교육 플랫폼, 우주 임무 지원 시스템, 연구 서비스 등 복잡한 공공 업무에 적용할 수 있다. - 공유 디자인 시스템을 활용해 여러 기관과 서비스에서 접근성과 시각적 일관성을 높일 수 있다. - 시민의 피드백을 더 이른 시점에 반영해 개발 후반의 수정 비용과 실패 위험을 줄일 수 있다. ## 보안 및 규정 준수 - Figma Make은 Figma for Government의 승인된 환경에서 제공된다. - Figma for Government는 FedRAMP Moderate 권한을 기반으로 정부 기관의 보안 요구사항을 충족하도록 설계됐다. - 다만 Figma의 일부 클라우드 인프라는 2026년에 완전한 FedRAMP Moderate 규정 준수를 달성할 예정이다. - 글에서는 이러한 진행 상황과 별개로 Make 자체는 현재 승인된 환경에서 사용할 수 있다고 설명한다. ## 향후 방향 - Figma는 Figma Make을 시민 중심의 공공 서비스와 기관 내부 도구를 현대화하는 핵심 기능으로 확대하려 한다. - 정부 기관이 더 많은 아이디어를 빠르게 실험하고, 사용자 검증을 거쳐 실제 서비스로 발전시키는 것이 목표다. - 국립공원관리청의 431개 국립공원 디지털 앱 사례처럼, 작은 팀도 Figma를 활용해 대규모 공공 정보 서비스를 구축할 수 있음을 강조한다. 실무적으로는 Figma Make을 최종 서비스 개발 도구라기보다, 보안 환경에서 정책·업무 흐름을 빠르게 검증하는 프로토타이핑 도구로 활용하는 것이 적절하다. 도입 전에는 조직의 데이터 분류 기준과 FedRAMP 적용 범위, 2026년 예정된 인프라 규정 준수 일정을 별도로 확인해야 한다.

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

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

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

Figma AI 크레

피그마는 AI 기능 사용을 확대하기 위해 모든 좌석과 요금제에 AI 크레딧을 제공해 왔으며, 이제 사용량을 더 투명하게 확인하고 추가 크레딧을 구매할 수 있도록 과금 체계를 개편한다. 관리자는 팀원별 사용량을 확인하고, 개인 사용자는 잔여 크레딧과 초기화 시점을 확인할 수 있다. 2026년 3월부터는 추가 크레딧 구독과 종량제 결제가 도입되며, 좌석별 크레딧 한도도 엄격히 적용된다. ## AI 크레딧 사용 현황 확인 - 관리자는 **Billing 대시보드**에서 다음 정보를 확인할 수 있다. - 팀 내 AI 기능 사용 사용자 - 사용자별 소비 크레딧 - 크레딧이 소진된 사용자 - 다음 크레딧 초기화까지 남은 기간 - 일반 사용자는 자신의 잔여 크레딧과 다음 초기화 시점을 확인할 수 있다. - 대부분의 AI 기능에서는 특정 작업을 실행할 때 소비되는 크레딧 양도 표시된다. - 예를 들어 사용자는 총 3,000크레딧 중 2,800크레딧이 남았다는 식으로 잔액을 확인할 수 있다. ## 좌석과 요금제별 기본 크레딧 - Starter 요금제: 월 500크레딧 - Professional 요금제의 Full seat: 월 3,000크레딧 - Organization 요금제의 Full seat: 월 3,500크레딧 - Enterprise 요금제의 Full seat: 월 4,250크레딧 - 그 외 좌석 및 요금제: 월 500크레딧 - 기존에는 모든 Figma 좌석과 요금제에 AI 크레딧이 제공되어 사용자가 AI 기능을 경험할 수 있도록 했다. ## 추가 AI 크레딧 구독 2026년 3월 11일부터 팀은 기본 제공량을 초과하는 크레딧을 월 구독 방식으로 구매할 수 있다. - 정기적으로 AI 기능을 사용하는 팀을 위한 공유 크레딧 풀이다. - 사용량에 따라 월별 크레딧 패키지를 선택할 수 있다. - 제시된 구독 가격 예시는 다음과 같다. - 5,000크레딧: 월 120달러 - 7,500크레딧: 월 180달러 - 10,000크레딧: 월 240달러 - 종량제보다 정기 구독이 더 저렴한 구조다. ## 종량제 결제 - 팀이 필요할 때만 추가 크레딧을 구매하는 방식이다. - 관리자가 사전에 지출 한도를 설정할 수 있다. - 사용량이 일정하지 않거나 구독 크레딧을 일시적으로 보충해야 하는 팀에 적합하다. - 구체적인 종량제 방식은 2026년 2분기에 제공될 예정이다. - 제시된 종량제 가격은 다음과 같다. - 5,000크레딧: 150달러 - 7,500크레딧: 225달러 - 10,000크레딧: 300달러 ## 크레딧 한도 적용 일정 - 2026년 3월 11일: 추가 AI 크레딧 구독 출시 - 2026년 3월 18일: 좌석별 AI 크레딧 한도 강제 적용 - 따라서 한도 초과 사용이 필요한 팀은 구독 또는 종량제 결제를 미리 설정해야 한다. 실무적으로는 먼저 Billing 대시보드에서 팀원별 사용 패턴과 월별 소비량을 확인한 뒤, 사용량이 안정적이면 구독형을, 변동이 크면 종량제를 선택하는 것이 적절하다. 특히 2026년 3월 18일 한도 적용 전에 예산 한도와 추가 크레딧 정책을 정해 두는 것이 좋다.

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

프로토타이핑Figmafigma-makefigma-ai+3

figma·2025년 11월 11일원문

피그마, 인도에 새로운 (새 탭에서 열림)

피그마(Figma)는 인도 벵갈루루에 새로운 허브를 설립하며 세계에서 두 번째로 큰 시장인 인도 내 제품 개발 커뮤니티에 대한 투자를 본격화했습니다. 이번 확장은 AI 기술 도입이 활발한 인도 시장의 특성을 반영하여, 피그마가 단순한 디자인 도구를 넘어 제품 개발 전 과정을 아우르는 AI 기반 협업 플랫폼으로 진화하려는 전략적 움직임입니다. 이를 통해 피그마는 글로벌 사용자의 85%를 차지하는 해외 시장에서의 영향력을 강화하고 사용자 중심의 기술 혁신을 가속화할 방침입니다. **인도 시장의 전략적 가치와 AI 도입 현황** * 인도는 월간 활성 사용자(MAU) 기준 피그마의 세계 2위 시장이며, BSE100(인도 상장사 100대 기업) 기업의 40% 이상이 이미 피그마를 도입했습니다. * 현지 리서치 결과, 인도 디자이너의 93%가 업무에 AI를 활용하고 있으며, 개발자의 81%는 AI 기반 제품의 성공에 디자인이 과거보다 더 중요해졌다고 응답했습니다. * Flipkart, Zomato, Swiggy 등 인도의 대표적인 유니콘 기업들이 피그마를 통해 디자인과 개발의 간극을 줄이고 제품 출시 속도를 높이고 있습니다. **글로벌 네트워크 확장 및 커뮤니티 성장** * 피그마는 매출의 약 50%가 미국 외 시장에서 발생함에 따라 도쿄, 싱가포르, 런던, 파리, 베를린 등에 이어 벵갈루루에 신규 거점을 마련하며 글로벌 운영을 강화하고 있습니다. * 인도 내 'Friends of Figma' 커뮤니티 멤버는 약 25,000명에 달하며, 이들은 전 세계에서 가장 활발하게 디자인 시스템과 협업 툴을 활용하는 집단 중 하나로 꼽힙니다. **Figma Weave와 AI 중심의 제품 혁신** * 생성형 AI 플랫폼인 'Weavy'를 인수하여 'Figma Weave'를 새롭게 선보였으며, 이를 통해 캔버스 내에서 이미지, 비디오, 애니메이션, VFX 등 미디어 자산의 생성 및 전문적 편집이 가능해집니다. * **Figma Make**: 텍스트 프롬프트나 간단한 디자인 초안을 즉시 프로토타입이나 실제 앱 형태로 변환해 주는 기능을 지원합니다. * **영역별 특화 도구**: 개발 생산성을 높이는 'Dev Mode', 동적 웹사이트 제작을 돕는 'Figma Sites', 마케팅 에셋을 대량 생산하는 'Figma Buzz' 등 제품군을 확장했습니다. * **협업 도구 고도화**: 인터랙티브 프레젠테이션 툴인 'Figma Slides'와 고급 벡터 드로잉 도구인 'Figma Draw'를 통해 기획부터 실행까지의 워크플로우를 통합했습니다. 피그마는 이제 디자인 도구를 넘어 기획자, 디자이너, 개발자가 AI를 매개로 소통하는 통합 제품 개발 플랫폼으로 완전히 탈바꿈하고 있습니다. 기업들은 피그마의 새로운 AI 기능들을 활용해 아이디어를 실제 제품으로 구현하는 시간을 단축하고, 디자인 시스템의 일관성을 유지하면서도 창의적인 실험을 지속할 수 있는 환경을 구축할 것을 권장합니다.

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

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

Figma Make와 함께 디자인

Figma Make는 자연어 프롬프트와 기존 디자인을 바탕으로 작동하는 고충실도 프로토타입을 만들어, 아이디어를 빠르게 검증하고 공유하도록 돕는다. 글은 Maven Clinic, Pendo, ServiceNow, LinkedIn의 사례를 통해 디자인팀이 보류된 아이디어를 되살리고, 새로운 방향을 탐색하며, 협업하고, 디자인 시스템의 일관성을 유지하는 방법을 소개한다. 핵심은 디자이너가 반복적인 제작보다 문제 정의와 전략, 사용자 경험의 완성도에 더 집중하게 된다는 점이다. ## Figma Make가 디자인 탐색을 바꾸는 방식 - Figma Make는 프롬프트를 입력해 앱과 인터페이스를 생성하는 도구다. - 초기 아이디어를 단순한 목업이 아니라 직접 조작할 수 있는 프로토타입으로 발전시킨다. - 프로토타입을 통해 팀은 기능의 타당성, 사용자 흐름, 마이크로인터랙션을 더 빠르게 검토할 수 있다. - 디자인팀은 반복적인 레이아웃 제작과 프로토타이핑에 쓰는 시간을 줄이고, 취향·전략·비전에 집중할 수 있다. - Figma Make에서 만든 결과물을 Figma Design 캔버스로 복사해 세부 수정과 반복 작업을 이어갈 수 있다. ## 보류된 아이디어를 제품 로드맵으로 되돌리기 Maven Clinic은 난임 클리닉을 지도에서 찾는 기능을 출시 일정 때문에 보류했지만, Figma Make로 기능의 가능성을 설득할 수 있는 인터랙티브 프로토타입을 제작했다. - 초기 디자인을 Figma Make에 입력해 실제 제품처럼 보이고 작동하는 고충실도 프로토타입을 만들었다. - 완성도 높은 결과물이 Slack에서 널리 공유되고 CEO의 관심을 이끌어내면서, 우선순위에서 밀릴 수 있었던 기능을 다시 로드맵에 올렸다. - 다른 디자이너가 결과물을 수정한 뒤 Figma Make로 되돌리는 방식으로 디자인을 반복 개선했다. - 정적인 목업으로는 발견하기 어려운 마이크로인터랙션과 사용 흐름의 문제를 조기에 파악했다. - 팀은 “0에서 시작”하는 대신 어느 정도 구현된 상태에서 출발했고, 그 결과 클리닉 파인더 MVP를 4개 미만의 스프린트로 설계·개발·테스트·출시했다. - 2년 동안 백로그에 머물던 아이디어를 빠르게 검증 가능한 제품으로 전환한 사례다. ## 탐색과 협업을 위한 공통 활용 방향 글은 다음과 같은 네 가지 활용 방향을 제시한다. - **로드맵에 아이디어 되살리기**: 인터랙티브 프로토타입으로 이해관계자의 관심과 투자 결정을 이끌어낸다. - **미지의 영역을 탐색하기**: 여러 디자인 방향을 짧은 시간 안에 시도해 빈 캔버스에서 시작하는 부담을 줄인다. - **새로운 인터페이스를 함께 개선하기**: 디자이너와 제품·개발 등 다른 직군이 실제로 조작 가능한 결과물을 보며 구체적인 피드백을 주고받는다. - **초기 탐색에 디자인 시스템 반영하기**: 빠르게 만든 시안도 기존 제품의 시각 언어와 컴포넌트 체계를 유지해, 탐색과 일관성을 동시에 확보한다. ## 프로토타입이 PRD보다 먼저 올 수 있다 - Maven Clinic 사례에서는 프로토타입을 먼저 만든 뒤, 실제로 잘 작동한 부분과 부족한 부분을 바탕으로 제품 요구사항 문서(PRD)를 작성했다. - Figma Make 결과물은 추상적인 요구사항을 구체적인 사용자 흐름으로 바꿔준다. - 팀은 “무엇을 만들 것인가”뿐 아니라 “어떤 상호작용이 필요한가”, “어디서 사용성이 떨어지는가”를 초기에 논의할 수 있다. - 따라서 프로토타입이 요구사항을 검증하는 산출물을 넘어, 요구사항 자체를 구체화하는 출발점이 될 수 있다. ## 디자이너의 역할 변화 Figma Make는 디자이너의 역할을 실행 중심에서 판단과 방향 설정 중심으로 이동시킨다. - 반복적인 화면 제작보다 다양한 가능성을 빠르게 비교한다. - 팀의 논의를 시각적이고 조작 가능한 결과물로 전환한다. - 초기 단계에서 사용자 경험과 세부 상호작용을 검증한다. - 최종적으로는 생성된 결과물을 그대로 사용하는 것이 아니라, 디자이너의 취향과 전략적 판단으로 다듬는다. 실무에서는 Figma Make를 완성품 생성 도구로 보기보다, 아이디어를 빠르게 구체화하고 팀의 피드백을 모으는 탐색 도구로 활용하는 것이 효과적이다. 특히 장기간 보류된 기능이나 이해관계자의 동의를 얻기 어려운 아이디어를 실제로 경험 가능한 프로토타입으로 만들어 검증하는 데 유용하다.

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

프로토타이핑디자인 시스템생성형 AIcollaboration+2

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

6가지 뛰어난 Figma 제작 사례

Figma Make-a-thon에는 1만 명이 넘는 창작자가 참여해, 아이디어를 빠르게 인터랙티브 프로토타입으로 구현했다. 수상작들은 단순히 작업을 지시하는 데 그치지 않고 제품 구조와 상태 관리, 컴포넌트 상호작용까지 명확히 정의하며 AI와 반복적으로 협업했다. 특히 실험과 되돌리기를 적극 활용하면 코딩 경험이 부족해도 복잡한 도구를 발전시킬 수 있다는 점을 보여준다. ## Figma Make-a-thon의 목적과 규모 - Figma Make는 콘셉트와 실제 제작 사이의 간극을 줄이고, 아이디어를 빠르게 탐색·수정할 수 있도록 설계된 도구다. - Contra와 함께 글로벌 Make-a-thon을 개최했다. - 1만 명 이상의 창작자가 참여했으며, 총상금은 10만 달러, 그중 대상 상금 규모는 5만 달러였다. - 출품작에는 디자이너를 위한 *Severance* 테마 가상 방 탈출 게임, “Figma-Kart” 레이싱 게임 등이 포함됐다. - 심사 기준은 다음과 같았다. - 아이디어의 창의성과 실행력 - Figma Make를 활용한 프로토타입 제작의 혁신성 - AI 프롬프트를 설계하고 활용한 방식의 영리함 ## 작업 단위가 아니라 제품 구조를 정의하기 세바스찬 룸비의 **Frame by frame SVG animator**는 손으로 만든 애니메이션 제작 방식을 디지털 환경으로 옮긴 도구다. - Figma에서 SVG를 복사해 앱에 붙여넣으면 프레임 애니메이션을 만들 수 있다. - 완성한 애니메이션은 GIF로 내보낼 수 있다. - 화면 구조는 크게 나뉜다. - 상단: 프레임을 그리는 캔버스 - 하단: 프레임을 확인하고 새 프레임을 추가하는 영역 - 제작자는 구현 전에 다음과 같은 기술적 요소를 조사했다. - Figma Make에서 상태를 관리하는 방법 - 여러 컴포넌트가 서로 상호작용하는 방식 - 앱 구조를 어떻게 나누어야 디버깅하기 쉬운지 - 단순히 “애니메이션 앱을 만들어라”라고 요청하는 대신, 캔버스와 프레임 목록이라는 핵심 구조를 프롬프트에 포함했다. ## AI와의 반복적인 대화 및 실험 - 처음에는 구체적인 프롬프트 전략 없이 AI와 대화하듯 기능을 추가했다. - 초기 프롬프트는 두 개 정도였지만, 이후 약 80개의 프롬프트를 사용하며 계속 실험했다. - 완성된 계획을 한 번에 전달하기보다 결과를 확인하고 다음 아이디어를 추가하는 방식으로 발전시켰다. - 이런 방식은 빠른 프로토타이핑에는 유리하지만, 앱 구조를 이해하지 못하면 이후 버그 수정이 어려워질 수 있다. ## 되돌리기 기능을 안전망으로 활용하기 - Figma Make의 revert 기능은 새로운 아이디어를 부담 없이 시도하게 해준다. - 실험 결과가 좋지 않거나 앱이 충돌하면 현재 상태를 억지로 수정하기보다 이전 시점으로 돌아갈 수 있다. - 복잡한 버그를 해결할 때는 기존 코드를 계속 고치는 것보다, 문제가 발생하기 전 상태에서 다른 접근을 시도하는 편이 효과적일 수 있다. ## 비개발자에게도 필요한 기술적 이해 - 직접 코딩하지 않더라도 앱에 필요한 기본 개념을 이해하면 AI 결과를 더 잘 통제할 수 있다. - 상태 관리, 컴포넌트 간 상호작용, 화면 구조 같은 개념을 알고 있으면 프롬프트를 구체적으로 작성할 수 있다. - Figma Make가 코드를 생성하므로, 원하는 코드 구조와 동작 방식을 명확히 설명할수록 이후 디버깅이 쉬워진다. - 기술적인 판단이 어렵다면 다른 AI에게 상태 관리나 아키텍처에 대한 추천을 먼저 받아볼 수도 있다. ## 실용적인 적용 방법 - 처음부터 모든 기능을 설명하기보다 핵심 화면 구조와 사용자 흐름부터 정의한다. - AI가 생성한 결과를 실행해 본 뒤 작은 단위로 기능을 추가한다. - 상태와 컴포넌트의 관계를 프롬프트에 명시한다. - 큰 변경 전에는 되돌릴 수 있는 상태를 확보한다. - 오류가 반복되면 현재 결과를 계속 수정하기보다 이전 버전으로 돌아가 다른 구현 방향을 시도한다.

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

프로토타이핑figma-makesvganimation+2

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

Figma Make를 캔버

Figma는 Figma Make에서 생성한 미리보기를 Figma Design 캔버스로 직접 복사하는 기능인 **Copy design**을 공개했다. 복사된 결과물은 스크린샷이 아니라 편집 가능한 디자인 레이어로 들어가므로, 팀이 아이디어를 수정·재구성하고 프로토타입에서 실제 제품 디자인으로 발전시킬 수 있다. Figma는 이를 Make와 Design 사이의 작업 단계를 줄이고, 프롬프트에서 제작까지 이어지는 흐름을 강화하는 첫 단계로 설명한다. ## Figma Make 결과물을 편집 가능한 레이어로 변환 - 이제 Figma Make 미리보기에서 디자인을 복사해 Figma Design 캔버스에 붙여넣을 수 있다. - 복사된 결과는 정적인 이미지나 스크린샷이 아니라 **구조화된 디자인 레이어**로 제공된다. - 캔버스에서 레이어를 직접 편집하고, 요소를 재배치하거나 다른 디자인과 결합할 수 있다. - 별도로 파일을 내보내거나 이름을 지정하거나 작업 모드를 전환할 필요 없이 Make와 Design을 연결한다. ## 스크린샷이 아닌 협업 가능한 레이어 - 프롬프트로 만든 아이디어가 단순한 결과물에 머무르지 않고 반복 작업을 위한 구성 요소가 된다. - PM은 자연어로 Make에서 디자인 시안을 다듬은 뒤, 특정 시점을 Figma Design으로 가져올 수 있다. - 디자이너와 개발자 등 팀 구성원은 캔버스에서 결과물을 함께 검토하고 수정할 수 있다. - 프롬프트 → 프로토타입 → 제품 디자인으로 이어지는 과정이 더 유연해진다. - 여러 사람이 아이디어를 변형하고 개선하는 멀티스레드 협업의 출발점으로 활용할 수 있다. ## 커뮤니티 도구에서 얻은 기술적 방향 - Figma Make 사용자들은 이미 `<div>RIOTS`의 **html.to.design** 플러그인을 사용해 HTML이나 라이브 프로토타입을 편집 가능한 Figma 프레임으로 가져오고 있었다. - 이 플러그인은 웹 콘텐츠를 Figma의 편집 가능한 디자인 구조로 변환해, 생성된 결과물을 캔버스에서 다시 작업할 수 있게 한다. - Figma는 해당 기술을 확보했으며, 이를 향후 Figma Make 기능 개발에 활용할 계획이다. - html.to.design은 약 3년간 개발되었고 약 200만 명이 사용하는 도구로 소개됐다. - `<div>RIOTS`는 Figma와의 협력 이후에도 플러그인과 도구를 독립적으로 계속 개발하고 유지보수한다. ## Make의 향후 방향 - Figma는 캔버스를 무엇이든 가져와 탐색하고 변환할 수 있는 공동 작업 공간으로 확장하려 한다. - Copy design은 이러한 방향을 실현하는 첫 단계다. - 궁극적으로는 어떤 프롬프트에서 시작한 아이디어든 Figma Design 안에서 발전시켜 실제 제품으로 연결하는 것이 목표다. - AI를 단순히 결과물을 생성하는 도구가 아니라, 기존 디자인 프로세스를 가속하는 도구로 활용하려는 전략이 드러난다. Figma Make를 아이디어 발상과 빠른 프로토타이핑에 사용하고, 결과물을 Copy design으로 Figma Design에 가져와 세부 편집과 팀 협업을 진행하는 방식이 가장 실용적이다. 특히 초기 시안의 반복 제작과 프로토타입 검토가 잦은 팀일수록 스크린샷 기반 작업보다 효율이 높을 것으로 보인다.

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

프로토타이핑AIfigma-makeCSS+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월 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