figma-sites

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

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

캔버스, 코드를 만나다 (새 탭에서 열림)

제시해주신 Figma 블로그의 "Make your site interactive with code layers" 글은 디자인과 개발의 경계를 허물고, 디자인 레이어에 실제 코드의 논리를 심어 생동감 넘치는 웹사이트를 구축하는 방법을 다룹니다. Figma는 이제 단순한 정적 결과물을 넘어, 변수와 조건부 로직을 활용해 실제 제품과 동일하게 작동하는 고성능 프로토타입 및 웹 사이트 제작 환경을 제공합니다. 이를 통해 디자이너는 코딩 지식 없이도 복잡한 인터랙션을 구현하고, 개발자와의 협업 효율을 획기적으로 높일 수 있습니다. **코드 레이어를 통한 디자인의 정적 한계 극복** * 기본적인 시각적 요소를 넘어 레이어 자체에 코드와 유사한 속성을 부여함으로써, 디자인이 정지된 이미지가 아닌 살아있는 객체처럼 동작하게 합니다. * 디자인 레이어는 웹 표준(HTML/CSS) 구조를 반영하며, 이는 나중에 실제 웹 사이트로 퍼블리싱하거나 개발자에게 전달할 때 데이터 손실을 최소화합니다. **변수(Variables)와 조건부 로직의 활용** * 변수를 사용하여 색상, 숫자, 문자열, 불리언(Boolean) 값을 관리함으로써 사용자의 액션에 따라 디자인이 실시간으로 반응하도록 설계합니다. * "If/Else"와 같은 조건부 로직을 프로토타이핑에 도입하여, 특정 버튼을 클릭했을 때의 상태 변화나 데이터 입력값에 따른 화면 전환을 코드 작성 없이 구현할 수 있습니다. * 이를 통해 수백 개의 프레임을 일일이 연결하던 과거의 방식에서 벗어나, 단일 프레임 내에서 복잡한 사용자 여정을 효율적으로 관리합니다. **Figma Sites를 통한 실시간 웹 퍼블리싱** * Figma 환경에서 구축한 인터랙티브 레이어들은 'Figma Sites' 기능을 통해 즉시 실제 웹 사이트로 호스팅될 수 있습니다. * 디자인 단계에서 설정한 반응형 레이아웃과 애니메이션 효과가 코드 변환 과정 없이 그대로 브라우저에서 재현되어, 아이디어를 시장에 출시하는 시간을 대폭 단축합니다. **개발 협업을 위한 Dev Mode와의 연결** * 디자이너가 설정한 코드 레이어 속성은 개발 모드(Dev Mode)에서 깨끗하고 구조화된 코드로 시각화되어 개발자가 즉시 참조할 수 있습니다. * 단순히 '보기 좋은 디자인'을 넘어서 '구현 가능한 구조'를 설계 단계에서 확정함으로써, 디자인과 개발 간의 핸드오프(Handoff) 과정에서 발생하는 오해를 줄입니다. 디자이너는 이제 시각적인 심미성뿐만 아니라 '논리적인 구조'를 설계하는 역량을 갖춰야 합니다. Figma의 변수와 로직 기능을 학습하여 실제 제품과 거의 차이가 없는 프로토타입을 제작해 보시기 바랍니다. 이는 단순히 보여주기 위한 디자인을 넘어, 실제 작동하는 웹사이트의 청사진을 만드는 가장 빠른 방법이 될 것입니다.

코드 레이어로 사이트를 인터랙티브 (새 탭에서 열림)

피그마(Figma)는 디자인 환경 내에서 커스텀 리액트(React) 코드를 활용해 역동적인 상호작용을 구현할 수 있는 ‘코드 레이어(Code Layers)’ 기능을 출시했습니다. 이 기능을 통해 디자이너는 복잡한 개발 지식 없이도 AI 채팅이나 직접적인 코드 수정을 통해 정적인 디자인을 실제 작동하는 웹 요소로 변환하고 실험할 수 있습니다. 결과적으로 디자인과 실제 제품 구현 사이의 장벽을 허물어, 별도의 개발 전달 과정 없이도 고도화된 애니메이션이나 기능적 컴포넌트를 피그마 사이츠(Figma Sites)에서 즉시 빌드할 수 있게 되었습니다. **코드 레이어를 활용한 인터랙션 구현** * 코드 레이어는 리액트 코드를 기반으로 구동되는 상호작용 요소로, 피그마 사이츠 내에서 기존 컴포넌트를 코드로 변환하거나 새롭게 생성할 수 있습니다. * 피그마 메이크(Figma Make)의 AI 기술을 활용하여 "꽃 이미지를 무한히 복제해서 드래그할 수 있게 해줘"와 같은 자연어 프롬프트만으로 복잡한 로직을 생성합니다. * 캔버스 위에서 바로 코드 레이어를 복제(Cmd + D)하여 여러 버전의 상호작용을 나란히 비교하고 실험하는 유연한 워크플로우를 제공합니다. **기존 디자인의 동적 변환 및 제작 방식** * 작업 중인 요소에 애니메이션(회전, 바운스 등)을 추가하거나, 마우스 호버 시 색상이 변하는 리플 효과 등 정적 이미지에 생명력을 불어넣을 수 있습니다. * 대출 계산기, 가격 추정기, 실시간 통계 카운터와 같이 단순한 프로토타입을 넘어 실제 로직이 작동하는 유틸리티 컴포넌트를 제작할 수 있습니다. * 단축키(E)를 사용하여 캔버스에 즉석에서 코드 레이어를 그려 넣고, AI에게 이모지 파티클 생성이나 이미지 갤러리 구축 등을 요청하여 빠르게 아이디어를 시각화합니다. **개발자 수준의 확장성과 재사용성** * **커스텀 속성 편집:** AI가 코드 기반의 속성(문자열, 숫자 등)을 자동으로 생성하며, 사용자는 코드 수정 없이도 패널에서 직접 값을 조정해 레이어의 동작을 변경할 수 있습니다. * **컴포넌트화:** 일반적인 피그마 프레임처럼 코드 레이어도 재사용 가능한 컴포넌트로 전환하여 여러 페이지나 팀 프로젝트에 공유할 수 있습니다. * **npm 패키지 지원:** `motion`이나 `@react-three/fiber`와 같은 외부 노드 패키지 매니저(npm) 라이브러리를 임포트하여 고난도의 3D 렌더링이나 정교한 모션 그래픽을 구현할 수 있습니다. 웹 디자인의 한계를 넓히고자 하는 디자이너라면 피그마 사이츠에서 제공되는 코드 레이어를 적극적으로 활용해 보시기 바랍니다. 특히 AI 프롬프트를 통해 기초 코드를 생성한 뒤, npm 패키지를 결합해 시중의 템플릿으로는 불가능했던 독창적인 사용자 경험을 직접 구축해 보는 것을 추천합니다.

Payload의 Figma 팀 합류를 (새 탭에서 열림)

피그마(Figma)는 오픈소스 헤드리스 CMS이자 애플리케이션 프레임워크인 페이로드(Payload) 팀을 인수하여 디자인과 개발의 경계를 허무는 행보를 가속화합니다. 이번 인수는 최근 발표된 '피그마 사이트(Figma Sites)'와 시너지를 내어 개발자들에게 더욱 강력하고 유연한 도구를 제공하는 데 목적이 있습니다. 피그마는 이를 통해 디자인뿐만 아니라 실제 제품의 빌드와 배포까지 생태계 내에서 직접 수행할 수 있는 중앙 허브로 거듭날 계획입니다. **Figma Sites와 Payload의 기술적 시너지** - Config 2025에서 발표된 '피그마 사이트'와 결합하여, 디자인에서 실제 프로덕션 웹사이트 제작까지의 과정을 비약적으로 단축합니다. - Payload가 제공하는 높은 커스터마이징 자유도와 확장성을 활용해, 개발자들이 기존의 제한적인 CMS 환경에서 벗어나 더 나은 DX(개발자 경험)를 누릴 수 있도록 지원합니다. - 포춘 100대 기업들이 이미 도입하여 신뢰성을 검증받은 Payload의 기술력을 피그마 플랫폼에 이식함으로써 엔터프라이즈급 개발 환경을 구축합니다. **오픈소스 생태계 유지와 커뮤니티 협업** - Payload는 인수 후에도 오픈소스 프로젝트로 유지되며, 기존 사용자들은 현재와 동일하게 서비스를 이용할 수 있도록 독립성을 보장합니다. - 피그마의 협업 중심 철학과 Payload의 오픈소스 커뮤니티 지향점이 결합되어, 사용자 피드백을 기반으로 한 제품 로드맵을 투명하게 공유할 예정입니다. - 피그마는 오픈소스 프로젝트에 지속적으로 투자하여 개발자들이 지식을 공유하고 기술을 발전시킬 수 있는 생태계를 확장하는 데 집중할 계획입니다. **디자인-개발 통합을 통한 제품 제작 가속화** - AI의 발전으로 코드와 콘텐츠 생성이 쉬워진 환경에 발맞추어, 배포 채널을 직접 제어하고 사용자 경험을 세밀하게 튜닝할 수 있는 제어권을 강화합니다. - 단순히 디자인 결과물을 공유하는 단계를 넘어, 피그마 생태계 내에서 직접 디지털 제품을 구축하고 배포할 수 있는 환경을 조성합니다. - 디자인과 개발 사이에 전통적으로 존재해 왔던 간극을 좁힘으로써 제품 제작 팀의 전체적인 생산성을 높이는 것을 최종 목표로 삼고 있습니다. 디자이너와 개발자가 긴밀하게 협업해야 하는 조직이라면 향후 피그마 사이트와 페이로드의 통합 기능을 주목할 필요가 있습니다. 디자인 시스템을 기반으로 실제 웹 서비스를 신속하게 배포하고 관리하려는 팀에게 이번 인수는 매우 강력한 생산성 도구의 탄생을 예고합니다.