[컴포넌트 개념정리 - 블로그] designer-story.tistory.com/18 [변경된 컴포넌트 UX] designer-story.tistory.com/37 00:00 Intro 00:02 컴포넌트의 개념 03:14 컴포넌트 생성하기 04:06 Assets 패널 05:46 Instance Swap 07:47 컴포넌트 검색 08:37 팀 라이브러리 기능 *아래 두 영상에서 위 영상에서 다루지 못한 부분이 포함되어 있으니 함께 참고해주세요. [연관 영상- 컴포넌트 기능 활용] ruclips.net/video/6e46VxYgcpI/видео.html [연관 영상- 스크롤 기능구현을 위한 팀 라이브러리 기능 활용 예제] ruclips.net/video/t5G87A3t2CM/видео.html
안녕하세요 :) 연정님 유튜브 강의를 보면서 이제 막 피그마를 시작하게 된 병아리입니다..ㅎ 좋은 자료로 자세하게 설명해주셔서 많은 도움 받고 있습니다. 감사합니다! 아직 툴에 많이 서툴어서 궁금한 점이 있는데, 컴포넌트를 설정하고 전체 색상을 바꾸기 전, 로컬 컬러를 먼저 등록해야 전체 색상이 바뀌는걸까요? 컴포넌트로 만들었지만 오퍼시티를 준다거나 컬러를 바꿀 때 전체로 바뀌지 않아서요 ㅠㅠ
제가 대신 답변 드려도 될까요~? 컴포넌트를 수정할 때 다이아몬드 4개 아이콘이 있는 Master component를 수정하신 게 맞으실까요? 그냥 빈 다이아 1개 아이콘이 있는 Instance를 수정하면 전체적으로 수정이 되지는 않아요! 그냥 그 instance만 수정이 됩니다!
안녕하세요! 연정님 덕분에 피그마를 더 쉽게 다루고 있는 디자이너입니다! 궁금한게 있어서 여쭤봅니다..ㅠㅠ 제가 유료로 결제하다가 3명한테 편집권한을 줬는데 3명분이 같이 청구됐더라구요.. 다시 그 3명을 권한을 제거해도 이미 청구된 금액을 결제해야 유료버전을 이어서 사용할수있나요..? ㅠㅠ
넵 맞아요 편집자가 몇명인지 기준으로 정산일에 결제가 되요. 결제 방지 방법: 어드민 페이지 > 결제 관련 페이지 가시면 다음 결제일을 알 수 있는데 결제일 전에 해당 멤버의 편집권한을 뷰권한으로 다운그레이드 하시고, 결제일이 지나고 다시 편집권한을 주시면 결제가 되진 않아요. 일시적으로 편집권한을 줘야하는 경우가 생길땐 그렇게 조절하고 있어요.
이번 강의도 잘봤습니다. 컴포넌트를 활용한 부분에서 질문이 있는데요. 오토 레이아웃 기능이 들어가있는 버튼(아이콘+텍스트) 컴포넌트를 만든경우, 컴포넌트에서는 아이콘과 텍스트 순서를 앞뒤로 마우스커서로 이동하면 자동으로 위치가 바뀌는데요. 이 컴포넌트를 복제한 인스턴스에서는 이렇게 마우스커서로 이동하는것이 불가능할까요?
피그마로 이제 막 시작단계인데 영상 잘보았습니다~ 근데 컴포넌트 생성해서 에셋 패널창에 등록된 상태에서 작업창에 있는 컴포넌트 원본 삭제하면 에셋패널에 등록된것도 같이 삭제되던데요. 어도비XD에서는 삭제해도 에셋패널에 남아서 필요할때 사용가능해서 좋았는데, 피그마에서는 프레임? 작업창에 컴포넌트가 꼭 있어야 하나요?
지워도 인스턴스(컴포넌트 복제본)를 선택 후 복구(restore)가 가능합니다. 물론 가급적이면 지우지 않는 것을 추천드려요. 화면에 보이게 하고 싶지 않고 싶다면, 저의 경운 좌측 레이어패널에 있는 페이지 영역에서 새 페이지(page)를 추가하고 그 페이지로 옮기곤 합니다. 페이지 이름을 예를 들어 backup이라고 지정하고. 옮기려는 컴포넌트 또는 객체들을 선택하고 마우스 오른쪽을 클릭하면, 현재 페이지에서 새로 생성한 페이지로 옮길 수 있는 메뉴가 상단에 보일겁니다. 이 방법을 추천드려요. 다른 파일에서 컴포넌트를 만들었는데 그 파일을 지운것이 아닌이상 대부분 지웠던 컴포넌트들은 복구가 가능했었습니다.
질문이 있는데요! 아래와 같은 경우의 해결방법이 있을까요? 1. A 프로젝트에서 피그마 작업 중이었음 2. A 프로젝트에서 작업중인 내용을 B 프로젝트로 붙여넣기해서 작업 3. B에서 컴포넌트 수정할게 있어서 [컴포넌트 우클릭 > 메인컴포넌트로 이동] 해서 컴포넌트 수정 4. 그런데 A프로젝트에서는 해당 컴포넌트가 수정되어 있는데, B프로젝트에서는 수정이 안되어 있음
A에서 수정한 컴포넌트을 팀 라이브러리를 통해 pulish 하고 연결되어 있는 컴포넌트을 B파일에서는 라이브러리를 열고 변경 사항에 대해 업데이트를 해주셔야해요.(영상 참고: ruclips.net/video/UQB-2H7vWjk/видео.html ) ** 파일과 파일간의 컴포넌트 업데이트는 자동으로 반영되지 않음
현재는 반응형웹 위주로만 진행을 하고 있어서 요즘은 어떤지 알 수 없으나(회사마다 다름) 이전에는 한 해상도 기준으로 했을 경우엔 750 사이즈(포토샵으로 작업하던 시절)로, 아이폰만 진행하는 경우는 가로 375 기준으로 했었고요. 안드로이드의 경우는 360을 진행했었습니다. (컴포넌트 생성시, 반응형을 고려해서 진행) / 덧붙여서 반응형웹의 모바일 해상도의 경우는 아이폰 기준으로 최소 사이즈 320까지 고려하고 있고, 모바일 기본 가로 해상도는 375 기준으로 잡고 있습니다. (320은 필요한 경우에만 추가 작업)
@@yeonjung-figma 정말 궁금했는데 자세히 설명해주셔서 감사합니다. 영상으로도 많은 노하우 알려주셔서 정말 많이 배웁니다 ㅜㅜ 그러면 주로 작업하시는 웹앱은 ‘375’ 로만 디자인해도 안드로이드/ios 상에서 띄울때 각각 컴포넌트가 어디로 정렬되는지..같은 반응형속성을 같이 안내했기때문에 os별로도 다 대응이 되는것이겠네요. 제가 이해한것이 맞을까요? 항상 좋은 컨텐츠와 블로그글 올려주셔서 감사하고 좋은 저녁시간 되세요!🥰
@@toready1500 EQe 님도요~ ^^ 종합하여 말씀드리면, 가로 해상도를 안드로이드 360 기준으로 하든 아이폰 375기준으로 하든 두 디바이스의 디자인이 같다면 피그마로 컴포넌트를 생성시에 반응형을 고려하여 생성하시면, 추후에 기준 해상도가 바뀌어도 수정하시는데 효율적으로 작업을 할 수 있습니다. (만약, 디바이스 특성상 달리 보여줘야 하는 경우, 별도의 컴포넌트, 별도 페이지로 만들어서 개발자에게 공유)
@@yeonjung-figma 정말 깔끔하게 정리해주셔서 감사합니다. 연정님께서 많은 디자인 경험이 있으셔서 설명해주실수 있는 부분인데, 댓글로만 여쭤보고 이렇게 좋은 답변까지 받아간다는게 조금 부끄러울 따름이에요.. 이제 어떤식으로 협의하고 진행하는지 좀 이해가 갑니다. 너무나 친절하게 도와주셔서 감사합니다..🥺❤️ 행복한한주되세요!
![[피그마] 디자인 시스템 구축과 재사용을 위한 Component(컴포넌트)와 Instance(인스턴스)](http://i.ytimg.com/vi/z4BOOsopm1s/mqdefault.jpg)
![[실전 반응형디자인 Part.2] '오토레이아웃' 할 때 중요한 이것?! #responsive design #autolayout #figma](/img/1.gif)
*2021년 버전 컴포넌트 가이드 영상: ruclips.net/video/lMOJ1ijO9hs/видео.html
* figma의 컴포넌트 및 인스턴스 기능 업데이트 관련 포스팅 { designer-story.tistory.com/28 }
감사합니다~
정주행 중인데.. 좋습니다 ^^ ㅎㅎ..
긴 영상을 너무 압축 했더니 뭔가.. 여러모로 아쉬움이 남네요. 이전에 올렸던 컴포넌트 영상도 함께 참고해주세요. ruclips.net/video/6e46VxYgcpI/видео.html
혼자 figma를 공부하는데 큰 도움이 되었습니다. 좋은 영상 감사합니다^^
많은 도움이 되었습니다!! 항상 잘 보고 있습니다 ㅠㅠ
감사합니다~ 덕분에 기분좋은 아침이네요ㅎㅎ 좋은 하루 되세요!!
감사합니다 연정님!
작업량과 꾸준함이 조만간 ui강의 1등 먹으시겠어요..ㄷㄷ
칭찬인걸로 ㅎㅎ
좋은 강좌영상에 감사드립니다.
동일한 로컬 컴포넌트에 있는 요소들을 라이브러리 컴포넌트로 교체하려고 하는데 어떤 피그마 플러그인을 사용하시나요?
강사님감사합니다
컴포넌트를 쉽게 잘 설명해주셔서 감사합니다!! 고생많으셔요
컴포넌트 관련하여 최신 영상이 업데이트 되었습니다 ^^ 참고해주세요 ~! ruclips.net/video/sAvdvB0vXQg/видео.html
감사합니다!! ㅜ
안녕하세요 강의 잘듣고있습니다! nstance Swap 강의 부분에서 local style을 해제했다면 어떻게 인스턴스는 컴포넌트 속성을 따라갈수있는건가요?.. 이해가 어려워서 질문드립니다... ㅠㅠ
[컴포넌트 개념정리 - 블로그] designer-story.tistory.com/18
[변경된 컴포넌트 UX] designer-story.tistory.com/37
00:00 Intro
00:02 컴포넌트의 개념
03:14 컴포넌트 생성하기
04:06 Assets 패널
05:46 Instance Swap
07:47 컴포넌트 검색
08:37 팀 라이브러리 기능
*아래 두 영상에서 위 영상에서 다루지 못한 부분이 포함되어 있으니 함께 참고해주세요.
[연관 영상- 컴포넌트 기능 활용] ruclips.net/video/6e46VxYgcpI/видео.html
[연관 영상- 스크롤 기능구현을 위한 팀 라이브러리 기능 활용 예제] ruclips.net/video/t5G87A3t2CM/видео.html
감사합니다 개념이 참 중요한거 같아요
안녕하세요 :) 연정님 유튜브 강의를 보면서 이제 막 피그마를 시작하게 된 병아리입니다..ㅎ
좋은 자료로 자세하게 설명해주셔서 많은 도움 받고 있습니다. 감사합니다!
아직 툴에 많이 서툴어서 궁금한 점이 있는데, 컴포넌트를 설정하고 전체 색상을 바꾸기 전, 로컬 컬러를 먼저 등록해야 전체 색상이 바뀌는걸까요?
컴포넌트로 만들었지만 오퍼시티를 준다거나 컬러를 바꿀 때 전체로 바뀌지 않아서요 ㅠㅠ
제가 대신 답변 드려도 될까요~?
컴포넌트를 수정할 때 다이아몬드 4개 아이콘이 있는 Master component를 수정하신 게 맞으실까요?
그냥 빈 다이아 1개 아이콘이 있는 Instance를 수정하면 전체적으로 수정이 되지는 않아요! 그냥 그 instance만 수정이 됩니다!
안녕하세요! 연정님 덕분에 피그마를 더 쉽게 다루고 있는 디자이너입니다! 궁금한게 있어서 여쭤봅니다..ㅠㅠ
제가 유료로 결제하다가 3명한테 편집권한을 줬는데 3명분이 같이 청구됐더라구요..
다시 그 3명을 권한을 제거해도 이미 청구된 금액을 결제해야 유료버전을 이어서 사용할수있나요..? ㅠㅠ
넵 맞아요 편집자가 몇명인지 기준으로 정산일에 결제가 되요.
결제 방지 방법: 어드민 페이지 > 결제 관련 페이지 가시면 다음 결제일을 알 수 있는데 결제일 전에 해당 멤버의 편집권한을 뷰권한으로 다운그레이드 하시고, 결제일이 지나고 다시 편집권한을 주시면 결제가 되진 않아요. 일시적으로 편집권한을 줘야하는 경우가 생길땐 그렇게 조절하고 있어요.
혹시 이 수업을 들을때 피그마 파일은 없나요? 그냥
제가 그리고 들어야 하나요??
이번 강의도 잘봤습니다. 컴포넌트를 활용한 부분에서 질문이 있는데요. 오토 레이아웃 기능이 들어가있는 버튼(아이콘+텍스트) 컴포넌트를 만든경우, 컴포넌트에서는 아이콘과 텍스트 순서를 앞뒤로 마우스커서로 이동하면 자동으로 위치가 바뀌는데요. 이 컴포넌트를 복제한 인스턴스에서는 이렇게 마우스커서로 이동하는것이 불가능할까요?
넵 인스턴스 일때 좌우 위치를 바꾸는건 현재 버전으로 불가능해요~ 그래서 텍스트 앞 뒤로 아이콘를 하나씩 배치 한 다음 숨겼다 보였다하여 조절은 가능해요. 아이콘 종류는 swap 시키면 돼구요~
제가 업로드한 영상 중 오토 레이아웃 참고하시면 도움이 될듯해요~
@@yeonjung-figma 그렇군요, 설명해주신 방법으로 일단 해결하고 있어요! 친절한 설명 감사합니다~ 좋은주말보내세요!
즐거운 불금돼세요 ~ㅎㅎ
연정님 잘 보고있습니다! :) , 혹시 라이브러리를 이용하는 방법말고 프로젝트간 설정해둔 컬러나, 이펙트값 등등을 옮겨올 수 있는 방법이 있을까요?
아쉽게도 그 부분이 참 불편한 부분이기도 한데요. 라이브러리 외엔 로컬 스타일을 포함한 파일을 복제해서 재사용하는 방법 외에는 없는 거 같아요~
피그마로 이제 막 시작단계인데 영상 잘보았습니다~ 근데 컴포넌트 생성해서 에셋 패널창에 등록된 상태에서 작업창에 있는 컴포넌트 원본 삭제하면 에셋패널에 등록된것도 같이 삭제되던데요. 어도비XD에서는 삭제해도 에셋패널에 남아서 필요할때 사용가능해서 좋았는데, 피그마에서는 프레임? 작업창에 컴포넌트가 꼭 있어야 하나요?
지워도 인스턴스(컴포넌트 복제본)를 선택 후 복구(restore)가 가능합니다. 물론 가급적이면 지우지 않는 것을 추천드려요. 화면에 보이게 하고 싶지 않고 싶다면, 저의 경운 좌측 레이어패널에 있는 페이지 영역에서 새 페이지(page)를 추가하고 그 페이지로 옮기곤 합니다. 페이지 이름을 예를 들어 backup이라고 지정하고. 옮기려는 컴포넌트 또는 객체들을 선택하고 마우스 오른쪽을 클릭하면, 현재 페이지에서 새로 생성한 페이지로 옮길 수 있는 메뉴가 상단에 보일겁니다. 이 방법을 추천드려요. 다른 파일에서 컴포넌트를 만들었는데 그 파일을 지운것이 아닌이상 대부분 지웠던 컴포넌트들은 복구가 가능했었습니다.
@@yeonjung-figma 강의계속 업로드해주시나요?
질문이 있는데요! 아래와 같은 경우의 해결방법이 있을까요?
1. A 프로젝트에서 피그마 작업 중이었음
2. A 프로젝트에서 작업중인 내용을 B 프로젝트로 붙여넣기해서 작업
3. B에서 컴포넌트 수정할게 있어서 [컴포넌트 우클릭 > 메인컴포넌트로 이동] 해서 컴포넌트 수정
4. 그런데 A프로젝트에서는 해당 컴포넌트가 수정되어 있는데, B프로젝트에서는 수정이 안되어 있음
A에서 수정한 컴포넌트을 팀 라이브러리를 통해 pulish 하고 연결되어 있는 컴포넌트을 B파일에서는 라이브러리를 열고 변경 사항에 대해 업데이트를 해주셔야해요.(영상 참고: ruclips.net/video/UQB-2H7vWjk/видео.html )
** 파일과 파일간의 컴포넌트 업데이트는 자동으로 반영되지 않음
안녕하세요. 좋은 강의 너무 감사드립니다 여러번 보면서 따라하고있어요. 혹시한가지 여쭤봐도될까요? android/ios 개발시 디자인은 피그마로 한 벌 만 제작하시는지(os별 제작을 해야하는지), 한 벌로 가능하다면 사이즈를 어떻게 잡으시는지 잘모르겠어서 여쭤봅니다.
현재는 반응형웹 위주로만 진행을 하고 있어서 요즘은 어떤지 알 수 없으나(회사마다 다름) 이전에는 한 해상도 기준으로 했을 경우엔 750 사이즈(포토샵으로 작업하던 시절)로, 아이폰만 진행하는 경우는 가로 375 기준으로 했었고요. 안드로이드의 경우는 360을 진행했었습니다. (컴포넌트 생성시, 반응형을 고려해서 진행) / 덧붙여서 반응형웹의 모바일 해상도의 경우는 아이폰 기준으로 최소 사이즈 320까지 고려하고 있고, 모바일 기본 가로 해상도는 375 기준으로 잡고 있습니다. (320은 필요한 경우에만 추가 작업)
@@yeonjung-figma 정말 궁금했는데 자세히 설명해주셔서 감사합니다. 영상으로도 많은 노하우 알려주셔서 정말 많이 배웁니다 ㅜㅜ 그러면 주로 작업하시는 웹앱은 ‘375’ 로만 디자인해도 안드로이드/ios 상에서 띄울때 각각 컴포넌트가 어디로 정렬되는지..같은 반응형속성을 같이 안내했기때문에 os별로도 다 대응이 되는것이겠네요. 제가 이해한것이 맞을까요? 항상 좋은 컨텐츠와 블로그글 올려주셔서 감사하고 좋은 저녁시간 되세요!🥰
@@toready1500 EQe 님도요~ ^^ 종합하여 말씀드리면, 가로 해상도를 안드로이드 360 기준으로 하든 아이폰 375기준으로 하든 두 디바이스의 디자인이 같다면 피그마로 컴포넌트를 생성시에 반응형을 고려하여 생성하시면, 추후에 기준 해상도가 바뀌어도 수정하시는데 효율적으로 작업을 할 수 있습니다. (만약, 디바이스 특성상 달리 보여줘야 하는 경우, 별도의 컴포넌트, 별도 페이지로 만들어서 개발자에게 공유)
사실 답은 없습니다. 회사 시스템에 맞고 개발자와 디자이너가 둘다 만족하면 좋은 기준이 되겠죠~ 대부분의 기준 해상도의 경우 개발자분과 논의해서 결정했었습니다. 이게 포인트겠네요. ^^
@@yeonjung-figma 정말 깔끔하게 정리해주셔서 감사합니다. 연정님께서 많은 디자인 경험이 있으셔서 설명해주실수 있는 부분인데, 댓글로만 여쭤보고 이렇게 좋은 답변까지 받아간다는게 조금 부끄러울 따름이에요.. 이제 어떤식으로 협의하고 진행하는지 좀 이해가 갑니다. 너무나 친절하게 도와주셔서 감사합니다..🥺❤️ 행복한한주되세요!
쓰앵님 ! 질문있습니다. 네모 두개가 가로로 있는건 무엇을 뜻하나요?
이렇게요
ㅁ
ㅁ
인스턴스 아래에 이런게 있더라구용..
오토레이아웃의 vertical 또는 horizontal 아이콘을 보신거 같네요. 제가 업데이트한 오토 레이아웃 영상 안보셨다면 추천 드려요~
컴포넌트를 라이브러리로 만드는 것은 유료버전에서만 가능 한가요?
넵
연정님 다운받은 폰트를 쓰고싶어서 피그마 폰트 매니저?를 깔아보기도하고 PC용 앱을 깔아서 해보기도 했는데 다운받은 폰트가 안뜨면 어떻게 문제해결해야할까요? ㅜㅜ
보통 윈도우나 맥에 폰트 설치하는거처럼 설치하시고 피그마 껏다 다시 키면 피그마 폰트 에디터 리스트에 보여집니다~ 그래도 안되신다면 이 링크 참고해 주세요~ nicecarrot2.tistory.com/99
안녕하세요~ 수업잘듣고 있는데 혹시 저 영상후반부 컴포넌트 케이스 스터디 링크 어디서 찾아볼수 있나요? 블로그 다봐도 안보여서요ㅜ
공유용이 아니어서 별도로 링크 공유되지 않았습니다. 피그마 공식 커뮤니티에 유용한 자료가 많으니 추천드려요~ (www.figma.com/community/design_systems )
😀
asset에서 컴포넌트의 폴더의 이름은 어떻게 변경하나요?
"/" 로 구분합니다.
실습 파일다운 받을 수없나요?
아쉽게도 공유 파일이 아닙니다. (이해를 돕기 위해 만든 개인 작업물)
어렵구만ㅜ
늘감사한데 설명에 이해되는 비유라든지 예시설명이 가미되면좋겠네요
이론설명 이론설명이라..
다소 요리로따지면 이거 매워보단 이거 신전떡볶이같이 매운데 달기도해라는 비유연상과 와닿는 이해돕기설명좀 추가바래요
설명을 하는 것이 디자인 하는 것 보다 더 어렵다는 생각을 유튜브 활동을 하며 늘 깨닫게 되는거 같네요~ 더 나은 영상으로 찾아뵐게요. 감사합니다.
감사합니다!❤
❤️