Figma 실습 - 1

기록 ·2024년 1월 8일

피그마

목록 보기
2/5
post-thumbnail
  • 오토레이아웃 남발 금지
    command + delete : 오토레이아웃 지우기

[Property]

컴포넌트 생성시 교체가능한 요소를 만들어 교체

컴포넌트 생성

개체 2개 이상일때 컴포넌트 생성

1. Text

텍스트 작성 후 레이어에서 마름모버튼(Create component property) 선택

텍스트 컴포넌트 생성

텍스트 컴포넌트 적용 확인

우측 패널에서 텍스트 수정 가능

2. Swap

일부 변경 기능
아이콘에 적용


3. Boolean

T-F로 속성 표시 설정

4. Nested

  • 원본 : 마스터 컴포넌트
  • 복사본 : 인스턴스

실습

command + shift + R (우클릭 세번째): 프레임 붙여넣기

프로필 프레임(개별 프로필 +개별프로필 + +) + 텍스트 프레임

가변영역 설정

가변영역에만 fill 적용

Variants

Variants 적용

  1. 컴포넌트 각각 생성후 묶어서 Components> Combine as variants

  2. 객체 생성 후 > 상단바에서 Create component set

Variants 사용

Variants 적용 전

Variants 적용 후, 추가 색상 설정

복사본(인스턴스)에서 색상, 텍스트 변경 가능


[Plugin]

Plugin-iconify

아이콘

Plugin-Unsplash

사진

Plugin-Lorem ipsum

영문 더미

Plugin-한글더미텍스트

한글 더미

Plugin-color pallette

컬러 추천

Plugin-Brandfetch

브랜드 로고, 글씨체, 색상 제공

Plugin-Autoflow

프레임끼리 선연결

Plugin-removeBG

누끼따기

Plugin-html.to.design

이미지-> 피그마파일 변환

Plugin-wireframe Designer

요청시 와이어프레임 생성해줌

Plugin-Morph

gradiant자동 설정

profile
서비스기획

0개의 댓글