피그마에서 많이 사용하는 기능을 텍스트로만 설명해 보겠습니다.
도움 되기 바랍니다.
다른 사람 프로젝트 내 파일로 포크하기
피그마에서 프로젝트 내 프로젝트를 포크하는 방법은 공식적으로 '포크'라는 명칭 대신, "파일 복사" 혹은 "새 파일로 저장" 같은 개념으로 이루어집니다.
단계별로 쉽게 설명할게요.
- 포크할 대상 프로젝트(파일)를 피그마에서 엽니다.
- 상단 메뉴 중 '파일(File)'을 클릭합니다.
- 그다음 '사본 만들기(Duplicate)' 또는 '복제하기(Duplicate to Drafts)'를 선택합니다.
- 이 작업은 원본 파일 전체를 복사하여 내 드래프트(내 작업 공간) 또는 원하는 프로젝트에 새로운 파일로 저장해 줍니다.
- 복사된 파일에서 자유롭게 수정 및 작업하세요.
- 필요하면 복사본을 원하는 다른 프로젝트 폴더로 이동할 수도 있습니다.
즉, '포크'라는 이름의 버튼은 없지만 "복사하기" 기능으로 원본 프로젝트를 복제하여 독립적으로 편집할 수 있으니, 이것이 피그마에서의 포크와 동일한 역할을 하는 방법이에요.
프레임 콘트롤
프레임 크기를 리사이징 하게 되면 내부 프레임이 외부 프레임과 연동되어 리사이징 되는 경우가 있습니다.
그럴때는 이렇게 해보세요.
문제가 되는 내부 프레임 셀렉
프로퍼티 - 디자인 - 포지션
포지션 오른쪽 사각형 아이콘이 콘스트레인스 매뉴입니다.
탭 합니다.
탭하면 옵션이 나옵니다.
여기서 left top 세팅 합니다.
이것은 이 엘리면트를 고정값으로 사용하겠다는 뜻입니다.
이렇게 하면 문제가 해결 됩니다.
이제 외부프레임과 연동하지 않을 것입니다.
단축키로도 가능합니다.
ctrl + shift 누르고 프레임 조절하면 됩니다.
엘리먼트 컴포넌트 해제하기
가끔 컴포넌트 인스턴스를 일회성 디자인 요소로 사용할 경우가 있습니다.
그런 경우 컴포넌트를 해제해야 합니다.
캔버스 - 엘리먼트 셀렉
툴바 - 레이어
프레임 - 우클릭 - 디태치인스턴스
이렇게 하면 컴포넌트 해제 됩니다.
그런데 이것은 컴포넌트 인스턴스인 경우만 가능합니다.
컴포넌트 원본인 경우는 불가능 합니다.
엘리먼트 패딩 세팅
오토레이아웃 X Y 40 패딩을 세팅해 보겠습니다.
엘리먼트 준비 합니다.
엘리먼트 그룹셀렉션 합니다.
툴바 - 레이어
그룹 셀렉
그룹 셀렉
프로퍼티 - 디자인
레이아웃 - 오토레이아웃 탭
오토레이아웃 적용하면 그룹이 프레임으로 변경 됩니다.
프레임 백그라운드 화이트로 세팅 합니다.
위스 허그 세팅
하이트 허그 세팅
원하는 X Y 패딩값을 세팅 합니다.
세팅하면 위스와 하이트에 패딩값이 플러스 됩니다.
이렇게 하면 엘리먼트 패딩을 세팅 할 수 있습니다.
완성입니다.
프레임 스크롤 세팅
캔버스 - 프레임 셀렉
프로퍼티 - 프로토타입
오버플로우 스크롤링
버티컬 스크롤링 셀렉
이렇게 하면 프레임을 스크롤 할 수 있습니다.
Image control
이미지 가져오기
이미지를 가져오는 방법은 간단 합니다.
이미지를 피그마 캔버스로 드래그 합니다.
이렇게 이미지를 로드해서 사용할 수 있습니다.
하지만 일반적으로 피그마는 이 방법보다 훌륭한 방법을 제공 합니다.
아래 매뉴얼대로 해보기 바랍니다.
메뉴바 - 랙탱글
캔버스
네모 하나 그립니다.
네모 셀렉
프로퍼티 - 디자인 - 필
헥스코드 옆 칼라 셀렉
칼라 모달
- 상단 셀렉 드롭 다운
- 이미지 셀렉
- 하단 추우즈 이미지 유아이 탭
- 이미지 셀렉
이미지 가져오기 완료
이미지 배치
프로퍼티 - 디자인 - 필
모달
- 필/크롭/핏 주로 이 3가지 중 필요한 기능 셀렉하면 됩니다.
이펙트 적용
쉐도우 이펙트 적용하기
캔버스 - 엘레멘트 셀렉
프로퍼티 - 디자인 - 이펙트
플러스 탭
셀렉트박스 - 드롭쉐도우 셀렉
드롭쉐도우 모달
- 옵션 셀렉하여 원하는 효과 세팅
이펙트 완성
이펙트 스타일 생성
캔버스 - 엘레멘트 셀렉
프로퍼티 - 디자인 - 이펙트 - 점네개 탭
크리에잇 뉴 이펙트 스타일 모달
- 스타일 네이밍 - 크리에잇 스타일 유아이 탭
스타일 생성 체크
캔버스 - 바닥 탭
프로퍼티 - 디자인
지금까지 생성된 스타일 리스트를 체크 합니다.
캔버스 백그라운드 칼라 세팅
캔버스
아무것도 셀렉 되지 않은 상태로 만들기
프로퍼티 - 디자인
1층 백그라운드
칼라 셀렉
캔버스 백그라운드 칼라 변경 완료
프레임 백그라운드 칼라 세팅 하기
캔버스
- 프레임 셀렉
프로퍼티 - 필
- 플러스 탭
- 칼라 모달
- 스포이드 아이콘 탭
- 레퍼런스 백그라운드 픽
- 헥스코드 카피
캔버스
- 프레임 셀렉
프로퍼티 - 필
- 점 네개 탭
- 크리에잇 뉴 칼라 스타일 모달
- 헥스코드 페이스트
프레임 셀렉해서 이동하는 방법 하나
캔버스
- 원하는 프레임 내부 요소 아무거나 하나 셀렉
레이어
- 어떤 프레임에 있는 요소 있는지 확인
- 프레임 셀렉
메뉴바
- 무브
- 이동
프레임 셀렉해서 이동하는 방법 둘
캔버스
- 원하는 프레임 네임 체크
레이어
- 프레임 네임 셀렉
메뉴바
- 무브
- 이동
텍스트 스타일 만들기
캔버스
- 디자인하고자 하는 텍스트를 하나 셀렉 합니다.
프로퍼티패널 - 텍스트
- 텍스트 디자인 합니다.
- 텍스트 우측 점네개 박스 탭 - 모달
-- 텍스트 스타일 우측 플러스 탭
-- 텍스트 스타일 네이밍 - 센스있게 네이밍 해 봅니다.
-- 크리에잇 스타일 유아이 탭
캔버스
- 빈 바닥 아무데나 탭 해 봅니다.
프로퍼티패널 - 디자인
- 텍스트스타일에 네이밍한 스타일이 생성됬는지 체크 합니다.
- 텍스트 스타일 하나 완성입니다.
- 코딩으로 비유하자면 클래스 하나 완성입니다.
칼라 스타일 만들기
캔버스
- 텍스트 하나 셀렉 합니다.
프로퍼티 패널 - 필
- 칼라 셀렉
- 헥스코드 카피
- 오른쪽 점 네개 탭
- 칼라 스타일스 모달
-- 오른쪽 플러스 탭
-- 크리에잇 뉴 칼라 스타일 모달
-- 헥스코드 페이스트
-- 크리에잇스타일스 유아이 탭
캔버스
- 빈 공간 탭
프로퍼티 패널 - 칼라스타일스
- 칼라 스타일이 잘 등록 됬는지 체크 합니다.
텍스트에 텍스트 스타일과 칼라 스타일 세팅 하기
캔버스
- 텍스트 하나 셀렉
프로퍼티 - 텍스트
- 우측 점 네개 탭
- 하단에 텍스트 스타일 중 원하는 스타일 셀렉
캔버스
- 텍스트 하나 셀렉
프로퍼티 - 필
- 점 네개 탭
- 칼라스타일스 모달
- 하단에서 칼라 셀렉
히스토리 사용법
피그마는 파일 세이브라는 칸셉트가 없습니다.
대신 히스토리라는 칸셉트가 존재 합니다.
일단 현재 프로젝트 네임을 변경하겠습니다.
프로젝트 네임 변경
메뉴바 - 프로젝트 네임
프로젝트 네임 변경
히스토리 보기
메뉴바 - 프로젝트 네임 옆 셀렉트 유아이 탭
쇼우 버전 히스토리
프로퍼티 - 버전 히스토리
히스토리 시간대 별 자동 저장을 볼 수 있습니다.
이것이 피그마 히스토리 기능입니다.
히스토리 포인트 만들기
특정 시점을 지정해서 히스토리 포인트를 만들어 보겠습니다.
이 기능은 작업 버전관리에 탁월한 성능을 발휘 합니다.
프로퍼티 - 버전 히스토리
- 상단 우측 - 플러스 유아이 탭
애드 투 버전 히스토리 모달
- 히스토리 포인트 네이밍
- 세이브 유아이 탭
히스토리 포인트가 만들어 졌습니다.
그런데 이 상태에서는 메뉴바를 사용할 수 없습니다.
메뉴바가 작아졌 있을 겁니다.
히스토리 프로퍼티에 엑스를 눌러 히스토리 프로퍼티를 종료 합니다.
그러면 메뉴바가 다시 원상 복구 되고 작업을 다시 시작할 수 있습니다.
히스토리 포인트로 돌아가기
프로퍼티 - 히스토리
돌아가고자 하는 포인트 탭
우측 점세개 탭
이 중 리스토어 디스 버전 혹은 이 버전 돌아가기 탭
이렇게 하면 원하는 포인트로 타임슬립 할 수 있습니다.
커뮤니티에서 필요한 레퍼런스 내 캔버스에 가져오기
홈 아이콘 탭
커뮤니티 버튼 탭
커뮤니티 메인
- 검색창
- android status bar - 검색
- 이 중 적당한 결과 탭
커뮤니티 홈
- 우측 상단 - 하트 뿅
- 하트 뿅 해두면 이 레퍼런스가 내 홈에 즐겨찾기 처럼 저장 됩니다.
- 오픈인피그마 유아이 탭
- 필요한 컴포넌트 셀렉 앤 카피
내 프로젝트
레이어패널
- 내가 원하는 레퍼런스 정확히 셀렉하고 카피
캔버스
- 우클릭
- 페이스트 히어
- android status bar 페이스트 완료
'Figma manual' 카테고리의 다른 글
| 피그마 프로젝트와 프로토타입 비회원과 공유하는 방법 (0) | 2026.05.04 |
|---|---|
| Figma component contorl (0) | 2026.04.21 |
| 피그마 프레임 이미지로 저장하기 (0) | 2026.04.20 |
| Figma prototype (0) | 2026.04.19 |
| Figma plugins (0) | 2026.04.19 |