#2. 피그마 기초 기능 배우기 [피그마, Figma, 디자인툴]
안녕하세요! 오늘은 피그마 단축키에 이어 실무에서 자주 사용하는 기능이자 기본적인 기능들에 대해서 알아볼거예요.
저번 포스팅에서는 왼쪽 버튼들에 대해서 알아봤는데요 오늘은 오른쪽에 있는 기능들을 알아보도록 할게요!
우선 아무것도 선택하지 않았을 떄의 상태인데요
맨 위부터 천천히 설명하자면 Design/Prototype 두 버튼은 말 그대로
디자인모드와 프로토타입 모드를 선택하는 버튼이에요.
디자인 모드는 저희가 일반적으로 디자인을 작업하는 부분이고 프로토타입은
피그마의 장점이자 강점인 디자인만으로 홈페이지를 이동 및 모션을 넣어서 간접 체험을 해볼 수 있는 기능이에요!
프로토타입은 나중에 포스팅 전체를 사용해서 설명드리도록 할게요!
그 다음으로는
페이지 영역인데요! 이 부분은 페이지의 배경 색을 고를 수 있는 영역이예요.
어두운 배경을 좋아하는 분도 있고, 밝은 배경을 좋아하는 분도 있으시잖아요?
여기에서 자유롭게 배경색을 지정해줄 수 있답니다.
이제 아무것도 선택하지 않았을 때 사용하는 기능들은 여기서 끝내도록 하고! 다음은 영역이 잡혀있을 떄의 기능들을 설명 드릴게요
제가 지금 프레임을 하나 만들어서 영역을 선택해보았어요.
보이시나요? 뭐가 엄청 많이졌죠?😆
마찬가지로 위에부터 천천히 설명 드릴게요!
이 부분은 익숙한 그림체가 보이시죠? 맞아요 좌우정렬을 할 떄 사용하는 버튼이에요.
이 정렬은 프레임 안에 다른 프레임이 있거나 도형, 텍스트 등이 있을 때 사용할 수 있어요.
보이시나요? 프레임 안에 텍스트를 선택했더니 버튼이 활성화가 되었어요!
여기서 하나 설명드리자면 Auto layout을 설정하게 되면 저 버튼은 비활성화가 됩니다.
왜냐하면 자동으로 정렬을 지정해주는 것이기 때문이에요!
다음으로는 프레임 영역의 기능인데요.
첫번째로 세로로 긴 사각형은 Portrait, Landscape , Resize of fit 기능이에요.
Portrait : 높이를 가로보다 더 길게
Landscape : 가로를 높이보다 더 길게
Resize to fit : 프레임 내에 있는 요소에 크기를 맞게
입니다.
두 번째에 있는 X와 Y는 현재 프레임이 위치해있는 위치를 X축과 Y축으로 나타낸 것입니다.
세 번째에 있는 W(Width) H(Height)는 가로와 세로의 길이를 설정할 수 있는 기능인데요.
가로와 세로를 설정해주고 이 비율 그대로 사이즈를 조절하고 싶을 땐 옆에 링크 기능을 사용하는데
왼쪽이 클릭 전, 오른쪽이 클릭 후 입니다.
링크를 해제했을 때에는 가로를 변경해도 세로가 변경되지 않아요.
그러나 링크를 설정한 후에 가로값을 바꾸면 세로값도 그에 맞는 비율로 자동으로 조절되어서 변경됩니다.
네 번재 기능은 회전 기능인데요. 손으로 직접 회전을 하다보면 아무래도 원하는 각도에서 조금씩 엇나갈 때가 있는데
이 기능을 사용해서 각도를 조절해주면 원하는 각도로 회전이 가능합니다.
제가 예시로 45도를 넣어봤는데 정확한 다이아몬드가 되었죠? 이런식으로 각도조절에 유용하게 사용할 수 있습니다!
다섯 번째로는 border-radius기능입니다. 퍼블리싱을 해보신 분이면 border-radius가 무엇인지 다 아시겠지만
모르시는 분들이 계실 수도 있어 간단히 설명드리자면 사각형의 모서리를 둥굴게 만들어주는 기능입니다.
저 숫자 란에 원하는 px을 넣어주시면 사각형 모서리가 둥굴고 귀엽게! 바뀌겠죠? 오른쪽에 있는 사각형을 선택하면
이렇게 각 모서리별로 따로 radius를 줄 수 있는 창이 떠서 유용하게 사용할 수 있어요!
마지막은 Clip content 기능인데요. 이 기능은 코딩으로 따져보면 overflow : hidden 기능입니다.
Clip content에 체크를 해놓으면 hidden 이 되고, 체크를 해제해놓으면 none이 됩니다.
overflow란 프레임 밖으로 요소가 튀어나간 것을 의미하는데요.
프레임 밖으로 요소가 튀어나간 것을 안보이게 하고싶다면 저 기능에 체크를 해주면 된답니다!ㅅ
그림으로 보니까 이해가 훨씬 쉬우시죠?😆
다음은 Layout grid 기능인데요 Auto layout 기능을 나중에 설명하는 이유는
Auto layout을 설정해놓으면 또 바뀌는 기능들이 있어서 마지막에 설명 드리겠습니다!
Layout grid는 프레임 안에 그리드를 설정해서 보기좋은 홈페이지 레이아웃을 잡는데에 도움을 주는 기능인데요!
gird를 추가하게 되면
이런 창이 뜨는데요.
Grid를 클릭하면 이렇게 세 가지를 고를 수 있는 드롭다운이 나와요. 홈페이지 제작시에 많이 사용되는 건 Columns 기능이라
Columns로 설명을 드리도록 하겠습니다.
빨갆색으로 사각형들이 생긴게 보이시나요? 위에부터 설명드리면
Count : 빨간색 Columns의 갯수
Color : Columns의 색상
Type : Grid의 유형 선택
Width : Grid의 넓이값
Margin : Grid의 양 옆 여백
Gutter : Grid 영역 간 간격
순서대로 하나씩 설명드릴게요.
1. Count
Count 갯수를 8로 변경했을 떄의 모습이에요.
빨간색 Grid영역이 8개로 늘어난 게 보이시죠? 이렇게 영역의 개수를 정해주는 기능입니다.
2. Color
Grid의 색상과 Opacity(투명도)를 지정해주는 기능이에요.
작업하는 작업물의 색상과 반전되게 지정해주면 훨씬 눈에 잘 보이겠죠?
3. Type
세 번째로 Type기능인데요. Grid의 타입을 정하는 기능이에요.
이해하기 쉽도록 이미지로 가져왔어요!
4. Margin
네 번째 기능은 Margin인데요.
코딩할 때 사용하는 Margin기능과 똑같은 기능이예요. 이미지로 볼 때에도 차이가 보이시죠?
Grid 양 옆의 여백크기를 지정해주는 기능입니다.
5. Gutter
마지막 기능은 Gutter 기능인데요.
코딩할 때에 사용하는 Padding기능과 동일한 기능이예요.
Grid간 간격을 지정할 수 있는 기능이예요!
다음은 Layer 영역인데요.
레이어 영역의 효과와 투명도를 지정할 수 있는 기능이예요.
디자인 툴을 사용해보신 분들은 대부분 알고계시는 기능이니 패스하도록 할게요!
다음은 Fill 기능을 설명드릴게요
Fill은 말 그대로 레이어의 배경색을 칠해주는 기능이예요.
Fill 영역을 #000000으로 지정해줬어요. 영역의 전체 배경색이 변경되었습니다!
제가 선택한 기능은 Libraries 기능인데요.
간단하게 설명 드리자면, 이 작업물 또는 다른 작업물에서 만들어놓은 컬러 차트를
컴포넌트화 시켜서 하나하나 지정해주지 않고도 바로 사용할 수 있는 기능이에요!
이 라이브러리를 만들 수 있는 기능은 다음 포스팅에서 자세히 설명 드릴게요!
다음으로 는 +버튼을 눌렀을 때인데요.
컬러차트가 하나 더 생성된게 보이시죠? 컬러 위에 컬러를 덧댈 수 있는 기능인데
컬러 위에 이미지를 넣고싶거나 다른 색상을 넣을 때 사용하는 기능이예요.
예시로 제가 이미지를 넣어보도록 할게요!
노란색 박스 부분을 클릭하면 저런 차트 모달이 나오는데요
상단의 네 개의 버튼을 한 번 살펴보면 왼쪽부터 Color / Gradient / image / video를 사용할 수 있는 기능이에요.
저는 이미지를 넣어보겠다고 했으니까 이미지 영역으로 이동해볼게요!
그럼 이런 식으로 배경이 바뀌게 되는데요 여기에서 노란 박스 영역을 클릭해서 이미지를 넣어주는 방법도 있지만
내 파일에서 드래그 해서 바로 적용을 시킬 수 있는 방법도 있습니다!
이미지 적용을 시켜봤는데요! 아까 위에서 투명도가 20%였기 때문에 이미지가 투명도가 주어진 걸 볼 수 있어요!
이런식으로 백그라운드 위에 이미지를 넣을 수도, 비디오를 넣을 수도 있는 기능입니다!
다음 기능은 Stroke기능인데요.
Stroke는 코딩에서 border를 담당하는 기능입니다.
레이어의 테두리에 선을 넣어주는 기능인데요.
잘 보이도록 빨간색으로 설정해줬어요.
이런 식으로 영역의 테두리를 생성해주는 기능인데요
조금 세세하게 살펴보면
Stroke의 굵기를 지정해주는 기능이예요. px단위로 원하는 굵기를 지정해줄 수 있습니다.
다음은 저 사각형 모양의 기능인데요.
나는 만약 아래에만 Stroke를 넣고싶다! 할 때에는 저 버튼을 누르신 후 Bottom을 클릭해주면?
아래에만 Stroke가 적용된 것을 확인 할 수 있어요!
다음은 Effects 기능인데요.
+버튼을 누르면 Drop shadow가 생긴 걸 확인할 수 있어요. 기능이 네 가지가 있는데
Inner shadow : 내부 그림자
Drop shadow : 외부 그림자
Layer blur : 레이어 블러 처리(흐림 정도)
Background Blur : 백그라운드 블러 처리(흐림 정도)
왼쪽부터 Inner shadow / Drop shadow / Layer blur 입니다. Background blur는 백그라운드가 있어야 할 수 있는 기능이라
다음에 더 자세한 설명을 가지고 올게요!
마지막은 Export 기능인데요.
+ 버튼을 누르면 이렇게 나오는데 내보내기 기능이라고 보시면 됩니다.
원하는 배율로 원하는 형식을 골라 내보내기를 할 수 있는데요.
형식은 이렇게 네 가지로 선택이 가능합니다! 원하는 규격을 설정해주신 후
노란 박스를 눌러주면 다른이름으로 저장을 해 내보내기를 할 수 있어요!
작업물이 여러개일 때 레이어 클릭 후 내보내기를 하면 그 영역만 내보낼 수 있어 유용한 기능이예요.
.
.
.
.
.
이렇게 해서 오른쪽 작업바에 있는 기능에 대해서 설명 드렸는데요!
오늘 설명드리지 못한 Auto layout 기능은 기능이 너무 여러가지라서
다음 포스팅에서 자세히 설명드리도록 하겠습니다!
다음에 더욱 유익한 글로 돌아올게요
안녕!
