미니 튜토리얼 – 전체 설계 프로세스에 Figma의 기능 활용

새로운 디자인 도구의 세계는 믿을 수 없을 정도로 흥미진진합니다. 유망한 새 프로그램이 빠르게 연속적으로 출시되고 있지만, 특히 더 크고 대부분이 분산된 디자인 팀을 위한 최선의 선택이 된 프로그램이 있습니다.

Figma는 전체 설계 프로세스를 끝까지 지원할 수 있는 잠재력을 가지고 있습니다. 첫 번째 스케치, 피드백 수집, 협업, 바로 테스트할 수 있는 프로토타입 및 개발자 핸드오프가 해당 기능 내에 있습니다. Figma는 또한 제품 관리자와 설계 책임자 및 기타 모든 이해 관계자의 작업을 단순화합니다.

그렇다면 Figma가 경쟁 제품과 다른 점은 무엇입니까? 몇 가지 주요 측면이 있지만 모두 Figma가 웹 기반이라는 사실로 거슬러 올라갈 수 있습니다. 이것은 도구가 처음 출시되었을 때 많은 사람들을 놀라게 했지만 궁극적으로 Figma의 유연성과 고유한 기능을 위한 길을 열었습니다.

원활한 제품 디자인 프로세스의 기본은 무엇입니까?

팀과 프로젝트마다 워크플로가 다를 수 있는 것은 사실이지만 제품 설계 및 관리의 필수 구성 요소인 기능과 단계가 있습니다. Figma는 각각을 다룹니다.

1. 접근성 및 협업 . 팀이 사용하는 도구에 관계없이 함께 작업하고, 프로젝트를 발표하고, 피드백을 수집하고, 이해 관계자를 계속해서 유지할 수 있는 방법이 필요합니다. 이 모든 기능은 Figma에서 사용할 수 있습니다.
2. 결과물을 반복하고 생성할 수 있는 유연성 . Figma는 유연하며 초기 아이디어를 스케치하고 와이어프레임에서 고화질 목업에 이르기까지 모든 것을 반복하기 위한 협업 화이트보드로 사용할 수 있습니다.
3. 프로토타입을 만들고 테스트하는 능력 . 모바일 앱을 디자인하시나요? 대화형 프로토타입을 제작 및 게시하고 스마트폰에서 직접 테스트할 수 있습니다. 이 모든 것이 Figma에서 제공됩니다.
4. 진실의 단일 소스 구축 . Figma는 완전히 온라인에 상주하는 제품 디자인 시스템을 정의하는 훌륭한 방법입니다. 기본적으로 단일 정보 소스입니다. 더 이상 "이것이 최신 버전입니까?"라고 궁금해하지 마십시오.
5. 부드러운 핸드오프 . 개발자와 링크를 공유하기만 하면 설계를 구현하는 데 필요한 모든 정보(수정 지시, 측정, 내보낼 준비가 된 그래픽 자산)에 액세스할 수 있습니다.
6. 사용자 정의 및 개선이 필요한 다용성. Figma의 플러그인 API를 통해 팀은 자체 플러그인을 작성하거나 더 광범위한 사용자 커뮤니티를 활용하고 새로운 기능으로 도구를 확장할 수 있습니다.

1. 접근성 및 협업

팀에 합류

Figma가 위에서 다룬 6가지 핵심 영역에 어떻게 기여하는지 자세히 살펴보겠습니다. 신규 사용자는 무료 Figma 계정을 만들고 팀을 구성하고 Figma 시작하기를 시청할 수 있습니다. 팀이 생성되면 팀 구성원과 관련 이해 관계자를 초대합니다.

세 가지 액세스 수준을 사용할 수 있습니다. 꽤 자명하지만 일반적으로 편집 권한은 디자인 팀에 주어지고 보기 권한은 다른 모든 사람들에게 주어집니다. 여기에는 설계 프로세스를 따르고 피드백을 제공할 수 있어야 하는 개발자 및 기타 이해 관계자가 포함됩니다.

팀 수준(위에 표시됨), 프로젝트 수준 및 파일 수준에서 유사한 공유 옵션을 사용할 수 있습니다. 액세스 수준이 지정되지 않으면 팀에서 프로젝트로, 프로젝트에서 파일로 전파됩니다.

Figma는 브라우저에서 사용할 수 있으므로 누군가를 초대하는 방법이나 사용 중인 시스템은 중요하지 않습니다. 그들이 사용하는 장치와 브라우저가 최소 요구 사항을 충족하는 한 링크로 바로 이동할 수 있으며 편집 또는 보기 권한이 있는지 여부에 따라 인터페이스가 변경됩니다.

프로젝트 파일 포함

Figma 프로젝트 파일은 타사 소프트웨어에 포함될 수 있습니다. 예를 들어 공유 Dropbox Paper 문서를 사용하여 프로젝트의 현재 상태를 표시할 수 있습니다.

프로젝트 파일을 포함하려면 파일 표시 여부를 링크가 있는 모든 사용자 - 볼 수 있고 , 포함 코드를 복사하고, embed.ly를 지원하는 타사 소프트웨어에 프로젝트 파일을 포함할 수 있습니다.

피드백 및 수정

제품 설계 프로세스의 또 다른 핵심 기능은 설계를 배포하고 피드백을 수집하고 개정판을 관리하는 기능입니다. Figma 링크가 있는 사람은 누구나 최신 버전을 보고 피드백을 주고 싶은 지점에 직접 댓글을 달 수 있습니다.

팀 구성원을 태그하려면 @ 문자를 사용하십시오. 그러면 시스템에서 선택할 수 있는 이름 목록을 표시합니다. 그렇게 하면 팀 구성원에게 알리고 피드백이 처리되면 해결 을 클릭하여 토론을 닫을 수 있습니다.

팀을 일관성 있게 유지하기 위해 지정된 Slack 채널의 Figma 파일에서 토론을 게시할 수 있는 멋진 통합이 있습니다.

실시간 실시간 협업

Figma의 더 흥미로운 기능 중 하나는 멀티플레이어 라고 하는 기능입니다. 여러 팀 구성원이 동시에 디자인 파일을 열고 작업할 수 있습니다. 파일에서 작업하는 모든 사람은 페이지 오른쪽 상단에 표시되며 아바타의 이름이 지정되고 클릭할 수 있습니다.

이것이 실용적인 측면에서 의미하는 바를 이해하는 데는 시간이 걸릴 수 있습니다. 디자이너가 파일의 동일한 부분에서 동시에 작업하기 위해 멀티플레이어를 사용할 가능성은 거의 없지만, 특히 대규모로 분산된 팀의 경우 파일 버전 충돌에 대해 걱정할 필요가 없다는 것은 매우 위안이 됩니다.

멀티플레이어는 파일에 연결된 모든 사람이 발표자의 표시 영역을 따라갈 수 있으므로 원격으로 발표할 때 편리합니다. 또한 팀은 추가 프로그램을 건너뛰고 Figma를 온라인 화이트보드로 사용할 수 있습니다(Miro와 같은 특정 솔루션이 궁극적으로 작업에 더 적합할 수 있음).

이를 위해 특정 자산을 가상 포스트잇 또는 다이어그램 요소로 복제하는 사용자 지정 구성 요소를 만드는 것이 좋습니다.

2. 결과물을 반복하고 생성할 수 있는 유연성

팀 구성원을 초대하고 초기 스케치가 진행되면 Figma를 사용하여 반복할 수 있습니다. Figma가 만들어진 주된 이유는 인터페이스 디자인이었습니다. 화이트보드가 끝나면 팀은 플로우 맵과 와이어프레임으로 이동할 수 있습니다. 다시 말하지만, 이러한 작업에 재사용할 수 있는 구성 요소 라이브러리를 구축하는 것이 현명합니다. 공식 템플릿 컬렉션은 시작을 위한 영감과 디자인 준비를 제공합니다.

3. 프로토타입 제작 및 테스트 능력

Figma로 대화형 프로토타입을 만드는 것은 매우 쉽습니다. Figma 파일이 편집 권한으로 열리면 디자인 모드와 프로토타이핑 모드 사이를 전환할 수 있습니다. 프로토타입 모드에서 요소를 클릭하면 스테이지에서든 레이어 사이드바에서든 대화형으로 만들 수 있습니다.

프로토타입 모드에서 요소를 선택하면 측면에 작은 원이 나타납니다. 드래그하면 파란색 선이 나타나며 화면이나 상태에 드롭하여 상호 작용 결과를 표시할 수 있습니다.

Figma에서는 일반적인 전환을 사용할 수 있으므로 충실도가 높은 프로토타입을 훨씬 쉽게 만들 수 있습니다. 실제로 Figma 팀은 최근 스마트 애니메이트 및 드래그 트리거 기능을 출시했습니다. 스마트 애니메이션 측면은 유사한 요소의 모션을 보간하는 반면 드래그 트리거는 새로운 유형의 상호 작용입니다. 둘 다 대화형 프로토타입의 품질을 크게 향상시킵니다.

사용자 테스트

다시 말하지만, 링크는 사용자 테스트를 위해서라도 Figma 프로토타입을 배포하는 데 필요한 전부입니다. 오른쪽 상단의 작은 재생 아이콘을 클릭하면 프로토타입이 실행되고 새 URL이 생성됩니다. URL을 복사하거나 파란색 프로토타입 공유 버튼을 사용할 수 있습니다. 사용자가 링크를 열면 대화형 프로토타입이 제공되며 원하는 경우 의견을 남길 수 있습니다.

모바일에서 테스트

모바일 장치용 디자인은 프로토타입을 둘러싼 실제 장치의 모형과 함께 제공됩니다. 상호 작용을 테스트하는 데 더 많은 사실감이 필요한 경우 장치별 테스트를 위해 Figma Mirror 앱을 다운로드하는 것이 가장 좋습니다.

4. 단일 출처의 진실 확립

버전 기록

프로젝트 파일이 항상 최신 상태이고 지속적으로 백업된다면 좋지 않을까요? 이 기능은 기본적으로 Figma에 포함되어 있습니다. 각 파일은 작업하는 동안 자동으로 저장되며 Figma는 30분 동안 사용하지 않으면 버전 기록에 새 항목을 생성합니다. 자동으로 저장된 모든 버전의 로그가 생성되며, 필요한 경우 각 버전을 복원할 수 있습니다.

물론 자동 버전 관리가 작업을 저장하는 유일한 옵션은 아닙니다. 버전을 수동으로 저장하거나 버전 기록에서 특정 버전을 편집할 수 있습니다.

설계 시스템 및 구성 요소 라이브러리

Figma가 빛나는 또 다른 측면은 디자이너가 구성 요소 라이브러리를 생성, 구성 및 배포할 수 있는 방법입니다. 모든 파일을 라이브러리로 게시할 수 있으며 모든 색상, 텍스트 스타일, 효과, 그리드 또는 구성 요소를 다른 Figma 파일에서 사용할 수 있습니다.

라이브러리의 요소가 변경되면 편집 내용을 게시하고 해당 요소를 사용하는 파일에 전파할 수 있습니다. 이 파일을 작업하는 디자이너는 편집을 수락할지 여부를 결정할 수 있습니다.

라이브러리 배포 방법을 결정하는 기능과 라이브러리 요소의 가시성 또는 비가시성을 토글하는 옵션은 전체 경험을 부드럽고 강력하게 만듭니다.

구성 요소와 라이브러리를 중첩하여 관련된 모든 사람을 위해 모든 것이 버전이 지정되고 최신 상태인 정교한 디자인 시스템을 만들 수 있습니다. 그리고 모든 구성 요소는 주석으로 주석을 달 수 있습니다.

5. 부드러운 핸드오프

개발자 핸드오프

Figma를 사용하면 설계자와 개발자가 핸드오프를 관리하기 위해 Zeplin과 같은 별도의 도구가 필요하지 않습니다. 보기 전용 액세스 권한이 있어도 파일을 열고 오른쪽 사이드바에서 코드 모드로 전환하기만 하면 됩니다.

코드 모드가 활성화된 경우 스테이지에서 요소를 선택하면 구현에 필요한 모든 관련 정보가 표시되고 다른 요소와 관련된 구성 요소 위치에 관한 기타 모든 정보가 표시됩니다. 유사한 솔루션과 마찬가지로 생성된 코드는 완전히 복사하여 붙여 넣을 수는 없지만 쉽게 액세스할 수 있는 것이 도움이 됩니다.

6. 커스터마이징 및 개선될 다재다능함

Figma API 및 커스텀 플러그인

Figma의 API 및 플러그인 시스템을 사용하면 다양한 디자인 팀과 분야에서 특정 프로세스 요구 사항에 맞게 프로그램을 쉽게 사용자 지정할 수 있습니다. Figma의 유연성은 사용자가 플랫폼과 프로그래밍 방식으로 상호 작용할 수 있는 기능을 제공합니다. 몇 가지 예:

실제 데이터 사용

모형과 프로토타입에서 실제 데이터를 사용할 수 있다는 것은 대단히 가치가 있으며 Figma는 외부 소스의 콘텐츠를 가져올 수 있도록 하여 이를 가능하게 합니다. 실제 콘텐츠를 활용하여 설계 구성 요소를 스트레스 테스트하고, 모형을 최신 상태로 유지하고, 설계와 관련이 없는 팀을 참여시킬 수 있습니다.

Google Sheets Sync라는 플러그인은 수행할 수 있는 작업의 완벽한 예입니다. 이 플러그인을 사용하면 Google 스프레드시트를 소스로 통합하여 Figma 파일의 구성 요소 콘텐츠를 채우고 동기화할 수 있습니다.

고급 워크플로

UI 디자인 프로그램 내에서 디자인 시스템을 수용하는 기능은 시스템이 고객 대면 화면에서 일관되게 구현되는 경우에만 가치가 있습니다. 고맙게도 도움이 될 수 있는 Figma API, 플러그인 및 통합이 있습니다.

Storybook 애드온은 Figma 파일을 동기화하고 구현된 구성 요소와 함께 패널에 Figma 디자인 구성 요소를 표시합니다. 또 다른 흥미로운 사용 사례는 Figma 구성 요소를 코드로 변환하는 워크플로 향상인 Figma to React Converter입니다.

Figma의 기능은 전체 설계 프로세스에 이상적입니다.

모든 디자이너의 요구 사항이나 디자인 문제를 처리할 수 있는 단일 디자인 프로그램은 없으며 이는 좋은 일입니다. 설계 도구 간의 경쟁은 설계자에게 유리합니다. 그것은 우리의 도구를 만드는 회사가 우리가 필요로 하는 것에 귀를 기울이고 우리가 하는 일에 적합한 최신 기능을 제공하도록 합니다.

즉, Figma는 전체 디지털 디자인 프로세스를 처리할 수 있는 능력 이상으로 입증된 고급이면서도 직관적인 도구입니다. 개별 디자이너와 팀은 모두 고유한 공동 작업 및 반복 기능의 이점을 누릴 수 있으며 프로그램이 부족한 경우 수많은 플러그인이 공백을 채웁니다.

• • •

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

• 디자인 도구로서의 Figma의 힘
• Figma vs. Sketch vs. Axure – 작업 기반 검토
• 미니 튜토리얼 – Figma 버튼 구성 요소 작업
• 이 최고의 UX 도구로 기술을 마스터하세요
• 정밀한 디자인 – Adobe XD 검토