FIGMA 피그마란, ‘디자인 및 협업’을 위한 클라우드 기반의 그래픽 디자인 작업 도구
*클라우드 기반 = 온라인 환경을 통해 사용자에게 서비스를 제공한다는 뜻
장점 Big 3
1️⃣ 협업 (실시간 공동 작업) 2️⃣ 접근성 (웹브라우저 사용, 링크 공유) 3️⃣ 자동백업 (클라우드 자동저장)
👉
Figma Design File 활용
1) 워크스페이스 구조 : (좌) 레이어/에셋 패널 (우) 디자인/프로토타입 패널
2) 링크 공유 Share 파일 공유 Export*권한: view, edit
3) 주요 단축키
- 단축키 설정 확인 ctrl + shift + /- 기본 작업모드 move V , 이동모드 hand H , 댓글달기 comment C*기본 동작의 경우 단축키 동일
- 복사하기 ctrl + C (이미지로 복사 ctrl + shift + C), 붙여넣기 ctrl + V
- 이전으로 ctrl + Z, 찾기 ctrl + F
회원가입 후, 1번에서 3번까지 차근차근 연습해 보세요!
01 주요 메뉴 사용하기
👉
단축키를 활용하여 작업할 공간(Frame)를 생성하고, 간단한 Presentation Cover를 만들어봅니다.
작업 공간 생성 - Frame(프레임; F), Group(그룹; G), Section(섹션; shift/ctrl + S)
내부 요소 수정 - 해당 요소 Ctrl+클릭 하여, 우측 Design panel 에서 크기 조절, 간격 조정, 색상 변경, 투명화
버튼 디자인 만들기, 정렬 설정 - text, auto wired
레이어 순서 변경 - 그룹 내 최하단[ , 최상단] 단축키를 활용하여, 좌측 Layer panel&화면에서의 각 요소의 이동을 확인
주요 메뉴 설명
1) 작업공간 생성
각 요소들을 묶을 수 있는 종류는 3가지가 있어요.
’ Section > Frame > Group ‘ 순서로 크기를 구분할 수 있으며, 크기와 관계없이 section을 group화할 수도 있습니다.
프레임(Frame)이란, 작업공간 (또는 아트보드)
- 단축키 : F , 각 요소 선택 후 ctrl + alt + G , 해제 시 ctrl + 백스페이스 (또는 shift + ctrl + G)
- 작업할 영역의 공간에서는 다른 요소들을 포함할 수 있습니다.
그룹(Group)이란, 요소를 묶은 상태
- 단축키 : 각 요소 선택 후 ctrl + G , 해제 시 ctrl + 백스페이스 (또는 shift + ctrl + G)
- 각 요소들을 그룹으로 묶어 정리할 수 있습니다.
섹션(Section)이란, 화면을 담은(포함한) 영역
- 단축키 : shfit + S , 각 요소 선택 후 ctrl + S , 해제 시 ctrl + 백스페이스 (또는 shift + ctrl + G)
- 각 요소들을 한 공간에 담아 정리할 수 있으며, 화면 축소 시 눈에 잘 띄는 특징을 가지고 있습니다.
*각 상태에 따라 좌측 Layer panel에서 아이콘이 다릅니다.
2) 내부 요소 수정
Element 의 Design panel 을 간단하게 살펴봅니다.
디자인 패널은 선택한 요소를 상세 편집할 수 있는 상태값을 보여주는 곳으로, 크기~색상 등 다양한 편집이 가능합니다.
Frame 디자인 패널
Frame은 공간을 지정하여, 내부에 작업을 하기에 적합합니다. 또는 자동 정렬을 위한 영역으로써 활용이 가능합니다.
Frame 영역을 선택하면 보여지는 우측의 디자인 패널에서 (1) 프레임의 위치 (2) 프레임의 크기 (3) 프레임의 회전값 (4) 프레임의 색상을 확인해 보세요.
(1) X값, Y값 - 현재 page에서 해당 Frame의 위치
(2) W값, H값 - 해당 영역의 크기(width, height)
(3) 해당 영역의 회전각도
(4) 배경색상 / 투명도 / visible
Group 디자인 패널
Group은 요소를 묶은 상태로, 보통 Frame 내부에 너무 많은 요소가 있는 경우 깔끔히 묶어서 관리합니다.
Frame 내부에 존재하는 경우 ‘상위(frame)-하위(group)’의 관계가 형성되며, 상위 값의 변동에 따라 어떠한 기준에 따라 함께 수정될지 설정할 수 있습니다.
constraints; 요소의 위치 통제
- 현재 선택한 group을 포함한 frame의 크기에 따라 변동될 group의 위치 기준 값 설정
- 상위영역 변동에 따른 가로기준 / 상위영역 변동에 따른 세로기준
3) 버튼 디자인 만들기, Auto layer 정렬 설정
Auto layer 기능을 활용하여, 간편하게 버튼을 제작할 수 있습니다.
해당 기능은 자동 배열 및 정렬이 특성으로, 2개 이상의 요소를 대상으로 사용이 가능합니다.
(ex. 버튼의 경우, 1_텍스트 2_frame)
간편하게 버튼 형태를 만들고 싶은 경우, T 텍스트를 생성한 후 shift + A 단축키를 활용하여 auto layer 로 변경해 주세요.
색상이나 크기 등 일부 값을 설정하면 끝!
위 활성화된(선택된) 버튼은 frame 안에 text가 위치한 관계입니다.
4) 레이어 순서 변경
요소들이 겹쳐서 순서 조정이 필요한 것을 선택한 후, 화면 좌측 layer panel에서 직접 마우스로 끌어서 순서를 변경하거나 단축키를 활용하여 앞/뒤 순서를 설정할 수 있습니다.
단축키 [] 를 활용하여, 각 요소의 Layer 쌓인 순서를 변경할 수 있습니다.
👉
간략한 단축키
최상단 ]
최하단 [
layer 하나씩 이동 ctrl + ]ctrl + [
02 반복 사용 기능 간단하게 알기
컴포넌트
03 참고자료 활용하기
플러그인
무료로 사용 가능한 플러그인이 다양하게 있습니다. 검색을 통해 다른 사용자가 등록한 플러그인을 찾을 수 있습니다.
특히 Google Material Icon과 같이 반복 사용이 필요한 경우, plugin을 실행하고 북마크하는 것을 추천!
상단 메뉴 중 우측에서 3번째 클릭(또는 Shift + I) > Plugin 클릭
커뮤니티
다른 사용자가 등록한 다양한 디자인 에셋, 템플릿 등을 활용할 수 있습니다.
좌측 상하단에 커뮤니티 아이콘을 클릭
🎶 FIGMA 사용팁
TIPS 01 특정 지점에서 내 작업을 저장하고 싶을 때,
[ File > Save to version HISTORY ] : ctrl + alt + S
상단 메뉴 첫 번째 아이콘 클릭
TIPS 02 레이어의 이름을 변경하고 싶을 때,
해당 요소 click → ctrl + R
📃 오늘의 연습
1️⃣
커뮤니티에서 해당 자료 내 공간으로 불러오기
안내한 자료 외 다른 자료를 활용하면 더 좋아요.
Community > ‘presentation’ 검색
2️⃣
배운 기능 활용하기
텍스트, 색상 등 배운 기능을 활용하여 presentation의 cover 디자인을 수정하여 사용해 보세요.
Open in figma > 열린 파일에서 필요한 Frame 복사 & 내 공간에 붙여넣기
3️⃣
수정한 파일 링크 공유
댓글로 작업한 공간의 링크를 공유해주세요. (viewer 권한으로 link 공유)
