Figma vs. Sketch vs. Axure – 작업 기반 검토

최근 Toptal 인포그래픽: "최고의 UX 도구"에서 우리는 시장에 나와 있는 다양한 디지털 디자인 도구를 조사했으며 대부분은 개별 UX 디자이너의 일상적인 작업을 지원할 수 있습니다.

소개된 세 가지 도구인 Sketch, Figma 및 Axure는 UX 디자인 워크플로 내 특정 작업에서 탁월하기 때문에 충성도 높은 추종자를 생성했습니다.

그러나 이러한 도구의 성능은 당면한 설계 작업에 따라 다릅니다. 비교 표에 모든 기능을 나열하는 대신 작업 기반 검토를 통해 효율성을 결정합니다.

경쟁업체에 대한 간략한 개요는 다음과 같습니다.

• 네덜란드 헤이그에 기반을 둔 보헤미안 코딩의 스케치. Sketch는 Mac 전용 응용 프로그램입니다.
• 캘리포니아 샌프란시스코에 본사를 둔 Figma by Figma. Figma는 브라우저를 통해 모든 운영 체제에서 실행됩니다.
• Axure by Axure Software Solutions는 캘리포니아주 샌디에이고에 본사를 두고 있습니다. Axure에는 Windows 및 Mac 버전이 있습니다.

플러그인, 추가 기능 또는 타사 앱 없이 기본적으로 일상적인 디자인 작업을 얼마나 잘 수행하는지에 따라 각 도구의 점수를 매깁니다. 작업에는 다음이 포함됩니다.

1. 개념 구상하기
2. 저충실도 산출물 생성
3. 충실도가 높은 결과물 생성
4. 대화형 프로토타입 만들기
5. 디자인 시스템 만들기
6. 개발에 제공

참고: 도구에 작업을 완료하는 데 필요한 기능이 거의 동일한 경우 사용하기 쉽고 더 빠른 제공을 제공하는 도구가 승리합니다. 그 결정이 너무 가까우면 제3자 지원이 결정적인 역할을 합니다.

작업: 개념 관념화 수행

아이디어 구상은 새로운 아이디어를 생성하기 위한 창의적인 프로세스이며 일반적으로 디자이너, 개발자, 제품 소유자 및 프로젝트 관리자로 구성된 학제 간 그룹이 수행합니다.

목표는 기본 요구 사항과 이미 구축 중인 작업을 고려한 후 제품에 사용할 새로운 아이디어를 만드는 것입니다. 예를 들어, 팀은 새로운 앱을 위한 MVP 기능 세트 또는 기존 앱의 차세대 기능을 만들기 위해 개념 구상 세션을 거칠 수 있습니다.

많은 디자이너들이 화이트보드나 종이에 개념을 구상합니다. 그러나 아이디어 구상은 특히 분산된 사무실에서 디지털 방식으로 수행됩니다. 개념 생성은 팀 스포츠이며 제품 소유자/관리자 및 프론트 엔드 개발자와 같은 비 디자이너를 포함합니다. 협업을 촉진하고 사용하기 쉬운 도구가 이 작업에 가장 적합합니다.

승자: 피그마

Sketch와 Axure는 모두 클라우드 공유 서비스를 제공하지만 협업자와 실시간으로 화면을 공유할 수 있는 방법이 없습니다.

Figma에서 공유된 파일은 실시간으로 결합될 수 있으며 모든 참가자의 레이블이 지정된 커서가 표시됩니다. 도구 모음에서 대표 아바타를 클릭하면 보기가 그 사람의 관점으로 전환되어 아이디어를 빠르게 공유할 수 있습니다. 또한 Figma는 비디자이너가 사본을 소유할 것을 요구하지 않습니다. 그들은 파일 링크를 열고 작업을 시작합니다.

Mural 및 Realtimeboard와 같은 다른 화이트보드 협업 도구는 Figma보다 개념 관념화에 더 적합할 수 있지만 디자인 도구의 경우 Figma는 Sketch 및 Axure보다 1마일 정도 더 좋습니다.

작업: 저충실도 산출물 생성

충실도가 높은 결과물은 일반적으로 다른 디자이너와 제품 소유자가 배포하고 검토할 수 있는 와이어프레임 또는 디지털 스케치로 생성됩니다. UX 프로세스에 따라 개발자 및 기타 이해 관계자도 볼 수 있습니다.

와이어프레임은 고화질 목업을 만드는 데 시간을 보내기 전에 상호 작용 모델을 정의할 수 있도록 앱의 기본 구조를 보여주기 위한 것입니다.

저충실도 와이어프레임 생성은 Balsamiq Mockups, Moqups 및 FluidUI를 포함하여 작업 전용 도구로 수행할 수 있습니다. 그러나 Sketch, Axure 및 Figma는 모두 동일한 작업을 수행할 수 있습니다. 특히 사용자가 와이어프레임 구성 요소 라이브러리를 생성할 때 그렇습니다.

와이어프레임은 일반적으로 앱이나 페이지의 초기 UI 레이아웃으로 사용되기 때문에 자주 변경되는 단색 러프 컷입니다. 이는 이해 관계자의 기대치를 확인하는 데 도움이 됩니다.

와이어프레임의 경우 설계자가 변형 설계를 효율적으로 생성할 수 있으므로 사용 용이성, 제공 속도 및 수정이 필수적입니다.

승자: 액셔

Axure는 소프트웨어를 설치한 직후 와이어프레이밍을 위한 사전 패키지 구성 요소를 가지고 있기 때문에 여기서 승리합니다. Sketch와 Figma에는 와이어프레임을 생성할 수 있는 도구 가 있지만 와이어프레임 구성요소를 그리거나 이를 포함하는 파일을 다운로드해야 합니다. 두 경우 모두 Axure 구성 요소처럼 끌어서 놓기 위해 기호(Sketch) 또는 구성 요소(Figma) 라이브러리에 통합되어야 합니다.

Axure에는 저충실도 결과물을 만들기 위한 많은 타사 라이브러리가 있으며 Sketch에는 다운로드할 수 있는 수많은 무료 및 유료 파일이 있지만 Figma의 공개 리소스는 아직 초기 단계입니다.

디자이너가 와이어프레임 구성 요소 라이브러리를 생성하면 세 가지 도구가 고르게 일치됩니다. Axure의 구성 요소에는 매개변수 및 조정 가능한 속성이 있지만 정적 와이어프레임의 경우 세 가지 도구 모두 라이브러리를 사용할 수 있을 때 잘 작동합니다.

작업: 충실도가 높은 결과물 생성

충실도가 낮은 와이어프레임에서 수집한 피드백과 학습을 통해 충실도가 높은 결과물이 탄생합니다. 색상, 시각적 세부 사항 및 앱에 대한 제안된 최종 디자인을 보여주는 모형입니다.

충실도가 높다는 것은 프레젠테이션이 준비되어 고객, 내부 경영진 및 기타 비디자이너 이해 관계자에게 표시되는 화면 모형을 의미합니다. 이 작업에 탁월한 디자인 도구는 최종 고객 대면 결과물을 만드는 데 필요한 세련미를 추가하는 데 필요한 모든 기능을 갖추고 있습니다.

여기에는 개체 채우기 및 획에 대한 제어, 그림자 및 그라디언트 채우기와 같은 효과 추가, 쉽게 소화되는 형식(png, pdf, jpg)으로 아트 내보내기가 포함됩니다.

승자: 피그마

Sketch와 Figma는 고충실도 목업을 만들 수 있는 거의 동일한 도구 세트를 가지고 있지만 Figma의 상호 작용 모델은 더 세련되고 도구는 처음부터 사용하기 더 쉽습니다. 두 도구 모두 Join, Intersect, Union 및 Subtract와 같은 고급 편집 및 부울 명령에 쉽게 액세스할 수 있습니다. Sketch의 플러그인 지원을 통해 타사에서 추가 기능을 만들 수 있지만 이러한 도구는 설치 직후에 사용할 수 없습니다.

세 가지 도구 모두 사용자 정의 개체 생성을 허용하는 기능이 있지만 Axure에서는 명령에 액세스하기가 다소 어렵습니다. 위에서 언급한 편집은 도구 모음에서 사용할 수 없습니다. 여러 개체를 선택한 경우에만 컨텍스트 메뉴를 통해 액세스할 수 있습니다.

또한 Figma의 벡터 네트워크는 라인 도구로 작업하는 것을 쉽게 만듭니다.

작업: 대화형 프로토타입 생성

대화형 프로토타입은 종이 프로토타입만큼 조잡하거나 새로운 기능을 탐색하기 위해 변경된 기존 앱의 분기 버전만큼 상세할 수 있습니다. 일반적으로 대화형 프로토타입을 통해 사용자는 화면에서 화면으로 탐색하고 메뉴 및 목록과 같은 기능을 사용할 수 있습니다.

많은 디자이너의 경우 작업을 발표할 때 기본적인 대화형 슬라이드쇼로 충분합니다. 단순한 전환으로 디자인을 설명하기에 충분한 장치 상호 작용을 제공하기 때문에 모바일 앱의 경우 특히 그렇습니다.

Figma의 프로토타이핑 모델은 잘 통합되어 사용이 간편하며, 실시간 클라우드 기반 앱이기 때문에 파일 업데이트 시 HTML 페이지를 새로 고칠 필요가 없습니다.

때때로 이해 관계자는 설계의 확장성을 테스트하기 위해 실제 데이터가 포함된 프로토타입을 로드하는 라이브 데이터 연결을 원하지만 대다수의 디자이너는 이제 복잡한 프로토타입이 거의 필요하지 않습니다.

승자: 피그마

Sketch와 Figma는 모두 "오브젝트에서 아트보드로" 연결과 제한된 전환 세트로 간단한 프로토타이핑을 지원합니다. 플러그인은 Sketch의 간단한 프로토타입 제작 기능을 강화하는 데 도움이 되지만 프로토타입을 위한 강력한 상호 작용 모델을 제공하는 데 있어 Axure가 가장 강력합니다.

작업: 디자인 시스템 만들기

디자인 시스템은 UX 디자인 영역에서 비교적 새롭지만 수십 년 동안 존재해 왔습니다. 여기에는 팀이 협업하고 더 나은 결정을 내릴 수 있도록 지원하는 공유 디자인 언어, 구성 요소, 리소스 및 지침이 포함됩니다. 디자인 시스템 라이브러리는 일반적으로 웹사이트로 구현되며 회사 전체에서 제품에 대한 단일 정보 소스 역할을 합니다.

승자: 피그마

구성 요소 라이브러리는 모든 프로그램에서 구축할 수 있지만 그 중 어느 것도 설계자가 처음부터 스위치를 전환하고 실행 가능한 구성 요소 라이브러리를 생성하도록 허용하지 않습니다. Axure는 사용자 정의 구성 요소가 있는 HTML 페이지를 생성할 수 있지만 단일 구성 요소를 쿼리하여 색상 값, 크기 및 기타 속성을 찾을 수 있는 방법은 없습니다.

이러한 도구를 사용하여 설계 시스템을 구축하는 것은 여전히 ​​수동 프로세스입니다. 그러나 Sketch용 플러그인(예: Google에서 최근에 출시한 Material Design 플러그인)과 적어도 하나의 타사 도구가 Figma용으로 작업 중입니다.

좋은 디자인 시스템의 핵심은 협업이기 때문에 Figma가 승리합니다. 여러 분야(디자인, 개발, 품질, 콘텐츠)의 회사 직원이 디자인 시스템 라이브러리에 액세스해야 하며 많은 직원이 공유 라이브러리와 동기화되는 디자인 구성 요소 파일에 추가할 것입니다. Figma는 라이선스 보유자뿐만 아니라 누구나 사용할 수 있어 공유 파일에 쉽게 액세스하고 추가할 수 있습니다.

작업: 개발팀에 전달

UI 디자이너가 인터페이스 생성을 마치면 프로젝트가 완료될 수 있도록 디자인 파일을 개발자에게 전달하는 것이 그들의 책임입니다. 그러나 핸드오프는 단순한 데이터 교환 이상이며 디자이너가 작업의 근거를 전달하여 개발자가 형식과 기능을 결합하는 데 도움이 되는 기회입니다.

Sketch 및 Figma 파일(Avocode 및 Zeplin 참조)에서 레드라인 및 개체 정보 쿼리를 용이하게 하는 수십 가지 핸드오프 방법과 훨씬 더 많은 타사 도구가 있습니다. 그러나 이 비교에서는 플러그인이나 다른 앱으로 보완되기 전의 원래 디자인 도구를 살펴보고 있습니다.

흥미롭게도 UX 디자인 시스템의 부상은 게시된 구성 요소 라이브러리가 개발자를 위한 단일 정보 소스이기 때문에 이러한 형태의 전달에 대한 필요성을 완화합니다. 결과물이나 UX 상담을 기다리지 않고 컴포넌트의 정확한 레이아웃과 디자인 정보를 추출할 수 있습니다.

또한 디자인 파일의 객체에서 정보를 얻는 것은 디자인 시스템을 구축하는 동안 도움이 될 수 있으므로 CSS를 어느 정도 보는 것이 좋습니다.

스케치를 사용하면 개체를 선택하고 상황에 맞는 메뉴를 사용하여 "CSS 속성 복사"를 할 수 있지만 이상적이지는 않습니다. Figma는 속성 패널에서 선택한 개체에 대한 CSS, iOS 또는 Android 값을 생성하는 "코드" 탭을 제공하여 공정한 작업을 수행합니다(개발자는 보기 전용 또는 프로토타입 모드에서 이 기능을 사용할 수 있음).

승자: 액셔

현재로서는 Axure만이 완전히 게시 가능한 HTML 파일, Word 사양 및 스프레드시트로 가져올 CSV 형식 보고서를 생성하는 강력한 "생성기"를 보유하고 있습니다. 결과는 디자인 라이브러리가 아니지만 앱은 유용한 개발자 핸드오프 자료를 제공합니다.

전체 디자인 도구 우승자: Figma

숫자로 볼 때 Figma는 협업 특성과 플랫폼 간 가용성으로 인해 이 비교에서 승자가 되었습니다. 더 많은 팀이 프론트 엔드 개발 및 디자인 전반에 걸쳐 더 긴밀한 통합을 요구하는 디자인 시스템을 사용함에 따라 Figma의 실시간 협업 및 라이브 임베딩 기능은 큰 이점을 제공합니다. 단점으로 Figma는 보안상의 이유로 기업에서 사용이 금지될 수 있는 온라인 애플리케이션입니다.

Axure는 사전 구축된 구성 요소, 강력한 대화형 프로토타이핑 기능 및 문서 생성을 통해 즉시 사용할 수 있는 강력한 기능으로 인해 2위를 차지했습니다. 회사가 특정 기능이 어떻게 작동하는지 확인하기 위해 실제 데이터 저장소에 액세스해야 하는 드문 경우에는 Axure가 최선의 또는 유일한 옵션입니다.

Sketch가 가장 늦게 나왔을 수도 있지만 사용자가 도구에 사용할 수 있는 많은 플러그인과 리소스를 활용하면 매우 강력하며 디자인 그룹의 요구 사항을 충족하도록 맞춤 설정할 수 있습니다. 여기서 주의할 점은 모든 Sketch 업데이트 후에 플러그인을 업데이트해야 하며, Mac 전용 응용 프로그램으로 Windows PC를 사용하는 회사에서는 사용할 수 없다는 것입니다.

이 기사에서 검토한 세 가지 도구는 모두 그 자체로 강력합니다. 그러나 각각에는 한계가 있습니다. 워크플로 요구 사항을 식별하고 각 프로그램의 장단점을 비교하여 적절한 선택을 하는 것은 개별 디자이너와 팀의 몫입니다.

Toptal Design 블로그에 대한 추가 정보:

• MVP는 버리고 최소 실행 가능한 프로토타입(MVPr) 채택
• 디자인 도구로서의 Figma의 힘
• 스케치 스타일 가이드, 라이브러리 및 UI 키트를 만드는 방법
• 디자인 시스템 및 패턴 이해하기
• 와이어프레임에 죽음. 고화질로 바로!