interactive-components

6 개의 포스트

figma

요금제, 시트 및 결 (새 탭에서 열림)

Figma는 2025년 3월 11일부터 가격, 좌석 유형, 결제 승인 방식을 전면 개편한다. Figma Design의 Full 좌석 가격은 인상되며, 모든 유료 좌석에는 FigJam과 Figma Slides 이용 권한이 포함된다. 또한 사용자가 임의로 유료 좌석을 늘리던 방식에서 벗어나, 관리자가 사전에 좌석 추가를 승인하는 구조로 변경된다. ## 가격 및 좌석 체계 개편 - 기존 요금제는 **Full, Dev, Collab, View** 좌석 체계로 이전된다. - **Figma Design의 가격이 인상**되며, 특히 Full 좌석 가격이 변경된다. - 모든 유료 좌석에서 **FigJam과 Figma Slides**를 사용할 수 있게 된다. - 무료 **Starter 플랜은 계속 제공**된다. - 구체적인 가격은 Professional, Organization, Enterprise 등 요금제별 표로 제시되며, 금액은 미국 달러 기준이다. ## 관리자 중심의 좌석 승인 방식 - 기존에는 사용자의 행동으로 좌석이 자동 업그레이드되고, 관리자가 이후 청구 전에 검토했다. - 새 모델에서는 추가 비용이 발생하는 좌석 요청을 **관리자가 사전에 승인**해야 한다. - 관리자는 제품별로 여러 좌석을 관리하는 대신, 사용자당 **하나의 좌석만 관리**하면 된다. - 이를 통해 예상하지 못한 좌석 증가와 청구를 줄이고, 관리자가 비용을 더 명확하게 통제할 수 있다. ## 3일간의 임시 사용 권한 - 관리자가 요청을 검토하는 동안 사용자가 협업을 중단하지 않도록, 요청한 좌석의 기능을 **최대 3일간 임시로 사용할 수 있다**. - 임시 기간에는: - 새 파일을 생성할 수 있다. - 팀원이 편집 권한을 부여한 파일을 수정할 수 있다. - 관리자가 승인한 좌석은 다음 청구서에 반영된다. - 좌석 비용은 승인일부터 구독 기간 종료일까지 **일할 계산(proration)** 된다. - 이 변경 사항은 모든 유료 플랜에 적용된다. ## 변경 적용 일정 - **2025년 3월 11일**부터 기존 플랜이 새 좌석 유형과 승인 흐름으로 이전된다. - Full 좌석 가격 인상과 새로운 일할 계산 방식은 **3월 11일 이후 첫 갱신 시점**부터 적용된다. - 기존 고객에게는 이메일로 개인별 변경 내용이 안내된다. ## Connected Projects와 향후 계획 - 이번 결제 모델 개편은 2025년 후반 출시 예정인 **Connected Projects**의 기반이 된다. - 프리랜서와 에이전시는 현재 고객과 협업하기 위해 여러 플랜에서 라이선스를 구매해야 하는 경우가 있었다. - Connected Projects에서는 기존 Figma 좌석을 활용해 고객과 파일을 생성하고 공동 편집할 수 있게 된다. - 이를 통해 외부 협업을 위해 여러 라이선스를 중복 구매해야 하는 문제가 줄어들 전망이다. 실무적으로는 조직 관리자가 2025년 3월 11일 전후의 요금과 좌석 매핑을 확인하고, 좌석 승인 담당자와 내부 승인 절차를 미리 정해두는 것이 좋다. 특히 자동 좌석 증가에 의존하던 팀은 사용자의 요청이 승인되지 않을 경우를 고려해 검토 기준과 대응 시간을 마련해야 한다.

figma

Figma Slides로 승기를 (새 탭에서 열림)

Figma Slides는 Figma의 높은 시각적 완성도와 FigJam의 협업·피드백 기능을 결합한 프레젠테이션 도구로, 2024년 6월 오픈 베타로 공개됐다. 디자이너는 기존 Figma 작업 방식을 그대로 활용하고, 비디자이너는 쉽게 콘텐츠를 편집하며 함께 발표 자료를 만들 수 있다. Figma는 이를 통해 일방적인 발표 자료를 설득과 피드백이 오가는 대화형 스토리텔링 도구로 발전시키고자 한다. ## 프레젠테이션 제작의 어려움 - 발표자의 45%는 창의적인 레이아웃을 만드는 데 어려움을 겪는다. - 41%는 적절한 시각 자료를 찾고 활용하는 일을 어렵게 느낀다. - 47%는 프레젠테이션 디자인에 8시간 이상을 사용한다. - Figma 사용자들은 최근 1년 동안 약 350만 개의 프레젠테이션을 제작했지만, 실제 발표를 위해 다른 도구로 작업물을 옮기거나 프로토타입을 별도로 공유해야 했다. - Figma Slides는 이런 단절을 줄이고 디자인과 발표 준비를 한 공간에서 처리하도록 설계됐다. ## Figma의 디자인 기능을 활용한 슬라이드 제작 - 기존 슬라이드 도구에서 부족했던 **발표자 노트**와 **슬라이드 전환 효과**를 제공한다. - 기본 도구 모드에서는 텍스트, 이미지, 도형을 사용해 빠르게 발표 자료를 만들 수 있다. - **디자인 모드**를 켜면 Figma Design의 고급 기능을 사용할 수 있다. - Auto Layout - 정교한 정렬 및 배치 - 고급 속성 - 인터랙티브 컴포넌트와 상태 - Figma에서 복사한 호버 상태 등의 인터랙티브 컴포넌트는 발표 중에도 동작한다. - 이미지와 시각 자료가 메시지의 효과와 참여도를 높인다는 연구 결과를 바탕으로, 시각적 완성도를 핵심 가치로 삼는다. ## 디자인 라이브러리와 에셋의 재사용 - Figma에서 구축한 텍스트 스타일, 색상 스타일, 컴포넌트와 에셋을 Figma Slides에서도 바로 사용할 수 있다. - UI 디자인을 이미지로 하나씩 내보내야 했던 기존 작업을 없애고, Figma 제품군 전체에서 복사·붙여넣기 방식으로 재사용할 수 있다. - 디자이너가 기존 디자인 시스템을 유지하면서 발표 자료를 제작할 수 있다. ## Grid View를 통한 스토리 구성 - 슬라이드를 한 장씩 편집하는 단일 슬라이드 보기와 전체 흐름을 확인하는 **Grid View**를 제공한다. - Grid View에서는 슬라이드가 행 단위로 배치되어 발표의 전체 구조를 한눈에 볼 수 있다. - 슬라이드 순서를 쉽게 바꾸며 이야기의 흐름과 섹션 구성을 조정할 수 있다. - 단일 슬라이드 보기와 Grid View 사이를 오갈 때 변경 사항이 동기화된다. - 특히 20장 이상의 발표 자료에서 전체 내러티브를 재구성하기 어려운 문제를 해결하는 데 초점을 둔다. ## 일방적인 발표에서 협업형 대화로 - Figma는 FigJam을 통해 회의에서 여러 사람이 동시에 의견을 내는 협업 방식을 경험했고, 기존 발표 방식의 비효율을 발견했다. - 기존 프레젠테이션은 한 사람이 말하고 나머지는 듣는 구조가 되기 쉽다. - Figma Slides는 디자이너와 비디자이너가 같은 공간에서 자료를 만들고 의견을 주고받도록 설계됐다. - 제품 검토, 영업 제안, 투자 피치 등 다양한 상황에서 발표 자료를 단순한 문서가 아니라 합의를 이끌어내는 커뮤니케이션 도구로 활용하는 것이 목표다. Figma Slides는 기존 Figma 디자인 자산을 적극적으로 활용하는 팀이나, 발표 자료 제작 과정에 디자이너와 비디자이너가 함께 참여해야 하는 조직에 특히 적합하다. 발표용 슬라이드와 실제 디자인 작업 사이의 변환 과정을 줄이고, 전체 이야기 구조를 Grid View에서 점검하는 방식으로 활용하면 효과적이다.

figma

새로워진 Figma 내부 (새 탭에서 열림)

Figma의 UI3는 기능을 계속 추가하면서 복잡해진 인터페이스를 정리하고, 사용자의 작업물을 화면 중심에 두기 위한 대규모 redesign이다. 캔버스 공간을 넓히면서도 기존 사용자의 작업 습관과 전문 기능은 유지하고, 신규 사용자에게는 더 직관적인 경험을 제공하는 것이 목표다. 또한 컴포넌트, 생성형 AI, Dev Mode, Figma Slides 등 변화하는 디자인 환경에 대응할 수 있는 기반을 마련하려는 개편이다. ## UI3를 시작한 배경 - Figma는 출시 후 약 10년 동안 많은 기능과 제품을 추가했지만, 기본 레이아웃은 크게 변하지 않았다. - 기능이 누적되면서 처음에는 단순했던 인터페이스가 점점 복잡하고 부담스럽게 느껴질 수 있게 됐다. - UI3는 Figma 출시 이후 세 번째 주요 redesign으로, 단순한 시각적 변경이 아니라 워크플로와 인터랙션 방식까지 재설계한다. - 기존 사용자가 익숙한 작업 방식을 잃지 않으면서도, 새로운 사용자에게 더 접근하기 쉬운 인터페이스를 만드는 것이 중요한 과제였다. ## UI3가 해결하려는 네 가지 문제 - **UI보다 사용자의 아이디어를 중심에 두기** - 인터랙티브 컴포넌트와 AI 지원 디자인처럼 강력한 기능이 추가되면서 UI가 작업 자체보다 눈에 띌 위험이 생겼다. - 기능이 부가적으로 덧붙은 느낌을 줄이고, 캔버스와 사용자의 창작물에 집중하도록 설계 방향을 잡았다. - **신규 사용자와 전문 디자이너의 요구 균형** - 기존 인터페이스는 처음 접하는 사용자에게 복잡하고 비직관적으로 보일 수 있었다. - 기능의 범위를 줄이는 것이 아니라, 기능을 이해하고 접근하는 방식을 단순화하려 했다. - 숙련된 사용자의 익숙한 조작 감각과 작업 효율은 보존하는 것을 목표로 삼았다. - **변화하는 디자인 방식에 대응** - 오늘날 디자인은 단순히 픽셀을 배치하는 작업을 넘어, 재사용 가능한 컴포넌트와 생성형 AI를 활용하는 방식으로 확장되고 있다. - 이에 따라 디자이너가 개별 요소뿐 아니라 더 높은 수준의 추상화된 building block을 사용할 수 있어야 한다고 보았다. - **Figma의 미래를 위한 기반 마련** - Dev Mode를 통해 디자인과 코드를 연결하고, Figma AI로 작업 효율을 높이는 방향을 고려했다. - Figma Slides 같은 새로운 제품까지 포함해, 여러 도구가 일관된 제품군으로 작동할 수 있는 공통 구조를 만들고자 했다. ## 캔버스 공간을 넓히는 인터페이스 - 가장 먼저 Figma 캔버스의 사용 가능한 공간을 최대화하는 작업을 진행했다. - 초기에는 패널과 속성 영역을 거의 제거하고, 마우스를 올릴 때만 UI가 나타나는 극단적인 미니멀 디자인도 실험했다. - 사이드바가 필요할 때만 나타나는 방식도 시도했지만, 화면 구조가 지나치게 불안정해지는 문제가 있었다. - 수백 가지 시안을 제작하고 Figma 팀 내부에서 직접 사용하며 개선 방향을 검증했다. - 최종적으로 다음과 같은 방향을 선택했다. - 크기를 조절할 수 있는 패널 - 캔버스 하단의 얇은 새 툴바 - 상단 영역을 비워 더 넓고 여유로운 화면 구성 - 필요할 때 패널을 열고 닫을 수 있는 구조 - UI 전체를 숨겨 작업물에만 집중할 수 있는 기능 - 이 구조는 Figma의 여러 제품에서 공통으로 사용할 수 있어, 제품 간 전환과 확장에도 유리한 기반이 된다. ## 실용적인 의미 UI3의 핵심은 기능을 없애는 것이 아니라, 기능이 작업을 방해하지 않도록 배치와 노출 방식을 재조정하는 데 있다. 따라서 사용자는 평소에는 넓은 캔버스에 집중하고, 필요한 순간에만 패널과 도구를 불러오는 방식으로 작업할 수 있다. Figma를 사용하는 팀이라면 UI3의 패널 접기·크기 조절 기능과 캔버스 중심 작업 방식을 적극 활용하는 것이 효율 향상에 도움이 된다.

figma

피그마 프로토타 (새 탭에서 열림)

고해상도 프로토타입은 사용자 테스트, 개발자 핸드오프, 디자인 리뷰에서 실제 사용 경험을 검증하고 팀의 합의를 돕는다. 이 글은 Figma의 최신 프로토타이핑 기능을 활용해 15일 동안 기초 기능부터 복잡한 인터랙션까지 단계적으로 익히는 챌린지를 소개한다. 특히 Smart Animate와 인터랙티브 컴포넌트를 조합하면 연결 작업을 줄이면서도 풍부한 마이크로인터랙션을 구현할 수 있다. ## 프로토타이핑 챌린지의 목적 - 2주 동안 매일 하나의 프로토타이핑 기법을 연습하도록 구성했다. - 기초적인 전환 효과에서 시작해 점차 복잡한 프로토타입으로 발전한다. - 사용자 테스트, 개발자 전달, 디자인 크리틱에 활용할 수 있는 고해상도 프로토타입 제작을 목표로 한다. - Figma Community 파일을 함께 제공해 각 단계의 결과물을 직접 확인하고 실습할 수 있도록 했다. - 실제 참여자들은 지도 인터랙션, 디지털카메라의 확대·축소 및 사진 촬영 애니메이션 등을 제작했다. ## Smart Animate로 자연스러운 전환 만들기 - Smart Animate는 화면 간 레이어의 변화를 자동으로 보간해 자연스러운 애니메이션을 만든다. - 화면 사이에서 대응되는 레이어의 이름을 동일하게 유지해야 올바르게 매칭된다. - 고해상도 프로토타입에서 기본 전환 효과로 활용하기 좋다. - 다른 전환 방식과 함께 사용하면 단순한 화면 이동보다 정교한 전환을 만들 수 있다. ## Smart Animate와 프리셋 전환 조합 - Smart Animate 매칭 레이어는 Slide, Push 같은 기본 전환 효과와 함께 사용할 수 있다. - 화면 전체는 프리셋 전환으로 이동시키고, 일부 요소는 Smart Animate로 자연스럽게 변화시킬 수 있다. - 탭 내비게이션처럼 선택 상태와 콘텐츠 위치가 동시에 바뀌는 인터페이스에 유용하다. - 레이어 구조와 이름을 일관되게 관리하는 것이 안정적인 애니메이션의 핵심이다. ## 인터랙티브 컴포넌트 - 인터랙티브 컴포넌트는 하나의 컴포넌트 세트 안에서 여러 Variant 간 상호작용과 애니메이션을 정의하는 기능이다. - 컴포넌트의 Variant 사이에 프로토타이핑 링크를 연결하면 인스턴스가 프로토타이핑 모드에서 즉시 동작한다. - 버튼, 토글, 체크박스처럼 반복되는 UI 요소에 상태 변화와 마이크로인터랙션을 내장할 수 있다. - 개별 화면마다 링크를 반복해서 연결할 필요가 없어 프로토타입의 크기와 복잡도를 줄인다. ## 중첩 인터랙티브 컴포넌트 - 인터랙티브 컴포넌트를 다른 컴포넌트 안에 중첩하면 더 복잡한 동작을 조합할 수 있다. - 예를 들어 리스트 아이템 내부에 선택, 토글, 확장 등의 상호작용을 포함할 수 있다. - 각 Variant 사이에 필요한 프로토타이핑 링크 수를 줄일 수 있다. - 재사용 가능한 컴포넌트 자체에 동작을 포함하므로 여러 화면에서 일관된 인터랙션을 유지하기 쉽다. ## 모바일 하단 내비게이션 구현 - 첫 4일 동안 배운 Smart Animate, 레이어 매칭, 인터랙티브 컴포넌트, 중첩 컴포넌트를 하나의 모바일 프로토타입에 적용한다. - 인터랙티브 하단 내비게이션을 만들어 탭 선택 상태와 화면 전환을 표현한다. - 여러 화면에 동일한 내비게이션을 배치하더라도 컴포넌트 기반으로 관리해 연결 작업을 줄일 수 있다. - 기본 기능을 독립적으로 익힌 뒤 실제 화면 구조에 통합하는 점진적 학습 방식이 특징이다. ## 실용적인 적용 방법 - 먼저 레이어 이름과 구조를 화면 간 일관되게 정리한 뒤 Smart Animate를 적용한다. - 반복되는 UI 요소는 인터랙티브 컴포넌트로 만들어 상태와 애니메이션을 재사용한다. - 작은 마이크로인터랙션부터 시작해 탭 내비게이션이나 모바일 전체 흐름으로 확장하는 것이 좋다. - 제공된 Community 파일을 단계별로 복제해 직접 수정하면서 기능 차이를 확인하면 학습 효과를 높일 수 있다.

figma

Figma의 새로운 소식: (새 탭에서 열림)

Figma의 2021년 10월 업데이트는 협업 방식을 유연하게 만들고, 반복적인 작업을 자동화하며, 아이디어를 더 빠르게 실험하도록 돕는 데 초점을 맞췄다. FigJam에는 위젯·플러그인·오픈 세션이 추가됐고, Figma 프로토타이핑에는 인터랙티브 컴포넌트와 상호작용 관리 기능이 도입됐다. 또한 대규모 디자인 시스템을 지원하기 위한 브랜칭도 소개됐다. ## FigJam 협업 기능 확장 ### 위젯으로 협업 공간 사용자화 - FigJam 파일에 위젯을 클릭해 추가하고, 팀의 협업 방식에 맞게 보드를 구성할 수 있다. - **Photo Booth**를 사용하면 보드에 셀카를 추가할 수 있다. - **Alignment Scale**로 팀원들의 현재 상태나 의견을 확인할 수 있다. - **Org Chart**를 활용해 팀 구조를 시각화할 수 있다. ### 플러그인으로 작업 속도 향상 - 위젯이 협업 자체를 위한 기능이라면, 플러그인은 아이디어를 표현하고 정리하는 작업을 빠르게 해준다. - **Tour Guide**는 FigJam 보드를 슬라이드 쇼 형식의 프레젠테이션으로 변환한다. - **Color Picker**는 스티커와 도형에 사용할 색상 선택지를 확장한다. - **Unsplash** 플러그인으로 이미지 자료를 바로 검색하고 삽입할 수 있다. ### 툴바와 오픈 세션 - FigJam 파일의 툴바에서 플러그인과 위젯을 직접 탐색할 수 있다. - 브레인스토밍, 워크숍, 리서치 등 목적별 **FigJam 템플릿**을 제공한다. - 개발자 협업을 위해 **코드 블록**과 새로운 도형 및 고급 다이어그램 기능을 추가했다. - **Open sessions**를 사용하면 방문자가 계정을 만들지 않아도 FigJam 파일에 참여할 수 있다. ## 인터랙티브 컴포넌트로 프로토타이핑 개선 ### 재사용 가능한 인터랙티브 컴포넌트 - **인터랙티브 컴포넌트**를 사용하면 재사용 가능한 UI 요소에 상호작용을 정의할 수 있다. - 동일한 요소의 상태와 동작을 반복해서 연결하는 작업이 줄어든다. - 프로토타입 제작에 드는 시간을 줄이고, 팀이 디자인 실험과 반복 개선에 더 집중할 수 있다. ### 상속된 상호작용 숨기기 - 컴포넌트 인스턴스에서는 메인 컴포넌트로부터 상속된 상호작용을 기본적으로 숨길 수 있다. - 복잡한 프로토타입에서도 현재 인스턴스에 직접 설정된 동작을 쉽게 파악할 수 있다. - 결과적으로 프로토타입 편집과 개발자 핸드오프의 가독성이 개선된다. ### 기타 프로토타이핑 업데이트 - `Shift + E` 단축키로 디자인 탭과 프로토타입 탭을 전환할 수 있다. - 캔버스에서 모든 사용자가 프로토타입 상호작용을 확인하고 탐색할 수 있다. - 사용자 테스트 시 뷰어의 기본 키보드 탐색을 비활성화할 수 있다. - 프로토타입 상호작용을 복사하고 붙여넣어 반복 설정을 줄일 수 있다. ## 대규모 디자인 시스템 지원 - Figma는 디자인 시스템의 일관성을 유지하면서도 새로운 아이디어를 실험할 수 있는 환경을 제공하는 것을 목표로 한다. - 이번 업데이트에서는 여러 디자인 방향을 독립적으로 실험하고 관리할 수 있는 **브랜칭(Branching)** 기능을 소개했다. - 브랜칭에 대한 구체적인 동작과 활용 방법은 별도의 상세 글에서 설명한다. 이번 업데이트는 FigJam에서는 협업 진입 장벽을 낮추고, Figma에서는 프로토타이핑 반복 작업을 줄이는 방향으로 구성됐다. 팀 단위로 작업한다면 FigJam의 템플릿·위젯·오픈 세션을 활용하고, 디자인 시스템을 운영한다면 인터랙티브 컴포넌트와 브랜칭을 도입하는 것이 실용적이다.

figma

인터랙티브 컴포넌 (새 탭에서 열림)

Figma는 인터랙티브 컴포넌트를 통해 시각 디자인과 프로토타이핑 사이의 간극을 줄이고, 더 적은 작업으로 실제 동작에 가까운 디자인을 만들 수 있도록 했다. 컴포넌트의 여러 variant 사이에 상호작용과 애니메이션을 정의하면 인스턴스가 프로토타이핑 모드에서 바로 작동하며, 팀 단위의 공유와 반복 작업도 쉬워진다. 또한 단축키, 캔버스 정리, 인터랙션 복사·붙여넣기 등 프로토타이핑을 빠르게 만드는 기능도 함께 제공한다. ## 인터랙티브 컴포넌트의 목적 - 기존에는 시각 디자인과 인터랙션 설계를 위해 도구를 전환하거나 프레임을 수동으로 연결해야 했다. - 이런 번거로움 때문에 프로토타이핑을 생략하면 개발 단계에서 추가 작업이 발생하거나 사용자 경험 목표를 놓칠 수 있었다. - 인터랙티브 컴포넌트는 디자인 과정에서 시각적 형태와 동작을 함께 탐색하도록 지원한다. - 2021년 10월 기준 베타를 종료하고 모든 사용자가 이용할 수 있게 되었다. ## 컴포넌트 variant 기반 상호작용 - 컴포넌트 세트 안의 여러 variant 사이에 전환, 상호작용, 애니메이션을 정의할 수 있다. - 해당 컴포넌트의 인스턴스는 프로토타이핑 모드에서 별도의 연결 작업 없이 즉시 동작한다. - 체크박스 선택, 아코디언 메뉴 열기 등 여러 UI 상태를 하나의 컴포넌트 구조로 표현할 수 있다. ## 프로토타입 복잡성 감소 - 과거에는 상태별로 여러 프레임을 만들어야 했지만, 인터랙티브 컴포넌트를 사용하면 하나의 프레임 안에서 상태와 동작을 관리할 수 있다. - 프레임 수가 크게 줄어들어 프로토타입을 만들고 수정하기 쉬워진다. - AWS 사례에서는 일부 프로젝트의 프레임 수가 10분의 1 이하로 감소했다고 설명한다. ## 프로토타입 제작 속도 향상 - 사용된 위치 바로 옆에서 인터랙티브 컴포넌트의 모든 상태를 편집할 수 있다. - 기존 작업 흐름을 벗어나지 않고 컴포넌트를 복제해 새로운 버전을 실험할 수 있다. - 동일한 버튼 수십~수백 개에 hover 상태를 반복 설정하는 대신, 컴포넌트에 동작을 한 번 정의해 재사용할 수 있다. ## 디자인 시스템과 팀 협업 - 인터랙티브 컴포넌트는 라이브러리를 통해 팀 전체에 공유할 수 있다. - 팀원은 라이브러리에서 컴포넌트를 한 번의 클릭으로 가져와 프로토타입에 사용할 수 있다. - 인터랙션이 디자인 시스템에 내장되므로 Figma에 익숙하지 않은 구성원도 적은 도움으로 동작하는 프로토타입을 만들 수 있다. - 베타 기간 동안 성능, 로딩 시간, 안정성이 개선되었고 관찰 모드와 오토 레이아웃 지원도 추가되었다. ## 일상적인 작업을 빠르게 만드는 기능 - **디자인·프로토타이핑 탭 전환** - `Shift + E` 단축키로 디자인 탭과 프로토타이핑 탭을 빠르게 전환할 수 있다. - 오브젝트 편집과 사용자 경험에 대한 동작 설계를 자연스럽게 오갈 수 있다. - **캔버스 정리** - 프로토타입 연결을 나타내는 파란색 화살표인 “noodle”이 지나치게 많아지는 문제를 개선했다. - 메인 컴포넌트에서 상속된 인스턴스의 인터랙션은 캔버스에서 숨겨 복잡한 프로토타입을 더 쉽게 파악할 수 있다. - **인터랙션 복사·붙여넣기** - 프로토타입 인터랙션을 복사해 다른 프레임에 붙여넣을 수 있다. - 반복적인 연결 작업을 줄여 프로토타입 제작 속도를 높인다. 실무에서는 자주 재사용되는 버튼, 입력창, 메뉴, 토글 등의 상태와 전환을 인터랙티브 컴포넌트로 라이브러리화하는 것이 효과적이다. 그러면 디자이너는 화면별 연결보다 사용자 흐름과 인터랙션 검증에 집중할 수 있고, 팀 전체가 일관된 동작을 사용하게 된다.