디자인 도구로서의 Figma의 힘

Figma는 기능 및 기능면에서 Sketch와 유사한 클라우드 기반 설계 도구이지만 팀 협업에 Figma를 더 좋게 만드는 큰 차이점이 있습니다. 그러한 주장에 회의적인 사람들을 위해 우리는 Figma가 어떻게 디자인 프로세스를 단순화하고 디자이너와 팀이 효율적으로 협력하도록 돕는 다른 프로그램보다 더 효과적인지 설명할 것입니다.

자세히 살펴보겠습니다.

Figma는 모든 플랫폼에서 작동합니다.

Figma는 웹 브라우저를 실행하는 모든 운영 체제에서 작동합니다. Mac, Windows PC, Linux 머신, 심지어 Chromebook에서도 Figma와 함께 사용할 수 있습니다. 이 작업을 수행하는 유형의 유일한 디자인 도구이며, 다른 운영 체제를 실행하는 하드웨어를 사용하는 상점에서 모든 사람 이 여전히 Figma 파일을 공유하고 열고 편집할 수 있습니다.

많은 조직에서 디자이너는 Mac을 사용하고 개발자는 Windows PC를 사용합니다. Figma는 이러한 그룹을 하나로 묶는 데 도움이 됩니다. Figma의 보편적인 특성은 PNG-pong(업데이트된 이미지가 디자인 팀 분야 간에 앞뒤로 바운스되는 곳)의 성가심도 방지합니다. Figma에서는 모든 사람이 디자인 작업을 사용할 수 있도록 중재 메커니즘이 필요하지 않습니다.

Figma의 협업은 간단하고 친숙합니다.

Figma는 브라우저 기반이기 때문에 팀은 Google 문서에서와 같이 협업할 수 있습니다. 파일을 보고 편집하는 사람들은 앱 상단에 원형 아바타로 표시됩니다. 각 사람은 또한 명명된 커서를 가지고 있으므로 누가 무엇을 하고 있는지 쉽게 추적할 수 있습니다. 다른 사람의 아바타를 클릭하면 그 시간에 보고 있는 것으로 확대됩니다.

실시간 파일 협업은 합의된 설계를 잘못 해석하거나 이탈하는 것으로 정의되는 "설계 드리프트"를 완화하는 데 도움이 됩니다. 디자인 드리프트는 일반적으로 프로젝트가 진행되는 동안 아이디어를 구상하고 신속하게 구현할 때 발생합니다. 불행히도 이것은 종종 기존 설계에서 벗어나 마찰과 재작업을 유발합니다.

디자인 리드는 Figma를 사용하여 공유 파일을 열기만 하면 팀이 무엇을 디자인하고 있는지 실시간으로 확인할 수 있습니다. 디자이너가 브리핑이나 사용자 스토리를 어떻게든 잘못 해석하는 경우 이 기능을 통해 디자인 리드가 개입하고 방향을 수정하며 낭비했을 수많은 시간을 절약할 수 있습니다. (비교하면 Sketch를 사용하는 팀은 디자이너가 잘못된 방향으로 가고 있는지 즉시 알 수 있는 방법이 없습니다.)

참고 사항: 일부 디자이너는 작업할 때 "감시받는" 것을 좋아하지 않으므로 이점을 설명하는 것은 디자인 책임자에게 달려 있습니다. 일반적으로 대부분의 설계자는 이러한 기능의 가치를 빠르게 파악하고 공유 환경에서 작업하는 데 쉽게 적응합니다.

Figma는 팀 커뮤니케이션을 위해 Slack을 사용합니다

Figma는 Slack을 커뮤니케이션 채널로 사용합니다. Slack에서 Figma 채널을 만들면 Figma에서 작성된 모든 의견이나 디자인 편집이 팀에 "슬랙스(slack)"됩니다. Figma 파일을 변경하면 파일이 포함된 다른 모든 인스턴스가 업데이트되기 때문에 이 기능은 라이브를 디자인할 때 매우 중요합니다(개발자에게 잠재적인 골칫거리). 보증 여부에 관계없이 모형에 대한 변경 사항은 즉시 검토되고 피드백 채널이 활성화됩니다.

Figma 공유는 복잡하지 않고 유연합니다

Figma는 또한 모든 파일, 페이지 또는 프레임(다른 디자인 도구에서는 아트보드라고 함)의 권한 기반 공유를 허용합니다. 페이지의 프레임에 대한 공유 링크가 생성되면 해당 링크를 클릭하는 사람이 Figma의 브라우저 버전을 열고 프레임의 확대 보기가 로드됩니다.

파일에서 프레임까지 이러한 형태의 선택적 공유를 통해 디자이너, 제품 소유자 및 개발자는 버그 추적 도구 및 Confluence 또는 SharePoint와 같은 커뮤니티 소프트웨어에 필요한 것을 정확히 공유할 수 있습니다.

내장된 Figma 파일은 실시간 업데이트를 제공합니다.

Figma는 또한 타사 도구에 iFrame을 붙여넣는 라이브 임베드 코드 스니펫을 공유합니다. 예를 들어 Confluence가 포함된 목업 파일을 표시하는 데 사용되는 경우 해당 파일은 Figma 파일을 저장하여 "업데이트"되지 않습니다. 이러한 포함된 파일은 Figma 파일입니다.

Figma의 누군가가 목업을 변경하면 해당 변경 사항은 포함된 Confluence 목업에서 실시간으로 볼 수 있습니다. (여기에서 Figma와 Confluence 통합에 대한 자세한 내용을 읽을 수 있습니다.)

이 기능이 UX 프로세스에 미치는 영향은 다음 다이어그램에 나와 있습니다.

Figma 이전 에는 디자인 목업 및 업데이트를 쉽게 교환하기 위해 몇 가지 다른 도구가 사용되었습니다. 반복 주기는 일련의 앞뒤 파일 업데이트였으므로 팀은 현재 디자인을 검토하고 구현할 수 있었습니다.

Figma 이후 에는 타사 도구가 더 이상 필요하지 않습니다(그러나 원하는 경우 사용할 수 있음). Figma는 앞서 설명한 타사 도구의 기능을 처리하기 때문에 한 단계만 진행하면 됩니다. 즉, 스케치에서 Figma로 이동하면 모든 그룹에 최신 모형이 있습니다. 단어의 가장 엄격한 의미에서 "인계"는 없습니다.

Figma는 설계 검토 피드백에 적합합니다.

Figma는 디자인 모드와 프로토타이핑 모드 모두에서 인앱 댓글을 지원하며 댓글 스레드는 Slack 및/또는 이메일에서 추적됩니다. InVision 또는 Marvel과 같은 타사 도구를 사용하여 팀으로부터 피드백을 받기 위해 PNG 파일을 게시하거나 지속적인 업데이트를 수행할 필요가 없습니다.

디자인 검토 중에 팀 디자이너는 대형 화면에서 작업에 대해 논의하고, 의견을 기록하고, 문제를 수정할 수 있습니다. 이 모든 것이 Figma에서 이루어집니다. 이러한 형태의 실시간 피드백은 팀 의견을 얻기 위해 클라우드 서비스에 업로드해야 하는 Sketch에서는 불가능합니다.

Figma를 사용하여 개발자 핸드오프 촉진

Figma는 개발자가 디자인 파일을 검토할 때 사용할 수 있도록 CSS, iOS 또는 Android 형식의 선택한 프레임 또는 개체에 코드 조각을 표시합니다. 디자인 구성 요소는 볼 수 있는 모든 파일에서 모든 개발자가 검사할 수 있습니다. 정보를 얻기 위해 타사 도구를 사용할 필요가 없습니다. 그럼에도 불구하고 팀이 단순한 측정 및 CSS 표시 이상을 수행하려는 경우 Figma는 Zeplin과 완전히 통합됩니다.

Figma 프로젝트 파일은 한 곳에 온라인으로 저장됩니다.

Figma는 온라인 앱이므로 전용 보기에서 프로젝트와 해당 파일을 표시하여 파일 구성을 처리합니다. Figma는 또한 Sketch와 같이 파일당 여러 페이지를 지원하므로 Agile 팀은 프로젝트를 논리적으로 구성할 수 있습니다.

• 기능 테마 에 대한 프로젝트를 만듭니다.
• 에픽 또는 대규모 기능에 대한 파일을 만듭니다.
• 각 사용자 스토리 에 대해 해당 파일에 페이지를 만듭니다.

이것은 프로세스 요구 사항에 따라 다소 세분화될 수 있는 파일을 구성하는 한 가지 방법일 뿐입니다.

Figma API는 타사 도구 통합을 제공합니다.

Figma에는 이제 모든 브라우저 기반 앱과의 진정한 통합을 허용하는 개발자 API가 있습니다. 회사는 이를 사용하여 앱에서 디자인 파일의 실시간 표시를 통합하고 있습니다. 예를 들어, Uber는 회사 주변에 "라이브 온에어" 디자인 파일을 표시하는 대형 화면을 가지고 있습니다. 디자인을 공유하고 회사 내 모든 사람의 피드백을 환영합니다.

Atlassian의 JIRA 소프트웨어는 Figma 애드온을 구현하여 제품 소유자, 개발자 및 품질 엔지니어가 항상 디자이너의 모든 모형의 최신 버전을 볼 수 있도록 합니다.

또한 Figma의 API는 Sketch가 이미 제공하는 타사 플러그인 및 기능 향상에 대한 고객 요청을 이행할 것을 약속합니다.

파일 버전 관리는 자동 또는 주문형입니다.

라이브 파일 업데이트를 둘러싼 모든 불확실성은 Figma의 내장 버전 관리 시스템에 의해 더욱 완화됩니다. 디자이너는 언제든지 Figma 파일의 명명된 버전과 설명을 만들 수 있습니다. 이는 합의된 설계 변경 직후에 수행할 수 있습니다.

공유 환경의 라이브 파일은 변경 사항이 원래 버전에 의도적으로 커밋될 때까지 영향을 받지 않습니다. 자동으로 저장된 버전을 복원하여 복제본을 생성하거나 원본을 덮어쓸 수도 있습니다.

Figma의 프로토타이핑은 간단하고 직관적입니다.

Sketch는 최근에 아트보드 프로토타이핑에 아트보드를 추가했지만 Figma는 프레임 간 전환을 제공하여 더 나아갔습니다. Figma의 간단한 프로토타이핑 기능은 InVision 또는 Marvel과 같은 슬라이드쇼 스타일 프로토타이핑을 수행하는 다른 도구의 필요성을 제거합니다. 전환이 포함된 간단한 프레젠테이션만 있으면 검토 도구로 내보낼 필요가 없습니다.

Figma 프로토타입은 Figma 디자인 파일처럼 배포할 수 있습니다. 링크 권한이 있는 사람은 누구나 프로토타입을 보고 댓글을 달 수 있으며 해당 피드백은 도구의 댓글 패널에서 캡처되고 Slack에 기록됩니다. 개발자는 디자인 워크플로를 보고, 디자이너에게 직접 @messages를 남겨두고, 프로토타입 내부에서 측정 및 CSS 속성을 가져올 수 있습니다.

Figma의 팀 라이브러리는 디자인 시스템에 이상적입니다

디자인 시스템 은 많은 회사에서 필수품이 되었으며 UX 디자이너와 프론트 엔드 개발자가 사용할 수 있는 패턴 라이브러리에서 사용하기 위해 재사용 가능하고 확장 가능하며 "토큰화"되는 구성 요소(Sketch 및 Illustrator의 기호)가 필요합니다.

자주 사용되는 "단일 소스"라는 문구가 여기에 적합합니다. 일단 Figma 팀 라이브러리가 생성되면 프로젝트에 액세스할 수 있는 모든 사람이 자신의 디자인에서 구성 요소의 인스턴스를 사용할 수 있고 최신 버전으로 작업하고 있는지 확인할 수 있습니다.

구성 요소 라이브러리에 대한 Figma의 접근 방식은 간단하고 관리하기 쉽습니다. 디자이너는 구성 요소로 가득 찬 파일을 만들거나 페이지 구성 요소를 사용하여 패턴 라이브러리를 구성할 수 있습니다. Figma 페이지의 각 프레임은 팀 라이브러리의 조직 ​​섹션이 됩니다(계층 구조를 만들 필요가 없음).

라이브러리를 구성하는 한 가지 방법은 구성 요소 전용 프로젝트를 갖는 것입니다. 해당 프로젝트 내의 파일은 필요에 따라 구성할 수 있으며 해당 파일 내의 페이지는 그에 따라 정렬할 수 있습니다.

Figma는 디자인 팀워크를 향상시키기 위해 만들어졌습니다.

일정 기간 동안 Figma를 사용하면 이 라이브 협업 도구의 이점을 입증할 수 있습니다. 다양한 분야에 대한 디자인 시스템을 구축할 때 필수적인 작업에 팀을 유지하고 완전한 공개를 권장합니다. Figma는 누구나 모든 플랫폼에서 쉽게 사용할 수 있으며 팀이 작업과 라이브러리를 빠르게 공유할 수 있습니다.

Sketch에서 전환한 후 Figma를 사용하는 설계 전문가(스케치 파일은 Figma로 패리티와 함께 ​​가져올 수 있음)는 실망하지 않습니다.

... 동료 및 고객과 작업할 수 있는 방식을 완전히 바꾸어 놓았습니다. – Figma로 협업 설계 간소화

Figma는 지난 몇 년 동안 UI 디자인 도구의 세계에서 최고의 모든 것을 통합했습니다 – 당신의 디자인 팀이 Figma로의 전환을 고려해야 하는 이유

작년에 저는 UI/UX 디자인 프로세스에 Figma를 사용해 왔으며 작업 시간을 절약해주었습니다. 내 디자인 워크플로를 진정으로 변화시켰습니다 – Figma로 UI/UX 워크플로를 간소화하는 방법

Figma에서 보낸 시간은 일반적으로 하루 중 가장 즐겁고 생산적인 시간입니다. Figma는 내 전체 워크플로를 변화시키고 있으며 정말 대단합니다!

• • •

추가 읽기:

• 이 최고의 UX 도구로 기술을 마스터하세요
• Figma로 협업 설계 간소화
• InVision의 Craft를 사용하여 팀 협업 간소화
• 와이어프레임에 죽음. 고화질로 바로!
• 지구를 사무실로 만들어 세계적인 디자이너가 되십시오.