디자인 툴/Figma10 해상도 관련 블로그 https://brunch.co.kr/@plusx/6 2024. 12. 18. [figma] 프로퍼티(properties)를 활용하여 내용 쉽게 수정하기 Properties 적용 전예시 만들기 프로퍼티를 활용하기 위해 예시를 먼저 만들어 보았다.1. 체크박스 두개를 만들어 컴포넌트화 한다.2. 제목, 내용을 묶어 오토레이아웃을 만든다.3. 빈 체크박스와 텍스트 레이아웃을 묶어 오토레이아웃을 만든다.4. 만든 레이아웃을 hug와 fill, margin 등을 적절히 조정한다.5. 만들어놓은 전체 레이어를 컴포넌트화 한다.만드는 자세한 방법 클릭Layer Propertycheck-list에서 텍스트 '내용'을 클릭하면 우측에 Layer에 Create boolean property가 뜬다.Create boolean property를 클릭하면 Name과 Value를 지정할 수 있다.☑ Name은 앞으로 프로퍼티를 구분하는 이름이다. 이곳에서는 Show d.. 2024. 6. 10. [Figma] 메인 컴포넌트(Main component) 와 인스턴스 컴포넌트(Instance component) 메인 컴포넌트(Main component) 인스턴스 컴포넌트(Instance component)컴포넌트(Component)란?반복적으로 사용되는 요소를 재사용하기 위해 사용하는 기능이다.피그마에서 컴포넌트는 디자인 전체에서 재사용 할 수 있는 요소로 정의된다.버튼이나 아이콘 같은 작은 요소부터 레이아웃 전체까지 다양한 범위에서 사용 할 수 있다.핵심은, 컴포넌트의 '재사용성'에 있다.컴포넌트로 요소들을 만들고 반복하여 사용하면, 모든 요소를 한 번에 편집할 수 있기 때문에 유지보수에 용이하다.그렇기 때문에 컴포넌트들은 따로 분류하여 관리하는 것이 좋다. 예시로, 버튼을 하나 만들어보았다.컴포넌트로 만들고 싶은 요소를 클릭한 후 상단 중앙을 보면, Create component 라는 버튼을 발견할 수 있다.. 2024. 6. 5. Text Field 텍스트 필드 제작하기 Text Field 만들기 https://yerica.tistory.com/33 Figma - Auto layout / 피그마 - 오토 레이아웃Auto layout(오토 레이아웃)이란?반응성과 유연성이 뛰어난 동적 레이아웃을 만들 수 있는 기능이다. 기본적으로 프레임 속성이 포함되어 있다.프레임 내부 구성 요소들의 배열 방향, 간격, 패딩,yerica.tistory.com이와 같은 방법으로 텍스트 필드(text field)도 만들어보려고 한다.'검색어를 입력하세요.' 라는 글을 작성한 뒤 오토레이어를 만들어준다.* 텍스트 상자에 미리 적혀있는 문자를 '플레이스홀더'라고 한다. 일반적으로 플레이스 홀더는 문자나 이미지 등의 요소가 들어갈 자리에 임시로 채워 놓는 내용물을 의미한다.프레임의 색을 흰색으로 변.. 2024. 5. 31. [Figma] Auto layout / 피그마 - 오토 레이아웃 Auto layout(오토 레이아웃)이란?반응성과 유연성이 뛰어난 동적 레이아웃을 만들 수 있는 기능이다. 기본적으로 프레임 속성이 포함되어 있다.프레임 내부 구성 요소들의 배열 방향, 간격, 패딩, 정렬 등 다양한 옵션을 설정할 수 있다.내부 컨텐츠의 크기에 따라 프레임 크기가 자동으로 조정되게 설정하거나, 반대로 프레임 크기에 따라 컨텐츠의 크기를 조정되도록 설정할 수 있다.- 오브젝트를 선택한 상태에서 Shift + A- 프레임을 선택한 상태에서 Auto layout 패널의 추가(+) 아이콘 클릭하기- 프레임이나 오브젝트를 선택한 상태에서 마우스 우클릭 후 Add auto layout 선택 프레임을 선택한 후 우측의 Auto layout 패널이 뜨는 것을 확인할 수 있다.Individual padd.. 2024. 5. 30. [Figma] 피그마로 아이콘 만들기 그리드 저장하는 방법 피그마는 오브젝트를 구분 짓는데 레이어의 이름을 활용한다.특히, 컴포넌트 단위에서 레이어 이름에 /(슬레쉬)를 활용하면 처럼 각 요소를 단계별로 그룹화하여 관리할 수 있다. 선두께 2px 로 변형 outline stroke주로 선으로 그려진 아이콘을 면으로 변경하거나 텍스트의 형태로 오브젝트를 만들 때 사용한다.stroke 정보를 rill(면)으로 전환한다.Coner Radius가 적용된 경우 둥근 정도를 패스와 커브로 변경한다. 나중에 어딘가의 프레임에 올려놨을때 크기에 맞게 자유롭게 움직일 수 있도록 도와줌 ctrl + d 제자리 복제union selection 으로 먼저 합쳐주고 flatten selection 으로 합쳐줘야 진짜로 합쳐짐 Flatten여러개의 레이.. 2024. 5. 29. 이전 1 2 다음
