[콘텐츠 마케팅 초단기 스쿨 스터디 노트] #4

Part02. Figma 기초 및 실습
[CHAPTER 01 Figma 소개와 설치]

Figma란?
xd나 스케치의 단점을 보완하는 멀티유저기능
개발자와의 핸드오프가 별도의 플러그인 없이 가능
인터넷만 연결되어있다면 어떤 플랫폼이나 기기에서 사용할 수 있는 장점이 있음.
데스크탑, 브라우저 버전 1:1로 생성되 만들어짐. 다운로드할 필요x
피크마, 피그잼 스타터버전으로 무료로 사용 가능.
프로페셔널버전은 매월 12불 지급해야함. 하지만 학생이나 교육자인 경우 증빙자료를 통해 무료로 사용가능.

https://www.figma.com/ko-kr/

[CHAPTER 02 Figma 인터페이스]

왼쪽 상단 프로필 -> 테마, 세팅, 계정을 변경할 수 있음

프로필->커뮤니티 들어가면 나만의 커뮤니티를 생성해 타인과 공유할 수 있음
+create new team을 눌러 생성할 수 있음. 이후 삭제도 가능

 

왼쪽 아래 'Explore Community' 클릭 -> 다양한 탬플릿 등을 다운로드 혹은 나의 피그마로 옮겨놓을 수 있음.
커뮤니티 페이지의 검색창에서 'ios staus Bar' 검색하기. 인터페이스 작업을 하며 목업을 해 자주 사용하게 됨.
셀렉해서 들어가면 'open in figma'를 클릭해 가져올 수 있음.
가져온상태에서 page->cover 또는 staus bar에 선택해서 들어갈 수 있고 

왼쪽상단에 피그마 로고->back to files누르면 나가게 됨
커뮤니티 화면서에 'material' 검색 하면 관련 디자인 가져올 수 있음

draft는 작업중인 목록 보여줌. draft 옆 + 클릭 -> 새디자인,피그잼파일 만들거나 이미지, 스케치를 불러올 수 있으며

                                                                             xd는 호완안되나 많이 사용함. 우측상단에도 동일하게 있음
draft + -> 뉴 디자인 -> 파일더블클릭 -> 에디트모드
중앙상단 더블클릭하면 자유롭게 이름변경할 수 있음

마우스툴 안될 경우 한/영 key 누르기
스케일툴보다는 무브툴 많이 사용함. 
무브툴 사용시 shift를 누를 상태에서 누르면 상하비율 고정상태에서 크기조절할 수 있음
데스크탑모드를 다운받아 함께 띄우면 멀티 커서로 사용할 수 있음 

프레임: 화면과 화면안에 요소를 구성하는 컨테이너
섹션: 프레임을 화면에 담는 단위

도형툴: 다양한 도형을 삽입할 수 있고 이미지또는 영상도 삽입할 수 있음

펜툴: 자유드로잉. 정형화되지 않은 툴 만들 수 있음

리소스툴: 컨포넌트를 사용하거나 원하는 플러그인들을 사용하거나 위젯을 불러와서 사용할때 활용하게 됨. 검색 또는 셀렉해서 클릭하면 화면에 적용됨

핸드툴: 스페이스바누르면 적용됨. 좌우등 다양하게 방향이동가능함
말풍선툴: 여러명 협업시, 코멘트달 수 있음

스테이터스바-> assets-> 등록되어있는 컨퍼넌트 눌러 드래그하면 화면에 적용할 수 있음

 

[CHAPTER 03 Figma 도형의 활용]

원하는 크기의 프레임 선택

사각형툴 -> 원하는 방향으로 늘리면 됨
왼쪽 상단 프그마마크-> preferences-> keep tool selected after use 누르면 지속적으로 사각형 그릴 수 있음
alt+드래그 -> 누른위치 정중앙에서 사각형 그릴 수 있음
사각형안쪽에 마우스를 올리면 새로운 점4개가 보임. 각각의 점+alt를 누르면 곡선이 있는 도형으로 자유롭게 변경 가능 함.
원형안에 마우스를 올리면 점이하나 생김. 점을 당기면 arc를 조절할 수 있음. 두께조절, 회전 등 조절 가능
래디우스값 입력해 각이있던 부분이 둥글게 바꿀 수 있음

 

삼각형툴이 다각형툴. 
도형 안쪽 점을 눌러 래디우스(곡선)조절가능하나 각각조절은 안됨
도형 바깥쪽 점을 눌러 3각~60각형으로 변경 가능, 
(오른쪽 바-> 4번째에서도 조절 가능)

별 도형 래디우스조절 1개밖에 없음으로 각각 조절은 안됨.
바깥점 드래그해 count(다리의 개수)를 60개까지 늘릴 수 있음
래티오가 20이하로 줄어들면 다리가 길쭉해짐
별의 크기는 래티오 영향을 받음

 

물방울: 원을 그린 후 중앙상단의 에딧모드로 들어가 블랜드툴 눌러 당기기

하트: 원을 그린 후 더블클릭누르면 에딧모드로 이동. 블랜드툴로 상하 조절하기, 상단의 점을 alt키 누른상태에서 핸들러 조절하면 하트모양됨

 

line툴: shift+드래그 -> 원하는 크기의 수직선그릴 수 있음
오른쪽 바 밑부분의 stroke -> 굵기, 색변경
                                             왼쪽 또는 오른쪽 끝을 원 또는 화살표로 변경
                                             점3개-> stroke style -> dash 변경 =점선
                                             dash cap에서 양끝 모양 변경
                                            점3개-> stroke style -> custom 변경= 일정하지않은 점선
                                            도형에서 점선사용시 센터 사용 많이함

 

 

도형의 stroke을 인사이드 혹은 센터 혹은 아웃사이드로 변경할 시 왼쪽의 그림과 같이 변경됨.

넓이와 크기는 유지된 상태에서 테두리 차이가 있음

 

아이콘을 만들때는 인사이드로 작업함. 동일한 각 또는 선을 활용해 일관성을 주어야함.

펜슬 툴은 작은영역에서만 사용함. 프리드로잉이 가능하다.
펜슬툴 사용 후에는 무브툴을 클릭해야 변경됨

펜툴 드래그해 움직일때 빨간색이 된 지점이 수직.
점을 연결해 사각형 만들 수 있음
점을 연결하다 esc누르면 중단됨
무브툴을 선 위에 올리면 점이 생겨 앵커가 추가됨. 앵커를 드래그해 움직이면 다른 형태가 됨.
펜툴을 누르고 점위에서 alt를 누르고 클릭하면 점이 제거됨
무브툴로 모든 선을 드래그한 후 이동할 수 있음
fill로 내부를 채우면 도형을 쉽게 옮길 수 있음
블랜드툴을 누르면 곡선으로 변경되 핸들러가생성되 자유변경 가능해짐. 자동으로 백터편집모드로 변경됨. 이후 왼쪽 상단에 done을 누르면 원래 레이어화면으로 나갈 수 있음. 다시들어가고 싶을때는 선을 더블클릭하기
백터모드에서 따로 도형을 그려야 개별 인식됨.
펜툴을 오른쪽방향으로 이동해 클릭하고 대각선으로 드래그하면 곡선그릴 수 있음

 

불리언: 합치거나 겹치는 등 다양한 형태를 만들 수 있음. 2개의 도형을 함께 선택 후 상단중앙의 4번째 툴 선택.
컨트롤+g=각각의 색상으로 그룹
불리언툴->union selection =하나의 색상으로 그룹
ctrl+shift+g= 그룹해제
불리언툴->subtract selection =뒤쪽에 위치한 도형만 남김
불리언툴->intersect selection= 도형이 겹쳐진 부분만 남김
불리언툴->exclude selection= 도형이 겹쳐진부분 빼고 남김

 

 

불리언툴과 스트록툴로 동일한 도넛모양을 만든 후 크기를 줄여보면

그림과 같은 차이를 보인다

 

 

마스크: 사진이나 이미지의 특정 부분만 보이게 함.
ex)이미지 위에 원하는 모양의 도형을 그림
도형에서 마우스오른쪽-> send to back
도형과 이미지를 함께 선택한 후 마우스오른쪽-> Use as Mask(=상단중앙에서 3번째툴)
마스크는 해제방법->왼쪽 레이어->mask group->마스크툴 아이콘->중앙상단 마스크툴= 해제완료

 

 

 

 

 

 

 

 

 

 

 

 내 화면에서 동일하게 안뜨는 부분이 있어 연습을 할 수 없었고 생소한 용어들이 아직까지 많아 어렵게만 느껴진다...............배울수 있는거 맞나 ㅜㅜ

 

 

 

“이 글은 제로베이스 콘텐츠 마케팅 스쿨의 강의 자료 일부를 발췌하여 작성되었습니다.”