찐망고'S 퍼블리싱그리고디자인

안녕하세요찐망고입니다 오늘은 피그마의 Constraints에 대해서 포스팅 해볼까 해요피그마 이전글들을 참고해주시구요 피그마의 constraints는 디자인 요소의 크기와 위치를 프레임안에서 제어하는 기능인데요. 컨스트레인트를 사용하면 디자인요소(예: 프레임, 그룹, 컴포넌트 등)를다른 요소나 프레임에 상대적으로 맞출 수 있습니다. 이를 통해 디자인 요소의 크기를 유지하거나, 요소 간의 간격을 일정하게 유지하거나, 요소를 중앙에 정렬하는 등의 작업을 수행할 수 있어요. 아래 그림을 볼까요? 모바일 사이트를 디자인 하는 중인데 당연히 모바일 viewport도 하나의 사이즈는 아니잖아요?해당 사이즈에서 각각의 디자인요소들이 viewport의 크기에 따라 어떤식으로 보여줘야 할지컨스트레인트기능을 사용하여 보여..

안녕하세요 찐망고입니다 오늘은 피그마의 Auto Layout에 대해서 포스팅 해볼까 해요 엄청 편리하고 좋은 기능이라 생각합니다요!! 일단 피그마 이전글들을 참고해주시구요 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그마 Layout grid 피그마 Layout grid 안녕하..

안녕하세요 찐망고입니다. 할게 많은 와중에 피그마 포스팅 중이고 피그마는 진짜 딱 몇개의 키워드만 공부하시면 끝나는 그만큼 기능은 적지만 알찬 프로그램이에요. 참고로 너무 많은 기능을 지원하는데 그런건 나중에 따로 썰 풀도록 하고 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그..

안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHWAY사이트를 작업하면서 기본적인 스타일가이드도 만들어보았습니다. 스타일가이드가 필요한 이유는 앞으로 진행될 디자인과 마크업(퍼블리싱)때문인데요. 특히 퍼블리싱할땐 자주 사용하는 컬러와 폰트, 폰트사이즈를 미리 CSS로 셋팅해놓고 작업을 하면 아주 편리하기 때문에 디자인과 따로 이렇게 가이드를 만들어주면 좋습니다. 포토샵으로 디자인을 하다가 피그마로 디자인을 하면 참 편한게 일단 피그마는 텍스트 선택시 폰트의 정보가 바로 뜨는데요. Headline/30px Title Bold라고 되어있는 부분은 이런식으로 피그마에..