figma 기초 이론

유투브 '오쌤의 니가스터디' 피그마 기초이론 강좌

 

웹 기반 디자인 툴

new design / new figjam 협업, 기획 시 많이 쓰는 프로그램

 

• 단축키 정리

기능 검색: ctrl /

오브젝트 복제: ctrl D

투명도 조절: 숫자키 0~9(00~0%)

그룹: ctrl G

그룹해제: ctrl shift G

눈금자: shift R

확대: ctrl + 또는 ctrl 휠 위로

축소: ctrl - 또는 ctrl 휠 아래로

컴포넌트 만들기: ctrl alt K (Mac에서는 command option K)

 

 

#02. 프레임,가이드,그리드

 

1.Frame 생성

아트보드와 같음, 디자인 작업을 할 틀

 

2.Guide

오브젝트를 더 섬세하게 작업할 수 있게 도와주는 안내선

눈금자(ruler) 단축키: shift R

가이드 꺼낼 시 alt키 누르면 픽셀 확인 가능

 

3.Grid 생성

오브젝트를 더 섬세하게 작업할 수 있게 도와주는 격자선

웹에서는 컬럼 그리드 방식으로 디자인을 많이 하면서 중요해짐

figma grid 장점은 여러 컬럼 그리드를 레이어처럼 사용할 수 있다는 것

 

-margin: 프레임과 전체 컬럼 간의 좌우 여백

-gutter: 컬럼과 컬럼 사이의 여백을 의미

 

웹 그리드 시스템을 쉽게 계산할 수 있도록 해주는 사이트 (figma는 툴 내에서 자동 계산해서 설정해줌) 

http://gridcalculator.dk 

Grid Calculator by Nicolaj Kirkgaard Nielsen

 

 

#03. 사각형과 원형 도형툴

 

1. 사각형 그리기

2. 모서리 둥근 사각형: 모서리별로 지정도 가능

3. 원형

 

#04. 다각형툴, 별툴, 선툴

 

1. 다각형툴 polygon :실습) 이스라엘 국기 완료

2. 별도형: 실습) 마커 핀 완료

3. 선도형

  3.1 cap과 arrowhead

  3.2 점선 처리

  3.3 선을 면으로 변경 (outline stroke)

 

#05. 텍스트툴, 스마트셀렉션

 

1. 텍스트툴

plugin 활용 (plugin - find more plugin으로 가서 lorem lpsum 다운 받아서 활용했음-무의미한 텍스트를 생성해주는 플러그인)

피그마 텍스트 문단 줄간격은 코딩에 맞춰져 있음

 

2. 텍스트툴 벡터(면)로 변경

텍스트를 레이어창에 outline stroke

 

3. 스마트 셀렉션

피그마의 선택툴이 일정 간격을 유지하는 오브젝트를 효과적으로 관리하는 것

동그란 위젯: 도형 선택 관련 위젯

줄 위젯: 도형 간격 조정 위젯

 

 

#6. 피그마 펜툴

 

1. 직선,곡선

펜툴 소스 가져와서 연습해봤음

 

2. 점 추가, 점 삭제

더블 클릭 후 선택툴로 점추가가 가능 (점 삭제는 불가능)

펜툴로 점 추가 하면 ESC로 끊어주기, 점 삭제는 Alt키와 함께 점 누르면 처리

방향선 추가/삭제는 bend툴 혹은 Ctrl