WFHにはFigmaを活用しよう / use-figma-4-wfh

05c96f928d852497bd4c6e9dcdecfc8f?s=47 Akinen
May 27, 2020

WFHにはFigmaを活用しよう / use-figma-4-wfh

本スライドは「第20回ゆるはち.it: リモートワーク&開発/制作環境についてゆるく話す」の登壇用資料です。https://yuruhachi-it.connpass.com/event/176015/

デザイナーも非デザイナーも使えるツール「Figma」の活用方法についてご紹介します。

05c96f928d852497bd4c6e9dcdecfc8f?s=128

Akinen

May 27, 2020
Tweet

Transcript

  1. WFHʹ͸FigmaΛ׆༻͠Α͏ ୈ20ճΏΔ͸ͪ.it ొஃࢿྉ 2020/05/27ɹ@_akinen

  2. ࣗݾ঺հ • લ৬͸ϑϩϯτΤϯυΤϯδχΞ → UI/UXσβΠϯʹڵຯ • 2019.11ɹσβΠφʔͱͯ͠ϏϧσΟοτʹೖࣾ • ݱࡏ͸WebαʔϏε(toB)ͷUI/UXɺHPͷσβΠϯ౳ খᖒ

    থಙʢ͖͋ͶΜʣ
  3. ࠓճͷλΠτϧ Figmaͱ͸ʁ

  4. Figmaͱ͸ • Dlyan Field͕2015೥ʹެ։ͨ͠ɺجຊແྉͷσβΠϯπʔϧ • 2011೥ࠒʹWebGLΛ༻͍ͨڞಉฤूπʔϧΛߟҊɹˠFigma • Airbnb΍SlackɺTwitterɺUberɺMicrosoftͳͲͰ΋࠾༻ɻ ” GitHub͕ίʔυͱͷؔ܎ੑͷ࠶ൃ໌Ͱ͋ͬͨͷʹର͠ɺ

    Figma͸σβΠϯͱͷؔΓํͷ࠶ൃ໌Λ໨ࢦ͢ɻ” https://thebridge.jp/2020/05/investing-in-figma-the-decade-of-design-pickupnews
  5. ؆୯ʹ͍͏ͱɺ ύϫϙͷ͍͢͝൛ɻ ɾਤܗ΍ઢ΍จࣈΛࣗ༝ʹஔ͚Δ ɾओʹUIσβΠϯʹ࢖ΘΕ͍ͯΔ ɾࣅͨ΋ͷʹSketch, Adobe XD ɹͳͲ͕͋Δ ɾੲ͸PhotoshopͰؤு͍ͬͯͨ

  6. “ Figmaͷ࢖໋͸σβΠϯΛશͯͷਓʑʹΦʔϓϯʹ͢Δ͜ͱͩɻ ୭΋͕ϏδϡΞϧͰࣗݾදݱ͕ग़དྷΔπʔϧΛखʹ͢Δ͜ͱͰɺ ΦʔϓϯͰίϥϘϨʔγϣϯՄೳͳσβΠϯϓϩηε͕࣮ݱͰ͖Δɻ” ―― Dylan Field (Figma / Co-Founder

    & CEO)
  7. ಛ௃ᶃ Φʔϓϯ • ϚϧνσόΠεʹରԠ • MacɺWindowsɺAndroidɺiOSͷ֤छ୺຤Ͱ࢖༻Մ • ΞϓϦΛೖΕͣʹɺϒϥ΢β͔Β΋Ӿཡɾฤू͕Մೳʂ • ϑΝΠϧΛURLͻͱͭͰγΣΞͰ͖Δ

    • ϊϯσβΠφʔͰ΋؆୯ʹӾཡͰ͖Δ
  8. ಛ௃ᶄ ίϥϘϨʔγϣϯ • ෳ਺ਓͰͷϦΞϧλΠϜڞಉ࡞ۀ͕Մೳ • ௨࿩͠ͳ͕ΒೋਓͰಉ͡ը໘Λ࿔ΕΔ • ࠷ۙͷைྲྀʢMiroɺGoogle Docsʣ •

    ίϛοτϩάʮ͍ͭ୭͕ฤू͔ͨ͠ʯ͕෼͔Δ • ࣗಈͰมߋ͕อଘ͞ΕΔʢCmd + S ෆཁʣ • όʔδϣϯΛ෮ݩ͢Δ͜ͱ΋Մೳʂ
  9. ∴ϦϞʔτϫʔΫͱͷ ਌࿨ੑ͕ߴ͍ʂ

  10. ϊϯσβΠφʔͰ΋ ແྉͰ࢖͑·͢ɻ ɾݸਓతͳϝϞπʔϧ୅ΘΓʹ ɾMTGͷϗϫΠτϘʔυ୅ΘΓʹ ΄΅ແݶʹషΕΔͷͰɾɾɾ

  11. Ոͷص͕ https://twitter.com/tensho_tw/status/985541386668617728/photo/1

  12. ͜͏ͳΓ·͢ɻ

  13. ొஃࢿྉ΍ϙʔτϑΥϦΦ΋ͭ͘Ε·͢ʢPDFग़ྗՄʣ

  14. WFHʹ͸FigmaΛ׆༻͠Α͏ (ඇσβΠφʔͷํ΋ͥͻ)

  15. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠