반응형

피그마 Figma, 주목받는 UI GUI 디자인 프로그램

 

https://www.figma.com/

 

Figma: the collaborative interface design tool.

Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.

www.figma.com

1) 윈도우OS, 맥OS 대응 + 웹 브라우저를 통한 디자인 진행

  • 웹 기반 브라우저로 사용하여 프로그램 활용 범위가 용이하며 앱 설치를 하지 않아도 됩니다.
    → 스케치는 맥OS에서만 사용 가능하지만, 피그마는 윈도우OS 및 웹 브라우저에서도 사용할 수 있습니다.
  • 웹 브라우저가 아니라도 컴퓨터에 직접 (네이티브) 프로그램을 설치하여 사용할 수도 있으므로 빠르게 작업을 진행할 수 있습니다.

2) 실시간 협업 시스템 (공동 라이브 디자인)

  • 웹 기반 브라우저 프로그램으로서, 피그마 계정 소유자가 링크를 공유하여 여러 명이 아트 보드를 확인하며 동시에 온라인으로 실시간 작업을 진행할 수 있습니다.
  • 개발자가 참조할 수 있는 정보를 주는 ‘개발 툴바’가 있어 개발자와 소통에 매우 효과적입니다.
    마우스 툴바로도 수치값을 확인할 수 있어 가이드라인이 없어도 빠른 작업이 가능합니다.
  • 스케치는 제플린 zeplin이라는 앱을 따로 사용하여 (핸드오프) 작업물을 내보내는 방식으로 개발자와 소통하는 반면, 피그마는 앱 하나에서 바로 핸드오프 기능을  사용할 수 있습니다.

3) 버전 히스토리 관리

  • 히스토리 영역을 통해 협업자 중 누가 무엇을 변경했는지 확인하고, 필요에 따라 날짜&시간별로 기록되어 있는 히스토리를 확인할 수 있습니다. 때문에 버전 관리 필요 없이 히스토리 기능을 사용하여 편리하게 버전 관리가 가능합니다.
  • 포토샵과는 다르게 사용자가 날짜를 지정하여 저장할 수 있으며, 최대 30일까지 히스토리 저장이 가능합니다.
  • 히스토리뿐만 아니라 피그마 파일로도 저장이 가능하므로 필요시 파일로 내보내기 하여 파일을 관리하실 수 있습니다.

4) 최적화된 어댑티브(ADAPTIVE) 레이아웃 시스템

  • 포토샵은 해상도에 맞추어 매번 새롭게 작업을 해야 하는 것에 비해, 피그마는 외곽 선을 조정하는 것만으로도 대부분의 콘텐츠 레이아웃을 크기에 맞게 자동 조정해 줍니다.

5) SKETCH 파일과의 연동

  • 기존에 작업하던 스케치 파일들을 피그마에 임포트 하여 작업할 수 있습니다.
  • 현재 온라인에 배포되어 있는 스케치 UI 키트들을 피그마에서도 사용할 수 있습니다.

6) 프로토타이핑 PROTOTYPING

  • 직관적인 인터페이스로 UI 상호작용 및 애니메이션 제작이 가능합니다.
  • 클릭/호버/버튼 동작 등 단순한 인터렉션을 넣어 프로토타입을 제작할 수 있습니다.
  • 모바일에 최적화되어있어 플레이 시 프레임 및 모멘텀 스크롤과 같은 세부적인 부분의 프로토타입 또한 실제 화면처럼 느낄 수 있습니다.

장점

  • 스케치와 거의 비슷한 인터페이스를 다양한 환경에서 사용하실 수 있습니다.
  • 윈도우와 맥 모두 호환이 가능하여 사용 환경이 넓습니다.
  • 프로그램을 설치하지 않아도 사용할 수 있고, 1인은 무료로 사용 가능합니다. 

단점

  • 스케치에서 옮겨올 시 폰트가 깨질 가능성이 높습니다.
    *특히 한글 폰트는 무조건 깨집니다. 앱으로 사용할 시 폰트 깨짐 현상이 줄어듭니다.
  • 심볼 기능이 없으나, 스케치에서 옮겨온 것은 사용이 가능합니다, 단 Figma → Sketch로 파일을 옮기는 것은 불가능합니다.

출처 : https://medium.com/designcodeio/figma-vs-sketch-c01e5e74eddd#.jufkza6p1

 

Figma VS Sketch

Figma is like Sketch in the browser with real-time collaboration.

medium.com

 

.

반응형

+ Recent posts