디자인 도구는 웹 제품의 외관을 개선하는 과정에서 필수적인 요소입니다. 하지만 대부분의 디자인 도구는 용량이 커서 사용자의 기기에 고사양을 요구하고 사용 시 RAM을 많이 사용합니다. 또한, 이러한 도구들은 고가의 프리미엄 패키지를 구매해야만 모든 기능을 사용할 수 있는 경우가 많습니다. 이러한 문제들을 해결하기 위해 개발자들은 평균적인 사양의 기기에서도 사용할 수 있는 저렴하고 가벼운 소프트웨어가 필요합니다.
소개
Figma는 개발자의 모든 요구 사항을 충족하는 매우 편리한 옵션입니다. 무료 브라우저 기반 디자인 도구인 Figma는 현재 개발자들 사이에서 매우 인기 있는 선택지가 되고 있습니다. 멋지고 사용하기 쉬운 기능으로 사용자에게 매우 원활한 경험을 제공합니다.
여기서는 Figma의 모든 기능을 활용하는 방법에 대한 완벽한 가이드를 다룹니다.
과거에는 디자이너와 개발자가 이메일로만 소통해야 했습니다. 이로 인해 여러 첨부 파일이 필요하고 관리하기가 매우 번거로웠습니다. 그러다 여러 현대적인 도구들이 등장하면서 작업 과정이 훨씬 간편해졌습니다. 하지만 여전히 큰 문제는 서로 다른 도구에 저장된 프로젝트 파일을 동기화하는 것이었습니다. 따라서 훨씬 효율적인 프로세스에 대한 필요성이 절실했습니다.
그러던 중 Figma가 등장하여 원활한 작업 방식을 제공했습니다. 브라우저 기반 도구이기 때문에 어떤 운영체제를 사용하든 누구나 쉽게 사용할 수 있습니다. 사용자들은 디자인 도구를 지원하기 위해 불필요한 프로그램을 설치할 필요가 없어 편리함을 누릴 수 있습니다. 또한 클라우드 기반 도구인 Figma는 모든 사용자에게 항상 최신 버전의 디자인을 제공합니다. 이 도구를 통해 협업과 소통 또한 매우 간편해졌습니다.
Figma는 Windows와 macOS용 데스크톱 앱으로도 서비스를 제공합니다. 데스크톱 앱은 Slack이나 Visual Studio Code처럼 크로스 플랫폼 앱입니다. 데스크톱 앱과 브라우저 기반 앱은 거의 동일한 기능을 제공하지만, 데스크톱 앱은 로컬 글꼴 사용을 기본적으로 지원하는 반면, 브라우저 버전에서는 로컬 글꼴을 사용하려면 Figma Font Helper를 설치해야 합니다.
Figma는 잘 정리된 작업 공간을 제공하기 위해 인터페이스를 크게 세 부분으로 나눕니다. 가운데에는 큰 캔버스가 있고, 왼쪽에는 사이드바, 오른쪽에는 툴바가 있습니다. 캔버스에는 모든 디자인 요소가 배치됩니다. 왼쪽 사이드바에는 파일의 에셋, 레이어, 페이지 목록이 표시됩니다. 오른쪽 툴바에는 파일 내 요소에 대한 모든 정보가 표시됩니다.
일반적으로 파일은 각 페이지에 하나의 캔버스가 있는 여러 페이지로 구성됩니다. 디자이너는 이러한 여러 페이지를 사용하여 파일의 다양한 부분을 각기 다른 페이지에 체계적으로 배치합니다. 따라서 Figma를 처음 사용하는 사용자는 이러한 다양한 페이지들을 먼저 익혀야 더욱 체계적인 방식으로 작업할 수 있습니다.
Figma 내 탐색
- Ctrl/Cmd 키를 누른 상태에서 위/아래로 스크롤하거나 + 및 – 키를 누르면 확대/축소할 수 있습니다.
- 스페이스바를 누른 상태에서 마우스로 드래그하면 캔버스를 가로로 스크롤할 수 있습니다.
Figma에서 더욱 효율적으로 작업할 수 있도록 도와주는 편리한 단축키가 많이 있습니다. 하지만 모든 단축키를 기억할 필요는 없습니다. Ctrl / Cmd + Shift + ? 키를 누르면 언제든지 단축키 목록을 확인할 수 있습니다
프로젝트 스타일 선택
오른쪽 사이드바에서 색상, 서체, 격자 및 기타 디자인 스타일을 모두 선택할 수 있습니다. 선택을 취소하려면 캔버스 아무 곳이나 클릭하거나 Esc 키를 누르면 됩니다. 스타일 요소 옆에 있는 편집 아이콘을 클릭하면 각 요소의 스타일 정보를 모두 확인할 수 있습니다.
읽어보세요: 드루팔에서 워드프레스로 마이그레이션하는 방법: 완벽 가이드
스타일 요소 선택
Command 키를 누른 상태에서 클릭하거나 요소를 마우스 오른쪽 버튼으로 클릭하여 하위 레이어 메뉴를 열고 원하는 레이어를 선택하면 특정 레이어를 선택할 수 있습니다.
요소를 선택하면 오른쪽 사이드바의 '코드' 탭에서 해당 요소의 CSS 정보를 확인할 수 있습니다. 하지만 이 CSS는 자동 생성된 것이므로 메인 프로젝트에 복사해서 붙여넣으면 안 됩니다.
몇 가지 더 중요한 단계
- 'Alt' 키를 누른 상태에서 마우스 커서를 요소 위에 올리면 요소 사이의 간격을 측정하고 올바르게 배치할 수 있습니다.
- 에셋을 내보내려면 먼저 내보내기 가능으로 표시해야 합니다. 그런 다음 단축키 Shift + Cmd / Ctrl + E를 사용하여 내보내기 가능으로 표시된 모든 에셋을 한 번에 내보낼 수 있습니다.
- 오른쪽 사이드바의 '프로토타입' 탭을 사용하여 모든 애니메이션에 대한 정보를 볼 수 있습니다.
- 상단 툴바의 말풍선 아이콘을 클릭하거나 'C' 키를 누르면 댓글 작성 화면으로 이동할 수 있으며, 디자인의 아무 곳이나 클릭하여 해당 요소에 대한 댓글을 작성할 수 있습니다.
Figma를 최대한 활용하기 위한 몇 가지 중요한 절차를 간략하게 정리한 안내입니다. Seahawk Media 항상 최고의 정보를 제공하여 사용 편의성을 높이기 위해 최선을 다하고 있습니다. 다양한 서비스 연락 주시기 바랍니다 . 또한, 다양한 웹 제품에 대한 자세한 정보는 블로그
