전체 글38 피그마 기초 - 컴포넌트의 개념 9월 업데이트 - Figma 컴포넌트 관련 업데이트2020/9/17일 오후, 갑자기 인스턴스(Instance) 기능의 업데이트가 있었습니다. 1) Instance에 대한 "Go to Main Component " Go to Main Component에 대한 텍스트 링크 대신, 아이콘으로 대체되었습니다. 여기서 I..designer-story.tistory.com피그마 기초 3 - 컴포넌트 & Variant 기능 #버튼컴포넌트 https://youtu.be/lMOJ1ijO9hs 아래 내용은 업데이트 예정인 피그마 기초 강좌 Part 4 - 디자인 시스템 구축을 위한 컴포넌트의 이해를 돕기 위한 글입니다. {연정's Figma YouTube 채널}1) 플랫폼에서의 컴포넌트 {Components}컴포넌트 - .. 2020. 8. 25. figma, 스케치 파일을 내 문서로 import 하는 방법 - #피그마 기초 figma 파일 또는 스케치 파일을 문서 목록이 있는 페이지로 드래그하여 import 할 수 있습니다. 2020. 8. 24. 공유된 피그마 파일을 복제하는 방법 * 제 강좌에서 공유된 figma 파일(URL)을 자신의 계정으로 복제하는 방법은 아래 이미지를 참고해주세요. https://www.figma.com/file/sEzcbf6sRjWZT6HmA5ENRI/Text-Styling_Before?node-id=0%3A1 여기를 클릭하신후 파일을 복제하시면 됩니다. (화면 중앙 타이틀 영역 클릭 > Duplicate 클릭) 관련 figma 강좌 영상 2020. 8. 24. figma community 특정 파일을 내 계정의 문서로 복제하는 방법 figma 공식 커뮤니티에서 공유된 특정 파일을 벤치 마킹 또는 테스트를 위해 내 계정의 문서로 복제하는 방법을 소개합니다. 1) 아래의 링크에 접속후 카테고리 중 Design System을 클릭해봅니다. https://www.figma.com/community/ Figma Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers and developers. www.figma.com 2) 카테고리 > Design System에서 파일 하나를 클릭합니다. 3) 카테고리 > Design System > 상세페이지에서 Duplicate 버튼을 클릭하여 파일을 내 계정으로 .. 2020. 8. 24. figma에 의한 디자인 시스템 구축 사례 및 개념 정의 YouTube 연정's figma에 연재 중인 Figma 강좌의 다음 주제가 디자인 시스템 구축을 위한 스타일링과 컴포넌트 구축이기 때문에 figma에 의한 디자인 시스템 구축 사례와 디자인 시스템과 관련된 개념을 정리해 보았습니다. 디자인 시스템이라는 단어 정의가 어디서부터 누구로부터 시작되었는지는 모르나, 스마트폰이 세상 밖으로 나온 뒤의 구글(Google) 머터리얼 디자인 가이드가 디자인 시스템의 첫 인상이었고, 그 머터리얼 가이드는 2019년부터 저에겐 Web, Mobile에 대한 UI/UX 표준 가이드가 되었습니다. figma에 의한 디자인 시스템 구축 사례 1) Design Systems for Figma 피그마로 제작된 디자인 시스템을 모아놓은 웹 서비스 44개 이상의 디자인 시스템이 등록됨.. 2020. 8. 23. #2 피그마로 아이콘 제작 Tip (feat. Shape Booleans 기능) figma를 처음 접하는 분들을 위한 기초 강좌 영상입니다. Shape 툴과 Pen 툴을 사용하여 머터리얼 아이콘을 제작해봅니다. [피그마 기초 Part2 - 영상 목차] 00:00 Intro 00:09 1/6 Material Design - System Icon 개요 01:16 2/6 Layout Grid & Keyline 제작 [🔗연관 figma file] 06:18 3/6 도형 툴 {Shapes, Booleans} 08:54 4/6 아이콘 Export & Import {SVG} 10:33 5/6 펜 툴 {Pen, Outline Stroke} 12:14 6/6 기타 유용한 사용 Tip {좌우 상하 반전} 아이콘 제작 시 유의사항 1 - Constraints frame 안쪽 객체의 "Constraint.. 2020. 8. 23. #1 피그마 기초 강좌 {연정's Figma} #UI 무료 편집 도구 #초보자용 figma를 처음 접하는 분들을 위한 기초 강좌 영상입니다. #이미지 import export #컬러 #텍스트 #그림자 효과 Sketch에서 Figma로 전환하게 된 계기 Figma Figma는 클라우드 기반 UI 편집 도구이자 협업 도구입니다. 디자이너뿐만 아니라 비 디자이너 직군에서도 협업 도구로서 다양한 용도로 사용 가능합니다. Figma의 용도 UI/UX 디자인 Wireframe, 화�� designer-story.tistory.com Figma 툴에 대해 궁금하시면 위 링크 또는 Figma 빠르게 훑어보기 유튜브 영상을 통해 좀 더 자세히 아실 수 있습니다. Figma는 IT 직종 전문가들에게 최적화된 UI 편집 도구이며 협업 도구입니다. 그뿐 아니라 비 디자인 직군에서도 과제를 한다거나 아래의.. 2020. 8. 23. Color Palettes Generator 사이트 모음 Color Tool - #MaterialDesign 머터리얼 디자인의 Primary와 Secondary Color Generator Tool입니다. Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io - Material design palette https://www.materialpalette.com/ #Coolors The super fast color schemes generator! Coolors - The super fast color schemes generator! Generate or bro.. 2020. 8. 21. 피그마 강좌 추천 사이트 #figma 제가 사용했던 사이트 대표 채널 두 곳을 소개합니다. 유튜브 채널도 별도로 운영하고 있으니 참고해주세요~ 1) Design+Code (영어) https://designcode.io/courses Design+Code Courses Complete courses about the best tools and design systems. Prototype and build apps with React and Swift. designcode.io 코드에 관심 있는 디자이너라면 이 사이트를 주목할 필요가 있습니다. 최신 트렌드의 툴들을 빠르게 배울 수 있는 사이트입니다. 저의 경우, 스케치, Figma, ScreeFlow, Protopie, Framer를 모두 이곳에서 배웠습니다. 특히 Figma 강좌 추천드립니.. 2020. 8. 21. SVG 아이콘 리소스 (출처- 지금 써보러 갑니다. ) 제가 즐겨 찾는 사이트 "지금 써보러 갑니다." 최신 트렌드의 툴들과 정보를 알 수 있는 곳 [주의 사항] 아래 리소스들 사용 시, 약관을 꼼꼼히 읽어보고 사용하세요. 부분적 무료일 수 있습니다. Fluent 스타일 Fluent Style Icons — Icons8 Sprinkle some magic to your website, app, or presentation with these Microsoft style icons. Created with love by Icons8 ❤️. Add some colourful icons to your project. Available in PNG and SVG. Free for a link icons8.com [자료 출처] 지금 써보러 갑니다 페이스북 Free i.. 2020. 8. 21. [참고 자료] Shopify Design System + Icons Shopify Polaris Our style guide helps us collaborate across disciplines to build a great experience for all of Shopify’s merchants. It promotes consistency, but it’s not a blueprint. Be creative, explore, and evolve the system. polaris.shopify.com [Tip] 스케치 파일을 다운 받은다음, Figma로 Import {바로가기 링크} 연정's Figma YouTube 채널 링크 연정's Figma 웹페이지 또는 앱 UI를 개발할때, "협업"에 대한것에 초점을 맞춰 영상을 제작 및 공유할 예정입니다. * figma 무.. 2020. 8. 21. 아이콘 무료 Kits 머터리얼 아이콘 다운로드 [다운로드 방법]Material IconsGet Material Iconsmaterial.io Evericons for FigmaEvericons for FigmaEvericons is a big pack of over 460 free icons.www.figma.com Social IconsFree social Icons for Figma - Figma Freebies[et_pb_section bb_built=”1″ _builder_version=”3.0.105″ custom_padding=”0px||0px|” background_color=”#111111″ global_module=”499″][et_pb_row global_parent=”499″ custom_width_px=.. 2020. 8. 21. 이전 1 2 3 4 다음
