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 + 高效制作设计果效果图 Perspective Mockup In Sketch
Search
James Tang
June 25, 2017
Technology
1
290
插件开发 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
920
Other Decks in Technology
See All in Technology
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
3.1k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
360
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
5
18k
いいたいことちゃんという
tkengo
0
250
ルーターでプレゼンする
puhitaku
1
3.4k
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
0
340
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
160
M&A戦略を支えるデータマネジメント (MIDAS Tech Study #16 GENDA Komiyama)
kommy339
1
130
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
180
20分で完全に理解するGrafanaダッシュボード
hamadakoji
5
950
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Producing Creativity
orderedlist
PRO
338
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Music & Morning Musume
bryan
41
5.6k
Ruby is Unlike a Banana
tanoku
96
10k
Why Our Code Smells
bkeepers
PRO
331
56k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
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