[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "4. 피그마 작업환경 알아보기_1 "

반응형

 

https://mcode.co.kr 

메타코드M

 

안녕하세요~ 하양입니다. 🤗

 

지난 시간에는 피그마를 본격적으로 다루기 앞서 피그마 페이지에 대한 권한 및 기능 등을 숙지하고 다루기 위한 준비운동을 시작했습니다. 4강은 피그마 작업환경에 대해 살펴보기 시작하였습니다.

 

 

1. 파일, 페이지, 레이어 기본 개념

 

피그마는 기본적으로 1팀 내에 프로젝트가 여러개 속해있을 수 있고, 각 프로젝트 안에 여러 개의 파일로 구성될 수 있는 구조를 갖고 있습니다. 해당 프로젝트 및 파일들은 다른 팀으로 이관, 복제가 가능하게 됩니다.

 

파일 구성 요소에는 페이지와 레이어로 구성돼있다는 것을 알 수 있습니다. 

페이지는  로그인, 홈, 게시판 등 각 역할에 맞는 화면이 해당되고,

레이어는 각 페이지 별로 배경, 텍스트, 인풋, 버튼 등등 그 페이지를 구성하는 요소들을 각각 나타내게 됩니다.

 

레이어를 잘 구성하고 플로우를 만들어야 화면이 잘 돌아갈 수 있게 됩니다.

 

2. 신규 파일 생성 및 피그마 파일 불러오기

 

파일은 어디서 만들어지느냐에 따라서 저장되는 위치가 달라지게 됩니다. 저장돼있는 위치를 옮기려면 상단 가운데를 눌러서 Move to 기능으로 파일을 옮기면 됩니다. 

또한 Import 기능을 사용해서 다른 파일을 불러와 해당 팀 내부에 저장할 수도 있습니다.

 

 

3. 권한 및 모드별 화면

 

앞서 배웠었던 팀원별로 다르게 부여되는 권한에 관련된 내용입니다. 크게 3가지 권한[오너, 에디터, 뷰어]로 부여됐던 것이 기억이 납니다. 

해당 권한들이 화면에서 볼 수 있는, 혹은 다룰 수 있는 기능들에 따라 보여지는 화면의 차이점을 알게 되는 시간이었습니다. 

오너 or 에디터 권한의 경우 아래와 같이 레이어들의 속성을 마음대로 변환할 수 있는 권한을 갖게 됩니다.

 

 

하지만 뷰어의 경우에는 편집권한이 기본적으로 없기 때문에 편집을 원한다면,

 

 

화면과 같이 Ask to edit 을 눌러서 편집 권한을 요청해야만 편집 권한에 접근이 가능하게 됩니다.

또한 뷰어는 화면에 Layers 이나 Assets 이 존재하지 않습니다. 편집을 어차피 할 수 없기 때문이죠.

 

또한 디자인/개발 모드에 대한 차이점도 알려주셨습니다.

디자인의 경우 보여지는 요소와 디자인에 집중한다면, 개발의 경우에는 겉으로 보이지 않는 정확한 위치, 수치, 구성요소에 해당하는 코드, 개발 플랫폼의 종류 등등의 요소가 작업시 매우 중요한데

각자 작업할 수 밖에 없는 환경의 개발자와 디자이너의 소통에 굉장히 유용한 '개발자 모드' 를 제공한다는 게 피그마의 강점입니다. 

 

제대로 이해하지 못하고 개발하면 디자이너와 개발자 모두 예상했던 결과물과 다른 작업물이 만들어지게 되므로 낭비되는 자원을 효과적으로 최소화할 수 있다는 것이 큰 장점인 것 같습니다. 

 

 

 

피그마 입문 강의에 관심이 있으시다면 해당 링크로 확인해보시면 좋을 것 같습니다!

지금 70% 할인중이라고 하니 빨리 수강하는 게 이득!

https://mcode.co.kr/video/list2?viewMode=view&idx=78 

메타코드M

 

#피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠 #메타코드