00:00 Intro 00:32 팀 라이브러리의 개념 00:56 Global Style 만들기 03:32 Global Style 적용 03:51 팀 라이브러리 업데이트 05:16 Version History 기능 06:35 figJam의 라이브러리 08:28 figma 실무 사례 12:45 figma Best Case - UI Kit //영상에서 언급된 Community UI Kit 1) ios 15 UI Kit for figma: www.figma.com/community/file/... 2) Ant Design Open Source : www.figma.com/community/file/...
실무 다뤄주셔서 감사합니다! 안 그래도 입사한 회사에서 피그마를 실무로는 처음 쓰는데 디자인 시스템 페이지랑 시안 작업 페이지가 따로있는 상태거든요. 시스템에서 만든 컴포넌트를 아무리 수정해도 시안 페이지에 있는 인스턴스에 적용이 안되니까 답답했는데 퍼블리시 버튼을 누르고, 업데이트를 따로 해줘야 하는 방법이 있었군요! ㅠㅠ 정말 집에 와서도 방법을 찾고 있었는데 덕분에 해결했습니다. (+) 이상하게 제 화면에서는 라이브러리 아이콘에 파란색 점 표시나, 새로 업데이트 됐다는 토스트 창은 나타나지 않아요.
피그마 커뮤니티에 올라온 클럽 하우스 figma 오픈 리소스가 있어서 함께 공유 드립니다. 1) www.figma.com/community/file/943978304161218300 2) www.figma.com/file/bF33wlb8aggERReX5HyfoU/Clubhouse-UI-(Community)?node-id=0%3A1
어려움이 있어 질문 하나만 드리겠습니다. 작업이 전부 끝났는데 전체페이지가 있는 인스턴스 집합의 파일과 라이브러리 파일을 fig로 받아 임포트하니 퍼블리싱 후 go to componet하면 전부 작업자의 라이브러리로 이동합니다. 로컬의 라이브러리로 전체 변경이 불가능한가요? 연동후 작업한 파일은 정상 동작하지만 이전에 다른 사람이 작업한 파일은 전부 이전 경로의 라이브러리로 이동합니다. ㅜㅜ 종일 해결책을 알아보는데 방법이 안보이네요. 그렇다고 수백페이지 레이아웃을 재작업하기도 그렇구요. 앗 해결했습니다.
@@yeonjung-figma 빠른 답변 감사합니다! 그렇다면 시안 프레임이 다른 프레임의 최상단에 위치하고, Fill은 투명하게 설정하여 관리하시는 건가요? 가이드(기능 정의) 등 문서화 관련된 부분에 대해서도 강의 만들어 주시면 큰 도움이 될것 같습니다! Auto Layout 등 다른 강의도 큰 도움이 되었습니다. 연정님 덕분에 곧 Figma 초보를 벗어날 수 있을 듯 하네요 ^^
안녕하세요 연정님 강의로 정말정말 도움을 많이 받고있습니다ㅠㅠ 항상 감사해요!! 다름이 아니라 팀 라이브러리를 사용하다가 궁금한 점이 생겨서요ㅠㅠ 컴포넌트 파일을 따로 만들어 관리하며 앱 디자인을 하고있는데요. 아직 컴포넌트가 완벽하지 않아 계속 수정하며 작업을 하는데 컴포넌트 파일에서 수정하고 퍼블리시를 해도 앱 디자인 파일에서는 자동으로 바뀌지가 않더라구요.... 이걸 제가 모든 페이지에 매번 수정한 컴포넌트를 교체해줘야하는 걸까요??? 한 파일에서는 메인 컴포넌트를 수정하면 자동으로 인스턴트 컴포넌트가 모두 바뀌었는데 파일을 나누고 나니 자동으로 바뀌지가 않아요ㅠㅠㅠ 혹시 자동으로 수정된 컴포넌트로 교체되게 할 수 있는 방법이 있을까요?? 연정님은 이런 경우 어떻게 작업하시나요??ㅠㅠㅠ
안녕하세요~ 영상에서 설명드린 거 처럼 다른 파일에서 업데이트를 해 주셔야해요.(library> update) 자동 업데이트는 피그마 특성상 파일과 파일간의 자동 업데이트는 불가하고, 한 파일에서만 메인 컴포넌트의 변경 요소가 자동으로 인스턴스에 반영이 됩니다. 결론 : 다른 파일에서 수정된 컴포넌트는 자동으로 다른 파일에 반영되지 않습니다. 만약 자동으로 변경 이슈가 반영될 시 다른이가 작업하는 파일들에도 실시간으로 영향을 주기 때문에 이 부분을 고려 했을때 현재 방식이 협업 시엔 안정적인 듯해요. 자동으로 변경되는 것을 원하시면 컴포넌트가 어느정도 정착이 될 즈음(큰 변경 사항이 없을 즈음)까진 한 파일에서 작업하시고 추후에 다른 파일로 분리하시는 걸 추천드려요~
최근에 피그마 커뮤니티에 올라온 클럽 하우스 figma 오픈 리소스가 있어서 함께 공유 드립니다. 1)www.figma.com/community/file/943978304161218300 2)www.figma.com/file/bF33wlb8aggERReX5HyfoU/Clubhouse-UI-(Community)?node-id=0%3A1 안녕하세요 j님, 답변을 드리자면 영상의 자료는 제가 클럽하우스 앱을 사용해보고 스크린샷을 찍어 figma로 한땀 한땀 에셋들을 만든것이고, 이는 공유용은 아니고 유튜브 강의자료로 만든것이어서 디자인 시그템 관련 참고 영상은 저의 영상외에는 별도로 없습니다. 그래서 잘 되어 있는 ui kit를 참고하시라고 영상에서 소개드렸습니다. 🔗리소스 링크는 댓글에 남겼습니다.😀 피그마 커뮤니티에서 검색하시면 클럽하우스 아이콘 에셋 관련해서 오픈 리소스가 있을 수도 있어요~ 저도 몇개는 거기서 가져왔습니다.
안녕하세요 연정님 연정님의 피그마 강의를 통해서 몰랐던 사실들을 많이 알 수 있어서 너무 좋아요! 하면서 궁금한점이 생겼는데 라이브러리 파일을 만들어서 마스터 컴포넌트를 모아두고 다른 페이지에서 작업하고 있었는데요 라이브러리에서 마스터 컴포넌트에 색상을 변경하고 퍼블리싱 후 업데이트 하니 다른 페이지에서 인스턴트된 컴포넌트 전체의 텍스트가 라이브러리와 동일하게 바뀝니다ㅠ 그럴 땐 어떻게 해야하는지 알 수 있을까요?
컬러 팔레트나 폰트, grid 등의 로컬 스타일 정의의 경우, 추후 수정 리소스를 줄이기 위해 사전에 피그마로 정의하고 시작을 하는 편입니다. 물론 이는 시안 작업을 하면서 수정이 되었고요. 메인과 서브가 확정되기 전까지는 변경될 여지가 있어서 한 파일에서 스타일 생성과 시안 작업을 동시에 진행 했습니다. 메인과 서브 1종 시안 작업이 확정되면 컬러와 폰트 가이드, 그리고 시안에 사용된 에셋들에 대해 컴포넌트화 하기 시작했어요. 그 시점 즈음 시안과 가이드 파일을 분리 했습니다. 이후엔 form이나 버튼 등 의 공통 요소들을 컴포넌트화하고 시안에 재 반영을 했고, 컴포넌트들은 모든 요소들에 대해 한 번에 다 정의하진 않고 점차적으로 추가하고 개선했습니다. 가이드를 만든 시점은 메인 시안이 완료되고 개발자에게 배포전이 적당한거 같아요. 최근 4년간 디자인 시스템 구축과 관련해 다른 분들처럼 여러가지 시도와 시행착오를 겪었습니다, 결론은 처음부터 모든 컴포넌트 에셋들을 만드는건 비효율적이었던거 같아요. 자주 쓰일만한 것들 위주로 figma로 사전 작업하시면 추후 수정하는 시간을 절약할 수 있습니다. 가장 중요한건 어떤 ui 라이브러리를 사용할지 개발자와 사전논의 하는것이 좋습니다. (ex. 자체 라이브러리를 개발할 것인지 머터리얼 기반으로 할지 부트스트랩 또는 ant design 기반으로 할지 여부)
2021년 버전이 최신 버전 강의이고요. 둘다 봐도 괜찮습니다. 겹치는 내용이 있을 수는 있어요. 두 버전이 성격과 범위는 다르나 모두 피그마의 기초 및 핵심 기능에 대해 다뤘습니다. 2021년 버전을 먼저 다 보시고 2020년 버전을 보시는걸 추천 드려요. 2020년 버전에 2021년 버전에서 아직 다루지 못한 유용한 팁들이 많습니다.
![[UX/UI디자인] 디자인 시스템 작업 실무 프로세스 이야기](/img/1.gif)
00:00 Intro
00:32 팀 라이브러리의 개념
00:56 Global Style 만들기
03:32 Global Style 적용
03:51 팀 라이브러리 업데이트
05:16 Version History 기능
06:35 figJam의 라이브러리
08:28 figma 실무 사례
12:45 figma Best Case - UI Kit
//영상에서 언급된 Community UI Kit
1) ios 15 UI Kit for figma: www.figma.com/community/file/...
2) Ant Design Open Source : www.figma.com/community/file/...
실무 다뤄주셔서 감사합니다! 안 그래도 입사한 회사에서 피그마를 실무로는 처음 쓰는데 디자인 시스템 페이지랑 시안 작업 페이지가 따로있는 상태거든요. 시스템에서 만든 컴포넌트를 아무리 수정해도 시안 페이지에 있는 인스턴스에 적용이 안되니까 답답했는데 퍼블리시 버튼을 누르고, 업데이트를 따로 해줘야 하는 방법이 있었군요! ㅠㅠ 정말 집에 와서도 방법을 찾고 있었는데 덕분에 해결했습니다. (+) 이상하게 제 화면에서는 라이브러리 아이콘에 파란색 점 표시나, 새로 업데이트 됐다는 토스트 창은 나타나지 않아요.
강의 넘 좋아요. 감사합니다.
혹시몰라 남겨놔요 ant > 앤트 variant > 베리언트
무료 벗어나면 이용해봐야겠어요 감사합니다
피그마 커뮤니티에 올라온 클럽 하우스 figma 오픈 리소스가 있어서 함께 공유 드립니다.
1) www.figma.com/community/file/943978304161218300
2) www.figma.com/file/bF33wlb8aggERReX5HyfoU/Clubhouse-UI-(Community)?node-id=0%3A1
정성스러운 강의영상 감사합니다. 😄
어려움이 있어 질문 하나만 드리겠습니다. 작업이 전부 끝났는데 전체페이지가 있는 인스턴스 집합의 파일과 라이브러리 파일을 fig로 받아 임포트하니 퍼블리싱 후 go to componet하면 전부 작업자의 라이브러리로 이동합니다. 로컬의 라이브러리로 전체 변경이 불가능한가요? 연동후 작업한 파일은 정상 동작하지만 이전에 다른 사람이 작업한 파일은 전부 이전 경로의 라이브러리로 이동합니다. ㅜㅜ 종일 해결책을 알아보는데 방법이 안보이네요. 그렇다고 수백페이지 레이아웃을 재작업하기도 그렇구요. 앗 해결했습니다.
좋은 소스 추천 감사합니다~
🥰👍
재밌어요! 강의 감사해요
감사합니다~ figma 알면 알 수록 멋진 툴이에요.👍
너무 목소리도 좋으시면 설명도 정리가 잘되어서 너무 감사해요!
선생님 최고..
정말 유용한 영상이에요.ㅠㅠ 너무 많은 도움 받고있습니다. 앞으로도 바쁘시겠지만 좋은 영상 계속 부탁 드려요!! 그리고 마침 궁금해 하던 Figjam에 대한 영상도 올려주신다니 너무 기대되요~!! 늘 감사합니다~👍👍👍
이렇게 응원해 주시는 분들이 있어서 제가 멈출 수 없네요 ㅎㅎ 감사합니다. 앞으로도 좋은 영상으로 또 찾아뵐께요.
좋은 사례공유까지 감사해요 강사님! ㅎㅎ
강의 너무 잘 보고 있습니다! 혹시 10:19 의 가이드 번호(원숫자) 추가는 어떤식으로 하나요? 해당 프레임(후원하기)에 포함되지 않도록 별도 관리할 수 있을까요?
레이어 계층 구조상 시안 프레임 위에 위치하게 배치했습니다. 단축키 "[" 또는 "]" 로 간단하게 조정 가능해요.
@@yeonjung-figma 빠른 답변 감사합니다! 그렇다면 시안 프레임이 다른 프레임의 최상단에 위치하고, Fill은 투명하게 설정하여 관리하시는 건가요? 가이드(기능 정의) 등 문서화 관련된 부분에 대해서도 강의 만들어 주시면 큰 도움이 될것 같습니다! Auto Layout 등 다른 강의도 큰 도움이 되었습니다. 연정님 덕분에 곧 Figma 초보를 벗어날 수 있을 듯 하네요 ^^
안녕하세요 연정님 강의로 정말정말 도움을 많이 받고있습니다ㅠㅠ 항상 감사해요!! 다름이 아니라 팀 라이브러리를 사용하다가 궁금한 점이 생겨서요ㅠㅠ
컴포넌트 파일을 따로 만들어 관리하며 앱 디자인을 하고있는데요. 아직 컴포넌트가 완벽하지 않아 계속 수정하며 작업을 하는데 컴포넌트 파일에서 수정하고 퍼블리시를 해도 앱 디자인 파일에서는 자동으로 바뀌지가 않더라구요.... 이걸 제가 모든 페이지에 매번 수정한 컴포넌트를 교체해줘야하는 걸까요???
한 파일에서는 메인 컴포넌트를 수정하면 자동으로 인스턴트 컴포넌트가 모두 바뀌었는데 파일을 나누고 나니 자동으로 바뀌지가 않아요ㅠㅠㅠ 혹시 자동으로 수정된 컴포넌트로 교체되게 할 수 있는 방법이 있을까요?? 연정님은 이런 경우 어떻게 작업하시나요??ㅠㅠㅠ
안녕하세요~ 영상에서 설명드린 거 처럼 다른 파일에서 업데이트를 해 주셔야해요.(library> update) 자동 업데이트는 피그마 특성상 파일과 파일간의 자동 업데이트는 불가하고, 한 파일에서만 메인 컴포넌트의 변경 요소가 자동으로 인스턴스에 반영이 됩니다.
결론 : 다른 파일에서 수정된 컴포넌트는 자동으로 다른 파일에 반영되지 않습니다.
만약 자동으로 변경 이슈가 반영될 시 다른이가 작업하는 파일들에도 실시간으로 영향을 주기 때문에 이 부분을 고려 했을때 현재 방식이 협업 시엔 안정적인 듯해요. 자동으로 변경되는 것을 원하시면 컴포넌트가 어느정도 정착이 될 즈음(큰 변경 사항이 없을 즈음)까진 한 파일에서 작업하시고 추후에 다른 파일로 분리하시는 걸 추천드려요~
강의 감사합니다 :) 디자인 실무 다뤄주시는거 너무 좋아요!
오늘 강의 드디어 올려주셔서 감사합니다.
그 예시로 나오는 클럽하우스 디자인 시스템은 만들어보고 싶은데
혹시 관련 자료나 영상 알 수 있을까요?
최근에 피그마 커뮤니티에 올라온 클럽 하우스 figma 오픈 리소스가 있어서 함께 공유 드립니다.
1)www.figma.com/community/file/943978304161218300
2)www.figma.com/file/bF33wlb8aggERReX5HyfoU/Clubhouse-UI-(Community)?node-id=0%3A1
안녕하세요 j님, 답변을 드리자면 영상의 자료는 제가 클럽하우스 앱을 사용해보고 스크린샷을 찍어 figma로 한땀 한땀 에셋들을 만든것이고, 이는 공유용은 아니고 유튜브 강의자료로 만든것이어서 디자인 시그템 관련 참고 영상은 저의 영상외에는 별도로 없습니다.
그래서 잘 되어 있는 ui kit를 참고하시라고 영상에서 소개드렸습니다. 🔗리소스 링크는 댓글에 남겼습니다.😀
피그마 커뮤니티에서 검색하시면 클럽하우스 아이콘 에셋 관련해서 오픈 리소스가 있을 수도 있어요~ 저도 몇개는 거기서 가져왔습니다.
와 감사합니다!
디자인 시스템을 어떻게 만들어야하는지 몰라서
제 프로젝트에 만든거를 어떤 식으로 해야하는비 응용해보려구요! 감사해요~
정말 잘 보고 있어요! 연정님 통해서 피그마 그리고 피그마잼까지 친숙해지고 있습니다. 오늘 하루 행복한 하루 되세요!
오 연정님 컴백!!!! ㅎㅎ
기다려 주셔서 감사합니다. ㅎㅎ 개인 사정으로 컴백이 늦었네요.
혹시 타팀의 라이브러리를 사용할수도 있나요? 라이브러리는 같은 팀 멤버여야지만 사용가능한가용?
사용중인 계정이 다른팀에 멤버로 초대되었다면 뷰 권한이더라도 디자인 파일 작업 시 다른팀의 라이브러리도 에셋 패널 > 팀라이브러리 목록에 함께 표시돼요~ 결론은 사용 가능합니다. ^^
@@yeonjung-figma 우왕 자세한 답변 감사합니당 >
안녕하세요 연정님 연정님의 피그마 강의를 통해서 몰랐던 사실들을 많이 알 수 있어서 너무 좋아요! 하면서 궁금한점이 생겼는데 라이브러리 파일을 만들어서 마스터 컴포넌트를 모아두고 다른 페이지에서 작업하고 있었는데요 라이브러리에서 마스터 컴포넌트에 색상을 변경하고 퍼블리싱 후 업데이트 하니 다른 페이지에서 인스턴트된 컴포넌트 전체의 텍스트가 라이브러리와 동일하게 바뀝니다ㅠ 그럴 땐 어떻게 해야하는지 알 수 있을까요?
진짜 좋은 영상 제작해주시고 공유해주셔서 너무 감사드립니다 연정님! 멋져요👍
감사합니다🥰
디자인 에셋이나 유아이 키트는 프론트 화면 제작후 만드는건가여 아니면 먼저 정의 다하고 만드는건가요??
컬러 팔레트나 폰트, grid 등의 로컬 스타일 정의의 경우, 추후 수정 리소스를 줄이기 위해 사전에 피그마로 정의하고 시작을 하는 편입니다.
물론 이는 시안 작업을 하면서 수정이 되었고요. 메인과 서브가 확정되기 전까지는 변경될 여지가 있어서 한 파일에서 스타일 생성과 시안 작업을 동시에 진행 했습니다.
메인과 서브 1종 시안 작업이 확정되면 컬러와 폰트 가이드, 그리고 시안에 사용된 에셋들에 대해 컴포넌트화 하기 시작했어요.
그 시점 즈음 시안과 가이드 파일을 분리 했습니다.
이후엔 form이나 버튼 등 의 공통 요소들을 컴포넌트화하고 시안에 재 반영을 했고, 컴포넌트들은 모든 요소들에 대해 한 번에 다 정의하진 않고 점차적으로 추가하고 개선했습니다. 가이드를 만든 시점은 메인 시안이 완료되고 개발자에게 배포전이 적당한거 같아요.
최근 4년간 디자인 시스템 구축과 관련해 다른 분들처럼 여러가지 시도와 시행착오를 겪었습니다, 결론은 처음부터 모든 컴포넌트 에셋들을 만드는건 비효율적이었던거 같아요.
자주 쓰일만한 것들 위주로 figma로 사전 작업하시면 추후 수정하는 시간을 절약할 수 있습니다.
가장 중요한건 어떤 ui 라이브러리를 사용할지 개발자와 사전논의 하는것이 좋습니다. (ex. 자체 라이브러리를 개발할 것인지 머터리얼 기반으로 할지 부트스트랩 또는 ant design 기반으로 할지 여부)
@@yeonjung-figma 와 자세한 설명 감사드립니다
그동안 포토샵으로 작업하다가 피그마 공부중인데 실무 적용 내용이 궁금했거든요 감사합니다!
@@빵으니-i9k ㅎㅎ 포토샵 탈출 축하드려요!! 아마 포토샵만 써보셨다면 figma는 신세계일거에요 ㅎㅎ 전 XD, 스케치 모두 써봤지만 figma가 가장 개발 친화적이고 효율적이어서 자신있게 추천드립니다. ^^
알려주신 기능들 실무에 쓰는 날이 왔으면 좋겠네요ㅎㅎ 잘 듣고 있습니다~
진짜 정말 이해가 잘됩니다.. 스케치랑 xd 사용하다가 피그마로 프로젝트를 해야할 상황이 되어서 난처했는데 이 강의로 인해서 금방 협업할 수 있을 것 같습니다! 감사합니다 :)
안녕하세요. 24초 오른쪽의 사람모형은 어떻게 만드나요?
베어런츠가 뭔지 좀 더 궁금해요
추후 그 기능을 활용한 Form과 관련하여 영상 추가해보겠습니다. 피드백 감사합니다.
안녕하세요! 처음으로 피그마를 다뤄보려고 하는데요
재생 목록에 있는 2020버전부터 첫 시작을 하면 되는걸까요? 2020 2021 버전으로 나눠져 있어서 어떤식으로 강의를 듣기 시작하면 되는건지 궁금합니다!
2021년 버전이 최신 버전 강의이고요. 둘다 봐도 괜찮습니다. 겹치는 내용이 있을 수는 있어요. 두 버전이 성격과 범위는 다르나 모두 피그마의 기초 및 핵심 기능에 대해 다뤘습니다.
2021년 버전을 먼저 다 보시고 2020년 버전을 보시는걸 추천 드려요. 2020년 버전에 2021년 버전에서 아직 다루지 못한 유용한 팁들이 많습니다.
감사합니다☺️
ruclips.net/p/PLfrKiHMMe1chZTU89gcXsslf7vld8nodK 여기에 순차적으로 재생목록 정리하였습니다. 참고해주세요~
와 너무 좋아요.. 😁 👍 감사합니당