반응형 [디자인]/[Figma]18 Figma Component (컴포넌트) 피그마에서 Component는 다음과 같은 의미를 갖는다. Component 반복적으로 사용되는 UI/UX 또는 패턴을 의미한다. 먼저 120 x 48 의 Frame을 하나 만들어준 뒤에 BUTTON 이라는 텍스트를 추가해준다. 그리고 동시에 선택해서 가운데 정렬을 해준다. 그다음에 또 전체 선택해서 Create Component 해준다. 오른쪽 버튼 누르고 Create Component 버튼을 누르던지 아니면 상단에 있는 아래와 같은 아이콘을 눌러주면 된다. 그러면 지금 컴포넌트가 생성되고, 이렇게 생성한 컴포넌트가 마스터 컴포넌트가 된다. 중심부, 즉 본체라는 말이다. 이 마스터 컴포넌트의 이름을 Frame 17에서, TOP_TAB / Active로 변경해줬다. 추후에 쓸 일이 있어서! 그리고 Shi.. 2022. 11. 18. Figma Template https://www.figma.com/community Figma www.figma.com 위 사이트에 접속한다. 'UI Kit'을 검색하면 쓸만한 것들이 나온다. 혹은 그냥 필터를 popular로 해서 찾아봐도 상관없다. https://www.figma.com/community/file/878318142103232907 Instagram UI Kit | Figma Community Figma Community file - Updated UI kit and template of Instagram's stories, posts and post grid! The kit includes: Instagram stories view and widgets: CountdownAsk a questionPollsQui.. 2022. 11. 12. Figma Auto Layout Figma의 파워풀한 핵심기능 중 하나인 Auto Layout 기능 라는 말로는, 처음에는 얼마나 대단하겠어 라는 생각을 했던 기능이다. 근데 공부를 할 수록 이건 피그마에서 진짜 핵심이겠다 라는 생각을 했습니다. 코딩으로 하던 배치를 드래그로 할 수 있는 수준급의 기능이라고 하면 될 것 같습니다. Text를 생성하고, 생성한 텍스트를 클릭한 뒤에 Shift + A => Auto Layout 단축키 그러면 Frame이 하나 생기게 됩니다. 이것이 Auto layout입니다. auto layout 탭에서 좌우 상하 여백 재조정 할 수 있으며, radius는 Frame 탭에서 바꿀 수 있다. Fill탭에서 색도 당연히 바꿀 수 있다. 이 버튼을 세개로 차례로 배치하고자 할 때, 이렇게 한다. 일단 Auto .. 2022. 11. 11. Figma Layout Grid Layout Grid - 반응형 웹을 위한 기능 Layout Grid를 알아야하는 이유 다양한 해상도의 WEB 또는 APP 환경에 대응하여 프로덕트를 제작 시, 전달하려는 정보의 완성도를 유지하기 위해 일관성 있는 Layout Grid 규칙이 필요하기 때문 Layout Grid 구성요소 1. Margin : 콘텐츠 영역 밖의 좌우 여백 2. Column : 해상도 세로 열 3. Gutter : Column과 Column 사이의 여백 실습 Frame을 누르면 오른쪽에 이런 List가 등장한다. 여기서 원하는 것을 클릭하는데, 일단 1440 x 1024인 Desktop을 선택해서 해준다. Layout grid 옆에 + 버튼을 누르고, Grid였던 스피너를 Columns로 바꾼 뒤에 Count와 Margin .. 2022. 11. 11. 이전 1 2 3 4 5 다음 반응형
