피그마6 피그마로 개발자와 협업하기 #inspect패널 #codeView 우선 figma에서 Zeplin과 같은 hand off 기능을 사용하려면, 우측 inspect 패널을 활성화해야 합니다. 1. 디자이너 또는 피그마 편집자가 보는 편집 화면의 경우, Design 패널 우측 끝에 위치한 패널입니다. 2. 이때, Code 영역에서 개발 플랫폼 옵션을 선택합니다. (위 그림 중 ②번 영역) 옵션 1. CSS: Default 옵션은 웹입니다. 옵션 2. ios 옵션 3. Android: DP 확인용 3. 그리고 Code 대신 그 우측의 Table 버튼을 선택합니다. (위 그림 중 ③번 영역 참고) 일반적으로 개발자가 보게 될 View Only 모드에서도 inspect 패널에서 위와 같이 설정하고, 선택한 플랫폼에 최적화된 Style Code를 확인 할 수 있습니다. 연관 단축키.. 2021. 6. 4. 피그마 기초 part 2 - Auto Layout 기능 #버튼 Auto Layout 버튼 만들기 2021/04/24에 업데이트된 figma 강좌 영상입니다. 목차00:00 Intro00:48 피그마에서 Page 단위로 에셋 관리하는 사례01:44 피그마 파일에 Page 추가하고 순서 변경하기02:39 Auto Layout 단축키: Shift + A02:50 단축키 option(alt)를 활용하여 객체간의 여백 사이즈 확인하기03:03 Auto Layout기능 > 버튼 여백 조정하는 방법04:10 Layer 패널 > Layer의 이름 변경하는 단축키 : command(ctrl) + R04:19 Auto Layout기능 > 텍스트를 오른쪽 방향으로 복제하는 방법05:04 Auto Layout 기능 > 정렬을 수평 방향에서 수직으로 변경하는 방법05:33 Auto Lay.. 2021. 4. 24. 피그마 기초 - 컴포넌트의 개념 9월 업데이트 - Figma 컴포넌트 관련 업데이트2020/9/17일 오후, 갑자기 인스턴스(Instance) 기능의 업데이트가 있었습니다. 1) Instance에 대한 "Go to Main Component " Go to Main Component에 대한 텍스트 링크 대신, 아이콘으로 대체되었습니다. 여기서 I..designer-story.tistory.com피그마 기초 3 - 컴포넌트 & Variant 기능 #버튼컴포넌트 https://youtu.be/lMOJ1ijO9hs 아래 내용은 업데이트 예정인 피그마 기초 강좌 Part 4 - 디자인 시스템 구축을 위한 컴포넌트의 이해를 돕기 위한 글입니다. {연정's Figma YouTube 채널}1) 플랫폼에서의 컴포넌트 {Components}컴포넌트 - .. 2020. 8. 25. figma community 특정 파일을 내 계정의 문서로 복제하는 방법 figma 공식 커뮤니티에서 공유된 특정 파일을 벤치 마킹 또는 테스트를 위해 내 계정의 문서로 복제하는 방법을 소개합니다. 1) 아래의 링크에 접속후 카테고리 중 Design System을 클릭해봅니다. https://www.figma.com/community/ Figma Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers and developers. www.figma.com 2) 카테고리 > Design System에서 파일 하나를 클릭합니다. 3) 카테고리 > Design System > 상세페이지에서 Duplicate 버튼을 클릭하여 파일을 내 계정으로 .. 2020. 8. 24. 이전 1 2 다음
