💡Figma 환경 구축
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.
www.figma.com
Figma 홈페이지에서 최신 업데이트 내용과 인사이트를 확인할 수 있다.
Figma 계정 생성
계정 생성을 위해 Get started for free 버튼을 클릭하여 가입 화면으로 넘어간다.
팝업창에서 구글 이메일로도 등록이 가능하며, 업무용으로 사용할 경우 업무용 이메일로 가입할 수도 있다.
닉네임과 직무 입력
계정을 만들고 나면 닉네임과 직무를 입력하는 화면이 나온다.
plan(요금제) 선택
학습을 위해 사용할 것이므로 Starter 회원을 선택하여 시작하도록 한다.
비회원은 공유받은 작업을 확인만 할 수 있지만, Starter 회원은 개인 작업 및 편집이 가능하며, 1개의 프로젝트에 작업 파일을 3개까지 소유할 수 있다. 또한, 작업 내역을 30일간 보관하는 게 가능하다.
유료 회원은 개인 작업 및 팀 관리가 가능해지며, 무제한으로 작업 파일을 생성하고 작업 내역을 보관할 수 있다.
https://www.figma.com/pricing/
Pricing for Figma's Free, Professional, and Organization plans.
A better way to design. Brainstorm, design, prototype, and gather feedback all in one place with Figma and FigJam.
www.figma.com
각 요금제별로 사용할 수 있는 기능이 상이하므로 팀 단위 작업을 할 때에는 적절한 요금제를 선택하도록 한다.
가입 완료
가입을 완료하면 위와 같은 화면이 나오며, 최근 방문한 프로젝트를 확인할 수 있다.
결제할 때에는 결제 주기를 월 단위로 할지 연 단위로 할지 선택할 수 있다. 해외 결제가 가능한 카드로 결제를 진행하면 된다.
접속 방법 선택
- 브라우저에서 Figma로 직접 접속하는 방법
- 타인의 초대 링크를 통해 접속하는 방법
- 로컬에 저장된 fig 파일을 통해서 접속하는 방법
Figma에 접속하는 방법으로 위의 3가지의 방법 중 적절하게 선택하여 사용하면 된다.
1번과 2번은 인터넷 브라우저를 통해서 접속하는 방법이다. 이 방법은 프로그램을 설치하지 않고 바로 Figma 웹 환경으로 이동할 수 있다는 장점이 있다. 그리고 3번 로컬에 저장된 피그 파일을 이용하여 Figma에 접속하는 방법은 웹이 아닌 Figma 프로그램으로 작업할 때 사용하게 된다.
1번 방법은 자주 사용되지 않으며, 대체로 팀에 투입되면 2번 방법으로 초대받아 프로젝트에 접속하게 된다.
프로그램 설치 및 접속
https://www.figma.com/downloads/
Figma Downloads | Web Design App for Desktops & Mobile
Download the Figma web design app on desktop for macOS or Windows, plus the font installer and device preview apps.
www.figma.com
Figma downloads 페이지에 들어가 Desktop OS에 맞는 버전을 설치한다.
Figma 로그인
다운로드를 마치면 Figma에 Log in을 하라는 화면이 나온다.
로그인을 마치면 프로그램에서 Figma를 사용할 수 있다.
스마트폰 미러링 앱 설치
스마트폰의 앱 스토어 Google Play Store 또는 Apple App Store에서 Figma를 검색하여 설치한다.
미러링 앱을 실행하고 로그인 및 설정이 완료되면 최근 작업 메뉴 창으로 이동한다.
Figma 앱을 이용하면 컴퓨터가 없더라도 실시간으로 작업 내용과 피드백을 확인할 수 있다. 또한, 컴퓨터에서 애니메이션을 걸어 두면 미러링 앱에서 애니메이션을 확인할 수 있다는 장점이 있다.
💡웹과 프로그램 환경의 공통점과 차이점
📌공통점
1. 기본 도구 및 주요 제작 기능
두 환경 모두 Figma의 핵심 도구와 주요 제작 기능을 동일하게 제공하므로 사용자가 일관된 환경에서 작업할 수 있다.
2. 실시간 저장 기능
웹과 프로그램 환경 모두 온라인상에서 작업이 이루어지며, 작업 내용은 실시간으로 자동 저장되어 최신 상태를 유지한다.
3. 화면 UI
버튼 및 메뉴 위치 등의 사용자 인터페이스(UI)는 큰 차이가 없어 사용자들이 양 환경 간에 쉽게 전환할 수 있다.
📌차이점
1. 로컬 리소스 호환성
프로그램에서는 로컬 폰트, 이미지, 그리고 Figma 파일과 같은 리소스의 호환성이 웹보다 훨씬 우수하다. 특히 프로그램 상에 있는 폰트가 웹에는 없을 경우에도 프로그램을 사용하는 게 더 나은 렌더링 결과를 보여준다.
2. 고급 기능
프로그램은 플러그인 및 키보드 단축키에서 웹보다 더 많은 고급 기능을 제공한다. 따라서 전문적이고 빠른 작업이 필요한 경우에는 프로그램이 더 적합하다.
3. 오프라인 저장
인터넷 연결이 불안정한 상황에서 웹에서의 작업은 에러 발생 가능성이 높다. 프로그램은 오프라인에서도 작업을 안정적으로 저장할 수 있어, 네트워크에 의존하지 않고 작업을 계속할 수 있다.
참고자료
피그마 입문 A to Z 부트캠프, Rena, MetaCode, 2024.01.26.
