2023.12.13 8일차 수업: Figma 기초+실습

거의 Figma로 실습 위주의 수업 진행..

간단한 설명

Frame: 도형들을 하나로 묶어주는 역할

Section 기능(현재 베타기능) 10/30쯤 release 되었음
Frame의 상위 개념
화면의 사용자들에게 보여지는 개념이 아닌, 개발자들에게 정보를 준다던지 하는 걸로 사용.

레이아웃 => 피그마
피그마: 벡터 프로그램. 간단한 아이콘 그리기 ok.
디바이스마다 해상도(화소)가 다르기 때문에 각각 대응하기 위해 2배수, 3배수 등 배수 작업이 필요함

비트맵: 픽셀(굉장히 작은 사각형)로 작업
-> 자연스러운 색감 표현이 가능함
-> 여러가지 사이즈로 작업이 어려움
-> 포토샵, jpeg, png

벡터: 점과 점을 연결하여 하나의 형태 구성.
-> 점을 옮겨서 모양을 바꾸는 것이 모양의 수정이 아닌, 아예 새로운 모양 생성같은 개념 (사이즈를 조정, 형태 왜곡을 하더라도 깨지지 않음)
-> 용량이 작음. 포인트가 모든 정보를 저장하고 있음
-> 점이 모든 정보를 기억해야하기 때문에 사진이나 컬러를 섬세하게 표현하기 어려움
-> 피그마

광고 이미지 -> 포토샵

사각형 모양의 꼭지점: 바운딩 포인트라고 부릅니다
라운딩 넣을때: 포인트를 찍은 후 Alt를 누르고 움직이면 각 코너값마다 라운딩을 다르게 넣을 수 있다. 입력창을 이용해도 좋다.

Frame안에 도형을 넣으면 도형은 각각의 레이어를 갖게 된다.
Object 선택 후에 '[' 선택하면 해당 레이어가 가장 아래로 가며 'Ctrl + [' 누르면 레이어 한 계단씩 움직임
']' 선택하면 해당 레이어가 가장 위로 가며 'Ctrl + ]' 누르면 한 계단씩 움직임

실습

아래의 아이콘을 피그마 프레임과 기본 도형들을 이용하여 만들어보자!!!

내 결과물

어디서 가져온거아니구,, 찐으로 제가 했습니다... 증거 투척 ㅎㅎㅎ,,,

으아 진짜 저 문서 접힌거랑 편지봉투가 난관이었다.....
복습삼아 다시 한번 해봐야겠당..