figma2024년 9월 23일

디자이너를 위한 더 나은 (새 탭에서 열림)

Figma는 디자이너가 아이디어를 실제 화면으로 옮기는 초기 단계를 돕기 위해 AI 기능인 **First Draft**를 재출시했다. 이 기능은 사용자의 프롬프트와 Figma 디자인 시스템을 바탕으로 여러 컴포넌트를 조합해 초안을 만들며, 완성품보다 탐색과 논의의 출발점을 제공하는 데 초점을 둔다. 기존 Make Designs는 다른 앱과 지나치게 유사한 결과가 생성되는 문제로 중단됐지만, 디자인 라이브러리와 생성 방식을 개선해 제한적 베타로 돌아왔다. ## 아이디어를 초안으로 옮기는 장벽 - 좋은 디자인 아이디어가 있어도 첫 화면을 만들기까지 반복적인 작업과 여러 장애물이 발생한다. - 초기 초안은 완성도 높은 결과물보다 다음 목적에 중요하다. - 아이디어를 빠르게 시각화 - 팀 논의 시작 - 다양한 디자인 방향 탐색 - 제품 아이디어를 실제 작업으로 발전 - Figma는 AI가 사용자의 머릿속 아이디어를 새로운 방식으로 표현하고, 초기 탐색 과정을 매끄럽게 만들 수 있다고 본다. ## First Draft의 작동 방식 - First Draft는 고객 콘텐츠를 학습 데이터로 사용하지 않는다. - OpenAI의 GPT-4, Amazon Titan과 같은 범용 AI 모델을 활용한다. - 생성 과정은 세 요소로 구성된다. - **모델**: 결과를 생성하는 AI 모델 - **컨텍스트**: Figma가 제공하는 모바일·데스크톱 디자인 시스템, 컴포넌트, 조합 사례 - **프롬프트**: 사용자가 입력하는 디자인 목표와 요구사항 - AI는 프롬프트를 해석한 뒤 적절한 디자인 시스템 컴포넌트를 선택하고 배치·수정해 초기 디자인을 만든다. - 따라서 빈 캔버스에서 시작하는 대신, 사용자가 편집하고 발전시킬 수 있는 출발점을 제공한다. ## Make Designs의 문제와 재출시 - Figma는 Config 2024에서 Make Designs를 포함한 10개 이상의 Figma AI 기능을 제한적 베타로 공개했다. - Make Designs는 간단한 프롬프트만으로 기본 디자인 초안을 생성하는 기능이었다. - 그러나 내부 디자인 시스템의 문제로 인해 생성 결과가 기존 앱과 지나치게 비슷해지는 문제가 발견됐다. - Figma는 기능을 일시적으로 비활성화하고 분석, 반복 개선, 테스트를 진행했다. - 재출시하면서 이름을 **First Draft**로 변경했다. - 완성된 디자인을 만드는 기능이 아니라 - 디자이너가 아이디어를 시작할 수 있는 “출발점”이라는 목적을 더 정확히 표현하기 위해서다. ## 네 가지 디자인 라이브러리 - 사용자는 필요에 따라 네 가지 라이브러리 중 하나를 선택할 수 있다. - 라이브러리는 낮은 충실도의 와이어프레임부터 시각적으로 구체적인 사이트·앱 디자인까지 범위가 다양하다. - 주요 활용 방식은 다음과 같다. - **로파이 와이어프레임**: 특정 스타일에 덜 구애받고 구조와 흐름을 탐색 - **하이파이 라이브러리**: 더 풍부한 시각 표현과 구체적인 UI 패턴 실험 - 이는 기존 파일이나 컴포넌트를 정확히 찾는 **Visual Search**와 구별된다. - Visual Search: 이미 존재하는 디자인 자산 검색 - First Draft: 아직 정해지지 않은 아이디어와 선택지 탐색 ## 향후 확장 방향 - Figma는 조직이 자체 디자인 라이브러리를 First Draft에 연결할 수 있도록 확장할 계획이다. - 향후 팀은 수백 개의 컴포넌트를 직접 찾지 않고도 회사 고유의 디자인 언어를 반영한 초안을 만들 수 있다. - Google Material 3 같은 표준 디자인 시스템을 활용한 개념 증명도 진행 중이다. - 코드와 연결된 강력한 컴포넌트를 사용하면 디자이너와 개발자가 동일한 디자인 시스템을 기반으로 더 긴밀하게 반복 작업을 할 수 있다. - 궁극적으로 First Draft는 기존 디자인 도구를 대체하기보다 다음을 지원하는 확장 도구로 제시된다. - 정확한 시작점 찾기 - 더 넓은 디자인 선택지 탐색 - 팀의 디자인 언어를 반영한 빠른 반복 ## 현재 상태 - 글의 편집자 주에 따르면 First Draft는 현재 독립 기능이 아니라 **Figma 디자인 에이전트**의 기능으로 통합됐다. - 디자인 에이전트는 기존 First Draft 기능에 다음 능력을 더한다. - 프롬프트 재입력 - 더 깊은 반복 작업 - 여러 요소의 일괄 수정 - 화면 흐름과 디자인에 대한 실시간 피드백 실무에서는 AI가 만든 초안을 최종 디자인으로 받아들이기보다, 빠른 구조 탐색과 팀 논의를 위한 출발점으로 활용하는 것이 적절하다. 특히 조직의 디자인 시스템을 연결할 수 있다면 브랜드 일관성을 유지하면서 초기 아이디어를 더 빠르게 검증할 수 있다.

amazon-titandesign-systemsgen-aiui-ux+2

figma2024년 7월 16일

'디자인 제작' 기능 (새 탭에서 열림)

Figma는 AI 기능 ‘Make Designs’가 실제 앱과 유사한 디자인을 생성하는 문제를 발견해 일시적으로 중단했다. 원인은 모델 자체가 아니라, 충분히 검토되지 않은 디자인 시스템의 컴포넌트와 예시 화면이었다. Figma는 관련 자산을 제거하고 QA 절차를 개선한 뒤, 기능을 ‘First Draft’라는 이름으로 재출시했다. ## Make Designs의 작동 방식 - 사용자의 프롬프트, AI 모델, 디자인 시스템의 컴포넌트와 예시를 결합해 초기 UI 시안을 생성한다. - OpenAI의 GPT-4o와 Amazon Titan 등 상용 모델을 사용했으며, 별도 학습이나 파인튜닝은 진행하지 않았다. - 모바일·데스크톱용으로 제작한 두 개의 디자인 시스템에 수백 개의 컴포넌트와 조합 예시를 포함했다. - 모델은 버튼, 헤드라인, 이미지 등 컴포넌트를 선택·배치하고, 속성과 스타일을 설정해 완성된 화면을 구성한다. - Amazon Titan의 확산 모델이 디자인에 필요한 이미지를 생성한다. - 결과물은 완성품이 아니라 디자이너가 수정하고 발전시키기 위한 ‘첫 초안’을 목표로 했다. ## 실제 앱과 유사해진 원인 - Config 2024 직전 디자인 시스템에 새 컴포넌트와 예시 화면이 추가됐다. - 일부 자산이 실제 서비스의 UI 요소와 충분히 유사했지만, 추가된 자산을 철저히 검토하지 못했다. - 특정 프롬프트를 입력하면 해당 자산이 결과물에 포함될 수 있었다. - 한 디자이너가 날씨 앱을 생성했을 때 Apple의 기본 앱과 유사한 화면이 나온 것을 지적하면서 문제가 드러났다. - Figma는 문제의 원인이 기반 모델의 학습 데이터가 아니라 자체적으로 제공한 디자인 시스템과 예시 자산에 있다고 판단했다. ## Figma의 대응 - 문제를 확인한 즉시 관련 디자인 시스템 자산을 제거했다. - Make Designs 기능을 일시적으로 비활성화했다. - 기능 재개를 보류하고 디자인 시스템에 대한 개선된 QA 프로세스를 마련하기로 했다. - Visual Search, 레이어 이름 변경, 텍스트 번역 등 다른 Figma AI 기능은 제한적 베타로 계속 제공했다. ## 향후 방향과 디자이너의 역할 - Make Designs의 초기 이름은 ‘First Draft’였으며, 완성된 디자인보다 작업을 시작하기 위한 출발점을 의미한다. - 향후에는 기업이 자체 디자인 시스템을 연결해 컴포넌트 검색·조합·설정에 드는 시간을 줄이는 것이 목표다. - AI는 초기 아이디어와 구조를 제시할 수 있지만, 의미 있는 사용자 경험을 만들고 완성하는 일은 여전히 디자이너의 역할이다. - Figma는 제한적 베타를 통해 실제 사용 과정에서 문제를 배우고 개선하겠다고 밝혔다. - 편집자 주에 따르면 기능은 이후 개선 사항과 함께 ‘First Draft’라는 새 이름으로 재활성화됐다. AI 기반 디자인 생성 기능은 모델 성능뿐 아니라 입력되는 디자인 시스템과 예시 자산의 품질 관리가 중요하다. 따라서 자동 생성 결과를 완성품으로 신뢰하기보다, 철저한 QA와 디자이너의 검토를 거치는 초안 생성 도구로 활용하는 것이 바람직하다.

amazon-titanaidesign-systemsgen-ai+3