최근에 Figma에서 다시 커다란 기능 업데이트를 선보였습니다.
이번 글에서는 그 중 ‘Figma Buzz’와 ‘Figma Sites’ 두 기능이 디자인 시스템 운영, 배포, 관리 관점에서 어떤 가능성과 방향성을 시사하는지 KRDS 구축 경험을 바탕으로 이야기해보려 합니다.
1. Figma Buzz (대규모로 만들고 공유하는 온브랜드 에셋)
디자인 시스템의 핵심은 서비스의 일관성 유지, 업무 효율 향상, 조직 내 활용도 및 확산 이라고 생각합니다.
그런 점에서 Buzz는 기존의 단순한 디자인 라이브러리 공유를 넘어, 디자이너뿐만 아니라 마케터나 콘텐츠 제작자 등 다양한 팀원들이 디자인 가이드를 준수하면서도 대량의 콘텐츠를 손쉽게 제작할 수 있도록 도와준다는 점에서 의미 있는 업데이트라고 느꼈습니다.
✅ 디자인 시스템 관점에서 본 ‘Buzz’의 특징들
- 온브랜드 콘텐츠를 위한 템플릿 시스템
Figma Buzz는 디자인 시스템 기반 템플릿을 간편하게 제작하고, 팀 단위로 게시할 수 있는 기능을 제공합니다. 디자인 경험이 없는 사용자도 제공된 템플릿을 활용하거나 직접 제작해, 브랜드 가이드에 맞는 콘텐츠를 손쉽게 제작·수정할 수 있습니다.
또한 Buzz는 AI 도구를 활용해 텍스트를 재작성하거나 이미지를 생성하는 등의 기능을 지원합니다. 이러한 기능은 콘텐츠 제작 과정에서의 반복 작업을 줄이고, 더 빠르고 유연하게 온브랜드 에셋을 완성할 수 있도록 도와줍니다.
- 편집 제한 + 유연한 제어
Figma Buzz에서는 템플릿 내 객체마다 편집 가능 여부를 세부적으로 설정할 수 있는 기능을 제공합니다. 예를 들어, 브랜드 로고나 컬러처럼 고정되어야 하는 요소는 잠그고, 텍스트나 이미지 영역만 수정할 수 있도록 설정해 브랜드 가이드를 유지하면서도 유연한 콘텐츠 제작이 가능합니다.
디자인 경험이 없는 사용자도 정해진 범위안에서 콘텐츠를 빠르게 제작할 수 있도록 돕는 환경이라는 점이 인상적이었으며, 이러한 편집 제한 기능은 디자인 시스템의 일관성과 접근성을 동시에 높여주는 요소로, 템플릿 기반의 제작 흐름을 실무에 보다 안정적으로 적용할 수 있게 해줍니다.
최근에 S증권사에서 디자인이너가 아닌 현업들이 이벤트 배너와 페이지를 손쉽게 제작할 수 있도록 이벤트 탬플릿 제작을 요청해와 작업한 적이 있는데 Buzz가 이런 작업을 시스템화 하기에 좋은 툴이 되지 않을까 합니다.
- 스프레드시트 기반 일괄 생성
Figma Buzz의 대량 생성 기능은, 하나의 에셋을 템플릿으로 설정한 뒤, CSV 또는 XLSX 파일에 입력된 텍스트와 이미지 데이터를 활용해 여러 개의 콘텐츠를 자동으로 생성할 수 있도록 지원합니다.
예를 들어, 배너 하나를 템플릿으로 설정하고 상품명, 날짜, 이미지 경로 등의 정보를 스프레드시트에 입력하면, Buzz가 해당 데이터를 바탕으로 수십~수백 개의 에셋을 자동으로 생성해줍니다. 생성된 에셋은 이후 개별 편집이나 다운로드도 가능해, 반복 작업에 드는 시간을 줄일 수 있습니다. 디자인 시스템 기반 템플릿에 데이터 자동화 기능이 더해지면서, 마케팅·홍보·이벤트 운영 등 다양한 팀에서도 빠르고 일관된 콘텐츠를 손쉽게 제작할 수 있을 것으로 기대됩니다.
2. Figma Sites (웹사이트 디자인, 프로토타입 제작, 게시를 위한 올인원 도구)
Figma Sites 는 디자인부터 실제 구현까지의 전 과정을 하나의 흐름 안에서 처리할 수 있는 올인원 웹사이트 제작 도구입니다. 디자인 시스템에 연결된 라이브러리를 그대로 불러와 활용할 수 있고, 클릭 한 번으로 결과물이 실시간 반영되는 방식은, 디자인 시스템의 활용 범위를 실제 서비스 제작 단계까지 확장시켰다는 점에서 특히 인상 깊었습니다.
사실 저희는 2024년 KRDS 구축 과정에서 이와 유사한 방향성을 미리 시도해 본 경험이 있습니다. 디자인 시스템을 단순한 가이드 수준에 머무르지 않고, 디자인 토큰을 JSON으로 추출해 CSS 변수로 변환하고, 컴포넌트 토큰을 직접 정의하여 ’서비스에 곧바로 적용할 수 있는 코드 기반 시스템’ 으로 구현하는 데 집중했습니다.
이러한 시도는 여러 직군이 긴밀히 협업하며 기술적 한계와 구조적 고민을 끊임없이 조율해야 하는, 쉽지 않은 과정이었습니다. 그럼에도 불구하고 디자이너와 개발자 간의 연결을 실질적으로 실현해낸 의미 있는 작업이었으며, 실제 서비스에 일관된 디자인을 안정적으로 반영할 수 있다는 점에서 큰 보람이 있었습니다.
다만, KRDS는 실무 작업자 중심으로 설계된 디자인 시스템임으로, 작업자가 아닌 이도 손쉽게 구현하는 것에 목적을 두고 제작된 것은 아니었습니다. 그런 점에서 이번에 공개된 Figma Sites는, 저희가 경험했던 구현 방식을 더욱 직관적이고 사용자 친화적인 형태로 풀어낸 도구로 느껴졌습니다.
이제는 디자이너나 기획자뿐만 아니라, 다양한 팀원들도 퍼블리셔나 개발자의 도움 없이 디자인 시스템을 기반으로 웹 화면을 직접 구성해볼 수 있는 환경이 마련되었다는 점에서, 매우 의미 있는 변화라 생각합니다.
✅ 디자인 시스템 관점에서 본 Sites의 특징들
- 요소에 상호 작용 추가
Figma Sites는 버튼, 이미지, 텍스트 등 다양한 요소에 애니메이션, 전환 효과, 시각적 변형 등의 상호작용을 손쉽게 추가할 수 있는 기능을 제공합니다.
이를 디자인 시스템 내에서 정의한 컴포넌트에 적용해보았습니다. 예를 들어 버튼 컴포넌트에 Default, Hover, Pressed 상태를 설정하고, 각 상태에 맞는 액션(예: 색상 변경, 크기 확대 등)을 지정한 뒤 화면에 배치하니, 미리보기에서 즉시 동작을 확인할 수 있었고, 웹사이트에 게시한 후에도 상호작용이 그대로 작동하는 것을 확인할 수 있었습니다.
물론, Figma에서 상호작용을 적용하는 기능 자체는 새로운 것이 아닙니다. 하지만 이번 업데이트를 통해 이러한 상호작용을 포함한 컴포넌트로 프로토타입을 빠르게 제작하고, 이를 웹에 그대로 적용할 수 있게 되었다는 점에서, 디자인시스템과 실 서비스 구현 간의 흐름이 훨씬 유기적으로 연결되었다고 느꼈습니다.
특히, 디자인 시스템에서 정의한 컴포넌트를 복사해 붙여넣기만 해도, 인터랙티브한 UI를 실제 환경에서 구현할 수 있다는 점은 작업 효율성을 높이는 데 있어 유의미한 변화였습니다. 다만, 이러한 방식이 실제 업무 플로우를 얼마나 간소화할 수 있을지는 앞으로 다양한 프로젝트에서의 테스트와 경험을 통해 더 구체화해 나가야 할 부분이라 생각합니다.
- 여러 브레이크포인트에서 객체를 동시에 추가·편집
Figma Sites는 여러 브레이크포인트에서 객체를 동시에 추가·편집할 수 있는 기능을 제공합니다. 특정 브레이크포인트에 인스턴스를 배치하면, Figma가 각 브레이크포인트(예: Desktop, Tablet, Mobile)에 맞는 변형을 자동으로 변환해 삽입해주는 기능도 함께 지원됩니다. 이 기능이 작동하려면 브레이크포인트 명칭과 컴포넌트의 변형 속성 값이 일치해야 하므로, 컴포넌트 제작 시 이를 미리 반영해두는 것이 중요합니다.
직접 사용해보니, 하나의 동작으로 여러 화면에 컴포넌트를 배치하고, 수정 시에도 일괄 반영되는 점이 매우 편리했습니다. 다만, 브레이크포인트별로 컴포넌트를 따로 구성해야 하기 때문에 컴포넌트 수가 많아질수록 관리 부담이 커질 수 있겠다는 우려가 들기도 했습니다. 그럼에도 화면 수가 많은 프로젝트나 반응형 프로토타입 제작에서는 작업 시간을 줄이고, 실제 구현과의 간극을 좁히는 데 유용하게 활용될 수 있을 것이라 발전될 모습이 더욱 기대되었습니다.
- 실시간 미리보기 & 웹 퍼블리시
Figma Sites는 디자인, 프로토타입, 구현 과정을 하나의 흐름 안에서 연결하며, 디자인 결과물을 실시간으로 미리보고, 웹사이트 형태로 바로 게시할 수 있는 기능을 제공합니다. 브레이크포인트별 화면을 쉽게 확인할 수 있는 인터페이스로, 다양한 디바이스에서 어떻게 렌더링될지 즉시 확인할 수 있다는 점이 특히 인상적이었습니다.
직접 사용해본 결과, 피그마에서 제공하는 템플릿을 활용해 프로토타입을 게시해보았을 때, 미리보기에서 본 화면과 실제 게시된 웹사이트가 거의 동일한 수준으로 구현된 것을 확인할 수 있었습니다. 디자인 환경 안에서 결과물을 바로 경험할 수 있다는 점은, 디자인과 구현 간의 간극을 줄이는 데 매우 유용한 흐름이라고 느껴졌습니다.
물론 향후 다양한 프로젝트에서도 오류 없이 정확하게 렌더링될지 지속적으로 확인하고 보완해갈 필요는 있겠지만, 디자인만으로 웹서비스에 가까운 결과물을 구현하고 검토할 수 있다는 점에서, 실무 활용에 대한 가능성과 확장성이 충분히 기대되는 기능이었습니다.
- 디자인 시스템과 템플릿으로 시작하는 웹사이트 제작
Figma Sites는 디자인 시스템을 기반으로 일관된 화면을 빠르게 구성할 수 있는 환경을 제공합니다. 미리 제작해둔 라이브러리에 정의된 버튼, 입력창, 카드 UI 등을 그대로 불러와 사용할 수 있으며, 50가지 이상의 고품질 템플릿과 함께 타이포그래피, 컬러 등 파운데이션 요소도 포함되어 있어, 초기 세팅 없이도 바로 웹사이트를 구축할 수 있다는 점이 큰 장점입니다.
템플릿을 사용해보니, 스타일과 구성 요소가 미리 준비된 상태에서 작업을 시작할 수 있어, 웹사이트 제작의 진입 장벽이 낮아졌고, 디자인 시스템을 기반으로 한 웹 화면 구현도 훨씬 수월했습니다.
디자인 시스템, 어느 방향으로 발전하고 있을까요?
이번 업데이트를 통해 디자인과 구현 사이의 간극이 많이 줄었고, 한번의 클릭만으로 실제 서비스에 빠르게 반영할 수 있게 된 점은 매우 큰 장점이었습니다.
기존 디자인 시스템은 디자이너와 개발자 간의 소통, 일관성 유지, 컴포넌트 공유에 중점을 둔 협업 중심 도구였습니다. 가이드라인을 제공하고 디자인 언어를 정의하는 ‘정의의 프레임워크’ 로서의 역할을 해왔습니다.
하지만 Buzz와 Sites는 이제 디자인 시스템이 ‘단순히 가이드를 제공’하는 것을 넘어서, 실제 결과물을 만들어내는 ‘생산 기반의 도구’로 변화하고 있다는 점을 보여줍니다.
디자인 시스템에 정의된 템플릿, 컴포넌트, 토큰이 실제 배너나 웹사이트 제작에 바로 연결되고, 이제는 디자이너가 아니어도 누구나 이를 활용해 결과물을 만들 수 있게 되었습니다. 이러한 변화는 디자인 시스템이 ‘협업 도구’를 넘어, ‘콘텐츠 생산 플랫폼’으로 확장되는 중요한 전환점이라 생각되었습니다.
마무리하며
Buzz와 Sites를 잘 활용한다면, 디자인 시스템은 더 이상 일부 팀만을 위한 도구가 아니라 모든 팀원이 함께 사용하는 자산이 될 수 있습니다. 디자이너는 이제 가이드를 정의하는 역할을 넘어, 조직의 콘텐츠 생산 인프라를 설계하는 중심이 되어가고 있는 듯 합니다.
