inflearn logo
inflearn logo

Figmaใ‚’ๆดป็”จใ—ใŸUIใƒ‡ใ‚ถใ‚คใƒณๅ…ฅ้–€ใ‹ใ‚‰ๅฎŸ่ทตใพใงA to Z

ใƒ‡ใ‚ถใ‚คใƒณใ‚’ๅญฆใ‚“ใ ใ“ใจใŒใชใ„้žๅฐ‚ๆ”ป่€…ใฎๆ–นใ€…ใ€ไปŠใพใ•ใซUXใƒ‡ใ‚ถใ‚คใƒณใฎๅ‹‰ๅผทใ‚’ๅง‹ใ‚ใŸใฐใ‹ใ‚Šใฎๅญฆ็”Ÿใ€UXใŠใ‚ˆใณUIใƒ‡ใ‚ถใ‚คใƒณใฎๅฐฑๆดป็”Ÿใฎๆ–นใ€…ใฎใŸใ‚ใซๆบ–ๅ‚™ใ—ใŸใ€ŒFigmaใงUIใƒ‡ใ‚ถใ‚คใƒณใ™ใ‚‹ A to Zใ€ๆŽˆๆฅญใงใ™ใ€‚Photoshopใชใฉไป–ใฎใƒ„ใƒผใƒซใ‚’ๅ…จใ็Ÿฅใ‚‰ใชใ„ๆ–นใงใ‚‚ใ€Figmaใ ใ‘ใ‚’ๆดป็”จใ—ใฆUIใƒ‡ใ‚ถใ‚คใƒณใฎๅฐ‚้–€ๅฎถใซใชใ‚Œใ‚‹ใ‚ˆใ†ใ€ๅŸบ็คŽใ‹ใ‚‰้ซ˜ๅบฆใชๆฉŸ่ƒฝใพใงๆ•™ใˆใพใ™ใ€‚

้›ฃๆ˜“ๅบฆ ๅ…ฅ้–€

ๅ—่ฌ›ๆœŸ้–“ 36ใ‹ๆœˆ

Figma
Figma
Web Design
Web Design
Mobile App Design
Mobile App Design
product design
product design
Figma
Figma
Web Design
Web Design
Mobile App Design
Mobile App Design
product design
product design
uxeric๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

ใ€ๆ˜ ๅƒๆ›ดๆ–ฐๆกˆๅ†…ใ€‘ 4. ใƒ”ใ‚ฐใƒžไฝœๆฅญ็’ฐๅขƒใฎ็†่งฃ / 5. ใƒ”ใ‚ฐใƒžๅŸบ็คŽๆฉŸ่ƒฝใฎ็ฟ’ๅพ— / 6. ็”Ÿ็”ฃๆ€งใ‚’้ซ˜ใ‚ใ‚‹ใƒ—ใƒฉใ‚ฐใ‚คใƒณใจใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆ

ใ“ใ‚“ใซใกใฏใ€‚ใ‚จใƒชใƒƒใ‚ฏใงใ™ใ€‚

 

ๆ˜ ๅƒๆ›ดๆ–ฐใŒใ‚ใ‚Šใพใ—ใŸใ‚‰ใ”ๆกˆๅ†…ใ„ใŸใ—ใพใ™ใ€‚ใƒ”ใ‚ฐใƒžใฎใƒใƒผใ‚ธใƒงใƒณใŒๆ›ดๆ–ฐใ•ใ‚ŒใŸ้ƒจๅˆ†ใŒ็”Ÿใพใ‚Œใ‚‹ใซใคใ‚Œใ€ๆ—ขๅญ˜ใฎๆ˜ ๅƒใง่ฆ‹ใ‚‰ใ‚Œใ‚‹ใƒ”ใ‚ฐใƒžใจๆœ€่ฟ‘ใฎใƒ”ใ‚ฐใƒžใŒ็•ฐใชใฃใฆ่ฆ‹ใˆใ‚‹็‚นใŒใ‚ใ‚Šใ€ๆœ€ๆ–ฐใฎใƒ”ใ‚ฐใƒžใƒใƒผใ‚ธใƒงใƒณใงๆ˜ ๅƒใ‚’ๅ†ๆ’ฎๅฝฑใ—ใฆไธŠใ’ใพใ—ใŸใ€‚ไปฅไธ‹ใฏใ€ๆ˜ ๅƒใŒๆ›ดๆ–ฐใ•ใ‚ŒใŸ้ƒจๅˆ†ใงใ™ใ€‚

 

ใ‚ปใ‚ฏใ‚ทใƒงใƒณ 4. ใƒ”ใ‚ฐใƒžใฎไฝœๆฅญ็’ฐๅขƒใฎ็†่งฃ

  • ็„กๆ–™ใง้–‹ๅง‹ใงใใ‚‹ใƒ”ใ‚ฐใƒžใฎไพกๆ ผ่จญๅฎšใจใ‚ตใƒผใƒ“ใ‚น

  • ไผšๅ“ก็™ป้Œฒใจใƒ”ใ‚ฐใƒžใƒ•ใ‚กใ‚คใƒซ็ฎก็†ใฎใŸใ‚ใฎ็’ฐๅขƒ

ใ‚ปใ‚ฏใ‚ทใƒงใƒณ 5. ใƒ”ใ‚ฐใƒžๅŸบ็คŽๆฉŸ่ƒฝใฎ็ฟ’ๅพ—

  • ๅ›ณๅฝขใ‚’ไฝœๆˆใ—ใ€ๅณใƒ‘ใƒใƒซใฎๆฉŸ่ƒฝใ‚’็ฟ’ๅพ—ใ™ใ‚‹

  • ใƒˆใƒฉใƒณใ‚นใƒ•ใ‚ฉใƒผใƒ ใจใ‚ชใƒ–ใ‚ธใ‚งใ‚ฏใƒˆใฎ็งปๅ‹•ใซ้–ข้€ฃใ™ใ‚‹ๆฉŸ่ƒฝใจใ‚ทใƒงใƒผใƒˆใ‚ซใƒƒใƒˆใ‚’็ฟ’ๅพ—ใ™ใ‚‹

  • ใ‚ฝใƒผใƒˆใ€้…ๅธƒใ€Tidy upใ€ใŠใ‚ˆใณ Smart Selection ๆฉŸ่ƒฝ

  • ใƒ†ใ‚ญใ‚นใƒˆใฎไฝœๆˆ

  • ใ‚ซใƒฉใƒผ้–ข้€ฃๆฉŸ่ƒฝ - ใƒ”ใƒƒใ‚ซใƒผใ€ใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณ

  • ็”ปๅƒใจใƒžใ‚นใ‚ฏๆฉŸ่ƒฝ

  • ใ‚จใƒ•ใ‚งใ‚ฏใƒˆใ‚’็†่งฃใ™ใ‚‹

ใ‚ปใ‚ฏใ‚ทใƒงใƒณ6.็”Ÿ็”ฃๆ€งใ‚’้ซ˜ใ‚ใ‚‹ใƒ—ใƒฉใ‚ฐใ‚คใƒณใจใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆ

  • ๆ™‚้–“ใ‚’ไฝ•ๅ€ใ€ไฝ•ๅๅ€ๆƒœใ—ใ‚€ใ€Œใƒ—ใƒฉใ‚ฐใ‚คใƒณใ€

  • UIใƒ‡ใ‚ถใ‚คใƒณใฎใ‚ฏใ‚ชใƒชใƒ†ใ‚ฃใ‚’ไธ€ๆฐ—ใซ้ซ˜ใ‚ใฆใใ‚Œใ‚‹ใ€Œใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆๆดป็”จๆณ•ใ€

 

ใใฎๅพŒใ€ๅ‚่€ƒใซใŠ้ก˜ใ„ใ—ใ€ๆฌกใฎใ‚ปใ‚ฏใ‚ทใƒงใƒณๆ˜ ๅƒใ‚‚ใƒ”ใ‚ฐใƒžใƒใƒผใ‚ธใƒงใƒณใฎๆ›ดๆ–ฐใซใ‚ˆใ‚Šๆ˜ ๅƒใฎๅ†ๆ’ฎๅฝฑใŒๅฟ…่ฆใช้ƒจๅˆ†ใซใคใ„ใฆไฝœๆฅญใ‚’้€ฒใ‚ใฆใ„ใพใ™ใ€‚ใ‚ขใƒƒใƒ—ใƒ‡ใƒผใƒˆใ‚‚้€ฒ่กŒใ™ใ‚‹ใฎใซๅ…ฑๆœ‰ใ•ใ›ใฆใ„ใŸใ ใใพใ™ใ€‚

 

ใใ‚Œใงใฏ่‰ฏใ„ไธ€ๆ—ฅใซใชใ‚Šใพใ™ใ€‚

ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€‚

ใ‚จใƒชใƒƒใ‚ฏใƒปใƒ‰ใƒชใƒผใƒ 

ใ‚ณใƒกใƒณใƒˆ
ใพใ ใ‚ณใƒกใƒณใƒˆใŒใ‚ใ‚Šใพใ›ใ‚“

๏ฟฅ10,256