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

AI 시대에 갈고닦아야 할 5가지 디자인 기술 | 피그마 블로그

AI는 제품 제작을 가속하고 디자인 참여자의 범위를 넓히고 있으며, 이에 따라 디자이너에게 요구되는 역량도 변화하고 있다. Figma의 「State of the Designer 2026」 조사에 따르면 AI 활용 능력은 선택 사항이 아니라 디자이너와 비디자이너 모두에게 중요한 기본 역량이 되고 있다. 특히 명확한 프롬프트를 작성하고 AI를 반복 가능한 디자인 워크플로에 통합하는 능력이 핵심이다. ## AI 도구 활용 능력과 프롬프트 역량 - AI 활용 능력은 이제 디자이너 채용에서 필수에 가까운 기술로 자리 잡고 있다. - 디자이너의 91%는 AI가 더 나은 디자인을 만드는 데 도움이 된다고 답했고, 89%는 업무 속도가 빨라졌다고 답했다. - 채용 담당자의 54%는 AI를 활용한 디자인을 디자이너에게 가장 중요한 수요 기술 중 하나로 꼽았다. - AI 디자인 역량은 디자이너에게만 요구되지 않는다. - 채용 담당자의 57%는 PM, 개발자, 마케터 등 비디자인 직군에도 AI 활용 능력이 중요하다고 답했다. - 활용 사례는 다음과 같이 다양하다. - 기존 이미지의 세부 요소를 AI로 수정하기 - 코드를 직접 작성하기보다 AI로 앱 프로토타입 만들기 - 제품 요구사항 문서(PRD)보다 먼저 작동하는 프로토타입을 제작해 아이디어 검증하기 ## 프로토타입 중심의 협업 - AI 도구가 보편화되면서 역할 간 경계가 흐려지고, 다양한 직군이 직접 디자인과 프로토타이핑에 참여하고 있다. - 특히 제품 관리자는 문서로 요구사항을 설명하기보다 프로토타입을 만들어 가정을 빠르게 검증할 수 있다. - 구체적인 결과물을 조기에 공유하면 팀의 이해를 높이고, 의사결정을 빠르게 하며, 프로젝트 추진력을 확보할 수 있다. ## 구조화된 프롬프트 작성 - AI 결과물의 품질은 프롬프트의 명확성과 구조에 크게 좌우된다. - 효과적인 프롬프트는 다음 요소를 포함할 수 있다. - **작업(Task):** AI가 수행해야 할 구체적인 작업 - **맥락(Context):** 제품, 사용자, 사용 목적 등 배경 정보 - **요소(Elements):** 포함해야 할 화면·콘텐츠·기능 - **동작(Behavior):** 인터랙션과 상태 변화 - **제약 조건(Constraints):** 플랫폼, 스타일, 기술적 제한, 브랜드 규칙 - 좋은 프롬프트는 일회성 지시가 아니라 반복 가능한 작업 구조로 설계해야 한다. - 이를 통해 AI를 단순한 아이디어 생성기가 아니라 지속적인 디자인 협업 도구로 활용할 수 있다. ## 실용적인 적용 방향 AI 도구를 익힐 때는 단순히 다양한 기능을 시험하기보다, 작업 목적과 맥락·제약 조건을 포함한 프롬프트 템플릿을 먼저 만드는 것이 좋다. 또한 문서 작성 전에 프로토타입을 제작해 가정을 검증하고, AI가 만든 결과물을 디자이너의 판단과 검토를 거쳐 개선하는 방식이 효과적이다.

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

figma-makeFigmaAI프로토타이핑+2

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

비샬 카푸르의 AI로 정직한 제품을 만드는 10가지 규칙 | 피그마 블로그

AI 제품 개발은 속도보다 사용자 신뢰를 우선해야 하는 문제이며, 특히 금융처럼 감정과 위험이 얽힌 영역에서는 정직하고 인간적인 경험이 필수다. AI는 사람을 대체하는 기술이 아니라 탐색·프로토타이핑·반복을 가속하는 팀원으로 활용해야 한다. 이를 위해서는 인간의 직관과 비판적 사고, 고객의 실제 감정에 대한 이해를 끝까지 유지해야 한다. ## 1. 기본 원리에서 출발하라 - 복잡한 문제를 근본 요소로 분해하고, 고객의 필요와 제품의 차별화 요소를 직접 파악해야 한다. - AI는 아이디어 탐색과 반복 속도를 높일 수 있지만, 독창적인 관점과 직관을 대신할 수는 없다. - 기존 결정을 당연하게 받아들이지 말고 “왜 세 가지 결제 옵션인가?”, “한 가지나 다섯 가지는 어떤가?”, “사용자가 직접 설계할 수는 없는가?”처럼 근본적인 질문을 던져야 한다. - AI가 여러 대안을 빠르게 제시하더라도 중요한 통찰은 사람 사이의 건설적인 의견 충돌에서 나온다. ## 2. 고객의 깊은 감정에 기반하라 - 실제 고객을 관찰하고 직접 질문하는 UX 리서치와 현장 경험은 대체할 수 없다. - 소셜 미디어, 앱스토어 리뷰, 고객과의 대화를 통해 제품 사용 중 발생하는 불만과 기대를 지속적으로 파악해야 한다. - Affirm은 내부 AI 도구 ‘Pluto’를 활용해 최근 30일 동안 고객이 어떤 점에서 실망했는지 조회한다. - 대시보드와 지표는 문제의 방향을 보여주지만, 금융 서비스의 핵심 감정인 불안, 신뢰, 좌절, 안도까지 설명하지는 못한다. - 사용자가 구매하는 것은 단순한 상품이 아니라, 그 상품이 제공하는 기쁨과 안심이라는 점을 이해해야 한다. ## 3. AI를 또 하나의 팀원으로 대하라 - AI를 만능 도구나 인간을 대체할 존재로 보는 극단적인 시각을 피해야 한다. - 제품 개발은 본질적으로 협업 작업이므로, AI는 고객 인사이트를 프로토타입과 실제 제품으로 빠르게 전환하는 팀원처럼 활용할 수 있다. - 웹·모바일·데스크톱처럼 환경별로 checkout 흐름이 다른 경우, AI 도구를 사용해 다양한 실험과 검토를 수행할 수 있다. - Figma Make를 이용하면 여러 화면과 사용 사례를 한 번에 점검하고, 오래된 인터랙션 패턴이나 일관성이 깨진 부분을 조기에 찾을 수 있다. - 반복적인 검토 작업을 엔지니어에게서 디자이너와 PM에게 분산하면 개발 리소스를 절약하면서 실험과 창의성을 높일 수 있다. ## 4. 엣지 케이스를 집중적으로 실험하라 - 좋은 제품은 대표적인 성공 경로(happy path)만 매끄럽게 만드는 데서 끝나지 않는다. - 다양한 사용자 조건과 예외 상황까지 검토해야 진정성 있고 신뢰할 수 있는 경험을 만들 수 있다. - 제공된 글은 이 원칙의 도입부에서 끝나 있어, 구체적인 엣지 케이스 실험 방법과 나머지 규칙의 내용은 확인할 수 없다. AI를 제품 개발에 도입할 때는 먼저 고객 문제와 감정을 직접 이해하고, AI는 대안 탐색과 반복 작업을 가속하는 역할로 제한하는 것이 바람직하다. 특히 금융처럼 신뢰가 중요한 서비스에서는 자동화의 속도보다 인간의 판단, 설명 가능성, 예외 상황에 대한 대비가 우선되어야 한다.

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

figma-makeAI사용자 경험프로토타이핑+2

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

Figma Make로 팀이

제품 관리자는 PRD나 정적인 목업만으로 아이디어를 설명하는 대신, Figma Make로 실제 동작을 보여주는 인터랙티브 프로토타입을 빠르게 만들 수 있다. 이를 통해 복잡한 요구사항을 구체화하고, 디자이너·엔지니어·사용자의 피드백을 일찍 받아 더 빠르게 합의와 확신을 형성한다. ServiceNow 사례는 추상적인 설명보다 직접 보고 조작할 수 있는 프로토타입이 제품 방향을 설득하는 데 효과적임을 보여준다. ## 프로토타입 중심의 제품 의사결정 - PM은 고객 인사이트, 디자인 의도, 엔지니어링 제약을 연결하는 역할을 한다. - Figma Make를 활용하면 정적인 목업보다 제품의 외관과 동작을 함께 표현할 수 있다. - 초기 단계에서 인터랙티브 프로토타입을 만들면 다음과 같은 효과가 있다. - 디자이너와 엔지니어의 조기 피드백 수집 - 사용자 테스트를 통한 가정 검증 - 개발이 깊이 진행되기 전 문제 수정 - 팀이 추상적인 아이디어 대신 구체적인 결과물을 보고 논의 - 따라서 프로토타입은 단순한 디자인 산출물을 넘어, PRD를 보완하거나 대체하는 커뮤니케이션 수단이 된다. ## 복잡한 제품 사고를 공동의 이해로 전환 ServiceNow의 제품 디렉터 Ram Devanathan은 여러 제품 조직을 지원하는 디자인팀과 협업하면서 복잡한 설정 화면을 개선해야 했다. - 해당 화면에는 약 15~20개의 설정이 포함되어 있었다. - 단순한 토글 - 기술적 이해가 필요한 고급 옵션 - 장애 발생 및 우선순위 처리 방식에 영향을 주는 설정 - 시스템 부하를 바꿀 수 있는 구성 항목 - 기존 목업은 기능적으로는 동작했지만, Ram이 의도한 다음 요소를 충분히 전달하지 못했다. - 설정의 우선순위와 계층 구조 - 각 옵션에 대한 맥락적 안내 - 사용자가 느껴야 할 전반적인 경험의 톤 - 공유 디자인 리소스를 사용하는 조직에서는 디자이너의 초기 참여가 제한될 수 있다. - Figma Make의 템플릿은 디자인 시스템과 UX 패턴을 미리 포함할 수 있어, PM이 일관된 기준으로 초기 시안을 직접 발전시키는 데 도움을 준다. ## Figma Make로 설정 화면의 의도 구체화 Ram은 디자이너의 초기 목업을 Figma Make로 가져온 뒤, 설정 구조에 대한 구체적인 지침을 추가했다. - Make가 생성한 개선안은 다음과 같은 변화를 포함했다. - 관련 설정을 논리적으로 그룹화 - 단순한 설정을 화면 상단에 배치 - 개별 옵션을 설명하는 툴팁 추가 - 변경 후 서비스를 재시작해야 한다는 안내문 표시 - 그 결과 사용자는 복잡한 기술 설정을 더 명확한 순서와 구조로 탐색할 수 있게 됐다. - 프로토타입은 Ram과 디자이너가 UX 방향을 빠르게 맞추는 공통 기준이 됐다. - Ram은 말로 추상적인 의도를 설명하는 대신, “무엇을 의미하는지 직접 보여줄 수 있었다”고 평가했다. - 즉 Figma Make는 다음의 시간을 줄이는 역할을 한다. - 아이디어 설명 - 디자인 방향 조율 - 관계자 설득 - 초기 의사결정 사이클 ## 개발 전 기능 검증 제공된 글은 Ticketmaster 사례의 도입부에서 끝나 있어, 구체적인 검증 방식과 결과는 확인할 수 없다. 다만 제목과 도입 내용상 Figma Make를 이용해 실제 개발에 들어가기 전에 새로운 기능을 프로토타이핑하고, 사용자 및 내부 팀의 반응을 확인하는 사례로 이어지는 구성이다. 실무적으로는 복잡하거나 합의가 어려운 요구사항일수록 설명만 반복하기보다 Figma Make로 빠르게 작동하는 형태를 만들어 공유하는 것이 효과적이다. 단, 제공된 본문이 중간에 생략되어 있어 나머지 두 가지 활용 방식에 대한 상세 요약은 포함하지 않았다.

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

figma-makeAI디자인 시스템사용자 경험+3

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

말하기보다 보여주기: 업무

Figma는 Figma Make 프로토타입을 Figma Design, FigJam, Figma Slides에 직접 삽입할 수 있는 기능을 출시했다. 이를 통해 아이디어를 스크린샷이나 설명으로 전달하는 대신 실제로 작동하는 경험을 함께 확인하며 피드백과 의사결정을 진행할 수 있다. 또한 텍스트·요소 편집, 요소 삭제, 모델 작업 과정 검토 등 정교한 수정 기능이 추가되어 프로토타입을 더 빠르게 개선할 수 있다. ## 작업 공간 어디서나 프로토타입 공유 - Figma Make 프로토타입을 Figma Design, FigJam, Figma Slides에 삽입할 수 있다. - 아이디어 탐색부터 디자인 리뷰, 이해관계자 프레젠테이션까지 동일한 인터랙티브 프로토타입을 활용한다. - 팀원들이 변화하는 아이디어를 하나의 실제 경험으로 확인하므로 피드백과 방향성 정렬이 쉬워진다. ## FigJam에서 초기 아이디어 정렬 - FigJam 보드에 Figma Make 프로토타입을 직접 삽입해 논의의 중심으로 사용할 수 있다. - 스크린샷이나 추상적인 설명 대신 실제 화면을 클릭하며 기능과 사용자 여정을 검토한다. - 대화 과정에서 우선순위를 현실적으로 정하고, 사용자 경험의 누락된 부분을 조기에 발견할 수 있다. ## Figma Design에서 인터랙션 리뷰 - 디자인 리뷰 단계에서 UI, 문구, 인터랙션이 실제로 어떻게 동작하는지 확인할 수 있다. - 여러 디자인 버전을 나란히 비교해 실사용 상황에서 더 나은 안을 판단할 수 있다. - 구체적인 피드백을 Figma Make로 바로 되돌려 보내고, 추측 없이 수정할 수 있다. ## Figma Slides에서 사용자 경험 기반 발표 - 프레젠테이션 안에 프로토타입을 삽입해 이해관계자가 사용자 관점에서 콘셉트를 경험하도록 한다. - Figma Slides의 투표 기능으로 참석자의 의견을 빠르게 수집할 수 있다. - 논의가 진행되는 동안 얻은 피드백을 Figma Make에 반영해 즉시 업데이트할 수 있다. ## 텍스트와 요소를 직접 수정 - 프로토타입 내부의 텍스트를 직접 편집해 다양한 콘텐츠와 문구를 빠르게 시험할 수 있다. - 이해관계자 피드백에 따라 카피를 즉시 다듬을 수 있다. - **Point and edit** 도구를 사용하면 프로토타입 안에서 색상, 간격, 텍스트 스타일을 세밀하게 조정할 수 있다. - 특정 노드를 삭제하면서 나머지 구조는 유지할 수 있다. - 삭제한 요소는 `Command+Z`로 되돌릴 수 있다. ## 모델의 작업 방식 검토와 수정 - 프로토타입이 복잡해질수록 모델이 어떻게 결과를 구성했는지 확인하는 것이 중요해진다. - Figma Make는 모델의 구축 과정을 파악하고 필요할 때 방향을 수정할 수 있도록 가시성을 제공한다. - 사용자는 모델의 결과를 그대로 받아들이기보다, 아이디어와 피드백에 맞게 생성 과정을 조정하며 프로토타입을 발전시킬 수 있다. ## 실용적인 활용 - 초기 아이디어는 FigJam에서 실제 프로토타입으로 검증한다. - 디자인 리뷰에서는 여러 버전을 비교하고 구체적인 UI·문구·인터랙션 피드백을 수집한다. - 발표 단계에서는 Figma Slides의 삽입 및 투표 기능으로 합의를 이끈다. - 반복적인 수정이 필요한 경우 직접 편집, Point and edit, 노드 삭제, 실행 취소 기능을 활용하면 Figma Make 작업 속도를 높일 수 있다.

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

figma-makefigjamfigma-slidesfigma-design+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를 구체적으로 적으면 확률적인 모델 출력을 더 예측 가능하고 실용적인 프로토타입으로 유도할 수 있다.

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

figma-make디자인 시스템대규모 언어 모델프로토타이핑+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부터 완성하려 하기보다, 실제 디자인 시스템을 연결한 낮은 비용의 프로토타입을 먼저 만들어 여러 방향을 비교하는 방식이 효과적이다. 이후 프로토타입을 내부 검토와 사용자 피드백의 기준점으로 활용하면, 문서만으로 합의하는 것보다 빠르게 실행 가능한 방향을 정할 수 있다.

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

figma-makeFigmaAI디자인 시스템+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-makeFigma디자인 시스템프로토타이핑+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일 한도 적용 전에 예산 한도와 추가 크레딧 정책을 정해 두는 것이 좋다.

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

figma-makeFigma프로토타이핑figma-ai+3

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

버전 컨트롤: Figma Make로 지역

브리티시컬럼비아의 소규모 농가가 생산물 판매와 유통 과정에서 겪는 문제를 해결하기 위해, 창업자 Aaron Veale은 Figma Make로 농가와 밴쿠버 레스토랑을 연결하는 마켓플레이스 앱 Planet Food를 3주 이내에 구축했다. 약 20개의 프롬프트만으로 첫 프로토타입을 만들고, 농부와 셰프의 피드백을 즉시 반영하며 제품을 발전시켰다. 이 사례는 AI 도구가 개발 속도를 높이는 동시에, 창업자가 고객 문제와 사용자 경험에 더 집중하도록 돕는 과정을 보여준다. ## 소규모 농가가 직면한 구조적 문제 - 브리티시컬럼비아에서는 매주 한 곳의 농가가 폐업할 정도로 상황이 심각하다고 소개된다. - 농가들은 다음과 같은 문제를 겪고 있다. - 생산 비용 상승 - 불안정한 공급망 - 변화하는 정부 규정 - 대형 유통업체에 대한 의존 - 마케팅과 판매 역량 부족 - BC 농가의 순손실은 지난해 4억 5,700만 캐나다달러에 달했으며, 농업 부문은 2017년부터 순손실 상태였다. - Veale은 수십 명의 농부와 대화한 뒤, 농가가 생산에는 강하지만 직접 판매와 시장 접근에는 취약하다는 점을 파악했다. - 이에 따라 지역 농가와 고품질 식재료를 찾는 밴쿠버 레스토랑을 직접 연결하는 마켓플레이스를 구상했다. ## Figma Make로 빠르게 만든 Planet Food - 일반적인 스타트업 방식이라면 투자 유치, 팀 구성, 제품 개발에 상당한 시간이 필요하다. - Veale은 문제의 긴급성을 고려해 Figma Make의 프롬프트 기반 앱 제작 기능을 활용했다. - 하루 동안 약 20개의 프롬프트를 입력해 초기 프로토타입을 만들었다. - Planet Food는 다음 두 운영체계로 구성됐다. - **Farm OS**: 농부가 수확한 농산물을 기록하고 분류하는 기능 - **Restaurant OS**: 셰프가 식재료를 검색하고 주문하는 기능 - 초기 제품을 실제 고객에게 빠르게 보여줌으로써 다음을 확인할 수 있었다. - 고객이 어떤 기능을 필요로 하는지 - 실제 사용 가능성이 있는지 - 투자자에게 제품 사용성과 시장 신호를 제시할 수 있는지 ## 버전 1: 대화를 시작하기 위한 프로토타입 - Veale은 Farm OS와 Restaurant OS를 별도의 Figma Make 작업으로 동시에 개발했다. - 한쪽 시스템을 생성하는 동안 다른 쪽에 기능과 화면을 계속 추가하는 방식으로 작업했다. - 10~20개의 프롬프트만으로 여러 화면으로 구성된 시스템을 만들고, 다음 날 농부나 레스토랑에 직접 시연했다. - 초기 제품은 완성품이라기보다 고객과 문제를 논의하기 위한 대화 도구로 사용됐다. - 현장 인터뷰를 바탕으로 농부의 실제 업무 환경에 맞춰 UX를 조정했다. - 야외에서 햇빛 반사를 줄이기 위해 기본값을 다크 모드로 설정 - 하루 12~16시간 일하는 농부를 고려해 행정·판매 업무를 최소화 - 앱 내 작업을 세 번 이하의 클릭으로 완료하도록 설계 - 불필요한 정보와 클릭 수를 줄여 업무 흐름을 단순화 - 익숙한 앱의 스와이프, 슬라이드업 같은 마이크로 인터랙션을 캡처해 프롬프트에 입력하고, 이를 하나의 모바일 중심 UI로 통합했다. ## 버전 2: 사용자 경험과 브랜드 강화 - 초기 기능이 검증된 뒤에는 앱의 시각적 완성도와 감정적 경험을 개선하는 데 집중했다. - Veale은 과거에는 자신의 디자인 아이디어를 구현하기 위해 여러 개발자에게 의존해야 했고, 그 과정에서 타협이 발생했다고 설명한다. - Figma Make를 통해 디자이너가 직접 구현 과정에 참여하면서 다음 요소에 더 집중할 수 있게 됐다고 평가한다. - 브랜딩 - 인터랙션 - 온보딩 경험 - 고객 경험 전반 - 영화감독 경험을 바탕으로 프롬프트를 단순한 명령이 아니라 사용자의 관점에서 작성하는 이야기로 접근했다. - 농부와 셰프에 대한 구체적인 페르소나를 작성해 프롬프트의 맥락으로 활용했다. - 소규모 팀으로 농장을 운영하며 계절별 업무량이 많은 농장주 - 기술에 호기심은 있지만 기술 중심적이지 않은 사용자 - 공정한 가격과 안정적인 수입을 원하는 사용자 - 재배, 수확, 물류, 판매, 청구를 동시에 처리해야 하는 사용자 - 주요 페인 포인트도 명시적으로 정리했다. - 스프레드시트와 문서를 수동으로 업데이트하는 업무 - 매주 레스토랑의 수요를 예측하기 어려운 문제 - 실시간 재고 동기화 부족으로 인한 과잉 판매·판매 부족 - ChatGPT로 사용자 페르소나와 온보딩 흐름을 분석하고, Figma Make에 입력할 프롬프트를 다시 생성하는 방식으로 AI 도구를 연계했다. - 앱에 커스텀 아이콘을 추가해 기능 중심의 도구에 색상과 개성을 더했다. ## 빠른 반복 개발과 고객 중심 설계 - Veale은 먼저 완벽한 제품을 만들기보다, 빠르게 작동하는 버전을 만들어 실제 사용자와 대화하는 방식을 택했다. - 고객 피드백은 단순한 기능 요청이 아니라 다음 설계 결정의 근거로 활용됐다. - 농부의 작업 환경 - 업무 시간과 행정 부담 - 디지털 도구에 대한 숙련도 - 레스토랑의 주문 및 재고 관리 방식 - Figma Make는 프롬프트를 반복 수정하면서 화면, 기능, 인터랙션을 점진적으로 쌓는 개발 방식에 적합했다. - AI가 구현 속도를 높여주면서 창업자와 디자이너는 코드 작성보다 문제 정의와 사용자 경험에 더 많은 시간을 쓸 수 있었다. 실무적으로는 AI 앱 제작 도구를 사용할 때 처음부터 완성도를 높이려 하기보다, 핵심 사용자와 문제를 구체적인 페르소나로 정의한 뒤 작은 프로토타입을 빠르게 만들고 실제 고객 피드백으로 반복 개선하는 접근이 효과적이다.

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

figma-makeAIuser-experience-designchatgpt+2

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

AI 시대의 디자인 시스템을

AI 시대의 디자인 시스템은 단순한 컴포넌트 라이브러리에서 팀의 취향·품질 기준·의사결정 맥락을 담는 살아 있는 프레임워크로 발전하고 있다. AI가 빠르게 결과물을 생성하더라도 디자인 시스템이 방향성과 제약을 제공해야 브랜드의 개성과 품질을 유지할 수 있다. 따라서 앞으로는 시스템을 더 풍부하게 문서화하고, AI가 활용할 수 있도록 구조화하며, 제품 제작 전반을 관리하는 역할까지 확장해야 한다. ## 디자인 시스템에서 ‘크래프트’를 전달하는 시스템으로 - AI는 결과물을 빠르게 만들지만, 기준이 없으면 팀의 비전과 어긋난 결과를 만들고 재작업을 늘릴 수 있다. - 디자인 시스템은 단순한 일관성 검사 도구가 아니라 팀의 취향과 창의적 정체성을 반복 가능하게 만드는 장치가 된다. - 컴포넌트, 레이아웃, 인터랙션에 디자이너의 판단 기준을 반영하면 AI가 제품 전반에 동일한 감각을 적용할 수 있다. - 목표는 속도를 높이면서도 제품의 인간적인 개성과 완성도를 잃지 않는 것이다. ## AI 탐색을 현실적인 선택지로 제한하기 - 기존에는 여러 디자인 방향을 검토하려면 각 시안을 수작업으로 제작해야 해 탐색 범위가 제한적이었다. - Figma Make 같은 프롬프트 기반 도구와 디자인 시스템을 결합하면 다양한 레이아웃, 색상, 컴포넌트 조합을 빠르게 생성할 수 있다. - 공유 컴포넌트와 검증된 스타일을 기반으로 하기 때문에 AI가 만든 시안도 실제 제품에 적용 가능한 수준에 가까워진다. - 여러 방향을 실험한 뒤 선택한 안을 처음부터 다시 구현하는 대신, 기존 시스템을 바탕으로 세부 조정만 하면 된다. - 즉, 디자인 시스템은 AI의 자유로운 탐색을 막는 제약이 아니라 유효한 탐색을 가능하게 하는 기반이다. ## AI가 이해할 수 있도록 시스템을 작성하기 - 기존 디자인 시스템은 브랜드와 조직을 잘 아는 디자이너·개발자가 암묵적인 맥락을 보완한다는 전제 아래 작성됐다. - AI는 조직의 브랜드, 비즈니스 목표, 제품 관습을 자동으로 추론하지 못하므로 명시적인 설명이 필요하다. - 토큰과 컴포넌트뿐 아니라 다음 내용을 문서화해야 한다. - 각 결정이 내려진 이유 - 사용 조건과 제약 사항 - 좋은 결과물과 나쁜 결과물의 사례 - 품질을 판단하는 기준 - 브랜드와 제품 맥락 - 문서, 코드, 디자인 전반의 빈틈을 줄이고 암묵지를 명시지로 바꾸는 것이 중요하다. - 시스템은 사람을 위한 참고 자료인 동시에 AI가 브랜드에 맞는 결과를 생성하기 위한 지식 기반이 된다. ## 컴포넌트 관리에서 제품 제작 거버넌스로 - AI 도구가 제품 제작 과정에 들어오면서 디자인 시스템 팀의 역할은 컴포넌트 라이브러리 유지보수를 넘어선다. - 전통적인 제품 직군이 아닌 구성원도 제품에 기여할 수 있게 되므로, 이들이 사용하는 AI 및 제작 도구까지 관리 범위에 포함된다. - 디자인 시스템 팀은 어떤 도구와 방식으로 제품이 만들어지는지, 결과물이 품질·브랜드 기준을 충족하는지 관리하는 역할을 맡게 된다. - 제공된 글은 이 부분에서 본문이 중단되어, 거버넌스의 구체적인 실행 방식과 다섯 번째 변화의 내용은 확인할 수 없다. AI를 도입할수록 디자인 시스템을 단순한 UI 자산 저장소로 취급해서는 안 된다. 컴포넌트와 토큰에 의사결정 맥락, 품질 기준, 사용 제약을 함께 기록하고, AI 생성 결과가 시스템 안에서 검증·개선되도록 운영하는 것이 실용적인 방향이다.

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

figma-makeFigmaAI디자인 시스템+2

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

Gemini 3를

Gemini 3 Pro가 Figma Make의 실험적 모델로 제공되며, 디자인을 작동하는 코드 기반 프로토타입으로 전환하는 능력을 보여준다. Figma의 초기 테스트에서 다양한 레이아웃·스타일·인터랙션을 빠르게 탐색하면서도 디자인 충실도를 유지하는 점이 강점으로 나타났다. Gemini 3 Flash는 빠른 아이디어 발상과 수정에 적합한 경량 모델로 함께 제공된다. ## Figma Make에서 Gemini 3 Pro 제공 - Figma는 AI 모델을 다음 기준으로 평가한다. - 원래 디자인을 얼마나 정확하게 구현하는가 - 반복적인 작업을 얼마나 줄여주는가 - 팀의 창의적 탐색 범위를 얼마나 넓혀주는가 - Gemini 3 Pro는 다양한 레이아웃, 시각적 스타일, 인터랙티브 패턴을 탐색하는 데 강점을 보였다. - Figma Make의 실험적 모델 설정에서 활성화할 수 있다. - Gemini 3 Flash는 성능과 속도에 초점을 둔 모델로, 빠른 아이디어 구상과 반복적인 디자인 수정에 적합하다. ## 디자인에서 코드로의 전환 - Figma Design에서 제작한 황금빛 나뭇잎과 짙은 적갈색 배경의 추수감사절 감사 보드를 Figma Make로 구현했다. - Gemini 3 Pro는 다음 작업을 수행했다. - 나뭇잎을 SVG로 생성 - 화면 위에서 자연스럽게 움직이는 물리 효과 구현 - 마우스를 올리면 감사 메시지가 표시되는 인터랙션 추가 - Supabase를 연결해 사용자가 감사 메시지를 제출하도록 구성 - 단순한 시각적 콘셉트가 데이터 저장과 사용자 입력을 포함한 인터랙티브 프로토타입으로 확장됐다. ## 하나의 기능, 여러 시각적 스타일 - 새해 전야 RSVP 페이지를 대상으로 스타일 변환 능력을 테스트했다. - 처음에는 다음과 같은 Y2K 스타일을 적용했다. - 복고풍 미래주의 - 어두운 크롬 질감 - 분위기 있는 시각 언어 - 실제로 작동하는 RSVP 폼 - 이후 같은 기능을 “콘크리트 포에트리” 스타일로 변경했다. - 강렬하고 제한적인 타이포그래피 - 브루털리즘적 긴장감 - 장식을 최소화한 구성 - 스타일이 크게 바뀌어도 RSVP 폼의 핵심 기능은 유지됐다. - 각 스타일에 맞춰 애니메이션과 인터랙션 세부 요소도 일관성 있게 조정됐다. ## 디자인 시스템과 컴포넌트 활용 - Gemini 3 Pro를 이미 구축된 디자인 시스템 안에서 테스트했다. - Figma Make의 Make kits와 npm import를 통해 공유 라이브러리와 컴포넌트를 활용할 수 있도록 구성했다. - UI3 라이브러리 기반의 FigJam 템플릿에 캔버스 배경 스타일 전환 기능을 추가하도록 요청했다. - 모델은 다음 결과를 만들었다. - 12가지 배경 스타일 구현 - UI3 컴포넌트 사용 - 배경 스타일 전환 인터랙션 추가 - 텍스처 간 애니메이션 적용 - 스티키 노트의 레이어링과 크기 변화 효과 구현 - 복잡한 설명 없이도 기존 시스템의 구성 요소를 활용하면서 새로운 기능을 프로토타이핑했다. ## 디자이너의 역할 확대 - AI는 디자이너를 대체하기보다 탐색 가능한 디자인 공간을 넓히는 도구로 제시된다. - 모델이 디자인 의도와 시스템을 더 잘 이해할수록 다음 작업이 빨라진다. - 다양한 스타일 시도 - 인터랙션 검증 - 디자인 시스템 기반 기능 실험 - 코드로 구현된 프로토타입 제작 - 속도와 창의성이 서로 충돌하기보다, AI가 반복 작업을 줄여 디자이너가 방향 설정과 가능성 판단에 더 집중하게 만든다는 관점이다. Gemini 3 Pro는 높은 시각적 충실도와 인터랙션 구현이 필요한 프로토타입 제작에 적합하고, Gemini 3 Flash는 빠른 시안 생성과 반복 수정에 활용하는 것이 좋다. 다만 실제 제품 개발 전에는 생성된 코드와 데이터 연결, 접근성, 디자인 시스템 준수 여부를 별도로 검토해야 한다.

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

figma-makeAI디자인 시스템figjam+4

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

제13호:

빠르게 변화하는 AI 시대에는 디자인 시스템이 품질과 일관성을 유지하는 기반이 된다. Figma는 디자인 시스템을 사람뿐 아니라 AI도 활용할 수 있도록 확장하고, Figma Make와 MCP 서버를 통해 디자인·코드·협업의 연결을 강화하고 있다. 또한 AI 도구가 작업을 정확히 이해하도록 파일 구조와 디자인 맥락을 명확하게 관리해야 한다고 강조한다. ## AI 시대의 디자인 시스템 - 디자인 시스템은 팀의 취향, 품질 기준, 디자인 의도를 반복적으로 확장하는 장치다. - AI가 디자인과 코드를 생성하는 환경에서는 잘 정리된 시스템이 결과물의 품질과 일관성을 높인다. - Schema by Figma 2025에서는 디자인 시스템을 AI 워크플로에 연결하는 방법을 소개했다. - Figma Make에 디자인 시스템의 맥락을 반영하고, MCP 서버를 통해 에이전트형 코딩 작업에서도 디자인 기준을 활용할 수 있도록 했다. - 목표는 AI가 임의의 결과를 만드는 것이 아니라, 팀의 컴포넌트·스타일·규칙에 맞는 결과를 생성하도록 하는 것이다. ## Figma Make로 새로운 작업 방식 만들기 - Figma Make를 활용하면 디자이너가 기존의 시각적 디자인 작업을 넘어 코드 기반 프로토타입과 제품 아이디어를 빠르게 만들 수 있다. - 디자인팀은 제품 로드맵을 다시 구성하거나, 반복적으로 사용할 시작 템플릿을 만드는 등 새로운 방식으로 도구를 활용하고 있다. - Maven Clinic, Pendo, ServiceNow, LinkedIn 등의 사례가 소개된다. - 프롬프트를 통해 아이디어를 발전시키면서 디자인, 코드, 협업 사이의 전환 비용을 줄일 수 있다. - 결과적으로 디자인 시스템은 완성된 화면을 관리하는 데 그치지 않고, 새로운 제품 경험을 탐색하는 출발점이 된다. ## AI가 이해할 수 있는 디자인 맥락 - AI 코딩 도구가 일상적인 개발 과정에 포함되면서 디자인 파일의 구조와 설명이 더욱 중요해졌다. - 개발자와 AI가 디자인 의도를 정확히 파악할 수 있도록 다음 요소를 명확하게 관리해야 한다. - 파일과 페이지의 체계적인 구성 - 의미가 드러나는 레이어와 컴포넌트 이름 - 디자인 결정에 대한 주석과 설명 - 디자인 시스템의 사용 규칙 - 화면 간 관계와 필요한 상태 정보 - 시각적으로 보기 좋은 파일만으로는 충분하지 않으며, 다른 사람이 작업 의도를 추론할 수 있는 맥락 정보가 필요하다. - 명확한 맥락은 에이전트형 코딩 도구가 디자인을 코드로 변환할 때 정확도와 효율성을 높인다. ## 디자인 시스템 관련 학습 자료 - Figma는 Schema 2025를 준비하며 디자인 시스템의 기초부터 AI 기반 자동화까지 기존 콘텐츠를 정리했다. - 디자인 시스템을 처음 도입하는 팀은 기본 개념과 운영 원칙부터 학습할 수 있다. - 변화가 큰 환경에서 디자인 리더가 팀의 회복력과 적응력을 높이는 방법도 함께 제안한다. - 디자인 시스템은 단순한 UI 컴포넌트 모음이 아니라, 팀의 협업 방식과 제품 품질을 지탱하는 조직적 기반으로 다뤄진다. 실무에서는 컴포넌트와 토큰을 정리하는 데서 멈추지 말고, 파일 구조·명명 규칙·주석·사용 지침까지 문서화하는 것이 좋다. 이렇게 구축한 디자인 시스템을 Figma Make나 AI 코딩 도구와 연결하면 빠른 생성 속도와 일관된 품질을 함께 확보할 수 있다.

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

figma-makeAI디자인 시스템모델 컨텍스트 프로토콜+1

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를 완성품 생성 도구로 보기보다, 아이디어를 빠르게 구체화하고 팀의 피드백을 모으는 탐색 도구로 활용하는 것이 효과적이다. 특히 장기간 보류된 기능이나 이해관계자의 동의를 얻기 어려운 아이디어를 실제로 경험 가능한 프로토타입으로 만들어 검증하는 데 유용하다.

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

figma-make디자인 시스템프로토타이핑생성형 AI+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-make프로토타이핑svganimation+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에 가져와 세부 편집과 팀 협업을 진행하는 방식이 가장 실용적이다. 특히 초기 시안의 반복 제작과 프로토타입 검토가 잦은 팀일수록 스크린샷 기반 작업보다 효율이 높을 것으로 보인다.

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

figma-makeAI프로토타이핑CSS+3