2021-04-24 (12일차) FIGMA 기초

 

피그마 기초 강좌 - Part1 #figma​ #무료툴

www.youtube.com/watch?v=GsZk8s5JdWg

피그마 기초 Part2 #figma​ #아이콘제작

www.youtube.com/watch?v=4_WS782s96c

 

FIGMA

스케치 프로그램처럼 컴포넌트 기반의 UI편집 툴

구글 문서처럼 자동으로 저장됨

포토샵, 스케치와 달리 여러명 동시 작업 가능

여러명인서 작업할 경우 스케치라 포토샵보다 더 강력함

 

 

<단축키>

shift + + : 화면을 확대

shift + - : 화면을 축소

shift + 1 : 화면에 맞게 사이즈

shift + 2 : 화면 중간에 frame을 표시

ctrl + r : frame 이름 변경

shift + alt + 드래그 + : 텍스트 복사

shift + a : 오토 레이아웃 프레임

s : 도형툴

 

 

- 사이즈가 동일한 frame 생성 방법

  도형툴-rectangle을 이용하여 프레임과 동일한 박스 하나 그리기

  박스를 선택한 상태에서 마우스 오른쪽-frame selection 클릭

 

- 드래그로 fram과 박스 사이즈를 자유롭게 조절하는 방법

  박스를 선택 후, 오른쪽 design패널의  constraints 옵션을 모두  scalre로 변경

  → frame을 좌우로 드래그하면 frame과 박스 사이즈가 frame 사이즈 기준으로 크기조절

  가로길이에 "/2"를 입력하여 2등분하기 (왜 하는지 모름)

 

- 이미지 import 방법

  방법1. design패널의 fill 컬러프리뷰 영역 클릭 후 image로 변경하여 choose image 클릭하여 불러오기

  방법2. shift + ctrl + k 를 클릭하여 불러오기 (여러개도 가능함)

 

- plugin을 설치 후, 이미지 변경 방법

- plugin 설치 방법  

  이미지 마우스 오른쪽 클릭 > plugins > manage plugins

  좌측 메뉴 plugins > 'popular - unsplash'클릭 or 'browse all plugins'클릭

  오른쪽 상단에 있는 검색창에 unsplash를 검색하여 설치

 

- 이미지 변경 방법

  이미지 마우스 오른쪽 클릭 > plugins > unsplash

  'insert random' or 'presets'로 이미지 변경

 

- 이미지 overay효과

  design패널 > fill 편집 역역 + 클릭 > 흰색에서 블랙으로 수정, 방향 수정

  다시 fill 편집 역역 + 클릭 > linear를 solid로 변경 후, 검정색 주고 투명도 5% 주기

 

- 이미지 영영 위로 콘텐츠 배치

  도형-reactangle로 박스 그려주고 500x500 주기

  정사각형의 constraints의 옵션을 모두 center로 변경

  (→ frame의 크기가 변경되어도 자동으로 중앙 배열됨)

 

- 오토 레이아웃 프레임

  auto layout 옵션영역의 + 클릭 or 단축키 shift + a

  (→auto layout으로 변환되면 디자인패널에서 옵션 변경이 가능해짐)

 

- drop shadow effects (text effect도 local style로 적용 가능)

  text 선택 후, design패널의 effexts에서 + 클릭 후 effects 추가

  - shadow effect가 프레임 영역 바깥쪽으로 잘라져 보일 때

    : clip content 비활성화

 

- 이미지 내보내기

  design패널의 하단의 export영역의 + 클릭

 

- 프로토타이핑

  원하는 도형 선택 후 좌측 상단의 prototype 클릭

  점을 마우스로 드래그하여 연결해주기

  플레이 버튼 눌러주기

 

- 구글 머터리얼 디자인 아이콘을 공식 사이트에서 무료로 다운받는 방법

  'material.io/resources/icons' 에 접속하여, 검색창에 'event icon' 검색

  우측 상단에 'icon desing principles' 클릭 후 머터리얼 디자인 가이드 참고

 

- shape툴과 pen툴을 활용한 아이콘 만드는 방법

  좌측 상단에 frame 툴 클릭 후, 24x24 frame 그리기

  design패널에서 layout grid '+' 클릭하여 grid 추가 (현재, default로 10px의 grid가 frame 내에 표시되고 있음)

  'edit' 클릭 후 grid의 크기를 1px 입력 후, 컬러 10%~20%로 수정

  도형툴로 왼쪽 프레임 안에 있는 정사각형과 같은 사이즈로 도형 그리기

  그린 정상각형을 오른쪽 fram으로 옮기고 가운데 정렬

  stroke의 '+' 클릭 후, line의 두께를 0.1로 입력

  line의 옵션을 inside로 바꿔주고, 그 상단에 있는 fill의 hex code를 삭제해주기

  정사각형 모서리를 드래그하여 corner radius 값 주기

  도형툴로 20x20의 원형을 그리고 stroke의 line 두께를 0.1로 바꿔주기

  fill 영역의 hex-code 부분을 '-' 클릭하여 지운 후, 가운데 정렬

  정사각형과 원형 복사 후 사진과 같이 붙여넣고 사이즈 조절 후, 모든 도형을 그룹화