Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アイキャッチはFigmaで簡単に作れる!

Sayaka Kubo
November 08, 2023

 アイキャッチはFigmaで簡単に作れる!

DevelopersIOの著者陣を対象にしたブログ執筆に関するノウハウや知見の共有、執筆者陣の執筆スキル及び質量の向上を目的とした『DevelopersIO ブログ勉強会2023』の第5回デザイナー会で登壇しました!フリープランもあって始めやすいFigmaを題材にアイキャッチを作る際のポイントについて紹介しています。

Sayaka Kubo

November 08, 2023
Tweet

More Decks by Sayaka Kubo

Other Decks in Design

Transcript

  1. Kubo Sayaka -
    2 02 3
    .
    1
    1
    .
    8

    Figma
    # 2023
    1

    View full-size slide

  2. 2
    CX Delivery



    View full-size slide

  3. Index
    Figma


    Figma



    3

    View full-size slide

  4. Figma
    5


    💻 👩💻


    🤑


    💡

    View full-size slide

  5. 8
    1
    . (
    12 00
    ×
    630
    px)


    2
    .


    3
    . (PNG )

    View full-size slide

  6. 1. (w
    1
    2
    0
    0
    h
    6
    3
    0
    )
    9

    View full-size slide

  7. 1.
    10
    [ _ _w
    1
    2 0
    0
    h
    63
    0
    ]
    👈

    View full-size slide

  8. ⚠ ⚠
    12
    1.


    2.
    2. -
    SVG( ) PNG( ) JPEG( )

    View full-size slide

  9. 2. - Figma
    13
    Mac ⾒ Finder Figma

    View full-size slide

  10. 2. - 2
    15
    👈
    👆
    👆

    View full-size slide

  11. 3. PNG
    17
    👈

    View full-size slide

  12. 3. PNG -
    18
    PNG


    👇

    View full-size slide

  13. 28
    160px


    1. - 160px

    View full-size slide

  14. 1. - 160px
    29

    View full-size slide

  15. 41


    Good 👍
    2.

    View full-size slide

  16. 2. -
    42
    https://dev.classmethod.jp/articles/placement/#toc-
    1

    View full-size slide

  17. 49

    Noto Sans JP Univia Pro


    48px

    View full-size slide

  18. 50
    designstrip
    unDraw

    View full-size slide

  19. #help-design


    @g-cx-design-team
    53

    View full-size slide

  20. Thank you !
    55

    View full-size slide