Figma 가이드/2021년

Part 2. 피그마 시작 가이드 #파일생성하기 #figma기초

안연정 2021. 2. 20. 15:18

figma.com에 접속하여 로그인 합니다. 참고로 무료 계정으로 로그인 하였고, 설명을 위해 새롭게 figma 계정을 생성하였습니다. 

 

Part 1. Figma 유료 결제 시 유의사항 및 기본 설정

figma 기본 설정 1) 좌측 상단에 이름 영역을 선택하여 내 정보 페이지로 이동 2) 내 정보 페이지 > Settings 1. 이름 변경: Chage name 클릭 2. 프로필 사진 변경: 프로필 영역 클릭 후 사진 업로드 3. 팀 세

designer-story.tistory.com

 

이 포스팅에서 개인 파일 생성 / 프로젝트 단위의 팀 파일 생성 / 파일삭제 / 파일 복구 등에 대한 사용 팁을 배울 수 있습니다. 

[목차] 

1) Community - 각종 Figma 샘플 미리보기
2) Drafts - 개인 파일 생성하기
3) 프로젝트 파일 > 프로젝트 설정
4) 파일 설정 유형 2가지
5) 로컬 파일 불러오기 (Sketch, figma) 
6) figma 새 파일 생성하기

 

1)  Community - 각종 Figma 샘플 살펴보기

https://www.figma.com/community

 

Community에서 다른 사람들이 공유한 figma UI Kit를 직접 보거나 확인 가능하며, 유용한 각종 플러그인을 이곳에서 설치 할 수 있습니다.

 

figma community 특정 파일을 내 계정의 문서로 복제하는 방법

figma 공식 커뮤니티에서 공유된 특정 파일을 벤치 마킹 또는 테스트를 위해 내 계정의 문서로 복제하는 방법을 소개합니다. 1) 아래의 링크에 접속후 카테고리 중 Design System을 클릭해봅니다.  htt

designer-story.tistory.com

 

 

2) Drafts - 개인 파일 생성하기

  1. [+] 버튼을 클릭하여 팀 사람들이 접근 불가능한 자신만의 개인 파일을 Drafts에 생성할 수 있습니다. 
  2. 삭제한 Figma 파일 복구 방법 : Drafts 탭이 활성화 된 상태에서 Drafts 탭 옆의 Deleted 탭을 선택후 해당 목록에서 파일 복구 가능

 

3) 프로젝트 파일 > 프로젝트 설정

좌측 사이드 바 영역에서 프로젝트(team project)를 선택하고, 프로젝트 설정 영역에 대해 살펴보겠습니다. 

왼쪽 부터 팀 정보 수정 및 삭제, 프로젝트 파일 공유, 즐겨찾기 토글, 파일 불러오기(import) 새로운 파일 생성 버튼이 이 영역에 위치해 있습니다. 

 

4) 파일 설정 유형 2 가지

파일에 대한 편집 권한이 없는 사용자의 경우 예시

  1. 사이드바에서 프로젝트를 선택
  2. 파일에 마우스 우클릭 하여 선택한 파일을 관리할 수 있습니다. (편집 권한이 있는 사용자의 경우만 문서 삭제 가능)

 

파일에 대한 편집 권한이 있는 사용자의 경우 예시

 

 

5) 로컬 파일 불러오기

아래 버튼을 클릭 또는 파일 목록 영역으로 로컬 파일을 드래그 앤 드롭하면 figma 브라우저로 import 할 수 있습니다. 

※ figma 브라우저로 import 가능한 파일: figma파일 및 스케치 파일

 

 

6) figma 새 파일 생성하기

본격적으로, figma 사용을 위해 툴바 우측 끝에 있는 옵션 B [+ NEW] 버튼을 클릭하여 파일을 생성해 보겠습니다. 

 

 

Blank canvas : 빈 파일을 생성(옵션 A)하거나 디바이스 옵션을 선택하여 원하는 디바이스 해상도(옵션 B)를 선택하여 파일을 생성 할 수 있습니다. (ex. iphone 11 pro)

저는 빈 파일을 생성후에 Frame을 생성할 예정이기 때문에 [Blank canvas]를 선택하겠습니다. 

A를 선택 후, C(Create file)를 클릭하여 파일을 생성합니다. 

 

[2021/08/13 남긴 코멘트]

* 2021 figma Config 이후 파일 생성 시 타입이 figJam이라는 하나 더 추가 되었습니다.  일반적인 디자인 시안 작업 시엔 Design 파일을 선택하시고 파일을 생성하시면 됩니다.   FigJam이 무슨 툴인지 알고 싶으신 분들은 아래 영상 또는 이 링크를 참고해주세요.

 

 

 

 

Figma 파일을 생성 후 에디터 화면에 대한 부분은 다음 포스팅에서 자세히 다뤄보겠습니다. (아래 링크 참고) 

 

 

Part 3. 피그마 시작 가이드 #인터페이스

피그마 파일을 막상 열고나니, 무엇부터 해야 할지 망설여지셨나요? 피그마 에디터는 파일에 대해 접근 권한이 편집자이냐 뷰어이냐에 따라 구성이 많이 다릅니다. [공유 목적] 피그마를 처음

designer-story.tistory.com

아래 영상은 디자인 파일을 생성 이후 피그마 기초에 관한 영상입니다.

 

반응형