본문 바로가기

디자인35

작업형식에 따라 사용하기 좋은 디자인 가이드 및 아이콘 모음 링크 디자인 시스템 1. Carbon Design Systemhttps://carbondesignsystem.com/designing/kits/figma Carbon Design SystemCarbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contricarbondesignsystem.com 2. Microsoft Fluen.. 2024. 3. 18.
[입문서 책] 웹 디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서 총평 6/10 2021년 출간된 책으로 피그마의 특성 및 장점 위주로 굵직하게 정리 웹디자인 > 웹 퍼블리싱 실습 위주로, 피그마를 전체적으로 살펴볼 수 있는 책 퍼블리싱에서 어떻게 적용하는지 visual studio code를 통해 학습 가능 UI에 관한 기본 component에 대해서는 배우기 힘듬 버튼 상태값Variants이나 flexible button 만드는 법은 책에 없음. 웹페이지 전체 레이아웃 위주여서 각 버튼, 아이콘 요소들을 자세히 다루지 않아 아쉬움 2024. 3. 16.
[필수] flexible button 만들기 auto layout 활용 1. text 입력 후 Component생성 2. Auto layout +버튼 눌러서 활성화 3. 버튼 전체 영역 width/height 값 입력 4. 버튼 색상값 변경 5. 완성 오토레이아웃에 대한 포스팅 https://blog.naver.com/devyung/223162778702 2024. 3. 15.
[필수] Variants 공부하기 - 버튼 상태값 만들기 1. 네가지 상태값의 버튼 형태 만들어 > Component 생성 2. 모두 선택해서 우측 패널 활성화된 "Combine as variants"버튼 누르기 3. 적용됐다는 "4Variants"보라색 메세지 확인, 좌측 레이어패널에도 4개의 컴포넌트가 1개의 Variants로 완성 4. 하나를 복사해서 다른 곳에 붙히고 우측 패널 확인하면 상태값 변경 가능한 property 생성 *** Mouse Cursor형태(10가지) Variants로 정리 버튼 상태값은 4개의 기본 variants였고 이걸 이용한 다양한 형태가 있구먼~~~~ 2024. 3. 15.