插件开发 Sketch Plugin Development + 高效制作设计果效果图 Perspective Mockup In Sketch

DEX Sketch Meetup #7 at ShenZhen https://www.meetup.com/Sketch-Design-Shenzhen/events/240963733/

Transcript

1. Plugin Development Sketch 矠կ୏ݎ JAMES TANG @JAMZTANG
2. ᧡አ鉑6NHWFK矠կ?
3. ӣय़随ڦ ܔེಗᤈ Data Generator, Rename It 碉ݳ௔ጱInvision Sync, Zeplin, Principle ᳩ๗ಗᤈAutolayout, Magic Mirror
4. Sketch 矠կݢ犥狶کጱ 1. 盠蝧᯿ꛂ/ಗᤈӞ羬ڜ֢ۖ 2. ᩒᦔ൉ᐏ 3. ൉玲አ䜛斸獈 4. ᬰᤈᗑӤᩒාԻഘ 5. ࢶ猟॒ቘ 6. 肔ލአಁ֢ۖ 7. 괐ے/ٺ݄/ᛔਧԎSketchՕᶎ
5. Sketch 矠կฎՋ꘸牫 VNHWFKSOXJLQ ٌ䋿疰ฎӞ㮆IROGHU牧ꗏᶎํӞԶMVRQSQJMDYDVFULSWƉOHV PUZDONHUVNHWFKSOXJLQ &RQWHQWV 6NHWFK PDQLIHVWMVRQ VKDUHGMV 6HOHFW&LUFOHVFRFRDVFULSW 6HOHFW5HFWDQJOHVFRFRDVFULSW 5HVRXUFHV 6FUHHQVKRWSQJ ,FRQSQJ
6. Sketch 矠կच๜ܻቘ Sketch Mocha/CocoaScript Plugin 0RFKD&RFRDVFULSWฎӞӻᘉ᯽瑊牧಩-DYDVFULSW薹᧛౮૪ᖫᦲঅጱ纷ଧ ORJ KHOORZRUOG, PVRPHMDYDVFULSWFRGH  
7. ਥොSketch Plugin 薹᯽ http://developer.sketchapp.com/introduction/
8. च๜ۑ 1. ORJ +HOOR:RUOG  FRQWH[WREMHFW 3. ดᐏᩒᦔ 4. ൉蠣አಁᬌ獈 5. ಑۱౮VNHWFKSOXJLQ  PDQLIHVWMVRQ
9. Ḓضᥝ಑樄&XVWRP3OXJLQ໛ 犖ݢ犥አFPGVKLIW.
10. 疰鉖໏ᶲڥጱ಑୏ԧ
11. च๜ۑ+HOOR:RUOG Oog("Hello World"); +HOOR:RUOG 6FULSWH[HFXWHGLQV
12. च๜ۑดᐏᩒᦔ FRQWH[WGRFXPHQWVKRZ0HVVDJH य़疑অ牦
13. च๜ۑ&RQWH[W2EMHFW Oog(context); ^ DSL 02-DYD6FULSW2EMHFW[DF! FRPPDQG 063OXJLQ&RPPDQG[DH! GRFXPHQW 06'RFXPHQW[IFFEEGF! VFULSW3DWK 8VHUVMDPHV/LEUDU\$SSOLFDWLRQ6XSSRUWFRPERKHPLDQFRGLQJVNHWFK3OXJLQV 8QWLWOHGVNHWFKSOXJLQ VFULSW85/ ƉOH8VHUVMDPHV/LEUDU\$SSOLFDWLRQ6XSSRUWFRPERKHPLDQFRGLQJVNHWFK3OXJLQV 8QWLWOHGVNHWFKSOXJLQ VHOHFWLRQ  06%LWPDS/D\HU[IFFEHFH!6FUHHQ6KRWDW$0 %&&$%& %$)()&'(    ` 6FULSWH[HFXWHGLQV
14. च๜ۑ6HOHFWLRQ૪鉝ᶱፓ ꘊ׎讨Զ䩚ᥜ YDUVHOHFWLRQ FRQWH[WVHOHFWLRQ16$UUD\ IRU YDUL LVHOHFWLRQFRXQW L ^ YDUOD\HU VHOHFWLRQ>L@ ORJ OD\HU ` 066KDSH*URXS[IGIDI!5HFWDQJOH ($%&))'&')') 067H[W/D\HU[IGID!Ӥᶎฎ2EMHFWLYH&6 %%'(($$&%) 06%LWPDS/D\HU[IGID!6FUHHQ6KRWDW30 )$&$%)&&)&%' 6FULSWH[HFXWHGLQV
15. च๜ۑ൉蠣አಁᬌ獈 YDUGRF FRQWH[WGRFXPHQW YDULQSXW >GRFDVN)RU8VHU,QSXW:KDW V\RXUQDPH"LQLWLDO9DOXH@ ORJ 0\QDPHLVLQSXW Ӥᶎฎ2EMHFWLYH&6W\OH牧犖ݢ犥ꯕ౮鉖໏ৼ YDULQSXW GRFDVN)RU8VHU,QSXWBLQLWLDO9DOXHB :KDW V\RXUQDPH" -DYDVFULSW6W\OH 0\QDPHLV-DPHV 6FULSWH[HFXWHGLQV
16. च๜ۑᐏ舰硬ݒ 066KDSH*URXS᷏ᜋ YDUVHOHFWLRQ FRQWH[WVHOHFWLRQ>@ YDUEOXH&RORU >06&RORUUJE&RORU5HG [' JUHHQ [ EOXH [$& @ YDU\HOORZ&RORU >06&RORUUJE&RORU5HG [) JUHHQ [& EOXH [ @ YDUƉOO VHOHFWLRQVW\OH ƉOOV >@VHW&RORU EOXH&RORU  )& '$& 6FULSWH[HFXWHGLQV
17. च๜ۑᐏ舰硬ݒ 067H[W/D\HUਁ໏ YDUVHOHFWLRQ FRQWH[WVHOHFWLRQ>@ VHOHFWLRQVHW6WULQJ9DOXH 6RPHWKLQJ(OVH 6FULSWH[HFXWHGLQV &KDQJH0H
18. ๅग़ֺৼE\$OH0X´R] KWWSVJLWKXEFRPERPEHUVWXGLRVVNHWFKFRPPDQGV
19. ಑۱౮VNHWFKSOXJLQ KWWSGHYHORSHUVNHWFKDSSFRPLQWURGXFWLRQSOXJLQEXQGOHV
20. ԧ薹PDQLIHVWMVRQ KWWSGHYHORSHUVNHWFKDSSFRPLQWURGXFWLRQSOXJLQEXQGOHV ^ QDPH6HOHFW6KDSHV GHVFULSWLRQ3OXJLQVWRVHOHFWDQGGHVHOHFWVKDSHV DXWKRU-RH%ORJJV KRPHSDJHKWWSJLWKXEFRPH[DPSOH VNHWFKSOXJLQV YHUVLRQ LGHQWLƉHUFRPH[DPSOHVNHWFKVKDSHSOXJLQV DSSFDVWKWWSVH[FHOOHQWVNHWFKSOXJLQFRP H[FHOOHQWSOXJLQDSSFDVW[PO FRPSDWLEOH9HUVLRQ EXQGOH9HUVLRQ FRPPDQGV> ^ QDPH$OO LGHQWLƉHUDOO VKRUWFXWFWUOVKLIWD VFULSWVKDUHGMV KDQGOHUVHOHFW$OO ` ^ QDPH&LUFOHV LGHQWLƉHUFLUFOHV VFULSW6HOHFW&LUFOHVFRFRDVFULSW ` ^ QDPH5HFWDQJOHV LGHQWLƉHUUHFWDQJOHV VFULSW6HOHFW5HFWDQJOHVFRFRDVFULSW ` @ PHQX^ LWHPV> DOO FLUFOHV UHFWDQJOHV @ ` `
21. Ꭺ瑊෸դ୏ݎದ๞ 1. Mocha/Cocoascript ਂࣁ犋靦褖ګ ⁃ ੒2EMHFWLYH&ጱ獊ᶎඪൔ犋᪃牧ই犋ꖥಗᤈ EORFNVGHƉQH*&'ᒵ ⁃ 盄ᵙ֢ᗑ᪠ਂ玲 ⁃ ᛔਧԎՕᶎ ⁃ ꖤว౲ᳩ෸ᳵಗᤈ纷ଧ  耬靦ದ๞෈໩ጱඪ೮  ૡٍ犋珿牧ԅ୏ݎꔷ纷ଃ๶犋׎ ᥝ统Ꮘ褖ګ牧౯ժ襑ᥝԧ薹ӷय़ሿդ矠կದ๞ᳪ窔
22. ሿդ୏ݎӣय़ᳪ窔 च๜޸犤ᤈ碉ݳ ڥአWebView (+JS 絑ह 犥 Objective-C/Swift樄咳
23. Objective-C/Swift च๜޸犤ᤈ WebView JS • Autolayout (Anima) • CSSketch • Fluid • Magic Mirror • Magic Presenter • Prototype (Craft) • Sketch Runner • Sketch Focus • States • Zeroheight • Craft • Flow Mate • Sketch Flex Layout • Sketch Measure • Arrange Artboard • Artboard To PDF • Data Generator • Duplicator • Git Sketch Plugin • Place Linked Bitmap • RenameIt • Sketch Image Compresser • Symbol Organizer
24. ꧉ᐶꔢಋ豽 1. ԧ薹ӣᐿ୏ݎದ๞ݱᛔ犭۠牧统ᏈᎪ瑊䦒դ褖ګ  䋊괡ڥአ sketchtools, FODVVGXPSԧ薹獉蟂ຝ䯤牧薹究 ದ蔩෈ᒍ犋᪃ጱ㺔氂  አૡٍ༄ᥤ6NHWFKՕᶎ牧괐ے୏ݎ硳ሲ  ֵአౡՈ୏ݎ۱6NHWFK3OXJLQ;FRGH7HPSODWH
25. च๜޸犤ᤈ Easy Basic Good Hard 1x ᳩ๗ಗᤈ牧襑ᥝ ֢ᩒා蔭ᐏ Web + JS Hard Good Excellent Mid 0.5x~1x ୏ݎದ๞穉᫾ Difficulty ୏তᵙଶ Debugging ᴻᲙ Extensibility 皤ኩ௔ Maintenance ᖌಷ Performance 蝧ଶ Best For ݳ蝒随୵ Toolsૡٍ Objective-C/Swift Hard Good Good~Excellent Mid 3x~10x ꛂ๥牧ᳩ๗ಗᤈ ꖤวಗᤈ ֵአ羬ᕹۑꖥ ᓌܔ, ܔེಗᤈ
26. አClass Dumpᛔ૩ګ֢Headers files $ class-dump -H /Applications/Sketch.app/Contents/MacOS/Sketch -o ~/Desktop/Sketch/ http://stevenygard.com/projects/class-dump/
27. አૡٍᔰ矟6NHWFKՕᶎ https://www.interface-inspector.com <RXPD\QHHGWRHLWKHUGLVDEOH6,3RUGRZQORDGP\6NHWFKSOXJLQLI\RX UHRQ26;6LHUUD KWWSVJLWKXEFRP0DJLF6NHWFK,QWHUIDFH,QVSHFWRU5HPRWHUHOHDVHV
28. 睱Ո樄咳۱SketchPlugin-XcodeTemplate https://github.com/MagicSketch/XcodeTemplate-SketchPlugin
29. ᐏ舰Ӟӥ
30. ٌ犢ํአᩒრ Sketch Plugin Development - MagicSketch Blog https://blog.magicsketch.io/development/home Sketch Plugin Snippets for Plugin Developers https://medium.com/sketch-app-sources/sketch-plugin-snippets-for-plugin-developers-e9e1d2ab6827 Sketch Plugin Directory https://github.com/sketchplugins/plugin-directory Undocumented Sketch Plugin API Reference https://blog.magicsketch.io/undocumented-sketch-plugin-api-reference-642775b6476d Sketch Plugin Resources http://developer.sketchapp.com/resources/ Sketch Plugin Developers http://developer.sketchapp.com/ Sketch Plugin Forum http://sketchplugins.com
31. Perspective Mockup in Sketch JAMES TANG @JAMZTANG ṛ硳ګ֢ 戔懯 硳ຎ霎 鹢ޞ䦒樌
33. 3URGXFW'LVSOD\$SS6WRUH6FUHHQVKRW&RYHU3KRWRV'HVLJQ'LVSOD\HWF ݢአԭԾߝ疻ᐏ牏$SS6WRUH౼ࢶ牏੗ᶎࢶ猟牏ᦡᦇ疻ᐏᒵŏŏ 戔懯硳ຎ霎ጱአ괷
34. አSketch ጱݱ֖牧ሿࣁ᮷አՋԍො ဩ಩ᦡᦇ୓ᬰࢶᇆꗏޫ牫
35. placeit.net 覍ྋୗ牧䷱妞懯牧ݝ傶಑鹢ޞጱ℄ፓ硳ຎ Photoshop Others mockuuups.com ???
36. MIRRO R Sketch 矠կӞᲫګ֢ᦡᦇ硳ຎࢶ
37. KWWSPDJLFVNHWFKLRPLUURU ӥ斉0DJLF0LUURU
38. ḵᦤ૪ᕪᤰঅԧ
39. ᐏ舰Ӟӥ
40. ؃ই౯૪妿向অԧ皃㮆$SS'HVLJQ &UHGLWKWWSGHVLJQFRGHLRDQJOH
41. 4.7 inches iPhone 6 5.5 inches iPhone 6 Plus http://magicsketch.io/mirror/templates
42. http://designcode.io/angle
43. ੔ತๅग़ᶼਧᦇᦡ硳ຎࢶ KWWSVPDJLFVNHWFKLRPLUURUWHPSODWH KWWSVNHWFKPRFNXSVFRP
44. ํ蚕ֵአොဩ'DWH3LFNHU KWWSVVNHWFKWDONLRGLVFXVVLRQLRVSLFNHU
45. ํ蚕ֵአොဩ8,)ORZ.LW KWWSPDJLFVNHWFKLRPLUURUWHPSODWHLSKRQHVƊRZNLW
46. ՞ᩇꕗ 5RXQGHG &RUQHU 8SWR[TXDOLW\ 6OLFH KWWSVPDJLFVNHWFKLRPLUURUSUR
47. ํአᩒᦔ Magic Mirror Templates http://magicsketch.io/mirror/template Magic Mirror 3 Facebook Group http://facebook.com/magicmirrorsketch SketchMockups.com | Sketch Perspective Mockups http://sketchmockups.com Magic Mirror 3 | Sketch Plugin replaces Photoshop http://magicsketch.io/mirror Magic Presenter 2 | Sketch Plugin replaces Keynote https://github.com/MagicSketch/MagicPresenter2/releases
48. ᨀᨀय़疑牦 ݢ犥ے獈౯ڟ蚏ጱ0DJLF0LUURU盏מአಁᗭࡂ牦 JAMES TANG @JAMZTANG