Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
插件开发 Sketch Plugin Development + 高效制作设计果效果图 Per...
Search
James Tang
June 25, 2017
Technology
1
320
插件开发 Sketch Plugin Development + 高效制作设计果效果图 Perspective Mockup In Sketch
DEX Sketch Meetup #7 at ShenZhen
https://www.meetup.com/Sketch-Design-Shenzhen/events/240963733/
James Tang
June 25, 2017
Tweet
Share
More Decks by James Tang
See All by James Tang
Prototyping iPhone app with Xcode and Storyboard
jamztang
6
1k
I Quit My Full Time Job
jamztang
3
410
Ripple - the location based group chatting app
jamztang
1
930
Other Decks in Technology
See All in Technology
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
All you need to know about InnoDB Primary Keys
lefred
0
120
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
データの品質が低いと何が困るのか
kzykmyzw
6
1k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Language of Interfaces
destraynor
156
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Writing Fast Ruby
sferik
628
61k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
GraphQLとの向き合い方2022年版
quramy
44
13k
GitHub's CSS Performance
jonrohan
1030
460k
Faster Mobile Websites
deanohume
306
31k
Become a Pro
speakerdeck
PRO
26
5.1k
Transcript
Plugin Development Sketch 矠կݎ JAMES TANG @JAMZTANG
᧡አ鉑6NHWFK矠կ?
ӣय़随ڦ ܔེಗᤈ Data Generator, Rename It 碉ݳጱInvision Sync, Zeplin, Principle
ᳩ๗ಗᤈAutolayout, Magic Mirror
Sketch 矠կݢ犥狶کጱ 1. 盠蝧᯿ꛂ/ಗᤈӞ羬ڜ֢ۖ 2. ᩒᦔᐏ 3. 玲አ䜛斸獈 4. ᬰᤈᗑӤᩒාԻഘ
5. ࢶ猟॒ቘ 6. 肔ލአಁ֢ۖ 7. 괐ے/ٺ݄/ᛔਧԎSketchՕᶎ
Sketch 矠կฎՋ牫 VNHWFKSOXJLQ ٌ䋿疰ฎӞ㮆IROGHU牧ꗏᶎํӞԶMVRQSQJMDYDVFULSWƉOHV PUZDONHUVNHWFKSOXJLQ &RQWHQWV 6NHWFK PDQLIHVWMVRQ VKDUHGMV 6HOHFW&LUFOHVFRFRDVFULSW
6HOHFW5HFWDQJOHVFRFRDVFULSW 5HVRXUFHV 6FUHHQVKRWSQJ ,FRQSQJ
Sketch 矠կचܻቘ Sketch Mocha/CocoaScript Plugin 0RFKD&RFRDVFULSWฎӞӻᘉ᯽瑊牧-DYDVFULSW薹౮૪ᖫᦲঅጱ纷ଧ ORJ KHOORZRUOG, PVRPHMDYDVFULSWFRGH
ਥොSketch Plugin 薹᯽ http://developer.sketchapp.com/introduction/
चۑ 1. ORJ +HOOR:RUOG FRQWH[WREMHFW 3. ดᐏᩒᦔ 4. 蠣አಁᬌ獈
5. ۱౮VNHWFKSOXJLQ PDQLIHVWMVRQ
Ḓضᥝ樄&XVWRP3OXJLQ 犖ݢ犥አFPGVKLIW.
疰鉖ᶲڥጱԧ
चۑ+HOOR:RUOG Oog("Hello World"); +HOOR:RUOG 6FULSWH[HFXWHGLQV
चۑดᐏᩒᦔ FRQWH[WGRFXPHQWVKRZ0HVVDJH य़疑অ牦
चۑ&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
चۑ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
चۑ蠣አಁᬌ獈 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
चۑᐏ舰硬ݒ 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
चۑᐏ舰硬ݒ 067H[W/D\HUਁ YDUVHOHFWLRQ FRQWH[WVHOHFWLRQ>@ VHOHFWLRQVHW6WULQJ9DOXH 6RPHWKLQJ(OVH 6FULSWH[HFXWHGLQV &KDQJH0H
ๅग़ֺৼE\$OH0X´R] KWWSVJLWKXEFRPERPEHUVWXGLRVVNHWFKFRPPDQGV
۱౮VNHWFKSOXJLQ KWWSGHYHORSHUVNHWFKDSSFRPLQWURGXFWLRQSOXJLQEXQGOHV
ԧ薹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 @ ` `
Ꭺ瑊դݎದ 1. Mocha/Cocoascript ਂࣁ犋靦褖ګ ⁃ 2EMHFWLYH&ጱ獊ᶎඪൔ犋᪃牧ই犋ꖥಗᤈ EORFNVGHƉQH*&'ᒵ ⁃ 盄ᵙ֢ᗑ᪠ਂ玲 ⁃
ᛔਧԎՕᶎ ⁃ ꖤวᳩᳵಗᤈ纷ଧ 耬靦ದጱඪ೮ ૡٍ犋珿牧ԅݎꔷ纷ଃ犋 ᥝ统Ꮘ褖ګ牧౯ժ襑ᥝԧ薹ӷय़ሿդ矠կದᳪ窔
ሿդݎӣय़ᳪ窔 च犤ᤈ碉ݳ ڥአWebView (+JS 絑ह 犥 Objective-C/Swift樄咳
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
꧉ᐶꔢಋ豽 1. ԧ薹ӣᐿݎದݱᛔ犭۠牧统ᏈᎪ瑊䦒դ褖ګ 䋊괡ڥአ sketchtools, FODVVGXPSԧ薹獉蟂ຝ䯤牧薹究 ದ蔩ᒍ犋᪃ጱ㺔氂 አૡٍ༄ᥤ6NHWFKՕᶎ牧괐ےݎ硳ሲ
ֵአౡՈݎ۱6NHWFK3OXJLQ;FRGH7HPSODWH
च犤ᤈ 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 ꛂ牧ᳩ๗ಗᤈ ꖤวಗᤈ ֵአ羬ᕹۑꖥ ᓌܔ, ܔེಗᤈ
አClass Dumpᛔ૩ګ֢Headers files $ class-dump -H /Applications/Sketch.app/Contents/MacOS/Sketch -o ~/Desktop/Sketch/ http://stevenygard.com/projects/class-dump/
አૡٍᔰ矟6NHWFKՕᶎ https://www.interface-inspector.com <RXPD\QHHGWRHLWKHUGLVDEOH6,3RUGRZQORDGP\6NHWFKSOXJLQLI\RX UHRQ26;6LHUUD KWWSVJLWKXEFRP0DJLF6NHWFK,QWHUIDFH,QVSHFWRU5HPRWHUHOHDVHV
睱Ո樄咳۱SketchPlugin-XcodeTemplate https://github.com/MagicSketch/XcodeTemplate-SketchPlugin
ᐏ舰Ӟӥ
ٌ犢ํአᩒრ 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
Perspective Mockup in Sketch JAMES TANG @JAMZTANG ṛ硳ګ֢ 戔懯 硳ຎ霎
鹢ޞ䦒樌
None
3URGXFW'LVSOD\$SS6WRUH6FUHHQVKRW&RYHU3KRWRV'HVLJQ'LVSOD\HWF ݢአԭԾߝ疻ᐏ牏$SS6WRUH౼ࢶ牏ᶎࢶ猟牏ᦡᦇ疻ᐏᒵŏŏ 戔懯硳ຎ霎ጱአ괷
አSketch ጱݱ֖牧ሿࣁ᮷አՋԍො ဩᦡᦇᬰࢶᇆꗏޫ牫
placeit.net 覍ྋୗ牧䷱妞懯牧ݝ傶鹢ޞጱ℄ፓ硳ຎ Photoshop Others mockuuups.com ???
MIRRO R Sketch 矠կӞᲫګ֢ᦡᦇ硳ຎࢶ
KWWSPDJLFVNHWFKLRPLUURU ӥ斉0DJLF0LUURU
ḵᦤ૪ᕪᤰঅԧ
ᐏ舰Ӟӥ
ই౯૪妿向অԧ皃㮆$SS'HVLJQ &UHGLWKWWSGHVLJQFRGHLRDQJOH
4.7 inches iPhone 6 5.5 inches iPhone 6 Plus http://magicsketch.io/mirror/templates
http://designcode.io/angle
ತๅग़ᶼਧᦇᦡ硳ຎࢶ KWWSVPDJLFVNHWFKLRPLUURUWHPSODWH KWWSVNHWFKPRFNXSVFRP
ํ蚕ֵአොဩ'DWH3LFNHU KWWSVVNHWFKWDONLRGLVFXVVLRQLRVSLFNHU
ํ蚕ֵአොဩ8,)ORZ.LW KWWSPDJLFVNHWFKLRPLUURUWHPSODWHLSKRQHVƊRZNLW
՞ᩇꕗ 5RXQGHG &RUQHU 8SWR[TXDOLW\ 6OLFH KWWSVPDJLFVNHWFKLRPLUURUSUR
ํአᩒᦔ 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
ᨀᨀय़疑牦 ݢ犥ے獈౯ڟ蚏ጱ0DJLF0LUURU盏מአಁᗭࡂ牦 JAMES TANG @JAMZTANG