figma
-
출처: figma 공식 사이트 컴포넌트 , 반복 재사용 가능한 UI 요소 컴포넌트를 사용하는 이유 디자인 자산 운용으로 작업 효율성 증대하기 만들어 놓은 디자인 자산을 다시 재활용 할 수 있습니다. 메인 요소를 수정하면 복제된 디자인에도 수정사항이 반영 되어 반복 작업을 줄여줍니다 라이브러리 기능을 활용해서 디자인시스템운용 컴포넌트로 제작한 UI 요소들을 라이브러리로 보내놓고 다른 프로젝트 파일에서도 라이브러리를 통해 불러와서 재사용 가능합니다. 요소들을 전부 합쳐 거대한 디자인 시스템으로 규격화 할 수 있습니다. 1. 컴포넌트 만들기 1-1. 마우스 우클릭후에 'Create component' 실행 component를 생성하면 메인 컴포넌트가 생성됩니다. 메인 컴포넌트(부모)를 복제한 것을 Instan..
[Figma] 컴포넌트 만들기 1탄출처: figma 공식 사이트 컴포넌트 , 반복 재사용 가능한 UI 요소 컴포넌트를 사용하는 이유 디자인 자산 운용으로 작업 효율성 증대하기 만들어 놓은 디자인 자산을 다시 재활용 할 수 있습니다. 메인 요소를 수정하면 복제된 디자인에도 수정사항이 반영 되어 반복 작업을 줄여줍니다 라이브러리 기능을 활용해서 디자인시스템운용 컴포넌트로 제작한 UI 요소들을 라이브러리로 보내놓고 다른 프로젝트 파일에서도 라이브러리를 통해 불러와서 재사용 가능합니다. 요소들을 전부 합쳐 거대한 디자인 시스템으로 규격화 할 수 있습니다. 1. 컴포넌트 만들기 1-1. 마우스 우클릭후에 'Create component' 실행 component를 생성하면 메인 컴포넌트가 생성됩니다. 메인 컴포넌트(부모)를 복제한 것을 Instan..
2023.06.14 -
피그마에서도 gif이미지를 넣는게 가능한데 움직이는 형태의 이미지를 보려면 Present모드에서 보는게 가능하다. 발표용 ppt를 만들거나 디자인 프로토타입 버전에서 움직이는 애니메이션 이미지를 보여줘야 할 필요가 있을 때 활용해 볼 수 있다. 부가설명은 피그마 가이드 문서 내용 참고. https://help.figma.com/hc/en-us/articles/360041486873-Add-animated-GIFs-to-prototypeshttps://help.figma.com/hc/en-us/articles/8878274530455 Add animated GIFs to prototypes Who can use this feature Supported on any team or organization pl..
[Figma]피그마 프로토타입에서 영상과 Gif 이미지 넣기피그마에서도 gif이미지를 넣는게 가능한데 움직이는 형태의 이미지를 보려면 Present모드에서 보는게 가능하다. 발표용 ppt를 만들거나 디자인 프로토타입 버전에서 움직이는 애니메이션 이미지를 보여줘야 할 필요가 있을 때 활용해 볼 수 있다. 부가설명은 피그마 가이드 문서 내용 참고. https://help.figma.com/hc/en-us/articles/360041486873-Add-animated-GIFs-to-prototypeshttps://help.figma.com/hc/en-us/articles/8878274530455 Add animated GIFs to prototypes Who can use this feature Supported on any team or organization pl..
2022.10.03 -
[공지]티스토리 스킨 변경으로 인해 keyboard 단축키 구분 스타일이 삭제 되었습니다. 가독성이 매우 떨어져 곧 업데이트 할 예정입니다. 방문자 분들 단축키 보기가 조금 불편하시겠지만 조금만 기다려 주세요. [업데이트&오타 수정 내역 ] 더보기 2024.1.4 티스토리 스킨 변경으로 인해 keyboard 단축키 구분 스타일이 삭제 되었습니다. 곧 업데이트 할 예정입니다. 방문자 분들 불편하시더라도 조금만 기다려 주세요. 2023.04.27 - section을 selection으로 오기입해서 수정했습니다. - 사용 빈도수가 낮았던 단축키를 업데이트했습니다. - ETC: 실시간 대화하는 기능 단축키 추가 - Cursor: 움직이면서 실행하는 단축키 추가 2022.11.30 section 툴 추가 2022..
[Figma] 맥 유용한 Figma 단축키 (Figma shortcut)[공지]티스토리 스킨 변경으로 인해 keyboard 단축키 구분 스타일이 삭제 되었습니다. 가독성이 매우 떨어져 곧 업데이트 할 예정입니다. 방문자 분들 단축키 보기가 조금 불편하시겠지만 조금만 기다려 주세요. [업데이트&오타 수정 내역 ] 더보기 2024.1.4 티스토리 스킨 변경으로 인해 keyboard 단축키 구분 스타일이 삭제 되었습니다. 곧 업데이트 할 예정입니다. 방문자 분들 불편하시더라도 조금만 기다려 주세요. 2023.04.27 - section을 selection으로 오기입해서 수정했습니다. - 사용 빈도수가 낮았던 단축키를 업데이트했습니다. - ETC: 실시간 대화하는 기능 단축키 추가 - Cursor: 움직이면서 실행하는 단축키 추가 2022.11.30 section 툴 추가 2022..
2022.09.15 -
섬네일 만들지 않으면 맨 첫번째 프레임이 자동으로 노출되지요.. 조금더 직관적이고 빠르게 파일을 구별하려면 섬네일을 사용하는게 좋더라구요. 1. 만드는 방법 피그마에서는 섬네일 추천 사이즈 1600X960으로 얘기하는데 굳이 맞추지 않아도 되는것 같아요. 마우스 우클릭 후에 Set as thumbnail 눌러주면 끝입니다. 너무 간단해요. 2. 해제하는 방법 해제하는것도 동일하게 마우스 우클릭한 다음에 Restore default thumbnail을 누르면 됩니다. 끝... 😇
[Figma] 피그마에서 표지 만들기, thumbnail 제작하기섬네일 만들지 않으면 맨 첫번째 프레임이 자동으로 노출되지요.. 조금더 직관적이고 빠르게 파일을 구별하려면 섬네일을 사용하는게 좋더라구요. 1. 만드는 방법 피그마에서는 섬네일 추천 사이즈 1600X960으로 얘기하는데 굳이 맞추지 않아도 되는것 같아요. 마우스 우클릭 후에 Set as thumbnail 눌러주면 끝입니다. 너무 간단해요. 2. 해제하는 방법 해제하는것도 동일하게 마우스 우클릭한 다음에 Restore default thumbnail을 누르면 됩니다. 끝... 😇
2022.09.15 -
벌써 피그마 사용한지 2년 정도 흐른것 같은데 플러그인 이것저것 설치해 보다가 정착템? 으로 계속 쓰고 있는 플러그인 소개 해볼까 합니다. 플러그인 설치한건 많은데 손이 안가는 템들은 탈락시켰습니다. 1. 스타일 가이드를 제작해주는 툴 measure tools 스타일 가이드 제작용 툴 , 가볍고 단순해서 쓰기 편합니다. 외부 사용자를 위한 가이드 문서를 제작해야 되는 경우가 있는데 이미지 사이즈나 오브젝트 사이 간격을 빠르게 추출해줍니다. 2. 픽셀 퍼펙트 만들어 주는 플러그인 PixelPerfact 이거 좋은데 왜 아무도 안쓰는건가요... 이미지나 아이콘등의 파일을 불러왔을때 픽셀이 소수점으로 깨질 경우가 있죠? 이 툴을 써주면 한번에 정리가 돼요 3. 비주얼 작업시, 아이소매트릭 효과에 유용한 플러그..
[Figma] 피그마 플러그인 추천 6개벌써 피그마 사용한지 2년 정도 흐른것 같은데 플러그인 이것저것 설치해 보다가 정착템? 으로 계속 쓰고 있는 플러그인 소개 해볼까 합니다. 플러그인 설치한건 많은데 손이 안가는 템들은 탈락시켰습니다. 1. 스타일 가이드를 제작해주는 툴 measure tools 스타일 가이드 제작용 툴 , 가볍고 단순해서 쓰기 편합니다. 외부 사용자를 위한 가이드 문서를 제작해야 되는 경우가 있는데 이미지 사이즈나 오브젝트 사이 간격을 빠르게 추출해줍니다. 2. 픽셀 퍼펙트 만들어 주는 플러그인 PixelPerfact 이거 좋은데 왜 아무도 안쓰는건가요... 이미지나 아이콘등의 파일을 불러왔을때 픽셀이 소수점으로 깨질 경우가 있죠? 이 툴을 써주면 한번에 정리가 돼요 3. 비주얼 작업시, 아이소매트릭 효과에 유용한 플러그..
2022.09.07