coalacoding.com
coalacoding.com
기능심화

기능심화

유형
실습문서
주제

기초기능학습

순번
4
태그
설명

1. 카드UI 만들기

  1. 프레임을 두개 그린다 하단 프레임은 알트+드래그드랍을 복제후 크기를 줄인다
    2. image
  2. 두개의 프레임을 한번더 프레임 그룹으로 묶는다
    3. image
  3. 프레임의 이름을 그림처럼 변경한다
    4. image
  4. 표시된 순서대로 체크하여 모서리를 둥글게 만든다
    5. image

1-1 프레임VS그룹

  1. 같은 작업을 그룹으로 해본다
    1. 사각형을 그려서 그룹을 만든다
      2. image
  • 프레임: 개별적인 컨테이너로 사용되며, 단일 아이템 또는 여러 개의 아이템을 포함할 수 있습니다.
  • 그룹: 하나 이상의 객체를 묶어서 관리하며, 특정 기능을 수행합니다. 그룹을 구성하는 모든 객체는 그룹의 위치와 크기를 기반으로 이동 및 조작됩니다.

1-2 이펙트 적용

  1. 카드 프레임선택
  2. 이펙트 추가
    3. image
  3. 필속성 변경
image
  1. 텍스트 추가
    2. image
  2. 여백조정하기

    3. 알트키를 누른상태에서 호버하여 텍스트 상자의 좌우 여백을 확인한다

    image
  3. 그후 속성패널을 이용하여 여백균형을 맞춘다
    4. image
  4. 카드를 세개정도 만든다
    5. image

1-3 프레임 속성 다루기

  1. 휴대폰 크기의 프레임을 생성한다
  2. 만든 카드UI 중 두개를 생성한 프레임에 추가한다
    3. image
  3. 카드 UI 의 수평간격은 표시된 세가지 방법을 사용하여 조절할수 있다
    4. image
    image

3. cilp content 옵션을 사용해보자

image
  1. 우측 잘린 프레임의 불투명도를 낮추자
    2. image

텍스트와 프레임을 추가하여 예제와 같이 완성해보세요

image

2. 텍스트다루기

2-1 탑메뉴 만들기

  1. 아이폰8 사이즈 프레임 생성
    2. image
  2. 탑메뉴를 그려준다 프레임를 그린후 배경색을 넣는다 텍스트와 프레임간의 수평 수직 중앙정렬을 맞춘다
    3. image
    image
  3. 정사각형을 그린후 45도 회전 면색은 없애고 선색만 넣는다 선택도구로 더블클릭하여 도형에 빗금이 생길때까지 선택한다 표시된 점을 클릭후 delete 키를 눌러 삭제한다
    4. image
  4. 그후 프레임안에서 위치를 조정하여 아이콘을 완성한다 프레임의 배경색은 빼준다
    5. image
    image

2-2 이미지 박스 만들기

  1. 100% 프레임을 만든 후 속성에서 너비를 -32px 준다
    2. image
    image
  2. 그후 가운데 정렬
    3. image
  3. 이미지 삽입
  4. 듀오톤으로 넣어보자
  5. 이미지를 선택후 추가한다
    6. image
  6. fill 속성을 추가하는데 그라디언트를 선택한다 그라디언트의 색상을 선택후 블랜드 모드를 적절히 수정한다
    7. image
    image

2-3 텍스트 박스 만들기

  1. 레이어 누적순서와 이름을 정리한다
    2. image
  2. 그후 기존의 텍스트를 복사하여 붙여 넣으면 텍스트 뿐 아니라 여백까지 붙여넣기 되는것을 알수있다
    3. image
  3. 긴문장 편집하기
    1. 긴 문장은 예제에 첨부된 텍스트 파일을 활용한다
    2. 먼저 텍스트도구를 사용하여 영역을 드래그한다
    3. 그후 파일을 열고 복붙한다
    4. 그후 레이어를 선택후 속성을 설정한다
      5. image
      image
    5. 리사이징을 번호순으로 눌러본다
      6. 1. 공간맞춤 2. 자동높이 3. 자동너비
      1. 공간맞춤 2. 자동높이 3. 자동너비

      자동너비를 설정하면 텍스트 기준으로 폭이 변경되기 때문에 문단의 정렬을 고정하기 어렵다 장문을 편집할때는 1이나 2를 사용하는것이 편리하다

  4. 다시 레이어를 삭제한다
  5. 텍스트 도구를 선택후 영역을 드래그 한다
  6. 텍스트를 복사하여 붙여넣은후 폰트 속성을 수정한다
    7. image
  7. 프레임의 높이를 늘이고 autoHeight 를 사용해보자
  8. 프레임의 높이를 줄이고 말줄임 표시를 해보자
  9. 특정 텍스트에 링크를 만들어보자
    10. image
  10. 링크된 텍스트의 fill 속성을 수정해보자
    11. image
  11. 링크된 텍스트의 밑줄속성없애기 밑 문단의 정렬을 여러가지로 수정해보자
    12. image

2-4 스크롤 만들기

  1. 중첩 레이어는 컨트를+클릭을 하면 쉽게 선택할수 있다. 장문의 텍스트 레이어를 선택후 리사이징 옵션을 autoHeight 속성으로 변경한다
    2. image
  2. 프레임의 길이 조정하기
    3. image
  3. 스크롤 만들기
    4. image
  4. 상단 메뉴 고정하기 - 레이어 선택후 그림과 같은 순서대로 선택한다
    5. image
  5. 탑바 레이어 수정
    1. 배경색넣기
    2. 회색으로 상태바 만들기
      3. image

2-5 슬라이드 만들기

  1. 카드UI 프레임으로 이동후 클립콘텐츠 체크 해제
  2. 4개의 카드를 프레임으로 묶고 프레임 이름을 swiper 로 변경한다
    3. image
    image
  3. 정렬등등을 맞추고 프로토타입패널로 이동한다
  4. swiper 패널을 선택후 옵션을 설정한다
    5. image
  5. 그후 미리보기를 하면 우리가 원하는 인터렉션이 구현되지 않는다 이유는 swiper 프레임은 카드UI 프레임의 하위요소 이기 때문에 더 큰 크기를 가질수 없다
    6. image
  6. swipe 의 너비를 조정한다
    7. image
  7. 이제 프리젠테이션을 해보면 잘 동작한다

2-6 피그마 미러 사용해보기

prototype 을 구현한 프레임을 선택후 https://www.figma.com/mirror 로 이동한다

해당 링크는 구글에서 검색하거나 예제의 링크섹션에도 있다.

구글에 로그인 되어있는 계정과 피그마 데스크탑 앱 계정이 동일하다면 해당 링크에서 선택프레임의 시뮬레이션 이 가능하다

image

3. 도넛차트만들기

  1. 프레임생성
  2. 원그림
  3. 속성설정
  4. 0도는 3시방향부터 시작하므로 -90도에서 시작한다
image
  1. 왼쪽 차트 추가
    1. 반전시에는 우클릭하여 반전메뉴를 이용해보자
      2. image
  2. 크기조정
    1. alt+shift 를 누르고 드래그하여 크게 한후 ratio 를 조정한다
      2. image
  3. 각 차트별 각도는 눈대중으로 조절한다.
  4. 글씨는 1개를 프레임그룹으로 생성후 ctrl+d 를 사용해서 6개모두 만든다
    5. 시스템
24%
사진
18%
음악
22%
동영상
13%
연락처
  8%
문서
15%
image

4. 갤러리만들기

4-1.placeImage 사용

  1. 프레임 선택후 그림의 순서대로 클릭
    2. image
  2. 이미지 선택후 드래그 하여 이미지 적용
    3. image
  3. 이미지를 복사하여 우측프레임의 배경에도 붙여넣는다
    4. image

    이미지의 위치정보까지 복사되어 그대로 붙여넣기 되는것이 확인된다

4-2 글래스모피즘

  1. 사각형을 그리고 밝은 배경색을 넣는다
    2. image

    a7efad6d0e4e40f3a4695cef0ef15fe9
    image
  1. 완성
    2. image

4-3-fill로 채우기

  1. 순서대로 클릭
    2. image
  2. 이미지선택
    3. image

4-4-툴사용

    f5bd21a49d71404797b3eaf440961d40
    image
  1. 사진 여러개 선택후 열기
    2. image
  2. 적용할 레이어를 클릭하자
    3. image

4-5-플러그인사용

  1. 검색-unsplash
    2. image
  2. 대상 프레임 선택
  3. 적용할 이미지 클릭
  4. lorem
    5. image
    image
  5. 더미텍스트 적용할 레이어 선택
  6. 플러그인 선택
    7. image
  7. 환경설정
    8. image
  8. 옵션
    9. 문자, 단어, 문장, 문단 의 개수설정
    문자, 단어, 문장, 문단 의 개수설정
  9. 완성
    10. image

5. 아이콘만들기

5-1 boolean operation 활용

  1. 프레임안의 도형을 선택하여 불리언연산을 사용해보자
    2. image

5-2 불리언연산을 활용하여 런처아이콘만들기

5-2-1 레이아웃그리드

  1. 192x192 프레임 생성 →AppIcon
  2. 우측 패널의 그리드를 설정한다
    3. image
    image
    image
    image
  3. 완성
    4. image

5-2-2 그리기

  1. 가로 104 /2 = 52 세로 156 / 3 =52 사각형을 그린다
    2. image
    image
    image
  2. 좌측 사각형을 이등분 후 복사한다
    3. image
  3. 모서리를 둥글게한다
    4. image
  4. 두개의 레이어를 병합한다
    5. image
  5. 병합된 레이어 선택후 복사
  6. 복사한 레이어 선택후 좌우반전
    7. image
  7. 좌우 레이어를 아래로 복사이동 알트+쉬프트+드래그
    8. image
  8. 우측 편집
    1. 그룹해제
      2. image

      b. 좌측레이어 삭제

      c. 우측레이어 복사후 좌우반전

      d. union

      image
  9. 세번째 레이어 복사이동
    10. image
  10. 8단계 반복
    11. image
  11. 우측 반원의 모서리둥글기 조절 2시방향의 조절점을 바깥쪽으로 드래그 하거나 우측패널의 속성을 사용한다
    12. image
  12. 완성
    13. image

5-2-3 색상넣기

  1. 레이아웃 그리드 표시 해제
    2. image
  2. 레이어 선택후 우측패널에서 접두사 logo의 스타일컬러를 적용한다
    3. image

5-2-4 베리에이션 하기

image

글씨추가하기

  1. 웹용 로고를 추가해보자 우측에 타이틀을 작성한다
    2. image
  2. Figma
    3. image
  3. 폰트는 시스템에 설치 되어있지 않을경우 정상 출력되지 않으므로 도형으로 변형하는것이 일반적이다.
  4. 오른쪽 클릭하여 해당 메뉴를 실행한다
    5. image

BI의 색상 반전하기

BI 속성을 스트록만 남겨놓자

image

    3c92bbc99d704cd19b5fcc2700ce5f90
    image
  1. 선의 두께 만큼 아이콘의 크기 커짐
    2. image
  2. 도형의 크기를 줄이면 선의 두께는 유지된 상태로 면적이 줄면서 선이 두꺼워보임
    3. image
  3. 선을 면으로 변경하자
    4. image
  4. 그후 우측 속성패널에서 아이콘의 크기를 입력한다
    5. image