피그마의무료버전으로는3명까지 공동 작업이 가능한 디자인 툴입니다. 피그마 사이트의 공식 설명에서도 알 수 있듯이, 협업을 위한 디자인 도구라고 설명이 되어있죠^^ 공동으로 디자인 작업을 할 때 유용하게 쓸 수 있는도구입니다. 저는 이 도구를 공동으로상세페이지를 만들기위해 이 도구를 사용하고 있어요.
피그마 사용법 & 단축키
피그마 단축키 정리 피그마에서 도형을 그릴때, 그리고 도형을 정렬할때 쓰는 단축키
1.Alt + H : 수평정렬 2. Alt + V : 수직정렬 3. 원 만들기 : O 누르고, 마우스클릭 4. 네모 만들기 : R 누르고, 마우스클릭 5. 세모 만들기 : Polygon 도구 사용 6. 별 만들기 : Star 도구 사용 7. 텍스트 상자 만들기 : T누르고, 마우스클릭 8. 프레임만들기 : F 누르고, 마우스클릭
피그마 사용법 :피그마에서 기본 도형 편집하기
피그마에서 도형편집 피그마에서 도형을 그린 뒤, 더블클릭을 한다. 더블클릭하면 도형의 모양을 편집할 수 있다.
1. 도형편집 : 펜툴모드로 사용하기 * 원 만들기 : O 누르고, 마우스클릭 아래의 왼쪽처럼 도형을 더블클릭하고, 가운데 아래의 점을 클릭
왼쪽처럼 도형을 더블클릭하고, 가운데 아래의 점을 클릭하면 '펜툴'로 바뀐다.
펜툴모드가 되었다면 방향키를 이용해서 위, 아래로 움직여봅니다. 그러면 도형의 모양이 변하죠? 너무 조금씩 움직여서 답답하다면? Shift키를 누른다. 그러면 +10씩 움직여서 크게 움직여주세요! :)
2. 도형편집 : 이렇게 뾰족하게 만들고 싶다면? Ctrl 키 이용하기
도형 더블클릭, 가운데 아래점을 클릭해서 '펜툴'로 바꾼뒤, Ctrl키를 누르면 뾰족해진다.
3. 펜툴모드에서 이런 모양도 가능!
4. 모서리를 둥글게 하고 싶다면? 오른쪽 창에서 각각의각도조절도 가능해요
피그마 사용법 피그마에서스타일 기억시키기 1. 컬러 스타일 기억 2. 텍스트 스타일 기억
기본적인 도형을 만들 줄 알았다면, 이제는자주쓰는 스타일을 기억시켜서 통일감있는 디자인 작업을해봅시다. 자주쓰는 스타일을 기억시키는 것은 어느 도구를 사용하던지 중요하죠^^ 왜일까요? 작업시간을 정말! 많이 단축시켜 주기때문입니다. +여러 사람과 작업할 때, 통일된 색깔과 통일된 폰트를 사용해서 한 사람이 작업한 것과 같은 통일감을 줍니다.
1. 피그마 기능 컬러 스타일 기억시키기 사용할 색을 지정했다면 Color Styles로 등록시켜, 번거롭게 계속 똑같은 작업을 하지 않도록 해준다.
*네모 만들기 : R 누르고, 마우스클릭 네모에 원하는 색을 채웠다면, 오른쪽 창에서 Fill 탭, 점 4개 있는 부분을 클릭합니다. 내가 지정한 색깔의 이름(Name)과 이를 어디에 사용할 것인지 설명(Description)을 적어줍니다.
이렇게 여러가지의 색깔을 등록하면 아래처럼 내가 등록한 색상들을 확인할 수 있어요. 자주 쓰는 컬러들은 Ctrl + G 로 그룹화시켜서 사용합니다. 이 기능은 상세페이지중 본문에만, 제목에만 쓰이는 컬러들을 저장해두면 편리하게 사용할 수 있어요^ ^
피그마 컬러 스타일 등록
등록한 컬러 스타일 한번에 적용하기 내가 바꾸고 싶은 도형들을 모두 선택해서(Shift키 이용) 한번에 색깔을 바꿔줍니다.
2. 피그마 기능 텍스트 스타일 기억시키기 내가 사용할 폰트의 크기, 색상등을 기억시켜서 작업시간 단축하기
*텍스트 상자 만들기 : T누르고, 마우스클릭 텍스트 상자를 만든 뒤, 오른쪽의 Text의 점 4개를 클릭하고, 지정한 텍스트 상자의 이름(Name)과 이를 어디에 사용할 것인지 설명(Description)을 적어줍니다.
피그마 사용법 _ 텍스트 상자 스타일 기억시키기피그마 사용법 _ 텍스트 상자 스타일 기억시키기
이제 스타일 기억하는 방법을 배웠으니, 상세페이지 만들때 필수 작업! 내가 찍은 제품의 사진을 불러오고, 딱 원하는 곳에만 넣는 기능을 알아볼까요?
3. 피그마 기능 내가 원하는 곳이미지 삽입하기
1. 이미지 삽입 :Ctrl + Shift +K + 이미지를 불러와서,내가 원하는 크기대로 이미지를 삽입하고 싶다면? Ctrl + Shift +K로 이미지 불러온 상태에서 미리 만들어둔 사각형 클릭!해주세요
피그마 이미지 불러오는 단축키 _ 이미지 원하는 크기로 삽입하는 방법
2. 불러온 이미지를 편집하기 : Fill - Crop 기능 이용하기
이미지가 들어간 도형 선택 > 필값에서 이미지 클릭 > 필태그 클릭하고 크롭으로 변경 > 이미지 선택해서 편집
댓글 영역