Figma 디자인 도구 마스터하기: 유용한 팁과 방법

Google 문서도구를 사용해 본 사람은 누구나 웹에서 파일을 쉽게 편집하고 공동작업하고 저장하는 것이 얼마나 편리한지 알고 있습니다. 웹 디자이너가 프로젝트에 동일한 도구를 사용한다면 어떻게 될까요? 글쎄, 그들은 실제로 하나를 가지고 있으며 그것은 Figma입니다. 이 Figma 리뷰에서는 디자이너가 선택한 도구로 만드는 플랫폼의 가장 빛나는 기능을 안내합니다.

피그마란?

Figma는 Mac OS 또는 Windows에서만 작동하는 다른 인기 있는 디자인 도구와 달리 Linux에서도 작동할 수 있는 클라우드 기반 디자인 도구입니다. 따라서 이 플랫폼은 다양한 운영 체제를 사용하고 작업을 위해 SVG 코드, CSS 및 iOS 또는 Android 코드를 생성해야 하는 디자이너의 협업을 가능하게 합니다.

플랫폼을 통해 사용자는 하나의 플랫폼에서 디자인을 만들고 프로토타입을 만들고 피드백을 수집할 수 있습니다.

피그마를 사용하는 이유

Figma 디자인 도구의 아름다움으로 넘어가기 전에 이 플랫폼이 디자이너에게 매력적인 이유를 살펴보겠습니다.

1. 웹 기반입니다. Figma는 브라우저에서 실행되며 프로젝트를 별도의 파일로 컴퓨터에 저장할 필요 없이 프로젝트 작업을 할 수 있습니다. 모든 편집 내용은 자동으로 클라우드에 저장됩니다. 그러나 모든 변경 사항을 저장하려면 활성 인터넷 연결이 필요하다는 것을 기억하십시오.
2. 그것은 팀워크를 허용합니다 . Figma를 사용하면 가격 책정 계획에 따라 편집자 수에 제한 없이 2명으로 구성된 팀을 구성할 수 있습니다. 단일 프로젝트에서 몇 명의 팀원이 작업하고 있으며 어떤 변경 사항이 있는지 항상 확인할 수 있습니다.
3. 솔로 디자이너에게는 무료입니다. 모든 기능은 평가판 기간 없이 완전히 무료로 사용할 수 있습니다.

전반적으로 Figma에는 세 가지 가격 계획이 있습니다. 플랫폼이 각각에 대해 제공하는 기능을 알아보겠습니다.

Figma 가격 계획

Figma 시작하기

가입 시 사용자는 온보딩에 필요한 링크(헬프 센터, 비디오 자습서, 포럼 및 유용한 리소스)가 포함된 환영 이메일을 받습니다.

또한 사용자가 도구 작업을 시작하면 빠른 플랫폼 연습이 제공됩니다. 온라인으로 작업하고 Figma 데스크톱 버전을 다운로드하여 워크플로를 오프라인으로 설정할 수 있습니다. 실제로 인터페이스는 프로젝트의 요소를 포함하는 레이어 패널, 도구와 사용 가능한 옵션이 있는 도구 모음, 오른쪽에 모두 있는 속성 패널을 통해 매우 직관적입니다.

이제 Figma의 가장 뛰어난 기능과 ​​옵션을 설명하고 어떻게 적용할 수 있는지 살펴보겠습니다.

Figma 기능 및 유용한 옵션

프로토타이핑

Figma를 사용하면 필요한 만큼의 화면을 만들어 웹사이트나 앱의 클릭 가능한 버전을 만들 수 있습니다. 이렇게 하면 탭 간에 전환하지 않고도 버튼 기능, 요소의 롤오버, 모달 창 애니메이션과 같은 모든 기능을 테스트, 편집 또는 조정할 수 있습니다. 디자인에 대한 연결 및 핫스팟을 만들어 실제 설정에서 어떻게 보이는지 시뮬레이션할 수 있습니다.

속성 패널에서 프로토타입으로 전환하고 경로 및 상호 작용 생성을 시작하기만 하면 됩니다.

구성품

프로젝트 전체에서 재사용할 수 있는 UI 요소입니다. 이 기능을 사용하면 대칭 구성요소를 대칭으로 만들거나 구성요소를 타일링하여 패턴을 반복할 수 있습니다. 버튼, 필드 또는 메뉴에서 구성 요소를 만들 수 있습니다. 마스터 구성 요소를 만들려면 옵션 메뉴에서 구성 요소 만들기 버튼을 클릭하거나 레이어를 마우스 오른쪽 버튼으로 클릭하고 구성 요소 만들기 옵션을 선택합니다.

인스턴스를 생성하여 마스터 구성 요소를 재사용할 수 있습니다. 색상, 블록, 버튼, 모양 및 랜딩 페이지와 같은 UI 요소에서 이러한 구성 요소를 별도의 구성 요소로 만들 수도 있습니다.

인스턴스 구성 요소를 생성하려면 마스터 구성 요소를 선택하고 단축키(Windows 및 Mac OS의 경우 각각 Alt 또는 D)를 누른 상태에서 구성 요소에서 인스턴스를 드래그하고 필요한 경우 복사하여 다른 위치에 붙여넣습니다.

생성한 인스턴스는 마스터 구성 요소에 연결되므로 후자의 모든 변경 사항이 전자의 모든 구성 요소에 적용된다는 것을 기억하십시오. 예를 들어 마스터 구성 요소에서 버튼의 모양이나 색상을 업데이트하여 웹사이트 디자인 전체에서 하위 구성 요소를 업데이트합니다.

벡터 네트워크

이 Figma 기능을 사용하면 더 이상 두 점에서 오는 두 개의 선으로 제한되지 않으므로 복잡한 벡터 모양을 만들 수 있습니다. 펜 도구를 사용하여 만든 모양의 모든 지점에서 추가 선을 그릴 수 있습니다.

게다가 Vector Networks는 외부 소스에서 SVG 코드를 복사하여 Figma에 직접 벡터 레이어로 붙여넣을 수 있으므로 HTML 루틴을 쉽게 할 수 있습니다. Figma 벡터를 SVG 코드로 복사할 수도 있습니다. 이렇게 하려면 요소를 마우스 오른쪽 버튼으로 클릭하고 SVG로 복사를 선택한 다음 HTML 또는 생성 중인 웹 프로젝트에 코드를 붙여넣으면 됩니다.

내장된 주석 달기, 편집 및 공유

Figma를 사용하면 팀을 만들고 각 팀 구성원이 프로젝트에 대해 수행할 권한이 있는 항목을 선택할 수 있습니다. 보기 또는 보기 및 편집도 가능합니다. 또한 팀원들이 실시간으로 디자인을 업데이트하거나 변경하는 방법을 볼 수 있습니다.

팀은 작업 영역에서 바로 프로젝트의 모든 요소에 대해 피드백을 남기거나 토론하고 Google 문서에서와 같이 캔버스의 아무 곳에나 고정할 수 있습니다. 댓글을 남기려면 상단 메뉴에서 말풍선을 선택하고 댓글을 달고 싶은 요소를 클릭한 후 피드백을 작성하세요.

버전 관리

Figma를 사용하면 각 공동 작업자의 기록을 추적하고 이전 버전으로 롤백할 수도 있습니다. 이 서비스는 사용자가 프로젝트의 탭을 닫거나 30분 이내에 변경 사항이 없는 경우 버전을 자동으로 저장합니다. 이 옵션에 빠르게 액세스하려면 도구 모음에서 프로젝트 이름 왼쪽에 있는 드롭다운 아이콘을 선택합니다. 특정 버전의 이름, 복원 또는 복제 옵션과 함께 오른쪽에 버전 기록이 표시됩니다.

작동 중인 Figma 디자인 도구

플랫폼과 그 기능에 익숙해지면 Figma 디자인 옵션을 시험해보고 eBook을 위한 간단한 페이지를 만들기로 결정했습니다. 먼저 상단 메뉴에서 "+" 기호를 클릭했습니다. 그런 다음 도구 모음에서 "프레임" 아이콘을 클릭하여 프레임을 만들고 캔버스에서 디자인을 구성합니다. 다음으로, 필요한 레이어(텍스트 블록, 직사각형 및 이미지)로 프로젝트를 채우고 요소 사이의 모든 공간을 구성했습니다.

우리가 만든 것은 다음과 같습니다.

플랫폼에는 그림을 위한 기본 팔레트(CMYK 팔레트)가 없거나 밀리미터와 센티미터 사이의 크기 전환이 없기 때문에 고품질 인쇄를 할 수 없다는 점을 명심하십시오.

파이널 테이크

Figma는 디자이너를 위해 디자이너에 의해 신중하게 고려된 도구와 같은 느낌을 줍니다. 플랫폼을 통해 다음을 수행할 수 있습니다.

• 컴퓨터의 저장 공간에 의존하지 않고도 온라인으로 작업하고 디자인을 클라우드에 저장할 수 있습니다.
• 다양한 운영 체제에서 디자인을 만듭니다.
• 팀과 실시간으로 협업하고, 파일에 댓글을 달고, 편집하고, 공유합니다.
• 프로토타이핑, 벡터 네트워크, 구성 요소 생성 및 해당 인스턴스와 같은 유용한 기능을 사용하여 디자인을 편집, 테스트, 조정하고 가능성을 확장할 수 있습니다.

우리의 Figma 리뷰가 플랫폼의 내부 트릭을 정리하고 당신이 그것을 시도할 만큼 충분히 영감을 받았기를 바랍니다. Figma로 디자인을 만들고 SendPulse로 마케팅 프로젝트를 만드십시오. 또 봐요!