[Figma] 피그마 기초 - 이것만 알면 기초적인 화면 단 구성이 가능하다!

figma 기초

• 웹사이트, 모바일 앱, 데스크톱 애플리케이션 등의 사용자 인터페이스(UI) 및 사용자 경험(UX)을 디자인하는 데 주로 사용
• 정적인 디자인을 인터랙티브한 프로토타입으로 변환할 수 있는 기능을 제공하기 때문에, 사용자가 실제 경험하게 될 흐름을 시뮬레이션 할 수 있음.

왜 figma를 쓰면 좋을까?

• 첫째, 사용하기 매우 직관적이며, 디자인 경험이 없더라도 쉽게 배울 수 있음.
• 둘째, 실시간 협업이 가능함. 피드백도 남길 수 있음.
• 셋째, 버전관리도 됨.
• 넷째, 디자인에서 개발로의 전환을 쉽게 만들어 줌.
  • 개발자는 Figma 파일에서 필요한 코드를 바로 추출할 수 있으며, 이는 CSS(웹 애플리케이션의 UI), iOS, Android 등의 플랫폼별로 최적화된 코드로 제공되기 때문에, 개발자들은 디자인 요소를 보다 쉽게 구현할 수 있음.
• 다섯째, 웹 기반이라 Windows, macOS, Linux에서도 동작

figma 시작하기

• www.figma.com
  을 접속하여 구글로그인
• 새로운 것을 만들어보고 싶을 때 우측의 Create new 누른 후 Design file 누르기

기본 와이어프레임 제작방법

• 기본 화면 프레임 만들어보고 싶다. : 십자가 모양 클릭

 

다양한 화면으로 만들 수 있음.

• 도형/글씨 넣어보고 싶다.

• 아이콘이 넣어보고 싶다. : Material Design Icons 설치

• 위 세가지만으로, 간단하게 내가 보여주고 싶은 화면이 뭔지 플로우를 보여줄 수 있음

Dev Mode - 플러터 코드로 빼기

모든 디자인 요소를 완벽하게 코드로 변환하지는 않고, 복잡한 애니메이션, 사용자 정의 컴포넌트, 또는 특정한 플랫폼 고유의 기능들은 Dev Mode에서 자동으로 코드화되기는 어렵지만, 그럼에도 개발 공수를 덜어주는 유용한 기능

• Figma to Code 플러그인 설치

• 플러그인 실행 후 Flutter 클릭 시 Flutter 코드로 뽑기 가능