interactive-design

디자인에 마우스가 필요 (새 탭에서 열림)

Figma의 '코드 레이어(Code Layers)' 기능은 정적인 디자인 환경을 실제 작동하는 인터랙티브 웹 경험으로 전환하는 혁신적인 도구입니다. 이 기능을 통해 디자이너와 개발자는 HTML, CSS, JavaScript 등 실제 코드를 Figma 디자인 파일 내부에 직접 삽입하여 라이브 프로토타입이나 웹사이트를 구축할 수 있습니다. 이는 디자인과 개발의 경계를 허물고, 프로토타이핑 단계에서 실제 제품 수준의 사용자 경험을 완벽하게 재현하는 것을 목표로 합니다. **코드 레이어를 통한 인터랙션의 진화** * 기존의 복잡한 프로토타이핑 기능(Smart Animate 등)으로 구현하기 어려웠던 정교한 인터랙션을 실제 코드로 간단히 대체할 수 있습니다. * React나 HTML/CSS와 같은 표준 웹 기술을 지원하여, 개발자가 이미 작성한 컴포넌트를 디자인 파일에 그대로 가져와 테스트할 수 있습니다. * 디자인 툴 내에서 실제 입력 폼, 라이브 지도, 3D 임베드(Spline 등)를 직접 작동시켜 보며 사용자 흐름을 더욱 정밀하게 검토할 수 있습니다. **실시간 데이터 시각화와 외부 API 연동** * 단순한 이미지 형태의 차트가 아닌, 실제 데이터를 기반으로 실시간으로 반응하는 동적 차트와 그래프를 디자인에 포함할 수 있습니다. * 외부 API를 호출하여 날씨 정보, 주식 시세, 소셜 미디어 피드 등을 실시간으로 반영하는 동적인 목업 제작이 가능합니다. * 사용자 입력에 따라 결과값이 변하는 계산기나 필터링 시스템 등 논리적인 로직이 포함된 인터페이스를 별도의 개발 과정 없이 디자인 단계에서 검증합니다. **Figma Sites와의 시너지 및 배포 효율성** * 코드 레이어로 구성된 디자인은 Figma의 새로운 웹 퍼블리싱 기능인 'Figma Sites'를 통해 클릭 몇 번만으로 실제 웹사이트로 즉시 배포될 수 있습니다. * 디자이너는 코드 레이어를 활용해 반응형 레이아웃과 고차원 애니메이션이 적용된 고품질 웹사이트를 직접 제작할 수 있는 권한을 갖게 됩니다. * 개발자는 디자인 단계에서 이미 검증된 코드 조각을 활용함으로써 구현 과정에서의 불확실성을 줄이고, 협업의 효율성을 극대화할 수 있습니다. 단순한 화면 설계에서 벗어나 실제 작동하는 제품의 가치를 빠르게 검증하고 싶다면 코드 레이어를 적극 도입해 보시기 바랍니다. 특히 데이터 중심의 대시보드나 복잡한 인터랙션이 요구되는 마케팅 페이지 제작 시, 디자인과 개발 사이의 커뮤니케이션 비용을 획기적으로 줄여줄 것입니다.

FigPals를 위한 영원한 (새 탭에서 열림)

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과 관련된 추가적인 소식이 있을 예정이므로 관련 업데이트를 주목해 보시기 바랍니다.