반응형 [디자인]/[Figma]18 Figma Text Style - 3 Text Style의 마지막. Text Scale에 대해 다룬다. 텍스트 두 개를 준비했다. 그 중 위에있는 텍스트에 대해 마우스 오른쪽 버튼을 클릭한 뒤에, Outline Stroke를 클릭해준다. 그럼 이건 더 이상 텍스트가 아니다. 이젠 Shape가 되었기에, 드래그를 통해 찌그러지기도 한다. 하지만 텍스트는, 늘리고 당겨봤자 텍스트 프레임 영역만 변경될 뿐 텍스트 크기는 늘어나지 않는다. 텍스트 스케일링 방법은 크게 두가지가 있다. 1. 텍스트 영역을 클릭한 뒤에, 디자인 패널에서 폰트 사이즈 영역을 클릭한 뒤 opt + 마우스 좌우 드래그 하면 폰트 사이즈 변경이 가능하다. 2. 메뉴 중에 Move 대신 Scale로 선택한 뒤에, 텍스트를 늘리고 당기면 된다. + 텍스트 영역 안에서, 개별 텍스.. 2023. 1. 2. Figma Text Style -2 이전 글에 이어서, 텍스트 스타일에 대해 조금 더 다룬다. 간단한 리스트뷰 예제를 만들면서 테스트 할 것이다. 이렇게 점 아이콘과 텍스트를 준비했다. 둘을 드래그 한 뒤에 Shift + A 를 통해 Auto Layout을 생성해준다. Auto layout의 이름은 list로 둔다. 그리고 한번 더 Shift + A 를 통해 Auto layout을 하나 더 만들고, 이름은 lists로 둔다. 이제 list를 클릭한 뒤에 cmd + d를 해주면, 리스트가 아래로 복사되어 나열된 것을 확인할 수 있다. 만약에 가로로 배치된다면, 우측 Auto layout 탭에서, 배치를 세로로 바꿔준다. 그리고, Auto layout 탭에서 여백을 조금 더 조정해서 예쁘게 만들어보자. 이제 조금 보기 편해졌다. 이제 이 글자.. 2023. 1. 2. Figma Text Style - 1 저번 글에는, Color Style 정의에 대해서 다뤘는데 이번 글에서는 텍스트 스타일링에 대해서 정리할 것이다. 협업을 위해 꼭 필요한 내용 중 하나이다. 헤드라인 텍스트를 클릭한 뒤에 Design 탭의 Text -> 점 네개 -> + 하여 텍스트 스타일을 정의해준다. H1은 헤드라인1의 의미이고, 56은 폰트크기를 의미하도록 H1 - 56 으로 이름을 정해주었다. 아래쪽 헤드라인인, H2에 대해서도 정의해준다. 마찬가지로 텍스트를 클릭한 뒤에 Text style을 정의하여 추가해준다. Local Style에 등록된 상태를 볼 수 있따. 아래쪽 헤드라인은, Text Style을 새로 추가하지 않고 우리가 방금 정의한 H2 style을 가져와서 적용해 줄 것이다. 그러고 나면, 우리가 Local Styl.. 2023. 1. 2. 행동에 옮기려고 쓰는 글 Pic-diary 앱 디자인부터 하고, Flutter로 AOS / iOS / Mac / Window 만들 것이다. 2022. 12. 16. 이전 1 2 3 4 5 다음 반응형
