반응형 [Figma]17 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. Figma Color Styles Figma의 Color Styles를 활용하면, 일관성 있는 디자인 시스템을 유지할 수 있을 뿐 아니라 유지보수가 용이하고 재사용이 편리하여 작업시간을 절약할 수 있다. Selection Colors 버튼을 대강 두개 만들고, 전체를 선택한 뒤에 오른쪽 탭 중 Selection colors 부분을 보면 여기서 쓰인 color 들을 모두 볼 수 있다. Selection colors에서 색상을 바꿔주면 전체 모든 버튼들에 대해서 바뀌는 것을 확인할 수 있다. Color Setting Basic 팔레트 기능을 이용해서 다른 색상을 찾아서 가져오거나, 단축키로는 Control + c 를 통해 이용할 수 있다. 또한 object의 전체 속성을 복사하여 가져올 수도 있다. 이번엔 원을 하나 더 생성했고, Strok.. 2022. 11. 27. 이전 1 2 3 4 5 다음 반응형
