피그마 관련 팁, 정보

In these auto layout tutorials, you’ll learn how to create fluid and responsive designs to save time, bring designs closer to your final product and to techn...

피그마 편집의 꽃이라 할 수 있는 오토 레이아웃입니다. 오토 레이아웃은 디자인 요소를 자동으로 배열하고 정렬하는 강력한 기능입니다. 이를 사용하면 웹 페이지, 모바일 앱 및 기타 사용자 인터페이스 디자인을 쉽게 조작하고 관리할 수 있습니다. 오토 레이아웃의 주요 특징은 다음과 같습니다 요소 정렬: 오토 레이아웃을 사용하면 요소를 수평 또는 수직으로 정렬할 수 있습니다. 이렇게 하면 텍스트, 이미지 또는 버튼과 같은 요소들을 쉽게 정렬할 수 있습니다. 크기 조절: 요소의 크기를 자동으로 조절할 수 있습니다. 이로써 다양한 화면 크기 또는 내용에 맞게 요소의 크기를 조정할 수 있습니다. 자동 스크롤: 만약 요소가 공간을 벗어나면 자동으로 스크롤이 생성됩니다. 이로써 긴 목록이나 페이지를 만들 때 효과적으로 ..

안녕하세요! 준유입니다. 저번 피그마 2022업데이트 기능 포스팅이 반응이 좋았는데요! 그 중에서 Hug, Fixed 부분 설명을 해드리려고 합니다! Auto layout 피그마의 꽃이죠. 오토레이아웃에서 가장 중요한 개념인 Hug, Fixed width에 대해 포스팅하도록 하겠습니다! 1. 우선 Frame selection을 통해 프레임과 텍스트를 Frame으로 묶습니다. 1. Frame을 만들고, Text도 만드신다음 2. 둘을 Frame Selection 해서 프레임 안으로 넣어주세요! (그냥 텍스트를 프레임으로 넣으셔도 됩니다!) 2. 오른쪽 창에서 Auto layout 오토 레이아웃을 눌러줍니다! 3. Auto layout을 하면 이런 창이 뜨는데, 잠깐 살펴볼게요! 우측 하단에 파란색으로 표시..

Figma is free to use. Sign up here: https://bit.ly/3msp0OV With component properties, you can define which parts of a component can change. And instead of creating separate variants, you can use component properties to reduce the number of components needed. This takes the guesswork out of designing for anyone using these components and they can quickly make adjustments as Figma keeps component property controls in one place. Play with our component properties community file: https://bit.ly/3llmSKh Learn more about component properties on our Help Center: https://bit.ly/3zSpp7i Learn more about interactive components: https://bit.ly/3mhWRx4 Learn more about variants: https://bit.ly/3Ow9gbT Check out our other component properties video: https://bit.ly/3n6WPaL 00:00 - Introduction 01:20 - Types of properties 01:29 - Overview 01:40 - Previous content 01:46 - Community file 01:51 - Button Component 02:31 - Instance swap property 03:38 - Text property 04:09 - Boolean property 05:24 - Consume component properties 05:53 - Variant property 08:52 - E-commerce store card 09:25 - Add component properties 12:04 - Set up the left icon 13:01 - Set up the right icon 14:18 - Set up the text layer 16:08 - Clean up 17:08 - Using the new button 17:49 - Wrap up ____________________________________________________ Find us on ⬇️ Twitter: https://twitter.com/figmadesign Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma ____________________________________________________ Music credit: Those Days When We Were Happy by Babasmas https://soundcloud.com/babasmasmoosic Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0 Free Download / Stream: https://bit.ly/3Kk5cZB Music promoted by Audio Library https://youtu.be/wFAlz5M32mU #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone

#버튼컴포넌트 #디자인시스템 #피그마기초 피그마 기초 - 컴포넌트의 개념 - https://designer-story.tistory.com/m/18 00:00 intro *컴포넌트 기능 00:58 버튼 컴포넌트 생성하기 01:36 메인 컴포넌트와 인스턴스 구분하는 방법 02:25 인스턴스의 옵션 살펴보기 04:34 인스턴스의 Text Override 기능 06:10 Detach Instance(인스턴스를 메인 컴포넌트와의 연결을 해제하는 방법) 10:54 Create multiple components(여러개의 UI Asset을 한꺼번에 컴포넌트로 변환하는 방법) *컴포넌트 Swap 기능 02:35 아이콘 인스턴스를 Design 패널에 있는 다른 아이콘으로 변경 하는 방법 03:41 아이콘 인스턴스를 Assets 패널에 있는 다른 아이콘으로 변경 하는 방법 * Variants 기능이란? 베리에이션 된 컴포넌트들을 하나의 컴포넌트로 합치는 방법 09:12 Variants 기능 11:09 컴포넌트 합치기(Combine as Variants) 12:04 신규 속성 추가(Add new property) 12:51 버튼에 아이콘이 있을 경우 Variant 값 정의 1(yes, on, true) 13:11 버튼에 아이콘이 없을 경우Variant 값 정의 2(no, off, false) 13:58 버튼의 상태 속성(pressed) 추가하기 16:00 Secondary 버튼 Type 추가하기 17:09 Design 패널에서 버튼 컴포넌트 최종 결과물 확인하기 17:34 Inspect 패널에서 버튼 컴포넌트 최종 결과물 확인하기 17:52 다음편 예고 * 회원 가입 및 figma 데스크톱 앱설치 : https://designer-story.tistory.com/34... * 새파일 생성하는 방법 : https://designer-story.tistory.com/38 * 피그마 시작 가이드 #인터페이스: https://designer-story.tistory.com/40 * Figma 유료 결제 시 유의사항: https://designer-story.tistory.com/35

기획자의 피그마 ::  컴포넌트 베리언트 자세히 알아보기 | Figma 의 이 Variants 기능이 릴리즈 된 것은 불과 얼마 전의 일이랍니다. 그래서 아직 저도 학습 중에 있는 부분이라 완벽하게 마스터했다고... 말씀드리긴 좀 ... ^^;;; 그래도 실무에서 다시 한번 사용을 해보면서 그간 알게된 내용들을 공유드립니다. *** 이번 포스팅도 동영상으로 볼 수 있어요. Variants - Property

마림바 디자인은 Figma 툴을 사용하고, Figma의 팀 라이브러리 기능을 활용하여 디자인 시스템을 관리하고 있다. ​ 작년 10월에 Figma에 variants가 추가되었다. 개발 Handoff가 더 유용한, 좀 더 코드적이고 실제로 관리하기도 편하다고 소개를 봤지만 그때는 오픈하고 정신없을 때라 적용하지 않다가 최근에 디자인 일정에 여유가 생겨서 전체적인 디자인 파일 점검 및 디자인 시스템 유지 보수 하면서 variants를 적용했다. ​ 그 과정에서 알게 된 것을 정리해보았다. ​ ​ 기존 Component 사용 vs. 신규 생성 "테스트는 따로 하고, 실제 적용은 무조건 기존 컴포넌트를 combine 해서 만들자" ​ - 처음에는 베리언트에 대해서 스터디 + 잘못되었을 때 원복 하기 쉽도록 테스..

Buttons - Variants and Components With Boolean, Text and Instance SwapWith Auto layoutComponents and Properties