"Figma"의 검색 결과
필터
-
9
사이트 만들기 프로젝트_디자인편
사이트 만들기 프로젝트입니다.
디자인부터 레이아웃까지 이루어지는 강의합니다.
디자인, 레이아웃 파트별로 되어 있습니다. -
![[Rock's Easyweb] figma(피그마)로 디자인과 프로토타이핑을 동시에 하자!](https://i.ytimg.com/vi/_myVwi0vq5s/mqdefault.jpg)
4
[Rock's Easyweb] figma(피그마)로 디자인과 프로토타이핑을 동시에 하자!
Sample Download: https://goo.gl/icduFr
1/4
- 피그마로 디자인하기
- 피그마로 요소들 그리기
- 그리드 사용하기
- 텍스트 사용하기
2/4
- 펜툴 사용하기
- 컴포넌트 사용하기
- 모바일 사이트 디자인하기
- 헤더 완성하기
3/4
- 폰트어썸 아이콘
- 로그인 입력폼, 버튼
- 첫 메인화면 완성하기
- 반응형에 맞춰 유연하게 디자인하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
4/4
- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기
- 수료생 포트폴리오 보기 : http://bitly.kr/yEkoJC
- 후원하기: https://toon.at/donate/ezwebpub
홈페이지 방문하기: http://ezwebpub.com/
#피그마 #웹디자인 #figma #prototyping #프로토타이핑 -
2
피그마 강좌 l 반응형 Card 컴포넌트 제작
Card 컴포넌트 제작 Part 1
00:00 intro
00:24 웹상의 이미지 피그마에 붙여 넣기
00:52 Place Image 로컬 이미지 여러개를 피그마로 가져오는 방법
01:17 이미지 사이즈 조정
01:32 텍스트 입력
01:52 텍스트 복사 & 붙여넣기
02:15 오토 레이아웃 기능으로 텍스트 그룹핑
02:35 피그마의 레이어명 변경하기
02:52 텍스트 복제하기
03:00 객체간의 간격 확인하기
03:06 오토 레이아웃 설정 가이드
03:38 텍스트 스타일 수정하기
03:51 Uppercase 영문 텍스트 모두 대문자로 표기하는 설정
05:03 Auto Layout 단축키 Shift + A
05:49 텍스트를 프레임 기준으로 리사이징하는 방법 1
07:10 오토 레이아웃 프레임에 컬러 지정
07:23 오토 레이아웃 프레임의 여백 지정
07:57 텍스트를 프레임 기준으로 리사이징하는 방법 2
08:50 오토 레이아웃 프레임의 Corner Radius가 적용되지 않는 경우 해결 방법
09:45 이미지를 프레임 기준으로 리사이징하는 방법
10:01 Card 컴포넌트 생성하기
10:37 인스턴스가 아닌 컴포넌트를 수정해야하는 이유
10:50 인스턴스를 수정하는 방법 Override
11:37 다음 영상 예고 -
6
피그마 입문자를 위한 Figma Guide
피그마 설명서 1부, 떠오르는 피그마 | 저의 처음 시작은 당연히 모두가 비슷하듯이 포토샵으로 시작하였습니다. 처음 디자인을 시작할 때 가끔 XD라는 툴이 나온다는 Figma, Sketch라는 툴이 좋다는 이야기만 들었지 왜 좋은지 왜 사용하는지 알지 못했습니다. 차후에 이 UI 디자인 툴을 사용하게 되고 새로운 세계를 접하게 되었습니다. 아직은 많은 디자인 회사에서 포토샵을 사용하고 있습니다.
-
5
Figma Guide
저의 처음 시작은 당연히 모두가 비슷하듯이 포토샵으로 시작하였습니다. 처음 디자인을 시작할때 가끔 XD라는 툴이 나온다는 Figma, Sketch 라는 툴이 좋다는 이야기만 들었지
왜 좋은지 왜 사용하는지 알지 못했습니다. 차후에 이 UI 디자인 툴을 사용하게 되고 새로운 세계를 접하게 되었습니다. -
6
피그마 알아보기
무료 플랜으로 웹사이트에 접속하셨나요? 어플리케이션을 설치할 수도 있어요. 그럼 이제 화면 구성을 살펴보고 이 툴로 무엇을 할 수 있는지 살펴봅니다.…
-
4
Figma 기본코스 총정리
그동안 기획자의 피그마 기본코스를 정주행하셨나요? :)
이번 총정리 편에서는 Figma 의 기본적인 기능으로 디자인 시스템(Design System)을 만들어봅니다.
디자인 경험이 전혀 없더라도 아주 쉽게 이해할 수 있도록 준비했답니다.
걱정마시고 Figma 에 관심있는 모든 분들, 어서 들어오세요~
*** 기획자의 Figma 블로그
https://blog.naver.com/drivenmyself
#피그마 #figma #피그마강의 #figma강의 #Designsystem #디자인시스템 #웹디자인 #앱디자인 #웹기획 #기획실무 #피그마튜토리얼 -
5
Tutorials: Create your design system in Figma
Whether you’re building out a design system for the first time or migrating existing libraries, Figma helps you maintain and scale your design system no matter how fast you grow.
-
7
Figma Auto layout: Learn to create flexible designs and components
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 technologies like flexbox. The tutorials will guide you through the process from a blank canvas to a completed component. Please comment on what you’d like to see us build next!
![[피그마] 대시보드 디자인](https://i.ytimg.com/vi/GfUjePz_qR0/mqdefault.jpg)
