작업 영역 생성 Frame
F 단축키로 작업 영역 생성
작업 영역은 반복 생성 가능
컴포넌트 생성
컴포넌트: 재사용하기 위한 하나의 단위
프레임 내에서 생성한 도형을 선택한 후
오른쪽 다이아모양 아이콘을 눌러 component를 생성
도형을 클릭했을 때 테두리 색상이
파란색에서 보라색으로 변경됨
왼쪽 메뉴바 Assets > Create in this file
파일 내에서 해당 컴포넌트를 사용할 수 있도록 생성
생성된 컴포넌트를 선택해
파일 내에서 동일한 이미지를 생성할 수 있다
생성된 이미지에 대해
한번에(동시에) 색상 변경 등의 작업이 가능
특정 도형에 대해
마우스 우클릭 > detach instance 설정으로
컴포넌트에서 해제할 수 있다
그룹핑 Grouping
grouping을 통해 이미지들을 그룹화해
한꺼번에 작업할 수 있다
이미지를 더블클릭해
그룹을 해제하지 않고도 하나의 개체만 별도로 이동할 수 있다
grouping은 이중 삼중으로도 가능하다
오토 레이아웃 Auto Layout
여러 개체 동시에 선택 > 마우스 우클릭 > 오토 레이아웃
아이콘 순서를 변경하더라도
오토 레이아웃으로 자동으로 정렬이 유지된다
오른쪽 작업 영역에서 오토 레이아웃 설졍 변경 가능
=> 개발을 고려할 때 해당 영역은 style로 설정
display flex direction을 colum으로 변경
<예제> 네이버 로그인 버튼 따라하기
좌단 페이지 패널 정보 탭에서
레이아웃을 클릭 > ctrl+[ 또는 ctrl+] 키를 사용해 레이어의 순서를 변경
우단 설정 영역에서 radius로 사각형의 모서리를 둥글게 조정
Fill / Stroke / Effects 등을 사용해
도형에 각종 효과를 부여할 수 있다
Libraries
<컬러 정보 저장>
자주 사용하는 컬러 팔레트를 저장해 두었다가 사용
color/orange 형태로 그룹 내 각 컬러를 구분해 저장할 수 있다
* 단, naming은 띄어쓰기를 구분한다
<폰트 정보 저장>
폰트도 컬러와 마찬가지로 동일하게
Library에 등록해서 사용 가능
* color와 마찬가지로 naming은 띄어쓰기를 구분한다
텍스트박스를 클릭해 Typography 의 4개짜리 네모 아이콘을 눌러
저장된 폰트를 적용할 수 있다
마찬가지로 적용된 폰트를 해제하는 것도 가능하다
적용된 Typography 옆 링크 해제 아이콘을 클릭해 적용된 폰트 해제
https://developernew.tistory.com/428
Figma 디자인/기획/개발 협업 툴 피그마 기본 사용법 + 단축키
피그마 시작 피그마 사이트 접속 또는 앱 설치https://www.figma.com/ Figma: The Collaborative Interface Design ToolFigma is the leading collaborative design platform for building meaningful products. Design, prototype, and build products fas
developernew.tistory.com
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design platform for building meaningful products. Design, prototype, and build products faster—while gathering feedback all in one place.
www.figma.com
'Frontend > Figma' 카테고리의 다른 글
| Figma 피그마 기본 기능 사용 - 플러그인, 커뮤니티 (0) | 2025.12.04 |
|---|---|
| Figma 디자인/기획/개발 협업 툴 피그마 기본 사용법 + 단축키 (0) | 2025.12.04 |