컴포넌트

첫 번째 포스팅은 컴포넌트, 두 번째 포스팅 스왑인스턴스에 이어 이번 포스팅은 피그마 프로퍼티에 대해 알아보겠다. 프로퍼티(figma property)란? 프로퍼티는 "속성, 성격"이라는 의미를 가진다. 이미 완성된 컴포넌트에 속성을 더해주는 기능이다. 컴포넌트에 옵션을 주고 컴포넌트의 경우의 수를 줄여줄 수 있다. 컴포넌트 프로퍼티의 4가지 종류와 사용방법 컴포넌트 프로퍼티별로 각각 다른 특성을 가지고 있으며, 각각의 사용법도 다르다. 1. '텍스트, 불리언, 인스턴스 스왑' 프로퍼티는 옵션처럼 추가해서 적용하는 방법이며 2. '베리언트' 프로퍼티는 커스텀해서 사용하는 방법이다. 아래에서 자세하게 확인할 수 있다. - Text properties(텍스트) ✔ 텍스트 프로퍼티 컴포넌트텍스트 레이어에 속성..

이전 편에서는 피그마 컴포넌트 기초와 사용방법에 대해 알아보았다. 이번 포스팅에서는 피그마 인스턴스 스왑에 대해 알아보고, 사용하는 방법까지 익혀볼 수 있도록 하자. 스왑 인스턴스(swap instance)란? Swap(바꾸다) +Instance(복사본) 인스턴스(복사본)를 다른 인스턴스로 바꿔주는 기능이다. 왜 사용해야 할까? 인스턴스는 마스터 컴포넌트에 없는 요소를 추가할 수 없기 때문에 이 방법을 활용해서 아이콘, 이미지 등을 바꾸어 줄 수 있다. (단, 바꾸어줄 아이콘 이미지 등 모두 컴포넌트로 만들어 놓아야 한다.) 어디에 적용될 수 있는데? Web/Mobile을 디자인 혹은 기획 시 공통부분을 제작할 때 유용하게 사용된다. 예로 들면 header, List에서 아이콘을 변경하려 할 때 스왑 인..

1. 컴포넌트(figma component) Component는 가장 작은 단위, 부품, 요소로써 화면에서 반복적으로 사용되는 가장 작은 단위이다. 화면을 구성하거나 디자인 할 때, 요소를 합쳐 모듈 > 템플릿 > 페이지로 구성한다. Component 언제든 재사용이 가능한 요소로써 원본으로 복사본까지 한번에 수정할 수 있다. 🏷 아이콘 : 더이상 쪼갤 수 없는 가장 작은 단위 🏷 모듈 : 아이콘 + Text 등 최소 단위의 조합 🏷 템플릿 : 모듈 + 모듈 + 모듈 등 여러 모듈로 조합한 요소 🏷 페이지 : 템플릿 + 템플릿= 화면으로, 모듈 조합으로 구성된 아웃풋 컴포넌트 생성시, 객체와 레이어가 보라색으로 변경된다. 2. 마스터 컴포넌트와 인스턴스 만들기 📌 마스터 컴포넌트(Master Compon..

해당 포스팅은 피그마 사용에 있어 기본 컴포넌트와 플러그인, 댓글기능에 대해 설명해놓았습니다. 기본 컴포넌트는 화면 제작시 유용하게 사용되므로 응용방법까지 익혀두시면 좋을 것 같습니다. 아래에는 유용하게 사용되는 플러그인 best 7을 뽑아 사용방법과 함께 작성해 두었습니다. 기본 컴포넌트 (사각형, 선, 화살표, 원, 세모, 별, 이미지) 어디서 사용할 수 있나? 응용방법도 알려줘! (Feat. 도넛링 만들기, 파이차트 만들기) 사각형 변형하기 응용방법은 간단하다. 도형 선택 → 모서리 안쪽의 점을 선택 → 중앙으로 드래그하면 둥근 사각형 제작이 가능하다. 한쪽 모서리 라운드 처리를 위해서는 Alt키를 누르고 점을 드래그하여 라운드를 만든다. 또한 디자인 패널에서 라운드 값을 설정하여 변경할 수도 있다..