피그마에서 이미지나 서식 한꺼번에 바꾸기

안녕하세요!

피그마 잘 쓰고 계시죠? 정말 혁명의 툴이라고 할 수 있을것 같아요

무료버전에서 디자인 기능에는 제한이 없는 점도 혁명이구요!

다만 아시다시피, 무료버전이라면 프로젝트 내 페이지 갯수나 프로젝트 개수 만드는거에 제한이 있는거는 아시겠지요

 

오늘은 피그마에서 오브젝트 일괄 통제하는 법을 공유하고자 해요

 

여기서 오브젝트라 함은 개별 이미지, 텍스트, 그룹, 프레임까지도 포함됩니다

해당 오브젝트들에 모두 일괄통제 할수 있는 기능을 반영할 수 있구요

 

텍스트 스타일 화

 

먼저 텍스트를 예시로 텍스트 스타일화를 반영해보는 예제를 보여드릴게요

 

어디까지 적용 가능한지 테스트 해보았어요!

텍스트 크기나 폰트는 따라가지만 컬러와 효과 등은 그대로 유지되는것을 확인했어요

 

 

이어서 복사한 기존 텍스트에서 기존 스타일을 제거하고 추가로 하나 더 만들어볼게요! 

 

스타일 Detach(연결해제)를 합니다

 

Detach style을 하여 기존 텍스트에 기존 스타일을 연결해제했어요!

새 스타일 생성을 위해 이렇게 폰트를 바꾸고 Create style(스타일 생성)을 합니다

 

이름을 임시로 지어줬구요

 

그리고 스타일 수정은 어떻게 하는지 보여드릴게요!

 

 

 

이렇게 스타일 항목에서 폰트 등을 바꿀 수 있습니다

 

텍스트 스타일 적용은 원하는 텍스트들에 스타일을 적용하여 일괄적으로 반영함으로,
공동작업에 매우 좋습니다

모두가 특정한 폰트를 컴퓨터에 갖고있지 않을 수도 있기 때문에의 이유도 있고 

전체를 한꺼번에 적용할 수 있다는 점에 있어서 서식 통일 등의 이점이 있어요! 

 

버튼 오브젝트 일괄 변경 하는 법

 

그리고 이번엔, 버튼을 하나 만들어서 복제한 후 복제본을 일괄로 바꾸는 방법을 공유드립니다

"컴포넌트 화" <- 해당 액션이 매우 중요한데요!

 

컴포넌트 화를 해야 이 버튼그룹이 컴포넌트가 되고

이 컴포넌트를 복제할 시, 하나만 바꾸면 다른것도 같이 바뀔 수 있기 때문이에요

 

 

컴포넌트를 복제하고 싶으면 Assets에서 해당 컴포넌트를 Insert instance로 불러올 수 있고,

그냥 레이어목록에서 해당 컴포넌트를 복붙(복사 및 붙여넣기) 하셔도 됩니다!

 

 

그리고 이제 위 버튼들을 모두 조금씩 어떤부분을 수정하고 싶으면

메인(최초) 버튼을 수정하면 되구요 전체가 다 반영이 되는거에요!

 

 

버튼 그룹에서 이렇게 색을 바꾸면 다같이 반영되는 식으로요~!

혁명이죠~?

 

이번엔 이미지를 바꾸는 법을 알려드릴게요!

 

 

이렇게 이미지 하나를 마찬가지로 컴포넌트 화 합니다

 

추가로 세개를 복사했어요

이 이미지들을 다른 이미지로 바꾸어볼게요

Fill에서 이미지를 선택해서

 

 

여기 Choose image부분에 다른 이미지를 드래그하거나, 클릭해서 폴더에서 선택하면

 

이렇게 바뀐걸 볼 수 있어요!

 

컴포넌트 복제하고 일괄 통제하기 방법은 여기까지에요.

참 쉽죠!?

도움이 되었다면 좋아요~! 눌러주세요

 

감사합니다^^