기획자의 피그마 figma - 컴포넌트 만들기 Component
HTML-код
- Опубликовано: 24 сен 2024
- 피그마 figma 의 핵심 중 또 하나!
컴포넌트 완전 정복을 위한 첫 걸음입니다. :)
Component 의 기본 개념부터 만들고, 화면에 적용하고, 변경까지 하는 방법에 대해서 학습해보아요!
******** 기획자의 figma 블로그
blog.naver.com...
******** 기획자의 figma 브런치
brunch.co.kr/@...
#figma #피그마 #autolayout #오토레이아웃 #웹기획 #앱기획 #웹디자인 #피그마사용법 #component #컴포넌트 #피그마컴포넌트
![[피그마] 디자인 시스템 구축과 재사용을 위한 Component(컴포넌트)와 Instance(인스턴스)](http://i.ytimg.com/vi/z4BOOsopm1s/mqdefault.jpg)
강의 잘 들었습니다.^^
쉽게 설명해주셔서 감사해요 ❤
쉬운 설명 감사합니다!! 그런데 오토레이아웃 2탄 다음에 이 영상을 보는데 도형에 이미지를 클리핑 마스크 하는 부분은 없네요...!
1.detach instance의 기능이 정확히 뭔가요 지정한 컴포넌트를 프레임이나 그룹으로 다시 돌려놓는 역할인가요? 그렇다면 detach instance한 컴포넌트는 더 이상 컴포넌트가 아닌건가요
2.복사 붙여넣기 대신 컴포넌트를 쓰는 이유가 무엇인가요
모든 컴포넌트는 마스터 컴포넌트의 속성을 따른다는 것 때문인가요
죄송해요 진짜 궁금합니다
안녕하세요. 첼라입니다 :)
1. detach instance를 실행하시게 되면 해당 요소는 컴포넌트 해지가 되는 기능입니다. 질문주신 대로 프레임이나 그룹 상태의 요소로 변경되게 됩니다.
단 이 기능은 메인 컴포넌트(컴포넌트 원본)에서는 사용할 수 없고, 화면 내에서 불러온 컴포넌트에만 적용이 가능한 기능입니다.
2. Component 는 Figma 로 제작한 화면설계, 디자인에서 모듈의 역할을 한다고 생각하시면 이해가 쉬우실 거에요. 서비스에 들어가는 버튼, 입력란 혹은 컨텐츠까지도 동일한 디자인 규칙이 적용된 모듈을 만들고 그것을 불러와서 활용한다- 라고 생각하시면 좋을 것 같습니다. 그래서 어떤 특정 모듈에 변경 사항이 변경되었을때는 해당 메인 컴포넌트만 수정을 하면 화면설계, 디자인 상에서 적용된 동일 컴포넌트는 동시에 수정을 할 수 있답니다.
질문에 답변이 되었는지 모르겠네요. :)
궁금하신 부분이 있으시다면 언제든 댓글 주세요. 감사합니다. 💜
에셋에 로컬 컴포넌트 항목이 안나옵니다. 컴포넌트를 만들어도 에셋에 아무것도 나타나지 않는데 달리 설정할게 있을까요?
안녕하세요. 로컬에서 컴포넌트를 만드셨더라도 반드시 Publish를 해주셔야 한답니다. ^^
Figma 좌측 패널에서 Asset 탭에서 퍼블리싱 후 다시 확인해보세요~
컴포넌트가 필요한 이유는 복제를 쉽게 하기 위함인가요? 그냥 복붙하면 될 것 같은데...궁금스~
안녕하세요! Jin님!
컴포넌트 기능을 사용하는 이유는 서비스 모든 화면에서 일관된 디자인을 유지하기 위해서 사용된답니다.
또한 이렇게 컴포넌트로 지정한 요소들은 main component 를 통해서 일괄적으로 디자인 변경을 할 수 있어서 복사, 붙여넣기 보다 훨씬 더 디자인을 효율적으로 관리할 수 있답니다.
좋은 하루되세요!
감사합니다 :)
근데 동그라미에 이미지 어떻게 넣으셨나요?
Place Image로 하니까 동그라미 안에 쏙 들어가네요
안녕하세요 정훈님 :)
넹 댓글 남겨주신대로 Place image 기능을 사용하셔도 되고 Use as mask 기능을 활용하시는 방법도 있답니다. 감사합니다 !