디자인 팀이 Figma Make로 새로운 영역을 탐색하는 4가지 방법

Figma Make를 사용하여 디자이너들은 상상에서 현실로 나아가는 새로운 방법을 찾고 있습니다. 지지를 얻는 것이든, 다양한 방향을 탐색하는 것 또는 다기능 파트너와 협업하는 것이든, 프롬프트로 앱 만들기 도구는 디자이너가 기존 디자인 시스템과 일관성을 유지하면서 아이디어를 검증하고 전달하는 데 도움을 줍니다. 이는 중복된 레이아웃 제작과 누들 연결 작업에 소요되는 시간을 줄이고, 안목과 전략, 비전에 더 많은 시간을 쏟을 수 있다는 것을 의미합니다. 업무 흐름에 대한 아이디어를 떠올릴 수 있도록, Maven Clinic, Pendo, ServiceNow, LinkedIn의 디자인 팀이 어떻게 Figma Make를 디자인 파트너로 사용하는지 소개합니다.

1. 아이디어를 다시 로드맵에 올려보세요

여성과 가족을 위한 헬스케어 플랫폼인 Maven Clinic은 회원들이 난임 치료와 임신부터 부모 역할과 소아과 진료, 폐경과 중년 건강에 이르기까지 모든 것을 탐색할 수 있도록 돕습니다. 2024년 초, 그들은 검증된 난임 클리닉의 폐쇄형 네트워크에 회원들을 연결하는 고용주 지원 Maven Managed Benefit 프로그램을 시작했습니다. 촉박한 마감 기한을 맞추기 위해 팀은 지도 기반 난임 클리닉 찾기를 포함한 특정 기능의 출시를 미뤄야 했습니다. 아이디어를 재검토할 때가 되었을 때, Maven 제품 디자인 관리자인 Loric Avanessian은 지지를 모으려면 모형 이상의 것이 필요하다는 것을 알았기에 Figma Make를 선택했습니다.

"디자이너의 초능력은 아이디어와 대화를 구체적인 것으로 바꿔 사람들이 새로운 기능에 대해 흥미를 느끼게 하는 것입니다"라고 Loric는 말합니다. 그녀는 초기 디자인 일부를 Figma Make에 입력하여 사람들이 실제로 상호 작용할 수 있는 완성도가 높은 프로토타입을 만들었습니다. "우리 제품의 일부처럼 보였고 진짜 같았어요"라고 그녀는 덧붙입니다. “그것은 Slack에서 널리 공유되었고, CEO가 댓글을 남겼으며 올해 우선순위인 기능의 기준선 아래로 밀려날 수도 있었는데, 결국 다시 로드맵에 포함시킬 수 있었어요."

Loric은 프로토타입을 다른 디자이너에게 보내어 디자인을 반복해서 수정한 후 Figma Make로 다시 가져왔습니다. 그 프로토타입 덕분에 더 깊게 직무 간 지지를 얻고 더 빠르고 집중된 피드백을 받을 수 있었습니다. "제작을 시작하기 전에는 놓치기 쉬운 마이크로 인터랙션을 정확히 짚어낼 수 있게 되었습니다"라고 Loric은 말합니다. "0이 아닌 45%에서 시작했기 때문에, 2년 동안 백로그에 머물러 있던 클리닉 찾기 MVP를 4번의 스프린트도 채 안 되어 디자인, 개발, 테스트, 출시할 수 있었습니다."

Figma Make를 통해 디자이너 역할의 강조점이 실행에서 안목, 전략, 비전으로 바뀌고 있다고 Loric은 말합니다. 그녀는 Figma Make가 제품 요구 문서(PRD)에 보다 먼저 진행된 최근 프로젝트를 설명합니다. 실제로 팀은 초기 프로토타입에서 잘 작동하는 것과 부족한 것을 기반으로 요구 사항을 작성했습니다. "Figma Make는 여러분이 활용할 수 있는 무언가를 제공하여, 빈 캔버스에서 시작해야 하는 부담을 덜어줍니다"라고 그녀는 말합니다. “또한 여러 아이디어를 매우 빠르게 시도해 본 다음, 다듬고 정교화하는 디자이너의 핵심 기술로 돌아가게 도와줍니다."

2. 미지의 영역을 탐험할 시간을 만드세요

어떤 경우에는 완전히 새로운 제품이라도 참고할 만한 명확한 선례가 있지만, 그렇지 않아 청사진이 불명확한 경우도 있습니다. AI 플랫폼 회사인 ServiceNow가 고객에게 다양한 AI 에이전트의 ROI 개요를 제공하는 대시보드를 디자인하려 했을 때는 후자의 경우에 속했습니다. ServiceNow의 시니어 스태프 프로덕트 디자이너인 Guy Meyer는 "조사하기가 매우 어렵고 미지의 요소들이 많기 때문에, Figma Make가 이 분야에서 아주 큰 도움이 되었습니다"라고 말합니다.

게다가 ServiceNow 내의 여러 팀은 대시보드의 정보 계층 구조 접근 방식에 대해 서로 다른 아이디어를 가지고 있었습니다. "Figma Make는 대시보드에서 사람들이 어떤 것을 봐야 하는지 어느 정도 이해할 수 있는 지도를 제공했습니다"라고 Guy는 말합니다. "55분 만에 우리 아이디어 중 일부를 검증할 수 있었죠." 어떤 것이 작동하는지를 이해하는 것도 명확해졌지만, 초기 프로토타입에 부족한 부분을 확인하는 것은 더 유익했습니다. 예를 들어, Figma Make가 제시한 AI 에이전트 매트릭스는 너무 거대한 그리드가 되어버리기 때문에 확장성이 없을 거라고 Guy는 말합니다. "오늘날 대부분의 회사가 AI 여정을 시작하는 단계에서는 좋은 솔루션이었지만, 우리는 고객이 수천 개의 시스템과 함께 작업할 수도 있는 미래를 위해 기반을 다지려고 했습니다. 그래서 더 맞춤화된 솔루션을 찾기 시작했죠."

사람들이 쉽게 프롬프트로 새로운 아이디어를 낼 수 있다는 점이 '디자인의 대중화를 이루었다'고 Guy가 말합니다. "누구나 자신만의 버전을 프롬프트할 수 있고, 우리가 원하는 부분만 골라낼 수 있습니다. 또한 아이디어에 묶여 있는 자아와 시간 투자를 없애줍니다." 팀이 다양한 방향을 디자인하고 피드백을 받는 데 몇 주가 걸렸었던 데 반해, Figma Make는 그 주기를 2~3일로 단축했습니다. "Figma Make는 우리가 논의할 결과물을 빠르게 실행해 주기 때문에, 다양한 직무의 협업을 조율하는 도구입니다"라고 Guy는 말합니다. "이는 디자이너의 역할을 단순한 실행에서 AI가 만드는 산출물의 품질 향상으로 끌어올려 줍니다."

3. 새로운 인터페이스에서 협업하고 개선하세요

행동 및 에이전틱 분석 활용, 앱 내 가이드 생성, 정성적 피드백 수집을 위한 도구를 통해 Pendo는 제품 팀이 더 정보에 기반한 결정을 내리도록 돕습니다. 시니어 스태프 프로덕트 디자이너 Brian Greenbaum이 현재 에이전트 모드(Agent Mode)라고 불리는 Pendo의 대화형 UI를 제작하는 임무를 맡았을 때, 그는 Figma Make를 선택했습니다. “그것이 적합한 도구였던 이유는 A, Pendo처럼 보이게 하고 싶었고, B, 여러가지 변형을 만들고 싶었으며, C, 경험적 디자인이었기 때문입니다. 메시지가 나타나고 사라지는 타이밍과 방식을 실험해 보고 싶었습니다”라고 그는 말합니다.

Brian은 Figma Design의 프레임에서 시작하여 추론 메시지와 도구 호출 응답이 어떻게 스트리밍될지 반복하기 위한 인터페이스를 Figma Make에서 만들었습니다. 다양한 변형을 시도해 보기 위해 그는 간단히 보기와 자세한 보기, 그리고 텍스트를 한 줄로 둘지, 여러 줄로 쌓을지 선택할 수 있는 드롭다운 메뉴를 추가했습니다. 누구나 파일에 들어가 클릭해 보며 UI가 어떻게 보이고 어떤 느낌을 주는지 파악할 수 있습니다. 결국, 팀은 도구 내에서 사용자가 방향을 잡을 수 있도록 메시지의 지속적인 흔적을 유지하기로 결정했습니다. 디자인 결과물이 없으면 "사람들의 머릿속에 있는 것을 두고 토론하게 됩니다. 제가 당신에게 무언가를 설명하면 당신은 그것이 의미하는 바에 대한 시각적 이미지를 갖고, 저도 저만의 이미지를 갖지만, 그 둘이 일치하지 않을 수 있습니다"라고 Brian은 말합니다.

구체적인 디자인이 있다는 것은 다른 사람들이 Brian의 작업을 기반으로 아이디어를 자유롭게 활용할 수 있다는 것을 의미했습니다. 한 공동작업자가 원형 로딩 아이콘을 Pendo 애니메이션 로고로 바꾸자고 제안했을 때, 그는 빠르게 프롬프트를 입력하여 해당 기능을 전환하는 방법을 만들었습니다. "이전에는 이렇게 다양한 버전이 있을 때, 프로토타입을 만들 가치가 없다고 생각해서, 정적인 디자인만 모형으로 만들곤 했어요"라고 Brian은 말합니다. "하지만 코드를 사용하면 더 빨리 끝낼 수 있죠."

4. 디자인 시스템을 초기 탐색에 통합하세요

LinkedIn에서는 디자인 시스템 팀이 디자이너들이 플랫폼의 나머지 부분과 시각적으로 일치하는 경험을 만들 수 있는 스타일, 데이터, 도구를 제공하는 데 집중합니다. LinkedIn의 스태프 Design 엔지니어 Grant Blakeman은 이렇게 말합니다. "앱의 이 부분에 어떤 패턴이 필요한지 물어보는 것처럼 도구 체계에 대해서도 우리에게 물어봅니다."

이를 위해, 팀은 프롬프트의 첫 실행에서 어떤 디자인이든 세 가지 변형을 자동으로 생성하도록 Figma Make에서 스타터 템플릿을 만들어서 디자이너들이 손쉽게 웹, 모바일, 그리고 태블릿 레이아웃을 조정하고 라이트 및 다크 모드를 전환할 수 있습니다. "우리는 컴포넌트와 스타일뿐만 아니라 제품 패턴도 정확하게 준수하는 보다 결정론적인 결과물을 얻으려 시도했습니다"라고 제품 디자이너 Cherin Yoo가 설명합니다. 그녀는 또한 자주 사용되는 컴포넌트와 내부 CSS 컬러 램프에 대한 가이드라인을 템플릿에 제공했습니다. "LLM은 우리가 정한 경계 내에서 선택하며, 이 템플릿은 그 경계를 좁히는 데 도움을 줍니다"라고 Cherin이 설명합니다. 최근 팀은 리더십 팀을 위한 프리미엄 요금제 가입 페이지 데모에 이 템플릿을 사용했습니다.

프레젠테이션 중 사용자 정보를 비공개로 유지하기 위해 제품 디자이너 Ray Sun은 코드도 맞춤형으로 설정하여 가상 회사와 인물로 구성된 모형 콘텐츠로 디자인을 채우는 메타데이터 세트를 통합했습니다. 이렇게 하면 디자이너들은 Figma Make의 흐름을 유지하면서 템플릿에 법적으로 검증된 데이터를 불러오고 있다는 사실을 알 수 있습니다.

2003년 Design Council은 발견(Discover), 정의(Define), 개발(Develop), 전달(Deliver)이라는 네 가지 뚜렷한 단계를 식별하는 더블 다이아몬드(Double Diamond) 모델을 개발했습니다.

LinkedIn의 디자인 시스템 디렉터 Giuliano Manno는 업무 흐름 관점에서 볼 때 Figma Make는 디자이너가 더 폭넓게 탐색할 수 있게 해 줄 뿐만 아니라 더 효과적으로 소통할 수 있게 해 준다고 말합니다. “전통적인더블 다이아몬드 디자인 사고 패턴에서 Figma Make로 더 빠른 발산 및 탐색 작업을 수행할 수 있어서 두 개의 다이아몬드 꼭짓점을 확장할 수 있습니다"라고 그는 말합니다. "또한 엔지니어 및 제품 관리자와 대화할 때 UX 패턴에 대한 멘탈 모델을 전달하는 데도 매우 좋습니다. “Figma Make를 사용하면 단 5분 만에, 아이디어를 누구나 바로 이해할 수 있는 형태로 표현할 수 있어요.”

“이는 다른 유형의 프로토타입 제작에는 경험하지 못했던 충실도와 사용 편의성이 통합된 커뮤니케이션 도구입니다”라고 Grant는 동의하며, Figma Make와 같은 도구가 디자이너들이 코드를 실험하는 장벽을 낮추고 있다고 봅니다. "저는 디자이너들이 점점 더 기술적으로 발전할 것이라고 생각하며, Figma Make를 사용하는 디자이너들이 코드에 들어가 이것저것 다뤄보는 것을 점점 덜 두려워하는 것을 목격하고 있습니다. 이제 그들은 엔지니어가 많은 시간을 들여야 했거나 애초에 리소스를 배정받지 못했을 데모를 만들 수 있습니다."

Figma Make의 베타 버전은 종료되었으며 현재 모든 사용자가 사용해 보실 수 있습니다.