피그마2 /누끼따기(마스크)/컴포넌트/프레임/공유

Yeeun·2025년 5월 28일
0

웹 개발 프로젝트

목록 보기
2/16

이미지파일이 아니라 피그마파일 리로드

임포트


우물정자 = 프레임이라는 의미

그래픽작업시에는 최대한 키워서 해야함. 그래야 오차가 덜하다.

건물두개만 보이게하고 뒤의 배경은가릴것임 .건물두개만 선택하게 건물만 보이게 키우기

누끼따기

디자인모드서 펜툴 선택
건물외곽선만 선택. 닫힌오브젝트가되게 닫아야함
마스크를씌워 가릴것이기에
건물하나 하고 점하고 선 생긴거 선택을 풀고 다시따면 레이어가 두개가 생기는데
한 레이어에 하고싶으므로 선택풀지말기
다 하고 나면 레이어 하나에 된건지 확인


정확하게 누끼따려면 따기전에 자석스냅기능을 끄고 작업해야했었음.

사람은 곡선이니 스냅끄고 작업하고 다시켜고 이리 해야함.

선에 스트록으로 검정선이 들어가있음
지금상태에선 외곽선만 마스크가 적용됨. 색이 칠해진 부분을 마스크로 인식.

디자인패널에 필에 검정선택

건물은 살리고 배경은 가릴거니 레이어패널에서 레이어순서를 바꾸기
vector1 을 마스크로 이름바꾸기

마스크레이어 선택된 상태에서 디자인패널의 벡터패스 마스크 적용하기 (Use as mask)


풀고싶으면 마스크 아이콘을 다시 클릭하면 됨

마스크로 작용할 레이어가 아래쪽으로 들어가야 하는 것, 색칠해진 부분이 마스크인 것 , 마스크로 사용 할 것은 펜툴로 할때 자석기능 끄고 사용해야 함.

시프트 + k
건물 누끼따면 선에 색 들어간거 바꿔치기 됨. 아까 필 선택하고 그랬던 것 단축키.

시프트+r

이동툴 자에서 쭉땡겨내리면 선이내려옴 (가이드선)

선 클릭해서 캔버스 밖으로 확 땡기면 사라짐. 아니면 선택하고 딜리트 눌려도 됨.

Union


사각형겹치기

union

subtract

뒤쪽레이어만 남음

intersect

exclude

flatten

레이어 합치기

ctrl+G ==> 그룹화

ctrl+Shift + G => 언그룹

텍스트

디자인패널에 마스크기능이 없음. (도형으로 바꿔서 하는경우는 상관없지만)
링크

이미지 불러오기


file -> place image
혹은 드래그앤드롭

필 커스텀 ( 아까 그려둔 사각형이나 원에 이미지 채워넣기)



업로드프롬컴퓨터 - 마스크씌운것처럼 사각형 안에 이미지 올라옴

크롭

필,핏(도형안에 전체이미지 들어가려해서 잘림),크롭(이동해서 보일구역 수정가능/시프트잡고 비율늘릴수도 있음),타일(몇프로할지선택가능)

슬라이더

이미지 크롭툴

색깔이 다양한 곳에 텍스트 놓기
마스크로 사용할거라
레이어 순서 바꾸기(텍스트가 뒤로가게)
마스크씌우기


마스크씌운애만 제일 위에 올리기

프레임

프레임툴선택

보고서 작성할거다 .a4면 페이퍼선택

웹에서 할거면 데스크탑 선택하면 사이즈 있음

프레임툴 선택하고 드래그하면 드래그 크기만큼 만들어짐.
필에 색상 넣어줄수있음

프레임 이름 바꾸려면
ctrl+r / 레이어에서 바꿔도되고 / 화면에서 이름적힌부분 클릭/

오브젝트가 있으면 프레임 이동이 아까처럼 그냥 바로 안움직임

프레임 이름있는 상단을 더블클릭후 이동해야함.

프레임 바깥에 원은 안보임

오브젝트가 아니라 프레임을 선택한 후 클립 콘텐츠 체크풀면 영역밖도 보임

이펙트

page 2 프레임

1을 프레임 가운데 놓기
프레임 a6하나 더 만들기 (alt+드래그)
2를 프레임 가운데 놓기

파일>세이브로컬카피 ( 피그마파일로내보내기 )

page1,page2 피그마파일로 된거 내보내짐 // 프레임이 있어야지 저장되는경우가 있음

오브젝트 저장

텍스트오브젝트 선택 후 저장
1.
2.
1x 는 작업한 실사이즈 그대로 저장할거다

export + 누르면 2배수 3배수 추가해서 저장가능

export frames to PDF


레이어순서 상관없이 만든순서대로 pdf 만들어짐

컴포넌트

원본(메인컴포넌트) 만들어두고 , 복제해서 쓰는 인스턴스로 재사용

3가지 방법

  1. 오브젝트를 컴포넌트로 등록
  2. 멀티플 컴포넌트- 오브젝트 여러개를 한번에 컴포넌트화 (백개를 선택해두고 한번에)
  3. 컴포넌트 셋 - 나랑 쟤가 짝지라 나랑 얘를 짝지로 묶는건 컴포넌트셋 내가 고른애랑 하나의 컴포넌트 취급을 받음 . 각각의 컴포넌트로 만드는건 2번.

복제된 인스턴스는 색상,글자,전체크기 변경 가능. 다만 컴포넌트간 위치를 조정하거나 그런건 메인컴포넌트로 가서 해야함.

아이콘링크

다운후에 파일 컨트롤씨브이해서 복붙하면 딱맞는 프레임안에 들어간채로 복붙됨
그래서 그냥 다운안하고 카피해서 피그마에 붙여넣어도됨

작업시 주의사항

페이지 확인
레이어확인
디자인패널확인
컴포넌트 사용시 파일 옆에 에셋도 확인.
컴포넌트는 레이어에도 남아있지만 에셋에도 등록되므로.

정렬

앞에 두개 선택

디자인패널 포지션 alignment

동일간격주기 (horizontal spacing)

컴포넌트화

에셋패널 가면 방금 만든 애가 보임
드래그해도 되고 인서트해도되고 // 그냥 화면에서 메인컴포넌트에 alt키드래그 해서 복제해도 됨.

메인이랑 인스턴스랑 아이콘이 다름

메인컴포넌트 만들고나면 얘들은 따로 관리해야함. 실수로 삭제하면안되니까 프레임을 만들어 거기 모아두기.

메인컴포넌트를 조정하면 인스턴스들도 연동되어 변경됨 / 인스턴스는 수정해도 메인에 영향을 미치지 않음

컴포넌트 하나 더 만들기

인스턴스 선택시 디자인 패널

메인컴포넌트 선택시 디자인 패널

Add variant


두개를 짝지어 하나의 컴포넌트로 만들랬는데 , 실수로 하나만 컴포넌트로 만들었다면
안의 요소를 넣어 컴포넌트 셋으로 만드려 할때 씀

정리가 안되어있는데 이 인스턴스의 메인컴포넌트를 모르겠다 싶을때

인스턴스 스왑(바꿔치기)

인스턴스 선택 후 저쪽 누르면 , 컴포넌트 변경가능

작업했는데 실수로 프레임을 생성하고 해야하는데 그림을 먼저 그렸다면

오브젝트 선택하고 우클릭

맞춰서 프레임 만들어짐

레이어에서 시프트키누르고 쭉선택하고 프레임 셀력션으로 프레임만들고 접기

컴포넌트 프로퍼티 편집


alt+드래그 빨간원만 바깥으로 카피

단추끄면 보라색으로 바뀜

홈에서 템플릿 사용가능

피그잼인지 피그마인지 보기
열어서 가져갈수있음 . 유료제외

공유

0개의 댓글