Figma란?
-
어도비 산하의 웹기반
UI/UX 디자인 및 프로토타이핑, 협업툴프로토타이핑이란?
개발 초기에 시스템의 모형을 만들어 기능의 수정이나 추가를 반복해 시스템을 개선하는 방식 -
부분 유료 프로그램
2022년 9월, 200억 달러로 어도비에 인수 -
2022 Design Tools Survey 결과, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 사용하는 툴로 피그마가 선정되었음
Figma 특징
-
벡터 기반
비트맵 벡터 매우 작은 정사각형 단위의 픽셀로 구성 수학 공식으로 이루어진 디지털 이미지 각 픽셀은 이미지의 색상 정보 점, 선, 곡선 모양 등을 나타냄 확대 시 깨짐 현상 존재 해상도 영향 없이
품질 손실 없이 이미지를 확대/축소 가능JPEG, PNG, GIF 등의 확장자 높은 정밀도와 확장성이 필요한 이미지에 사용
(로고, 아이콘, 일러스트...) -
웹 기반 툴
설치를 하지 않아도 브라우저에서 바로 사용이나 편집이 가능함.
어떤 운영체제나 어떤 기기에도 대응이 되며, 앱 역시 지원하고 있다. -
저장을 하지 않아도 X
-
협업 특화
- 간단하게 링크만 공유해서 여러 명이 아트보드를 보거나, 동시에 편집이 가능
동시에 온라인으로 실시간 작업을 진행할 수 있음.
- 코멘트 기능을 활용 시 디자인 파일에서 바로 커뮤니케이션하고, 피드백을 반영 가능
이미지 내보내기 (export)
해상도 - 1x, 2x, 3x
디스플레이의 화질 성능을 결정하는 중요한 기준으로 1인치당 들어있는 픽셀(Pixel)의 수
PC에서의 해상도
보통 PC에서 사용하는 해상도는 72PPI(Pixel Per Inch) 사용
= 1인치에 들어가는 픽셀 수가 72개
픽셀밀도(PPI)
PPI는 ‘Pixels per Inch’의 약자로 1인치당 픽셀이 몇 개인지를 나타내는 것
- 같은 사이즈라도 해상도가 높을수록 밀도 ↑ → 선명한 이미지
출처 : https://www.remain.co.kr/page/designsystem/resolution-rasterized.php
모바일에서의 해상도
- 모바일은 화면이 작아서 해상도를 올려야 함
- 디자인은 1x로 하지만 디바이스에는 각 배율로 보이게 된다.
- 이미지(png)는 2x로 Export 하는 것을 기억!!
DPI 픽셀 밀도 안드로이드
배율ios 배율 mdpi ~160dpi 1x @1 hdipi ~240dpi 1.5x xdip ~320dpi 2x @2 xxdip ~480dpi 3x @3 xxxdip ~640dpi 4x
픽셀 단위 ( DP, SP, PT )
dp : 안드로이드 기본 사이즈 단위
sp : 안드로이드 텍스트에서 사용하는 단위
pt : ios 사이즈 단위 (=dp)
8px 그리드
디자인 에셋의 사이즈, 간격 및 모든 수치를 8단위로 맞추면 모든 디바이스에서 픽셀이 깨지지 않고 개발 가능 → 디자인 요소들의 사이즈를 8의 배수로 맞추면 좋음
