Figma / ui-ux

Show Don’t Tell: Embed Make Prototypes Everywhere You Work in Figma | Figma Blog (새 탭에서 열림)

Figma Make는 디자이너가 텍스트 프롬프트를 통해 편집 가능한 UI 레이아웃을 신속하게 생성할 수 있도록 돕는 강력한 AI 도구입니다. 이 기능의 핵심은 모호한 지시 대신 구체적인 맥락과 구조를 제공하여 AI가 사용자의 의도를 정확히 파악하게 하는 데 있으며, 이를 통해 아이디어를 고해상도 프로토타입으로 전환하는 시간을 획기적으로 단축할 수 있습니다. 결과적으로 Figma Make를 효과적으로 활용하면 디자인 시스템의 일관성을 유지하면서도 창의적인 탐색 범위를 넓힐 수 있습니다. **상세하고 구체적인 프롬프트 작성** * 단순한 단어 나열보다는 '객체 + 행동 + 스타일'의 구조를 갖춘 문장 형태로 명령어를 구성해야 합니다. * 무엇을 만들고 싶은지(예: 대시보드), 어떤 기능을 수행하는지(예: 데이터 시각화), 어떤 시각적 느낌인지(예: 미니멀한)를 명확히 정의할수록 정확도가 높아집니다. **기기 및 플랫폼 환경 명시** * 결과물이 구현될 대상인 모바일 앱, 데스크톱 웹, 태블릿 등의 하드웨어 환경을 프롬프트에 반드시 포함합니다. * 특정 플랫폼에 최적화된 UI 패턴(예: 모바일의 하단 내비게이션 바, 웹의 사이드바)을 AI가 적절히 적용하도록 유도할 수 있습니다. **타겟 사용자 및 목적 정의** * 디자인의 대상이 되는 오디언스(예: 전문가용 분석 도구, 어린이용 교육 앱)를 명시하여 그에 적합한 컴포넌트와 톤앤매너를 유도합니다. * 앱의 핵심 가치나 비즈니스 목표를 설명에 덧붙이면 AI가 화면 내 요소의 우선순위를 더 잘 판단하게 됩니다. **레이아웃과 페이지 유형의 세분화** * 단순히 '화면'이라고 표현하기보다 '로그인 페이지', '상품 상세 정보', '사용자 설정 프로필' 등 구체적인 페이지 유형을 입력합니다. * 원하는 레이아웃 구조(예: 3단 그리드 시스템, 카드형 리스트)가 있다면 이를 직접 언급하여 구조적 완성도를 높입니다. **필수 UI 컴포넌트의 명시적 나열** * 버튼, 입력 필드, 차트, 검색바 등 화면에 반드시 포함되어야 하는 핵심 요소들을 프롬프트에 직접 나열합니다. * 생성된 요소들은 즉시 편집 가능한 레이어로 구성되므로, 초기 구조 단계에서 필수 요소를 미리 배치하는 것이 효율적입니다. **시각적 분위기와 스타일 가이드 설정** * '현대적인', '클린한', '다크 모드', '고대비'와 같은 시각적 키워드를 적극적으로 활용해 디자인의 심미적 방향을 제어합니다. * 브랜드의 색상 팔레트나 특정 디자인 스타일의 특징을 설명에 포함하여 일관된 결과물을 얻습니다. **반복적인 피드백과 점진적 개선** * 한 번의 생성으로 완벽한 결과물을 얻으려 하기보다, 생성된 결과물을 바탕으로 프롬프트를 조금씩 수정하며 최적의 결과물을 찾아가는 과정이 필요합니다. * AI가 제안한 초안 중에서 마음에 드는 부분을 선택하고, 나머지 부분을 다시 생성하거나 직접 수정하는 방식으로 협업합니다. **창의적인 출발점으로서의 도구 활용** * Figma Make를 최종 결과물을 만드는 도구가 아닌, '빈 캔버스'를 채워주는 시작점으로 인식하는 것이 중요합니다. * 와이어프레임 단계에서 다양한 아이디어를 빠르게 시각화하거나, 생각하지 못했던 레이아웃 옵션을 탐색하는 용도로 활용할 때 가장 큰 효과를 발휘합니다. Figma Make는 디자이너의 역할을 대체하는 것이 아니라, 번거로운 초기 작업을 대신 수행해 주는 유능한 파트너입니다. 프롬프트를 통해 의도를 정교하게 전달하는 연습을 병행한다면, 작업 속도를 높이는 동시에 디자이너 본연의 업무인 사용자 경험 설계와 세부적인 디테일 완성에 더 많은 시간을 집중할 수 있을 것입니다.

Prototypes Are the New PRDs | Figma Blog (새 탭에서 열림)

Figma Make는 디자이너가 텍스트 프롬프트를 통해 아이디어를 신속하게 시각화하고 디자인 초안을 생성할 수 있도록 돕는 강력한 AI 도구입니다. 이 기능은 단순히 완제품을 만들어내는 것이 아니라, 디자인 프로세스의 초기 단계를 가속화하고 창의적인 영감을 제공하는 '출발점' 역할을 합니다. 사용자가 프롬프트 작성 역량을 높이고 Figma의 기존 워크플로우와 결합할 때, Figma Make는 작업 효율성을 극대화하는 핵심 자산이 됩니다. **명확하고 구체적인 프롬프트 작성** * 단순히 "로그인 페이지"라고 입력하기보다, 대상 사용자, 기기 유형(iOS/Android/Web), 포함되어야 할 구체적인 요소(소셜 로그인 버튼, 비밀번호 찾기 링크 등)를 상세히 기술해야 합니다. * 디자인의 톤앤매너(예: 미니멀한, 전문적인, 활기찬)를 형용사로 추가하여 AI가 시각적 스타일을 파악할 수 있도록 돕습니다. * 구조적 요구사항(예: 3단 레이아웃, 하단 탭 바 포함)을 명시하면 더 정확한 초기 레이아웃을 얻을 수 있습니다. **반복적인 피드백과 프롬프트 수정** * 첫 번째 결과물에 만족하지 말고, 생성된 디자인에서 마음에 드는 부분과 수정이 필요한 부분을 파악하여 프롬프트를 점진적으로 정교화합니다. * 특정 섹션의 위치를 바꾸거나 색상 대비를 높여달라는 등 구체적인 피드백을 프롬프트에 반영하여 다시 실행합니다. * 여러 번의 시도를 통해 최적의 레이아웃 조합을 찾아가는 과정을 디자인 탐색의 일환으로 활용합니다. **Auto Layout과 레이어 구조 활용** * Figma Make는 생성된 결과물에 Auto Layout을 적용하는 경우가 많으므로, 생성 직후 구조를 파악하여 반응형 대응이 가능한지 확인합니다. * AI가 생성한 레이어 이름을 검토하고, 팀의 컨벤션에 맞게 정리하여 협업 효율성을 높입니다. * 복잡한 컴포넌트 구조를 이해하고 필요 없는 레이어를 제거하거나 병합하여 캔버스를 최적화합니다. **디자인 시스템 및 스타일 적용** * 생성된 디자인의 요소를 그대로 쓰기보다, 기존에 정의된 프로젝트의 변수(Variables)나 스타일(Styles)로 신속하게 교체합니다. * AI가 제안한 색상 팔레트나 타이포그래피를 참고하되, 브랜드 가이드라인과의 일관성을 유지하기 위해 로컬 라이브러리와 동기화하는 작업이 필요합니다. * 컴포넌트화된 요소들을 기존 디자인 시스템의 에셋으로 교체하여 유지보수가 용이한 상태로 만듭니다. **실제 데이터 기반의 콘텐츠 최적화** * AI가 생성한 'Lorem Ipsum'이나 임시 텍스트를 실제 서비스에 들어갈 문구로 교체하여 디자인의 실용성을 검증합니다. * 플레이스홀더 이미지를 실제 제품 사진이나 브랜드 에셋으로 바꿔 시각적 완성도를 높입니다. * 실제 데이터를 넣었을 때 레이아웃이 깨지지 않는지 확인하며 디자인의 견고함을 테스트합니다. Figma Make를 마법 같은 해결책이 아닌, '빈 캔버스 증후군'을 극복하게 해주는 스마트한 조수로 대해야 합니다. AI가 제안한 구조를 비판적으로 수용하고, 자신의 전문성을 더해 고도화하는 과정을 거칠 때 진정한 생산성 향상을 경험할 수 있습니다. 적극적인 프롬프트 실험을 통해 자신만의 AI 워크플로우를 구축해 보시기 바랍니다.

Version Control: One Founder’s Mission to Save Local Farms with Figma Make | Figma Blog (새 탭에서 열림)

Figma는 사내 해커톤인 'Figma Make'를 통해 프로토타입 내 비디오 재생 기능을 구현하는 과정에서 겪은 기술적 난제들을 해결했습니다. 특히 웹 어셈블리(Wasm) 기반의 자체 렌더링 엔진과 브라우저의 네이티브 비디오 API 간의 간극을 좁히는 것이 핵심 과제였습니다. 결과적으로 이 과정을 통해 고성능 비디오 렌더링을 유지하면서도 협업 환경에 최적화된 재생 시스템을 구축할 수 있었습니다. ### 브라우저 네이티브 API와 WASM 엔진의 통합 * Figma의 렌더링 엔진은 C++로 작성되어 웹 어셈블리(Wasm) 환경에서 구동되지만, 비디오 디코딩은 브라우저의 네이티브 비디오 엘리먼트에 의존해야 하는 구조적 한계가 있었습니다. * 단순히 HTML 비디오 태그를 캔버스 위에 띄우는 방식은 Figma의 복잡한 레이어 구조와 효과(블렌딩 모드, 마스크 등)를 지원하기 어려웠습니다. * 이를 해결하기 위해 브라우저에서 디코딩된 비디오 프레임을 매 프레임마다 추출하여 Figma 엔진의 GPU 텍스처로 업로드하는 방식을 채택했습니다. ### Figma Make를 통한 기술적 가설 검증 * 'Figma Make'라는 24시간 해커톤 형식을 빌려, 기존 코드 베이스의 제약에서 벗어나 비디오 기능의 기술적 실현 가능성을 빠르게 테스트했습니다. * 비디오를 일반적인 '이미지 채우기(Image Fill)'의 확장판으로 간주하고, 비디오의 각 프레임을 실시간으로 갱신되는 텍스처로 처리하는 프로토타입을 제작했습니다. * 이 단기 집중 과정을 통해 비디오가 단순한 미디어가 아닌, 프로토타입 내의 동적인 속성으로서 어떻게 동작해야 하는지에 대한 설계 방향을 확립했습니다. ### 프레임 동기화 및 성능 최적화 * 비디오 프레임과 Figma 렌더링 루프의 주사율이 일치하지 않을 때 발생하는 저더(Judder) 현상을 방지하기 위해 `requestVideoFrameCallback` API를 활용했습니다. * 이를 통해 새로운 비디오 프레임이 준비된 시점에만 정확히 GPU로 텍스처를 전송하여 불필요한 리소스 소모를 줄이고 재생 부드러움을 극대화했습니다. * 다수의 비디오가 동시에 재생되는 환경에서도 메모리 점유율을 제어하기 위해 뷰포트에 보이는 비디오만 활성화하는 가시성 기반 최적화 전략을 도입했습니다. ### 협업을 고려한 비디오 상태 관리 * 여러 사용자가 동시에 프로토타입을 볼 때 비디오 재생 시점(Current Time)을 동기화하는 것이 중요했습니다. * 재생, 일시정지, 탐색(Seeking)과 같은 제어 명령을 멀티플레이어 서버를 통해 전파하여 모든 관찰자가 동일한 화면을 볼 수 있도록 구현했습니다. * 대용량 비디오 파일의 로딩 속도를 개선하기 위해 비디오 스트리밍 최적화와 점진적 로딩 방식을 적용하여 사용자 경험을 개선했습니다. 복잡한 기술적 문제를 해결할 때 Figma Make와 같은 사내 해커톤은 기존 시스템의 제약 없이 혁신적인 아키텍처를 실험할 수 있는 훌륭한 창구가 됩니다. 특히 비디오와 같이 렌더링 엔진 깊숙이 관여해야 하는 기능은 초기 단계에서 성능 한계치를 명확히 파악하고, 이를 바탕으로 점진적인 최적화를 진행하는 접근 방식이 유효합니다.

6 Winning Figma Makes—and What You Can Learn From Them | Figma Blog (새 탭에서 열림)

Figma Make(이전의 Make Designs)는 디자이너가 아이디어를 빠르게 시각화하고 워크플로우를 가속화할 수 있도록 돕는 강력한 AI 도구입니다. 이 글은 단순히 화면을 생성하는 것을 넘어, 정교한 프롬프트 작성법과 구조적인 레이아웃 활용을 통해 실무에 적합한 고품질 디자인 결과물을 얻는 8가지 핵심 전략을 제시합니다. AI를 디자인 프로세스의 완전한 대체재가 아닌 창의성을 증폭시키는 협업 파트너로 활용함으로써 생산성을 극대화할 수 있다는 것이 핵심 결론입니다. ### 맥락과 목적을 담은 구체적인 프롬프트 작성 - 앱의 핵심 목적, 타겟 사용자, 해결하고자 하는 특정 문제를 프롬프트에 상세히 포함해야 합니다. - 단순히 "로그인 화면"이라고 입력하기보다 "보안을 강조한 금융 앱의 2단계 인증 로그인 화면"과 같이 구체적인 시나리오를 제시할 때 더 정확한 결과물이 나옵니다. ### 시각적 톤앤매너 및 스타일 지정 - '미니멀한', '대담한', '친근한' 등 구체적인 형용사를 사용하여 디자인의 전반적인 분위기를 제어합니다. - 특정 브랜드 색상이나 타이포그래피 스타일을 언급하여 생성된 디자인이 기존 브랜드 가이드라인과 조화를 이루도록 유도합니다. ### 오토 레이아웃(Auto Layout) 최적화 - Figma Make는 생성된 결과물에 오토 레이아웃을 자동으로 적용하므로, 이를 기반으로 반응형 구조를 미세 조정할 수 있습니다. - AI가 구성한 프레임의 패딩, 간격, 정렬 설정을 확인하고 수정하여 기기별 대응이 가능한 유연한 레이아웃으로 발전시킵니다. ### 반복적인 시도와 프롬프트 수정(Iteration) - 한 번의 생성으로 완벽한 디자인을 얻으려 하기보다, 결과물을 바탕으로 프롬프트를 점진적으로 수정하며 최적의 안을 찾아가는 과정이 필요합니다. - 마음에 드는 요소는 유지하고 부족한 부분만 특정하여 다시 생성하도록 요구함으로써 결과물의 완성도를 높입니다. ### 플랫폼 및 디바이스 환경 명시 - 모바일(iOS/Android), 데스크톱, 태블릿 등 타겟 플랫폼을 명확히 지정하여 화면 비율과 UX 패턴을 최적화합니다. - 플랫폼 특유의 디자인 가이드라인(예: Material Design 또는 Human Interface Guidelines)이 반영되도록 명칭을 포함하는 것이 좋습니다. ### 생성된 컴포넌트의 체계적 관리 - AI가 생성한 결과물 내의 반복되는 요소들을 찾아 컴포넌트화하고, 기존 디자인 시스템의 라이브러리와 연결합니다. - 생성 직후 레이어 이름을 정리하고 논리적으로 그룹화하여 협업 시 가독성을 확보하는 과정이 필수적입니다. ### 사용자 여정(User Journey) 기반의 화면 연결 - 단일 화면 생성에 그치지 않고, 사용자의 흐름에 따라 필요한 연속적인 화면(Flow)들을 순차적으로 프롬프트에 반영합니다. - 각 화면 간의 일관성을 유지하기 위해 이전 프롬프트에서 사용한 스타일 키워드를 일관되게 사용합니다. ### 디자이너의 수동 편집과 AI의 조화 - AI 결과물을 최종 결과물이 아닌 '고도화된 초안'으로 간주하고, 디자이너의 직관과 세밀한 터치를 더해 마무리합니다. - 사용자 인터랙션, 마우스 오버 상태, 복잡한 데이터 시각화 등 AI가 놓치기 쉬운 디테일은 직접 설계하여 완성도를 높입니다. Figma Make는 디자인의 시작 단계에서 겪는 '빈 페이지의 공포'를 극복하게 해주는 훌륭한 도구입니다. 하지만 최상의 결과물은 결국 디자이너의 명확한 의도 설정과 생성된 구조를 논리적으로 다듬는 사후 편집 과정에서 결정됩니다. AI의 속도와 디자이너의 판단력을 결합하여 창의적인 문제 해결에 더 많은 시간을 할애해 보세요.

Version Control: How Figma Make Helped Us Figure Out Video Playback | Figma Blog (새 탭에서 열림)

UX 라이팅은 단순한 단어 선택을 넘어, 특정 시점에 왜 그 단어를 선택했는지에 대한 전략적 근거를 기록하고 관리하는 과정입니다. 이 글은 디자인 도구인 Figma 내에서 텍스트의 변경 이력을 관리하는 '버전 관리'의 중요성과 그 구체적인 방법론을 제시합니다. 결과적으로 철저한 기록은 과거의 의사결정 맥락을 보존하여 불필요한 논쟁을 줄이고, 팀 전체가 일관된 보이스앤톤을 유지할 수 있게 돕습니다. ### 단어 선택의 맥락과 '왜(Why)'의 보존 * 디자인 수정 과정에서 수많은 텍스트 후보군이 스쳐 지나가지만, 각 안이 기각된 구체적인 이유를 기록하지 않으면 나중에 똑같은 시행착오를 반복하게 됩니다. * UX 라이터에게 버전 관리란 단순히 최종 결과물을 저장하는 것이 아니라, 특정 단어가 선택되기까지의 사고 과정과 비즈니스 로직을 저장하는 행위입니다. * 기록된 맥락은 시간이 흐른 뒤 프로젝트에 참여한 동료들에게 당시의 제약 사항이나 목표를 명확히 전달하는 가교 역할을 합니다. ### Figma 환경에서의 실전 버전 관리 기법 * **브랜칭(Branching) 활용:** 메인 디자인에 영향을 주지 않고 별도의 브랜치에서 다양한 카피 안을 실험하며, 최종 승인된 안만 병합하여 데이터의 무결성을 유지합니다. * **캔버스 내 탐색 영역(Exploration Space):** 최종 시안 옆에 'Exploration' 섹션을 두어, 채택되지 않은 이전 단계의 문구들과 그에 대한 피드백을 시각적으로 배치하여 변천사를 한눈에 파악하게 합니다. * **버전 히스토리 메모:** Figma의 버전 기록 기능을 단순 저장용이 아닌 '변경 로그'로 활용하여, 어떤 사용자 피드백이나 비즈니스 요구사항 때문에 문구가 수정되었는지 명시적으로 기록합니다. ### 협업 효율성을 높이는 문서화의 가치 * 기획자나 개발자가 텍스트 변경의 근거를 즉시 확인할 수 있게 함으로써, 동일한 질문에 반복해서 답해야 하는 커뮤니케이션 비용을 획기적으로 줄입니다. * 텍스트의 변천사를 공유하는 과정은 팀 내에서 '단어 하나'가 갖는 무게를 인지시키고, 라이팅 작업에 대한 전문성과 신뢰를 쌓는 계기가 됩니다. * 과거의 기록은 프로젝트의 '히스토리 북'이 되어, 새로운 팀원이 합류했을 때 과거의 의사결정 과정을 빠르게 학습할 수 있는 온보딩 자산이 됩니다. 효과적인 UX 라이팅 버전 관리를 위해 지금 바로 Figma 파일 내에 '기각된 안(Rejected ideas)' 섹션을 만들어보세요. 사소해 보이는 기록들이 모여 제품의 언어적 일관성을 유지하는 강력한 기준점이 될 것입니다.

Forrester Analyzes The ROI Of Dev Mode | Figma Blog (새 탭에서 열림)

Figma의 2025 AI 보고서는 AI가 디자인과 개발 워크플로우를 근본적으로 재편하며, 두 직군 간의 협업 방식을 고도화하고 있음을 강조합니다. AI는 단순한 자동화 도구를 넘어 창의적 의사결정을 돕는 파트너로 진화하고 있으며, 이를 통해 디자이너와 개발자는 반복적인 작업에서 벗어나 전략적이고 복잡한 문제 해결에 더 집중할 수 있게 되었습니다. 결과적으로 AI는 기술적 장벽을 낮추는 동시에 인간의 비판적 사고와 독창적 의도의 가치를 그 어느 때보다 높이고 있습니다. **생산성 향상과 역할의 전략적 변화** * AI는 레이아웃 생성, 데이터 채우기, 반복적인 에셋 정리 등 저수준의 '제작(Craft)' 업무를 대신 수행하여 워크플로우의 병목 현상을 해소합니다. * 디자이너는 '빈 화면(Blank Canvas)'에서 시작하는 심리적 부담을 줄이고, AI가 생성한 여러 시안 중 최적의 안을 선택하고 다듬는 '에디터'로서의 역할이 강화되었습니다. * 결과적으로 실무자들은 픽셀을 옮기는 작업 시간보다 사용자 경험(UX)의 논리적 구조를 설계하고 비즈니스 가치를 고민하는 데 더 많은 시간을 할애하게 됩니다. **디자인과 개발의 경계 축소** * AI가 디자인 요소를 코드로 변환하거나 코드의 맥락을 디자인 시스템에 반영하는 과정을 가속화하면서, 두 직군 사이의 '핸드오프(Handoff)' 과정이 더욱 매끄러워졌습니다. * 개발자는 디자인 의도를 더 정확하게 파악할 수 있고, 디자이너는 자신의 결과물이 실제 코드로 어떻게 구현될지 실시간으로 예측하며 작업할 수 있습니다. * 이러한 기술적 결합은 직군 간의 소통 비용을 줄이고, 제품 개발 주기를 획기적으로 단축시키는 결과로 이어집니다. **품질 검증과 비판적 사고의 필수화** * AI가 생성한 결과물이 항상 완벽하거나 브랜드의 맥락을 완벽히 이해하는 것은 아니므로, 이를 검증하고 수정하는 능력이 핵심 역량으로 부상했습니다. * AI의 출력물 중에서 브랜드 아이덴티티와 사용자 맥락에 맞는 최선의 선택을 내리는 '심미적 안목'과 '비판적 판단력'이 실무자의 차별화된 경쟁력이 됩니다. * 데이터의 편향성이나 윤리적 문제, 결과물의 독창성 유지에 대한 책임감이 더욱 중요해졌습니다. **AI 시대의 적응을 위한 제언** AI 도구를 도입하는 것에 그치지 않고, 팀 전체가 AI를 통해 확보한 시간을 어디에 재투자할지 결정하는 '운영 전략'이 필요합니다. 디자이너는 기본적인 툴 활용 능력을 넘어 시스템적 사고와 문제 정의 능력을 키워야 하며, 조직 차원에서는 AI가 생성한 코드와 디자인의 품질을 일관되게 유지할 수 있는 가이드라인을 수립하는 것이 권장됩니다.

The making of a product icon | Figma Blog (새 탭에서 열림)

UX 라이팅은 단순히 적절한 단어를 선택하는 일을 넘어, 소프트웨어 개발과 유사한 엄격한 버전 관리와 반복적인 실험 과정을 필요로 합니다. Figma의 브랜칭 기능을 활용하면 라이터는 메인 디자인에 영향을 주지 않으면서도 다양한 언어적 시도를 자유롭게 할 수 있으며, 이는 최종적으로 더욱 의도적이고 정교한 사용자 경험으로 이어집니다. 결과적으로 UX 라이팅의 가치는 최종적으로 선택된 단어뿐만 아니라, 그 선택에 이르기까지 검토된 수많은 대안과 의사결정 과정에 있습니다. ### 단어의 무게를 측정하는 반복 프로세스 * UX 라이터는 단순히 '맞는 단어'를 찾는 것이 아니라, 각 단어가 사용자에게 전달하는 뉘앙스, 톤, 명확성을 다각도로 비교합니다. * 하나의 버튼 텍스트나 알림 문구를 결정하기 위해 수십 가지의 대안을 나열하고, 각 단어가 UI 디자인 내에서 시각적, 기능적으로 어떻게 작동하는지 끊임없이 검증합니다. * 이 과정은 정답을 맞히는 과정이 아니라, 가장 적절한 사용자 경험을 위해 선택지를 좁혀나가는 고도의 편집 과정입니다. ### 브랜칭(Branching)을 통한 안전한 실험 환경 * Figma의 브랜칭 기능을 활용해 디자인 원본을 훼손하지 않고도 카피의 변주를 실험할 수 있는 '라이팅 샌드박스'를 구축합니다. * 글자 수의 변화가 레이아웃에 미치는 영향이나, 텍스트가 변경되었을 때의 시각적 균형을 실시간 UI 맥락 안에서 확인하며 작업할 수 있습니다. * 이를 통해 라이터는 기술적인 제약에 얽매이지 않고 창의적인 언어적 시도를 마음껏 펼칠 수 있는 환경을 확보하게 됩니다. ### 의사결정의 기록과 협업의 효율화 * 버전 관리를 통해 특정 카피가 왜 채택되었고, 다른 후보들은 왜 탈락했는지에 대한 '히스토리'를 기록으로 남깁니다. * 이는 디자이너, 개발자, 프로덕트 매니저와의 협업 시 논리적인 근거를 제공하며, 불필요한 재논의를 줄여주는 강력한 커뮤니케이션 도구가 됩니다. * 제품의 언어가 진화하는 과정을 투명하게 공개함으로써 팀 전체가 제품의 톤앤매너와 방향성에 대해 깊은 공감대를 형성할 수 있습니다. UX 라이터에게 가장 중요한 도구는 단순히 글을 쓰는 캔버스가 아니라, 최선의 선택을 위해 수많은 '실패한 버전'들을 안전하게 관리하고 검토할 수 있는 시스템입니다. 도구를 활용해 단어 하나하나의 무게를 신중히 다루는 습관을 들일 때, 사용자에게 더욱 명확하고 친절한 제품의 목소리를 전달할 수 있습니다.

Figma Make Is Now Available to All Users | Figma Blog (새 탭에서 열림)

Figma의 'Make Designs'(구 Figma Make)는 AI를 활용해 디자이너가 아이디어를 시각적인 초안으로 빠르게 전환할 수 있도록 돕는 강력한 도구입니다. 단순히 명령어를 입력하는 것을 넘어, 구체적인 컨텍스트와 스타일 가이드를 제공함으로써 반복적인 작업을 줄이고 창의적인 문제 해결에 집중할 수 있게 합니다. 이 글은 AI를 디자인 워크플로우에 완벽하게 통합하여 최상의 결과물을 얻기 위한 8가지 핵심 전략을 제시합니다. **명확한 목적과 컨텍스트 설정** * 단순히 '로그인 페이지'라고 입력하기보다 '친환경 여행 가이드를 위한 모바일 로그인 화면'처럼 구체적인 서비스 성격과 대상을 명시해야 합니다. * 사용자가 해당 화면에서 수행해야 할 핵심 동작(예: 예약하기, 사진 업로드)을 프롬프트에 포함하여 AI가 기능적인 레이아웃을 생성하도록 유도합니다. **시각적 스타일과 분위기 지정** * '미니멀한', '활기찬', '전문적인' 등 디자인의 무드를 결정하는 형용사를 활용하여 브랜드 정체성에 맞는 결과물을 도출합니다. * 다크 모드나 특정 색상 대비와 같은 시각적 제약 조건을 미리 설정하면 후속 수정 작업을 크게 줄일 수 있습니다. **UI 구성 요소의 구체적 요청** * 히어로 섹션, 가격 테이블, 사용자 리뷰 카드 등 화면에 반드시 포함되어야 할 특정 UI 요소를 명확히 나열합니다. * 필요한 버튼의 개수나 내비게이션 바의 위치 등 구조적인 세부 사항을 지시하여 디자인의 완성도를 높입니다. **반복적인 프롬프트 수정과 개선** * 첫 번째 결과물에 만족하기보다는 프롬프트를 조금씩 수정하며 여러 버전을 생성해 보는 과정이 필요합니다. * 생성된 디자인 중 마음에 드는 부분을 유지하면서 특정 섹션만 다시 생성하도록 요청하여 결과물을 점진적으로 발전시킵니다. **레이어 구조 및 명명 규칙 확인** * AI가 생성한 결과물의 레이어 패널을 확인하여 그룹화와 이름 지정이 논리적으로 되어 있는지 점검합니다. * 자동으로 생성된 오토 레이아웃(Auto Layout) 설정을 확인하고, 필요에 따라 수치를 조정하여 디자인 시스템과의 일관성을 확보합니다. **아이디어 확장을 위한 브레인스토밍 도구로 활용** * 완성된 디자인을 얻으려는 목적 외에도, 레이아웃에 대한 영감을 얻거나 다양한 디자인 옵션을 빠르게 탐색하는 용도로 사용합니다. * 익숙한 디자인 패턴에서 벗어나 AI가 제안하는 예상치 못한 구조를 참고하여 창의적인 시안을 구상합니다. **기존 디자인 시스템과의 통합** * AI가 생성한 컴포넌트를 라이브러리에 등록된 실제 컴포넌트로 교체하여 프로젝트의 일관성을 유지합니다. * 생성된 텍스트와 이미지는 가이드로 삼되, 실제 브랜드의 보이스앤톤과 고해상도 자산으로 업데이트하여 실무에 적용합니다. AI는 디자이너의 대체재가 아니라 작업을 가속화하는 '패스트 포워드(Fast-forward)' 버튼입니다. AI가 제안한 초안을 바탕으로 디자이너의 고유한 감각과 논리를 더해 디테일을 다듬을 때 가장 가치 있는 결과물이 탄생합니다. 처음부터 완벽한 디자인을 기대하기보다는, 여러 번의 시도를 통해 AI와 협업하는 방식을 익히는 것이 중요합니다.

In Good Company: How Retailers Use Figma to Elevate E-commerce | Figma Blog (새 탭에서 열림)

제시해주신 제목(Figma의 블로그 콘텐츠)을 바탕으로, 현대 에이전시들이 클라이언트와의 협업 방식을 어떻게 혁신하고 있는지에 대한 핵심 내용을 정리해 드립니다. 에이전시와 고객사 간의 협업 방식이 과거의 결과 중심적인 ‘대규모 공개(The Big Reveal)’에서 실시간 투명성을 강조하는 ‘오픈 키친’ 형태로 변화하고 있습니다. 이러한 변화는 피그마(Figma)와 같은 협업 툴을 통해 디자인 과정을 실시간으로 공유함으로써 가능해졌으며, 단순한 도구 도입을 넘어 신뢰와 효율성을 극대화하는 프로세스의 혁신을 의미합니다. 결과적으로 작업의 불확실성을 제거하고 클라이언트의 요구사항을 즉각적으로 반영하여 프로젝트의 성공 확률을 높이는 것이 이 변화의 핵심 결론입니다. **블랙박스 모델에서 투명한 협업으로의 전환** * 과거 에이전시는 내부에서 작업을 완결한 뒤 최종 결과물만 발표하는 방식을 취했으나, 이제는 작업 초기 단계부터 클라이언트를 캔버스에 초대합니다. * 클라이언트는 진행 상황을 수시로 확인하며 의사결정 과정에 참여할 수 있어, 프로젝트 막바지에 발생할 수 있는 대대적인 수정 요청(Pivot)을 미연에 방지합니다. * 이러한 투명성은 에이전시와 클라이언트 사이의 '심리적 거리'를 좁히고 파트너십을 더욱 공고히 하는 기반이 됩니다. **디자인 시스템을 통한 공통 언어 구축** * 에이전시는 단순한 페이지 디자인을 넘어, 클라이언트가 지속 가능하게 사용할 수 있는 ‘디자인 시스템’을 구축하여 전달합니다. * 디자인 시스템은 디자이너, 개발자, 클라이언트 모두가 이해할 수 있는 ‘공통의 언어’ 역할을 하며 소통 오류를 획기적으로 줄여줍니다. * 브랜드 가이드라인과 컴포넌트가 명확히 정의되면, 클라이언트 내부 팀도 전달받은 자산을 기반으로 일관성 있는 사후 관리가 가능해집니다. **실시간 피드백 루프와 개발 협업 최적화** * 피그마의 코멘트 및 브랜칭 기능을 활용해 비동기적으로도 긴밀한 피드백을 주고받으며 프로젝트의 리드 타임을 단축합니다. * 디자인에서 개발로 이어지는 핸드오프(Handoff) 과정에서 'Dev Mode' 등을 활용해 개발자가 필요한 코드와 에셋을 즉시 추출할 수 있도록 지원합니다. * 이를 통해 디자인 의도가 개발 단계에서 왜곡되지 않고 온전히 구현되며, 불필요한 커뮤니케이션 비용을 줄여 생산성을 높입니다. 현대적인 디자인 에이전시로 도약하기 위해서는 투명성을 두려워하지 않는 문화적 변화가 선행되어야 합니다. 디자인 도구를 단순한 제작 툴이 아닌 '소통의 플랫폼'으로 정의하고, 클라이언트를 작업 과정에 깊숙이 참여시켜 함께 제품을 만들어가는 파트너 관계를 구축할 것을 권장합니다.

In Good Company: How Agencies Are Transforming Client Collaboration | Figma Blog (새 탭에서 열림)

글로벌 뉴스 미디어들은 급변하는 뉴스 사이클 속에서도 일관된 브랜드 정체성과 높은 퀄리티의 사용자 경험을 유지하기 위해 피그마(Figma)를 핵심 도구로 활용하고 있습니다. 뉴욕타임스(The New York Times), 가디언(The Guardian), 디 차이트(Die Zeit)와 같은 주요 매체들은 디자인 시스템을 통해 제작 공정을 표준화하고, 기자와 디자이너 간의 실시간 협업을 강화하여 디지털 저널리즘의 한계를 넓히고 있습니다. 결과적으로 이들은 피그마를 단순한 디자인 도구를 넘어, 뉴스룸의 복잡한 커뮤니케이션을 간소화하고 독자에게 최적화된 시각적 경험을 전달하는 전략적 플랫폼으로 정의합니다. ### 뉴스룸의 속도와 일관성을 위한 디자인 시스템 * 뉴욕타임스는 'Oak'라는 디자인 시스템을 피그마로 관리하며, 수백 명의 디자이너와 엔지니어가 동일한 시각적 언어를 공유하도록 합니다. * 반복되는 UI 구성 요소를 컴포넌트화하여 속보 상황에서도 브랜드 가이드라인을 준수하면서 빠르게 레이아웃을 구성할 수 있는 환경을 구축했습니다. * 디자인 토큰(Design Tokens)을 활용해 텍스트 스타일, 컬러 팔레트 등을 체계적으로 관리함으로써 웹, 모바일 앱 등 다양한 플랫폼 간의 일관성을 유지합니다. ### 접근성 중심의 글로벌 협업 환경 구축 * 가디언은 전 세계에 퍼져 있는 팀원들이 피그마 내에서 실시간으로 동시에 작업하며 피드백을 주고받는 워크플로우를 통해 제작 시간을 단축했습니다. * 뉴스 소비의 보편성을 고려하여 피그마의 접근성 관련 플러그인을 적극 활용하며, 시각 장애가 있는 독자들을 위한 대비(Contrast)와 가독성 테스트를 디자인 단계에서 선행합니다. * 기자들과 편집자들이 피그마 파일에 직접 접속하여 텍스트의 길이를 조절하거나 레이아웃을 확인하는 과정을 통해, 디자인과 콘텐츠 간의 불일치를 최소화합니다. ### 인터랙티브 스토리텔링과 프로토타이핑의 결합 * 디 차이트는 복잡한 데이터 시각화나 심층 보도 기사에서 피그마의 프로토타이핑 기능을 사용하여 실제 개발 전 사용자 흐름을 사전에 검증합니다. * 정적인 이미지를 넘어 오토 레이아웃(Auto Layout) 기능을 통해 기기별 반응형 디자인을 실시간으로 테스트하며, 독자가 기사를 읽는 방식에 최적화된 화면 구성을 설계합니다. * 디자이너와 개발자 간의 원활한 핸드오프(Handoff)를 위해 피그마 내의 속성값과 에셋을 공유함으로써, 고난도의 인터랙티브 요소를 높은 완성도로 구현합니다. 디지털 퍼블리싱 환경에서 디자인은 더 이상 마지막 단계의 포장이 아니라 뉴스 가치를 전달하는 핵심 요소입니다. 뉴스룸은 피그마와 같은 협업 도구를 통해 내부 장벽을 허물고, 체계화된 디자인 시스템을 기반으로 더 빠르고 접근성 높은 저널리즘을 구현해야 합니다. 만약 뉴스룸이나 콘텐츠 기반의 서비스를 운영 중이라면, 디자인 시스템의 컴포넌트화를 통해 제작 효율을 높이고 실시간 협업 문화를 정착시키는 것이 디지털 전환의 핵심적인 출발점이 될 것입니다.

Double Click: Does Efficiency Kill Love? | Figma Blog (새 탭에서 열림)

생성형 AI의 발전으로 아이디어를 즉시 구현할 수 있는 'Just do things(일단 실행하기)'의 시대가 열렸지만, 기술적 가능성이 곧 올바른 실행을 보장하는 것은 아닙니다. 이 글은 속도에만 치중한 무분별한 개발이 초래할 기술 부채를 경고하며, AI 시대일수록 인간의 의도적인 설계와 비판적 사고가 핵심적인 경쟁력이 된다는 결론을 제시합니다. **AI 기반 도구가 가져온 실행의 가속화** * Cursor, v0, Replit과 같은 AI 에이전트와 코드 생성 도구의 등장으로 복잡한 보일러플레이트 코드 작성이나 인프라 설정의 진입장벽이 획기적으로 낮아졌습니다. * 과거에는 며칠이 걸리던 프로토타이핑 작업이 이제는 몇 분 만에 가능해지면서, 아이디어를 즉각적인 결과물로 전환하는 '실행의 시대'가 도래했습니다. * 이러한 가속화는 초기 가설 검증과 빠른 시장 진입에는 유리하지만, 동시에 깊은 고민 없이 '일단 만드는' 문화를 형성하고 있습니다. **무분별한 생성의 함정과 기술 부채** * AI가 생성한 결과물을 제대로 이해하지 못한 채 수용할 경우, 시스템의 복잡도가 기하급수적으로 증가하며 유지보수가 불가능한 기술 부채가 쌓이게 됩니다. * 단일 기능 단위에서는 완벽해 보이는 코드라도, 전체적인 아키텍처 관점에서의 정합성이 결여되면 결국 시스템 전체의 붕괴를 초래할 수 있습니다. * '할 수 있다(Can)'는 사실이 '해야 한다(Should)'는 가치 판단을 대신할 수 없으며, 불필요한 기능의 과잉 생산은 제품의 본질을 흐릴 위험이 있습니다. **오케스트레이터로서의 엔지니어링 역량** * 이제 엔지니어의 역할은 단순히 코드를 작성하는 '빌더'에서, AI의 결과물을 검증하고 조율하는 '오케스트레이터'로 변화해야 합니다. * 도구가 제공하는 속도에 매몰되지 않기 위해서는 '왜 이 기능이 필요한가'와 '이 구조가 장기적으로 지속 가능한가'에 대한 의도적인 설계(Intentional Design)가 선행되어야 합니다. * 기술적 디테일에 대한 깊은 이해는 여전히 중요하며, 이는 AI가 제안한 해결책 중 최적의 안을 선택하고 오류를 잡아내는 필터링 능력의 근간이 됩니다. **지속 가능한 성장을 위한 제언** AI라는 강력한 엔진을 가졌을 때 가장 중요한 것은 핸들을 잡고 있는 인간의 방향 감각입니다. 도구가 주는 속도를 만끽하되, 모든 결과물에 대해 명확한 목적과 책임감을 갖는 '의도적인 개발' 프로세스를 구축해야 합니다. 기술적 산출물의 양보다 그 산출물이 해결하고자 하는 문제의 본질에 집중할 때, AI는 진정한 생산성 도구로서 가치를 발휘할 수 있습니다.

Introducing Figma Make: A New Way to Test, Edit, and Prompt Designs | Figma Blog (새 탭에서 열림)

Figma는 Config 2025를 통해 디자인의 경계를 한 단계 더 확장하며, 특히 AI와 고도화된 프로토타이핑 기술의 융합을 핵심 과제로 제시합니다. 단순한 도구를 넘어 디자이너의 창의성을 증폭시키고 개발과의 간극을 좁히는 생태계를 구축하는 것이 이번 발표의 궁극적인 목표입니다. 이를 통해 디자인 프로세스는 더 효율적이고 체계적인 방향으로 진화할 전망입니다. **AI 기술을 통한 디자인 프로세스의 혁신** - 디자인 작업의 단순 반복을 줄이기 위해 생성형 AI를 워크플로우 전반에 깊숙이 통합합니다. - 디자이너가 아이디어를 텍스트나 간단한 스케치로 입력하면, AI가 초기 레이아웃이나 컴포넌트 구성을 제안하여 작업 속도를 획기적으로 높입니다. - 문맥을 이해하는 디자인 제안 기능을 통해 프로젝트의 일관성을 유지하면서도 창의적인 대안을 빠르게 탐색할 수 있도록 돕습니다. **프로토타이핑과 개발 협업의 고도화** - 정적인 디자인을 넘어 실제 제품과 유사한 수준의 복잡한 인터랙션을 구현할 수 있는 프로토타이핑 기능을 강화합니다. - 디자인 단계에서 정의된 데이터와 로직이 개발 환경으로 자연스럽게 이어지도록 설계-개발 간의 '핸드오프(Hand-off)' 과정을 최적화합니다. - 복잡한 애니메이션과 상태 변화를 코드 작성 없이도 직관적으로 제어할 수 있는 도구를 제공하여 사용자 경험(UX) 검증의 정확도를 높입니다. **브랜드 시스템의 확장과 관리** - 대규모 조직에서도 일관된 브랜드 정체성을 유지할 수 있도록 더욱 강력한 브랜드 시스템 관리 기능을 선보입니다. - 다양한 플랫폼과 디바이스 환경에 맞춰 브랜드 자산이 자동으로 최적화되는 동적 디자인 시스템을 지원합니다. - 팀 단위의 협업을 넘어 전사적 차원에서 브랜드 가이드라인을 실시간으로 동기화하고 적용할 수 있는 환경을 구축하여 운영 효율성을 극대화합니다. 디자이너는 이제 단순한 시각적 구현을 넘어 AI와 협업하며 전체적인 사용자 경험의 전략을 설계하는 역할로 진화해야 합니다. Config 2025에서 제시된 도구들을 적극적으로 수용하여 워크플로우를 자동화하고, 보다 고차원적인 창의적 문제 해결에 집중하는 것이 변화하는 환경에 적응하는 핵심이 될 것입니다.

Version Control: How a UX Writer Weighs One Word Against Another | Figma Blog (새 탭에서 열림)

Figma는 레이어 패널의 깊은 계층 구조에서 발생하는 가독성 문제를 해결하기 위해 세 가지 가로 스크롤 방식을 탐색했습니다. 단순히 기술적인 구현을 넘어, 사용자가 레이어의 맥락을 잃지 않으면서도 긴 이름을 쉽게 읽을 수 있도록 하는 최적의 UX를 찾는 것이 핵심이었습니다. 최종적으로 Figma는 성능과 사용성을 모두 잡기 위해 구조적 아이콘은 고정하고 텍스트만 유연하게 반응하는 정교한 인터랙션 방식을 채택했습니다. ### 단순 가로 스크롤의 한계와 초기 탐색 * 가장 직관적인 방법인 `overflow-x: auto`를 적용했을 때, 레이어 이름이 길어질수록 왼쪽의 계층 구조 아이콘(눈 아이콘, 잠금 아이콘 등)이 화면 밖으로 사라지는 문제가 발생했습니다. * 사용자가 레이어 이름을 확인하기 위해 오른쪽으로 스크롤하면 해당 레이어의 현재 상태를 파악하거나 제어할 수 없게 되어, 도구로서의 사용성이 크게 저하되었습니다. * 또한, 단순히 가로 스크롤바를 추가하는 것만으로는 수천 개의 레이어가 중첩된 복잡한 디자인 파일에서의 성능 최적화 문제를 완벽히 해결하기 어려웠습니다. ### 가변형 레이아웃과 호버 인터랙션 시도 * 레이어 패널의 전체 폭을 고정하지 않고 내용물에 따라 가변적으로 늘어나는 방식을 검토했으나, 이는 캔버스 영역을 침범하여 디자인 작업 공간을 좁게 만드는 부작용이 있었습니다. * 마우스 커서를 올렸을 때만 레이어 이름이 확장되는 방식도 고려되었지만, 빈번한 레이아웃 시프트(Layout Shift)로 인해 시각적 피로도가 증가하고 의도치 않은 클릭 실수를 유발하는 한계가 있었습니다. * 이 과정에서 Figma 팀은 '맥락 유지(Context Preservation)'와 '가독성 확보'라는 두 마리 토끼를 잡기 위한 더 정밀한 엔지니어링 접근이 필요함을 확인했습니다. ### 스티키 요소와 가변 인덴트를 활용한 최종 솔루션 * Figma는 레이어의 계층 관계를 나타내는 인덴트(들여쓰기) 가이드라인과 주요 제어 아이콘을 왼쪽에 고정(Sticky)하는 하이브리드 방식을 채택했습니다. * 사용자가 가로로 스크롤할 때, 레이어 이름 텍스트는 유연하게 움직이지만 해당 레이어가 속한 부모 계층의 위치 정보와 상태 아이콘은 화면 왼쪽 끝에 머물도록 설계했습니다. * 이를 위해 복잡한 가상 리스트(Virtual List) 환경 내에서 스크롤 오프셋을 계산하고, 수천 개의 돔(DOM) 요소가 실시간으로 반응하면서도 60fps의 부드러운 성능을 유지하도록 렌더링 로직을 최적화했습니다. 복잡한 계층 구조를 다루는 소프트웨어라면 표준 스크롤 기능에 의존하기보다 정보의 우선순위를 정의하는 것이 중요합니다. Figma의 사례처럼 사용자가 항상 확인해야 하는 '제어 요소'와 필요할 때만 확인하는 '상세 이름'을 분리하여 설계하면, 한정된 UI 공간 내에서 정보 밀도를 효과적으로 관리할 수 있습니다.

Version Control: Three Ways Figma Explored Horizontal Scrolling | Figma Blog (새 탭에서 열림)

UX 라이팅은 단순히 예쁜 단어를 고르는 것이 아니라, 사용자가 제품의 기능을 이해하는 방식인 '멘탈 모델'을 설계하는 과정입니다. 피그마의 버전 관리 기능을 디자인할 때 라이터는 자동 저장 방식과 수동 버전 생성 사이의 혼란을 해소하고, 사용자에게 제어권과 신뢰를 주는 단어를 선택하는 데 집중했습니다. 이를 통해 사용자가 데이터 손실에 대한 두려움 없이 협업하고 창작할 수 있는 환경을 구축하는 것이 이 글의 핵심 결론입니다. **자동 저장과 버전 관리의 개념적 분리** * 피그마는 모든 수정을 실시간으로 자동 저장하므로 전통적인 '저장(Save)' 버튼이 필요 없지만, 사용자는 작업의 특정 시점을 명확히 기록하고 싶어 하는 심리적 요구가 있었습니다. * 개발팀은 단순히 '버전 저장'이라는 표현 대신 '이 버전에 이름 지정(Name this version)'이라는 문구를 선택하여, 저장이 아닌 '의미 있는 이정표를 기록하는 행위'임을 강조했습니다. * 이러한 언어적 선택은 시스템이 수행하는 백그라운드 저장과 사용자가 의도적으로 남기는 기록을 명확히 구분하여 사용자의 혼란을 줄였습니다. **심리적 안전을 고려한 '복구' 메커니즘의 언어 설계** * 일반적인 소프트웨어에서 '복구(Restore)'는 현재 작업을 덮어쓰거나 과거 데이터로 되돌아가며 현재가 사라질 것 같은 공포를 유발합니다. * 피그마의 복구 기능은 이전 기록을 삭제하는 방식이 아니라, 선택한 과거 시점을 기반으로 '새로운 현재 버전'을 생성하는 비파괴적(Non-destructive) 방식을 취합니다. * 라이터는 이 과정에서 데이터가 유실되지 않는다는 점을 사용자에게 확신시키기 위해 안내 문구와 버튼의 레이블을 설계하여 심리적 안전망을 제공했습니다. **단어의 무게를 다는 UX 라이팅 프로세스** * '파일 기록(File history)'과 '버전 기록(Version history)' 사이에서 고민할 때, 사용자가 '버전'이라는 단어를 더 전문적이고 중요한 체크포인트로 인식한다는 점을 포착했습니다. * 단순히 보기 좋은 단어를 고르는 것이 아니라, 해당 기능이 기술적으로 어떻게 작동하는지(How it works)와 사용자가 어떻게 느끼는지(How it feels) 사이의 간극을 메우는 단어를 선택했습니다. * 이 과정은 디자이너, 개발자, PM과의 긴밀한 협업을 통해 이루어지며, 단어 하나가 전체 제품의 사용성을 결정짓는 중요한 설계 요소임을 보여줍니다. UX 라이팅은 인터페이스의 빈칸을 채우는 마지막 단계가 아니라, 제품의 메커니즘을 정의하는 초기 설계 단계부터 함께 진행되어야 합니다. 기술적 디테일을 정확하게 전달하면서도 사용자의 불안을 해소할 수 있는 단어를 선택하는 것이 성공적인 사용자 경험의 핵심입니다.

Finding a Forever Home for FigPals | Figma Blog (새 탭에서 열림)

Figma는 디자이너의 고독한 작업 환경에 즐거움을 더하기 위해 커서를 따라다니는 디지털 컴패니언인 'FigPals'를 기간 한정으로 도입했습니다. 90년대 다마고치와 네오펫에서 영감을 받은 이 프로젝트는 사내 해커톤인 '메이커 위크'를 통해 탄생했으며, 단순한 장식 요소를 넘어 사용자와 정서적 교감을 나누는 인터랙티브 요소로 기능했습니다. 짧은 운영 기간에도 불구하고 150만 개 이상의 캐릭터가 생성되는 등 폭발적인 반응을 얻었으며, Figma는 커뮤니티의 요청에 부응해 이를 영구적으로 간직할 수 있는 스티커 팩을 출시하며 프로젝트를 마무리했습니다. ### FigPals의 탄생 배경과 노스탤지어 * 디자이너들이 Figma 파일 내에서 느끼는 반복적이고 고독한 작업 경험을 개선하기 위해 기획된 커서 추적형 디지털 동반자입니다. * 70년대의 '펫 락(Pet Rock)'과 90년대의 '다마고치' 같은 복고풍 장난감 문화에서 영감을 받아, 업무 도구에 장난기 가득한 요소를 결합했습니다. * 9,000가지 이상의 조합(색상, 형태, 액세서리 등)을 제공하여 사용자가 자신만의 개성 있는 캐릭터를 만들고 이름을 붙일 수 있도록 설계했습니다. ### '메이커 위크'를 통한 창의적 실험과 구현 * Figma의 연례 사내 행사인 '메이커 위크(Maker Week)'에서 인턴의 아이디어로 시작된 'Figmagotchi'가 프로젝트의 모태가 되었습니다. * 엔지니어링, 제품, 디자인 팀이 협업하여 캐릭터가 레이어나 노드를 '먹이'로 섭취하거나, 컴포넌트를 해제할 때 놀라는 반응을 보이는 등 다양한 이스터 에그와 상호작용 기능을 구현했습니다. * 업무용 소프트웨어에서도 '놀이(Play)'라는 핵심 가치를 실현할 수 있음을 증명하며, 개발 과정에서 엔지니어들조차 캐릭터에 정서적 애착을 느낄 만큼 몰입도 높은 경험을 구축했습니다. ### 커뮤니티의 열광적인 반응과 데이터 * 출시 일주일 만에 150만 개 이상의 FigPal이 생성되었으며, 사용자들이 캐릭터에게 먹이를 준 횟수만 25만 회를 상회했습니다. * 사용자들은 자신의 실제 반려동물을 모델로 FigPal을 제작하거나, 서비스 종료를 앞두고 영구 도입을 촉구하는 서명 운동(2,000명 이상 참여)을 벌이는 등 강력한 유대감을 보여주었습니다. * 단순한 픽셀의 조합을 넘어 사용자의 업무 공간에 활력을 불어넣는 정서적 매개체로서의 가치를 입증했습니다. 현재 FigPals의 인터랙티브 기능은 종료되었지만, Figma 커뮤니티에서 제공하는 **'FigPal 스티커 팩'**을 활용하면 작업 파일에 이들을 영구적으로 배치하고 추억할 수 있습니다. 또한, 다가오는 Figma의 컨퍼런스 'Config'에서 FigPal과 관련된 추가적인 소식이 있을 예정이므로 관련 업데이트를 주목해 보시기 바랍니다.