본문 바로가기

전체 글38

피그마의 팀 라이브러리 기능 Figma의 팀 라이브러리 기능 디자인 시스템을 구축하기 위한 컴포넌트 에셋들을 하나 이상의 파일에서 재사용하기 위해 필요한 기능입니다. Local 컴포넌트들을 Global 스타일로 만들기 위해 필요한 기능입니다. 팀 라이브러리는 꼭 디자이너가 여러 명이어야 사용하는 기능은 아닙니다. 물론 디자이너가 많을수록 그 효율은 증대합니다. 실무를 진행하다 보면 파일 하나로 운영이 불가한 시점이 생깁니다. 그때 Professional 플랜을 고려하셔도 늦지 않습니다. [🔗참고 영상] 피그마 기초 - 컴포넌트의 개념 9월 업데이트 - Figma 컴포넌트 관련 업데이트 2020/9/17일 오후, 갑자기 인스턴스(Instance) 기능의 업데이트가 있었습니다. 1) Instance에 대한 "Go to Main Com.. 2022. 3. 18.
figma에서 Font Awesome Icon 사용하기 언제부턴가 아이콘을 매번 그리기보단 기본 아이콘들은 폰트 어썸을 사용하고 있는데요, 피그마에서 폰트 어썸 아이콘을 사용하는 방법에 대해 포스팅하였습니다. 최근 팀 내부에서 사용하려고 제작한 가이드 문서인데 피그마를 사용하는 다른 분들께도 공유하고 싶어서 블로그에 담아보았습니다. 폰트 어썸(Font Awesome Icon)이란? 폰트 형태로 아이콘을 제공하는 서비스입니다. 폰트처럼 사이즈를 조절하고 색상을 수정할 수 있습니다. 무료 또는 유료 버전으로 사용 가능하며, 웹 퍼블리싱 시에 간단하게 아이콘을 등록할 수 있습니다. WEB 디자인 및 개발 시 작업시간을 절약해줍니다. 실무에서 Web Design & 개발 시 사용하는 서비스 중 하나입니다. 폰트 어썸 다운로드 및 설치 Font Awesome The .. 2021. 10. 30.
피그마 유료 플랜 구매 시 참고 사항 #professional플랜 참고 사례 * 비슷한 사례 예시 : Link [질문] 회사 프로젝트 때문에 주요 편집자 디자이너 5명이서 피그마를 써야 할 것 같은데 각각 프로페셔널 버전으로 구매하면 5명이서 한 시안을 동시 편집 가능할까요? [답변] 5명의 디자이너가 각각 프로페셔널 버전으로 구매 시 팀이 5개가 생성됩니다.(😅😅😅) → 팀별로 편집자당 추가 Seat를 구매해야 하기 때문에 자칫 돈낭비로 이어질 수 있습니다. [추천 방법] 협업할 멤버를 초대할 한 개의 팀을 생성 → 관리자 계정에 대해서만 먼저 프로페셔널 유료 플랜 구매 → 이때 팀에 추가 멤버를 초대합니다. 함께 협업할 인원에 대해 "Design 파일"에 대한 편집 권한을 부여한 후, 추가로 유료 플랜을 결제하는 방식을 추천드립니다. 팀을 생성하는 방법과 유의사항은.. 2021. 6. 5.
피그마로 개발자와 협업하기 #inspect패널 #codeView 우선 figma에서 Zeplin과 같은 hand off 기능을 사용하려면, 우측 inspect 패널을 활성화해야 합니다. 1. 디자이너 또는 피그마 편집자가 보는 편집 화면의 경우, Design 패널 우측 끝에 위치한 패널입니다. 2. 이때, Code 영역에서 개발 플랫폼 옵션을 선택합니다. (위 그림 중 ②번 영역) 옵션 1. CSS: Default 옵션은 웹입니다. 옵션 2. ios 옵션 3. Android: DP 확인용 3. 그리고 Code 대신 그 우측의 Table 버튼을 선택합니다. (위 그림 중 ③번 영역 참고) 일반적으로 개발자가 보게 될 View Only 모드에서도 inspect 패널에서 위와 같이 설정하고, 선택한 플랫폼에 최적화된 Style Code를 확인 할 수 있습니다. 연관 단축키.. 2021. 6. 4.
피그마 기초 part 2 - Auto Layout 기능 #버튼 Auto Layout 버튼 만들기 2021/04/24에 업데이트된 figma 강좌 영상입니다. 목차00:00 Intro00:48 피그마에서 Page 단위로 에셋 관리하는 사례01:44 피그마 파일에 Page 추가하고 순서 변경하기02:39 Auto Layout 단축키: Shift + A02:50 단축키 option(alt)를 활용하여 객체간의 여백 사이즈 확인하기03:03 Auto Layout기능 > 버튼 여백 조정하는 방법04:10 Layer 패널 > Layer의 이름 변경하는 단축키 : command(ctrl) + R04:19 Auto Layout기능 > 텍스트를 오른쪽 방향으로 복제하는 방법05:04 Auto Layout 기능 > 정렬을 수평 방향에서 수직으로 변경하는 방법05:33 Auto Lay.. 2021. 4. 24.
figma 프로젝트 관리 및 파일 공유 2021년 새로운 버전의 피그마 기초 가이드 , 첫 번째 영상입니다. [목차] 00:00​ Intro 00:19​ figma 샘플파일 내문서(Drafts)로 복제하기 (figma Community) 00:56​ figma 파일 이동시키기 (Drafts에서 프로젝트 폴더로 이동) 01:09​ figma Desktop App을 설치해야하는 이유 02:36​ 즐겨찾는 Project 사이드 메뉴에 추가하기 03:07​ figma 팀 셋팅, 주요 멤버에게 Project 공유하기 03:45​ 멤버 권한 설정 04:41​ figma 파일 공유 05:32​ figma 파일 권한 설정 06:21​ figma 파일의 특정 Frame 공유하기 07:04​ 노션(Notion)에 figma 파일 공유하기 (figma embed.. 2021. 3. 15.
Figma 환불 및 유료 플랜 취소 정책 아래 Figma 공식 환불 정책을 참고해주세요. Frequently Asked Questions on Pricing A Better Way to Design. Design, prototype, and gather feedback all in one place with Figma. www.figma.com 2021/02/25 기준 figma 유료 플랜 취소 정책 요약 Q. 유료 플랜을 취소하려면 어떻게합니까? 연간 및 월간 요금제는 취소 할 때까지 자동으로 갱신됩니다. 관리 대시 보드에서 '스타터 팀으로 다운 그레이드'를 클릭하여 언제든지 취소 할 수 있습니다. 이렇게하면 팀이 편집자 2 명과 프로젝트 3 개로 즉시 제한되며 팀 구성 요소 라이브러리 및 무제한 버전 기록과 같은 유료 기능에 액세스 할 수 .. 2021. 2. 25.
디자인 시스템 관련 레퍼런스 #디자인시스템 #해외사례 Design Systems Repo An organized and frequently updated collection of Design System examples, resources, tools, articles and videos. designsystemsrepo.com .pulse Helping us build great products for our customers pulse.heartbeat.ua Finastra Design System Build the future of finance. From prototype to product, create ready to use financial applications faster and better with our comp.. 2021. 2. 22.
Part 3. 피그마 시작 가이드 #인터페이스 피그마 파일을 막상 열고나니, 무엇부터 해야 할지 망설여지셨나요? 피그마 에디터는 파일에 대한 접근 권한이 "편집자"이냐 "뷰어"이냐에 따라 인터페이스 구성에 차이가 있습니다. [공유 목적] 피그마를 처음 사용하는 사용자를 위한 기본 가이드 공유. [공유 대상] - 피그마를 처음 접한 사용자 - 피그마를 사용하고 싶거나 관심 있는 UI/UX 디자이너, 개발자, 기획자, 마케터, 클라이언트, CEO, 학생 - 피그마로 제작된 산출물을 공유 받는 디자이너, 개발자, 기획자, 마케터, 클라이언트, CEO, PM, PO [목차] 1) figma 편집 모드 살펴보기(Can Edit) 2) figma 뷰어 모드 살펴보기(Can View) 3) figma 에디터 툴바 기능 소개 편집 모드와 뷰어 모드 비교 1) fi.. 2021. 2. 21.
figma에서 8의 배수로 간격 조정하는 기능 ※ 동영상으로 보시려면 아래 영상을 참고해주세요. ※ 8 pixel 그리드 기준 작업 시 유용한 팁 - Nudge amount 기능을 소개합니다. Default 값으로 설정되어 있는 10을 8로 변경합니다. 일반적으로 shift 키를 누른 채 키보드 방향키를 클릭하면 10 pixel 간격으로 이동이 되는데 이 설정으로 8 pixel 간격으로 객체를 이동시킬 수 있습니다. * 피그마에서 객체 간격 이동 단축키 : Shift + 방향 키 여러분의 작업 시간을 줄여주는 유용한 실무 팁입니다. 다음에 또 만나요. ※ 8배수 Grid가 왜 중요한지 궁금 하신 분은 아래 링크를 참고해 주세요. Material Design Build beautiful, usable products faster. Material De.. 2021. 2. 21.
Part 2. 피그마 시작 가이드 #파일생성하기 #figma기초 figma.com에 접속하여 로그인 합니다. 참고로 무료 계정으로 로그인 하였고, 설명을 위해 새롭게 figma 계정을 생성하였습니다. Part 1. Figma 유료 결제 시 유의사항 및 기본 설정 figma 기본 설정 1) 좌측 상단에 이름 영역을 선택하여 내 정보 페이지로 이동 2) 내 정보 페이지 > Settings 1. 이름 변경: Chage name 클릭 2. 프로필 사진 변경: 프로필 영역 클릭 후 사진 업로드 3. 팀 세 designer-story.tistory.com 이 포스팅에서 개인 파일 생성 / 프로젝트 단위의 팀 파일 생성 / 파일삭제 / 파일 복구 등에 대한 사용 팁을 배울 수 있습니다. [목차] 1) Community - 각종 Figma 샘플 미리보기 2) Drafts - 개인 .. 2021. 2. 20.
피그마 컴포넌트의 인스턴스 속성을 Reset 하는 방법 Q. 인스턴스의 네이밍을 기존 Main Componet와 동일하게 변경하고 싶습니다. [가정]컴포넌트를 생성 후에 그 Main Component(btn-primary)를 복제한 Instance를 이름과 색상을 변경하였다고 가정해봅니다.해당 instance를 선택하고 오른쪽 Design 패널에서 instance 네임 우측에 있는 더보기 아이콘을 클릭했습니다. (위 그림 참고) [인스턴스의 옵션]Detach instance : instance와 원본 객체인 Main Component와의 연결을 끊을 수 있습니다. 즉 Main Component를 수정해도 Detach 한 객체는 더 이상 영향을 받지 않습니다. Reset all overrides: 수정된 속성을 모두 원본과 동일하게 되돌리고자 할 때 이를 클릭.. 2021. 2. 19.

티스토리툴바