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
フロントエンドカンファレンス資料沖縄2022_mk0812
Search
mk0812
November 19, 2022
Programming
1
130
フロントエンドカンファレンス資料沖縄2022_mk0812
フロントエンドカンファレンス資料沖縄2022です!
mk0812
November 19, 2022
Tweet
Share
More Decks by mk0812
See All by mk0812
BASE_Tech_Talk_2__2022年にBASEへ入社したエンジニアが語る技術的チャレンジ__mk0812_.pdf
mk0812
0
220
Other Decks in Programming
See All in Programming
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
330
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
19
3.4k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
450
WindowInsetsだってテストしたい
ryunen344
1
190
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
750
Deep Dive into ~/.claude/projects
hiragram
7
1.3k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
100
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Facilitating Awesome Meetings
lara
54
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Transcript
©︎ 2012-2022 BASE, Inc. 1 ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022 2022/11/19 Figma TokensͱStyle Dictionary͔Β
࢝ΊΔσβΠφʔͱΤϯδχΞ͕ ࿈ܞ͍͢͠औΓΈͷ
©︎ 2012-2022 BASE, Inc. 2 ࣗݾհ ࢯ໊: Matsuoka Kosuke ॴଐ:
BASEגࣜձࣾ ೖࣾ: 2022/4 ~ ݱࡏ ۀ: ϑϩϯτΤϯυΤϯδχΞ ReactɺVueɺPHPΛ৮͍ͬͯΔ ςοΫϒϩάॻ͍ͨͷͰ͓࣌ؒ͋Δ࣌ʹͥͻˣ BASEϑϩϯτΤϯυMonorepo ԽͷऔΓΈ mk0812 @mk0812__
©︎ 2012-2022 BASE, Inc. 3 ࠓͷຊ σβΠφʔͱΤϯδχΞͷ ࿈ܞͬͯͲ͏͢Ε͍͍͔
©︎ 2012-2022 BASE, Inc. 4 ࠓͷຊ ͦΕϧʔϧͰ͢
©︎ 2012-2022 BASE, Inc. 5 ͱ͋ΔݱͰ... ΤϯδχΞ σβΠφʔ font-size͋͛ͯ΄ ͍͠
࣮ͨ͠ޙͷσβΠφʔͷࢦఠ padding1px ͭΊͯ΄͍͠ Typography ͳΜ͔͓͔͍͠... ࣮ͨ͠ޙʹ ৭ʑࢦఠ͕͋Δ... ࿈ܞ࣮ͯͯ͠͠Δͱ͜Ζ
©︎ 2012-2022 BASE, Inc. 6 ͜Ε࿈ܞෆ͔ ΤϯδχΞͱͨ͠Βʮ1ճͰऴΘΓ͍ͨɺमਖ਼ͳΔ͘ආ͚͍ͨʯ͕ • ࣮ͨ͠ޙʹؾͮ͘͜ͱগͳ͘ͳ͍ •
σβΠφʔͷཁٻΛFigmaͷΑ͏ͳσβΠϯπʔϧΛݟͳ͕Β࣮ͯ͠ࡉ͔ ͍ࢦఠΔ • සൟʹσβΠϯ͕มΘΔΑ͏ͳίϯϙʔωϯτͳ͍ ΤϯδχΞ⁶σβΠφʔͰͷϧʔϧΛ࡞Ζ͏
©︎ 2012-2022 BASE, Inc. 7 ΤϯδχΞͱσβΠφʔͷϧʔϧ ͨͩҋӢʹ࡞ΔͷͰͳ͘ɺ͋ΔఔͷζϨΛղফ͢ΔͨΊʹϧʔϧ ඞཁʢશ͕ͯղফ͞ΕΔͷͰͳ͘ɺແବͳίϛϡχέʔγϣϯΛݮΒͦ͏ʣ ແବͳࢦఠ͕ͳ͘ίϯϙʔωϯτΛ࡞Γ͍ͨ ίϯϙʔωϯτΛ࡞͢Δʹ͋ͨͬͯͷϕʔεͱͳΔ
ϧʔϧʢ৭ɺϑΥϯτʣࣗಈੜ͍ͨ͠ Figma TokensͱStyle DictionaryΛͬͯ ϧʔϧΛܾΊΑ͏
©︎ 2012-2022 BASE, Inc. 8 Figma Tokens × Style Dictionary
©︎ 2012-2022 BASE, Inc. 9 Figma Tokens • Figma Plugin
◦ ৭ɺλΠϙάϥϑΟͳͲΛσβΠϯτʔΫϯͱͯ͠ఆٛ • σβΠϯτʔΫϯJSONܗࣜͰग़ྗ͞ΕΔ • σβΠϯτʔΫϯΛGithubϦϙδτϦͰཧՄೳ + σβΠϯτʔΫϯΛੜ Github ※ࢀߟ: Supported Tokens • Colors (Fill, Border Color — hex, rgba, hsla) • Spacing (Horizontal, Vertical, Gap) • Sizing (Width/Height) • Border Radius (individually or each corner) • Border Width • Opacity • Typography (Font family, font weight, font size, line height, letter spacing, paragraph spacing) • Shadow tokens (both dropShadow and innerShadow) • [Pro]: Composition tokens (think css classes for Figma)
©︎ 2012-2022 BASE, Inc. 10 Style Dictionary • JSONϑΝΠϧͳͲͰߏ͞ΕͨσβΠϯτʔΫϯΛCSSΧελϜϓϩύςΟ ͱͯ͠ग़ྗ͢Δπʔϧ
JSONϑΝΠϧͳͲͰߏ͞Εͨ σβΠϯτʔΫϯ ্هσβΠϯτʔΫϯΛݩʹੜ͞ ΕΔCSSʢSCSSͱ͔Մʣ style-dictionary.config.json ࢀߟ https://github.com/amzn/style-dictionary
©︎ 2012-2022 BASE, Inc. 11 ࿈ܞͯ͠Έͨ ࿈ܞͯ͠ΈͨʢฐࣾͰ৭ʑࢼߦࡨޡதʣ + uiσΟϨΫτϦ ʢσβΠϯτʔΫϯ͔Βੜ͞Εͨ
CSSΛ৴͢Δʣ σβΠϯτʔΫϯΛੜ CSSΛίϯϙʔωϯτʹΈࠐΉɺstorybookͰ ֬ೝͯ͠Β͏ ※ίϯϙʔωϯτ։ൃhygenͱ͔Ͱ ͋ΔఔςϯϓϨʔτԽ͓ͯ͘͠ͱޮత Github
©︎ 2012-2022 BASE, Inc. 12 ࿈ܞͯ͠ΈͨΒͲ͏ͳΔ͔ • ແବͳίϛϡχέʔγϣϯݮΔ ◦ ੜ͞ΕͨCSSΛͱʹίϯϙʔωϯτ͕࡞ΒΕ͍ͯΔͷͰσβΠϯ͕͍͠έʔε
Λআ͍ͯ͏·͍͖ͦ͘͏ ◦ ແବͳίϛϡχέʔγϣϯ͕ͳ͚Ε։ൃޮ্͕Δ • ࣗಈੜͨ͠ʢDesign TokensʣΓָ ◦ story.to.designͳͲFigma X StorybookपΓͷ࿈ܞָ [ิ] • Figma Tokensɹˡ͜͜ʹϑΥʔΧεͨ͠ ◦ ίϯϙʔωϯτ࡞ͷޮԽ • Design Docs ◦ ίϯϙʔωϯτͷӡ༻͓Αͼ༻ํ๏ ྫ v1.1.0 … ʙͱ͍͏propsΛՃ v2.0.0 … primary colorมߋʢมߋܦ Ңͪ͜Βʣ Design Docs
©︎ 2012-2022 BASE, Inc. 13 ·ͱΊ
©︎ 2012-2022 BASE, Inc. 14 ·ͱΊ ΤϯδχΞͱσβΠφʔ͕ ཱͪฦΔϧʔϧ͋Δ͔ • ϧʔϧʢج൫ʣ͕͋Δ͜ͱͰޮྑ͍ϑϩϯτΤϯυ։ൃ͕Ͱ͖Δͱࢥ
͏ ◦ Figma Token + Style Dictionary + (Design Doc)Ͱྑ͍։ൃΛʂ