Figma8 피그마로 개발자와 협업하기 #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. 피그마 컴포넌트의 인스턴스 속성을 Reset 하는 방법 Q. 인스턴스의 네이밍을 기존 Main Componet와 동일하게 변경하고 싶습니다. [가정]컴포넌트를 생성 후에 그 Main Component(btn-primary)를 복제한 Instance를 이름과 색상을 변경하였다고 가정해봅니다.해당 instance를 선택하고 오른쪽 Design 패널에서 instance 네임 우측에 있는 더보기 아이콘을 클릭했습니다. (위 그림 참고) [인스턴스의 옵션]Detach instance : instance와 원본 객체인 Main Component와의 연결을 끊을 수 있습니다. 즉 Main Component를 수정해도 Detach 한 객체는 더 이상 영향을 받지 않습니다. Reset all overrides: 수정된 속성을 모두 원본과 동일하게 되돌리고자 할 때 이를 클릭.. 2021. 2. 19. 곧 다시 시작하는 걸로.. 지난 9월 마지막 업데이트 이후, 컴포넌트 관리 기능과 관련하여 최근 피그마측에서 업데이트가 있었죠. 신규 Figma 기능과 관련하여 지난주 주말 동안.. 영상을 제작하다가 회사 일이 많아 지금은 홀딩 상태입니다. 왜 연차가 늘어도 일이 쉬워지지 않을까요? 왜 Figma라는 좋은 툴을 써도 난 여전히 야근을 하고 있을까요? (Figma를 써서 그나마 밤셈은 면했다고 스스로 위로를..) 기술에 대한 트렌드 변화 속도가 점점 가속화 되다보니, 해를 거듭해도 배울것은 넘쳐납니다. 캐릭터 디자인, 브랜딩 디자인, 반응형 웹 디자인, 스타일 가이드 제작, 프로토타입핑, 화면 기획, QA.. 제 직함의 정식 명칭은 UI/UX 디자이너이지만 현재 속한 팀의 유일한 디자이너이기에 위에 나열된 여러가지 일을 동시에 진행.. 2020. 11. 8. Figma의 Variants (feat. 새로운 컴포넌트 셋팅 방법) 2020년 10월 29일, 피그마 측의 컴포넌트 커스터마이징과 관련한 기능 업데이트가 있었습니다. 이 부분에 대해 이해를 하려면, 약간의 개발 상식을 필요로 하여 어렵게 느껴질 수 있어서 기능에 대한 개념 설명을 간단히 알려드리고 본격적으로 시작해 보겠습니다. 컴포넌트의 개념에 관한 설명은 이전 포스팅을 참고해주세요. 1) Variants [베어리언츠] 기능 정의 Variants 기능 : Figma에서 생성한 컴포넌트(Component)를 개발 친화적인 방식으로 세팅하고 관리할 수 있는 컴포넌트의 확장 기능입니다. 컴포넌트 기능 00:58 버튼 컴포넌트 생성하기 01:36 메인 컴포넌트와 인스턴스 구분하는 방법 02:25 인스턴스의 옵션 살펴보기 04:34 인스턴스의 Text Override 기능 06:.. 2020. 11. 1. 이전 1 2 다음
