전체 글38 피그마 이미지 Export 시 폴더 지정하는 방법 #figma 1) 편집 모드1. Asset을 선택 후 좌측 Layers 패널에서 확인2. 해당 에셋 레이어의 네이밍 변경(Command(ctrl) + R) 시, "/"로 구분하여 네이밍 지정3. 우측 Design 패널 > Export : + 버튼으로 파일 포맷 설정(ex. svg)4. Preview 확인 후 Export 버튼 클릭 2) 이미지 Export 결과 지정된 폴더명에 해당 이미지가 Export가 되었습니다. ※ figma 레이어의 이름 지정과 수정은 편집 모드에서만 가능합니다. (View Only 모드에서는 네이밍 변경 불가) 2021. 2. 16. Part 1. Figma 유료 결제 시 유의사항 (Feat. 회원가입 후 기본 설정) [목차] 1. Figma회원가입 후 기본 설정 2. Figma 무료 버전과 유료 버전의 차이점 (Figma 유료 결제 시 유의사항) 3. Figma 프로젝트 실무 예시 1. Figma 회원가입 후 기본 설정 1) 좌측 상단에 이름 영역을 선택하여 내 정보 페이지로 이동 2) 내 정보 페이지 > Settings 이름 변경: Chage name 클릭 팀 이름(연정's figma) > 프로젝트 명(Team project) 프로필 사진 변경: 프로필 영역 클릭 후 사진 업로드 가능 Log out: 로그아웃은 내 정보 페이지에서만 가능합니다. ※ Tip. 사이드 바 > 팀 이름과 프로젝트 명에 대해 마우스 우클릭 시, 설정 가능한 옵션이 보입니다. 3) 피그마 팀 설정 팀 이름 선택 : 팀 이름 선택 후, 팀에 .. 2021. 2. 7. Figma 회원가입 및 Figma 앱 설치 1) 피그마 회원 가입 figma.com에 방문 회원가입이 필요한 경우 header > Sign up 클릭 이미 계정이 있다면 Log in 클릭 후 해당 계정으로 로그인 2) 이메일로 피그마 회원 가입 업무용 계정으로 회원 가입: 동료에게 메일로 초대받은 경우, 초대된 회사 메일 계정으로 회원가입 개인 계정으로 회원 가입: 개인 사용을 위한 접근의 경우, Google 계정으로 회원가입. 저의 경우, 구글 계정으로 회원 가입하였습니다. 3) 직업 선택 1. 직업을 선택 -> 2. 동의 부분 체크 -> 3. Create account 클릭 후 회원가입 ※ 회원 가입을 하시고, 이후 다시 로그인을 하시면 피그마 작업 브라우저로 바로 이동됩니다. PC 전용 Figma App 설치 시 URL ※ 아래 링크에서 앱.. 2021. 2. 7. Figma 2021 튜토리얼, Coming Soon 오랫만이네요. 최근 피그마 튜토리얼 2021 버전으로 새롭게 준비 중입니다. UI/UX 실무 초점을 맞춰 소소하게 다시 시작할 예정입니다. 영상 업데이트가 힘들 땐 블로그에라도 올리도록 할게요. 최근에 회사에서 협업을 위한 Figma가이드를 작성했었는데, 회사 내부 뿐 아니라 저의 유튜브 구독자님들께도 도움이 되겠다 싶어서 그 가이드를 공유해 보고자 합니다. 최근엔 App 디자인보다 Web 디자인 기반 서비스를 제작하고 있습니다. 그래서 반응형 웹 기반으로 제작하는 디자인 시스템을 공부하고 있고, 그 소재로 가이드 영상 또는 블로그 포스팅을 제작하게 될 거 같습니다. 함께 Figma 공부해요~ figma 기본 설정 (feat. Figma 유료 버전 과 무료 버전 차이점) figma 기본 설정 1) 좌측 .. 2021. 2. 7. 곧 다시 시작하는 걸로.. 지난 9월 마지막 업데이트 이후, 컴포넌트 관리 기능과 관련하여 최근 피그마측에서 업데이트가 있었죠. 신규 Figma 기능과 관련하여 지난주 주말 동안.. 영상을 제작하다가 회사 일이 많아 지금은 홀딩 상태입니다. 왜 연차가 늘어도 일이 쉬워지지 않을까요? 왜 Figma라는 좋은 툴을 써도 난 여전히 야근을 하고 있을까요? (Figma를 써서 그나마 밤셈은 면했다고 스스로 위로를..) 기술에 대한 트렌드 변화 속도가 점점 가속화 되다보니, 해를 거듭해도 배울것은 넘쳐납니다. 캐릭터 디자인, 브랜딩 디자인, 반응형 웹 디자인, 스타일 가이드 제작, 프로토타입핑, 화면 기획, QA.. 제 직함의 정식 명칭은 UI/UX 디자이너이지만 현재 속한 팀의 유일한 디자이너이기에 위에 나열된 여러가지 일을 동시에 진행.. 2020. 11. 8. Figma의 Variants (feat. 새로운 컴포넌트 셋팅 방법) 2020년 10월 29일, 피그마 측의 컴포넌트 커스터마이징과 관련한 기능 업데이트가 있었습니다. 이 부분에 대해 이해를 하려면, 약간의 개발 상식을 필요로 하여 어렵게 느껴질 수 있어서 기능에 대한 개념 설명을 간단히 알려드리고 본격적으로 시작해 보겠습니다. 컴포넌트의 개념에 관한 설명은 이전 포스팅을 참고해주세요. 1) Variants [베어리언츠] 기능 정의 Variants 기능 : Figma에서 생성한 컴포넌트(Component)를 개발 친화적인 방식으로 세팅하고 관리할 수 있는 컴포넌트의 확장 기능입니다. 컴포넌트 기능 00:58 버튼 컴포넌트 생성하기 01:36 메인 컴포넌트와 인스턴스 구분하는 방법 02:25 인스턴스의 옵션 살펴보기 04:34 인스턴스의 Text Override 기능 06:.. 2020. 11. 1. 9월 figma Releases - Figma 컴포넌트 기능 관련 업데이트 2020/9/17일 오후, 갑자기 인스턴스(Instance) 기능의 업데이트가 있었습니다. 1) Instance에 대한 "Go to Main Component" Go to Main Component에 대한 텍스트 링크 대신, 아이콘으로 대체되었습니다. 여기서 Instance(인스턴스)란 Component(컴포넌트)를 복제한 에셋(Asset)을 의미합니다. figma의 컴포넌트 기능을 활용하면, 불필요한 반복 작업을 줄이고, 수정 작업을 최소화할 수 있습니다. Go to Main Component 기능을 통해 Instance의 원본 컴포넌트(Main Component)를 찾아 Asset을 수정할 수 있습니다. Main Component를 수정하면, 이 컴포넌트를 복제한 Instance들의 일부 속성이 일괄.. 2020. 9. 17. 삭제한 피그마 파일 복구하는 방법 #figma 아래 링크 참고 Restore a deleted file Before you Start Who can use this feature Users on Starter, Education, Professional or Figma Organization Figma plan Only people with Edit access to the file can restore it. When you de... help.figma.com Drafts > Deleted에서 최근 삭제한 파일 복구 가능 만약, 실수로 피그마 팀을 삭제했다면 이메일을 확인해주세요. "검색어 : restore your team here." restore your team here를 클릭하셔서 복구하실 수 있습니다. 2020. 9. 12. 피그마 플러그인 설치 방법 (feat. Unsplash) #Unsplash - 고해상도 이미지 Import 플러그인 Figma에서 강좌를 만들 때 가장 많이 사용하는 Plugin은 Unsplash입니다. 더미 이미지로 사용하기에 괜찮기 때문인데요. 우선 피그마 플러그인 설치 방법을 알려드릴게요. 영상의 플레이 버튼을 클릭하시면 영상으로 알려드립니다. Unsplash 플러그인 빠른 설치 Tip 빠른 설치 Tip 이 링크로 접속하여 우측 상단의 Install 버튼 클릭 (위 화면 참고) 플러그인을 검색하여 설치하는 방법 피그마에 로그인 후 왼측 사이드 메뉴 중 Plugins(또는 Community) 클릭 페이지의 하단에 있는 Browse Plugins 선택 목록에서 바로 설치하거나 검색으로 찾아서 설치 * 주의 : Unsplash를 상업적으로 이용 시 저작권 확인.. 2020. 8. 28. 8월 figma Releases 월 단위로 추가 사항 아래에 순차적으로 업데이트 합니다. 1) 컴포넌트 명칭 변화 Master Component -> Main Component 2) 8/7 프로토타입핑 관련하여 몇 가지 기능 추가 Prototype 패널 : 트렌지션과 관련된 셋팅이 좀더 디테일하게 수정 할 수 있게 변하였고, 관련 옵션들이 추가 되었습니다. {참고 링크} Frame과 Frame간의 하나 이상의 Interaction이 가능 (ex 클릭 시 페이지 이동, 드래그 시 다른 페이지로 이동) Animation 옵션 > Ease in Curve 커스텀 가능 3) Figma Design 패널 > Effect > Drop Shadow에 Spread 옵션 추가 {자세히} 4) Figma Admin 업데이트 출처: https://yout.. 2020. 8. 26. #프로토타입핑 #프레젠테이션 #피그마 기초 figma 프로토타입핑 어디까지 될까 https://youtu.be/oY4EoQCOzeo 1. 프레젠테이션 제작 #기초 저는 UX 프로토타입핑 뿐만 아니라 발표 리소스 자료 준비 및 PT 시 Figma로 프레젠테이션을 합니다. Youtube 모바일 App을 기준으로 UX/UI Case Study #피그마기초 #프로토타입핑 [Part 1 강좌 요약] 0:00 - Intro 0:25 - 1/6 프레젠테이션 모드 설정방법 {오타 정정: 프리젠테이션 -> 프레젠테이션} 1:44 - 2/6 Interaction & Animation 옵션 설정 2:05 - 3/6 실전 연습 1 - Page Transition 효과 6:17 - 4/6 실전 연습 2 - 뒤로가기 버튼 설정 7:32 - 5/6 Figma 프레젠테이션 .. 2020. 8. 26. #3 디자인 시스템 구축을 위한 피그마 기능 (feat. Create Style, 버전 관리) Figma를 효율적으로 사용하기 위한 관문이 되는 영상 Figma에 의한 디자인 시스템을 구축하는데 기초가 되는 피그마 기초 강좌 영상입니다. 협업을 하는데 중요한 기능 Version History, 효율적인 컬러 시스템 구축 방법, 그 외 figma로 할 수 있는 스타일링에 대한 가이드 영상입니다. Figma는 전문가에 최적화된 도구인 만큼, 비 디자인 직군에게도 유용한 편집 도구입니다. 다소 전문적 용어가 남발 되어도 끝까지 시청 부탁드려요. 디자인 시스템이라는 거창한 단어보다 좀더 쉬운 용어가 있다면 좋겠지만 없더군요. 하지만 이번 영상을 이해하시면, figma에 진정으로 입문하게 되시는 터닝 포인트가 될거라고 자신합니다. 여러분의 수정 시간을 절약하는 Tip이 되는 영상입니다. 자, 시작해 볼까요.. 2020. 8. 26. 이전 1 2 3 4 다음
