분류 전체보기 (20) 썸네일형 리스트형 [Figma #7] 반응형웹 Layout Grid 기능 Layout Grid 다양한 해상도의 웹, 앱 환경에 대응하여 프로덕트를 제작할 시 전달하려는 정보의 완성도를 유지하기 위해 일관성 있는 Layout Grid 규칙이 필요하다. 머터리얼 디자인 그리드 시스템 Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io Bootstrap 그리드 시스템 Grid system Use our powerful mobile-first flexbox grid to build layouts .. [Figma #6] 디자인 시스템을 위한 스타일 정의, 피그마 버전 관리 참고 블로그 figma에 의한 디자인 시스템 구축 사례 및 개념 정의 YouTube 연정's figma에 연재 중인 Figma 강좌의 다음 주제가 디자인 시스템 구축을 위한 스타일링과 컴포넌트 구축이기 때문에 figma에 의한 디자인 시스템 구축 사례와 디자인 시스템과 관련된 개념 designer-story.tistory.com 1. Design System for Figma 피그마로 제작된 디자인 시스템을 모아놓은 웹 서비스 Design Systems For Figma A collection of Design Systems for Figma from all over the globe. www.designsystemsforfigma.com 2. Figma Community design system 클릭 .. [Figma #5] 피그마 컴포넌트 & Variants 기능, 버튼 생성하기 Part 3 컴포넌트 & 인스턴스 인스턴스? 재사용이 가능한 컴포넌트를 복제한 UI Asset 1. 아이콘 클릭 후 > 맨 위 마름모 클릭 > 컴포넌트 생성 2. 아이콘 복제 시 인스턴스로 변함 3. 컴포넌트 (원본) 아이콘 펜툴 변경 시 인스턴스(복사본) 아이콘이 변함 > 유지보수에 용이 4. 디자인 > 인스턴스 패널 > 다른 아이콘으로 바로 변경 가능 5. 인스턴스 페이지에서 컴포넌트 버튼 클릭(go to main component) > 원본 아이콘 위치로 이동 6. 왼쪽 Assets 페이지에서 option + commend 단축키 클릭 상태에서 아이콘 swap시 대체됨 7. Instance 의 Overrid Reset all changes 클릭 > Instance 버튼이 원래 상태로 돌아감. Push chang.. [Figma #4] 오토레이아웃 기능 버튼 생성하기 Part 2 Autolayout 로 버튼 생성하기 컴포넌트 UI Asset (여러번 사용 하는 것) Auto Layout 단축키 shift + A > text 선택 후 option(alt) 키를 누르고 바깟쪽 위로 마우스 hover 1. 텍스트 입력 후 > text style에 저장한 스타일 불러오기 > Autolayout에서 padding 10px지정 > fill에서 Color Style 색상 지정 2. 버튼 텍스트 클릭 후 > command + D + D 누르면 가로로 복제 3. Autolayout - 가로로 정렬, 세로로 정렬, 패딩 값 변경 가능, 모서리 둥글게 ( 버튼 높이 /2 ) 4. 아이콘 삽입 > contral + command + space bar Autolayout에서 가운데 정렬 해야 버튼 사이.. [Figma #3] figma 아이콘 만들기, 플러그인 설치, Auto Layout Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io 1. google material icon 다운 받아서 디자인 경우 material.io/resources/icons/ material icon 저장 후 불러올때 shift + i Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 .. [Figma #2] 스타일 버튼 생성하기 Part 1 Part 3. 피그마 시작 가이드 #인터페이스 피그마 파일을 막상 열고나니, 무엇부터 해야 할지 망설여지셨나요? 피그마 에디터는 파일에 대한 접근 권한이 "편집자"이냐 "뷰어"이냐에 따라 인터페이스 구성에 차이가 있습니다. [공유 목적] designer-story.tistory.com Figma > community > styler (plugin) 검색 다운로드 텍스트 드레그 > commend+r > rename(이름 설정) + rurrent name 클릭 모든 폰트 선택 > 마우스 우클릭 > plugin > styler > generate style 지정 단축키 T 클릭 > Text style에서 확인 가능 [Figma #1] 피그마 입문 피그마 다운로드, frame 해상도, UI Kit 활용 피그마 다운로드 > 데스크탑에 다운로드 해서 사용해도 되고, 아이디 로그인 후 사용 가능 Download Figma Desktop Apps, Mobile Apps, and Font Installers Download the Figma desktop app for macOS or Windows as well as the font installer and device preview apps www.figma.com 참고 레퍼런스 'Figma 가이드' 카테고리의 글 목록 유튜브 채널 연정's Figma의 블로그입니다. @UCXCKPZOlZzp5JSEwOsuT9kg designer-story.tistory.com frame 해상도 피그마 화면에서 f 클릭 > 디자인패널 > iPhone 13 mini iPhone.. [React #9] 이벤트 처리하기 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org on+첫글자 대문자 onClick 마우스 이벤트 click 마우스를 눌렀다가 떼었을때 musedown 마우스를 눌렀을때 mouseup 마우스를 떼었을때 dbclick 마우스 더블클릭 mousemove 마우스 움직일때 mouseover 마우스를 영역 밖으로 옮겼을때 mouseout 마우스를 영역 밖으로 옮겼을때 mouseenter 마우스를 영역 안으로 옮겼을때 mouseleve 마우스를 영역 밖으로 옮겼을때 contextmenu 마우스 오른쪽 이전 1 2 3 다음
