figma

컴포넌트 프로퍼티 컴포넌트 프로퍼티의 개념 변화와 변경 관련 피그마 컴포넌트 기능 컴포넌트 프로퍼티의 구성 ‣ Variant: 컴포넌트 가상의 상태를 만들 때 사용‣ Text: 컴포넌트 안에 있는 텍스트를 컴포넌트 속성으로 만들어 줌‣ Boolean: 레이어를 껐다 켰다 하는 속성 값‣ Instance swap: 인스턴스를 다른 인스턴스로 교체할 때 사용‣ Slot: 슬롯이라는 에셋 교환 영역을 가진 빈 깡통 형태의 컴포넌트 (새로 추가된 기능인 듯) 배리언츠 실습 버튼의 위계 배리언츠 만들기 Properties - Varient 추가 ‣ Priority: 프라이머리 (Primary, 1순위) - 세컨더리 (Secondary, 2순위) - 터시어리 (Tertiary, 3순위)‣ Size: Larg..

파운데이션 파운데이션의 개념 UI의 기초 재료모든 컴포넌트들은 이 파운데이션 요소를 조합해 만들 수 있음 파운데이션의 구성 ‣ 색상 (Color)‣ 서체 (Font, Typography)‣ 간격, 여백 (Spacing, Gap)‣ 곡률 (Radius)‣ 그리드 (Grid)‣ 고도 (Elevation), 1주차에서 배운 높이 개념‣ 아이콘 (Icon) 컬러 스타일 RGB와 Hex Code - RGB: 빛의 3원색 첫 글자를 딴 것 (ex. 255, 255, 255)- Hex Code: RGB 숫자를 컴퓨터가 16진수로 변환한 코드 (ex. #FFFFFF) 컬러 프로파일 (Color Profile) 디스플레이가 코드를 해석할 때 사용하는 색 기준표공신력 있는 기관이나 기업에서 만들어서 배포ex. Adob..

프레임과 컨스트레인트 코드가 디자인을 읽는 법 디자인을 코드로 변환 → 코드가 디자인을 레고처럼 쌓음 (박스 모델) → 웹/앱이 코드를 읽고 디자인으로 바꿔서 보여줌 프레임 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐다른 개체나 프레임을 넣을 수 있음 → 컨테이너(Container)라고도 함 그룹 여러 개체를 하나로 묶음을 뜻함코드 블록이 아닌 SVG 이미지로 인식되어 실무에서는 가급적 사용하지 않음 프레임 VS 그룹 부모-자식(Parent-Child) 관계 프레임 정렬 기능 단일 개체의 정렬 기준은 부모 개체다중 개체의 정렬 기준은 서로 Tidy up: 그리드를 맞춰서 정렬Distribute vertical spacing: 수직 간격을 균등하게 분배Distribute ..

피그마란? 디자인 툴이자 협업 도구디자이너를 중심으로, 개발자와 기획자, 마케터 등 모든 직군들이 같은 화면을 보며 작업할 수 있음 피그마 특징 1. 높은 접근성과 호환성: 웹에서도 접속 가능, 맥・윈도우 모두 사용 가능2. 올인원: 디자인부터 개발까지 가능한 종합 협업 툴3. 강력한 커뮤니티: 각종 플러그인과 디자인 자료들이 다수 공유됨4. 쉬운 학습: 디자인 기초부터 고급 기능까지 피그마로 가능 피그마 설치 Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱 디스플레이와 배수 이해하기 디스플레이 (Display) 디지털 화면, TV・모니터 등을 통해 봄 해상도 (Resolution) 디스플레이의 선명한 정도, 값은 디스플레이 안에 들어가 있는 픽셀의 개수를 의미 → 1920 * 10..