Study Icons / Illustrations / Components / Plugins # 0 3 After Spindle Contents 15min C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . も ち ろ ん 。 チ ー ム で 使 え る も の に す る 必 要 が あ り ま す Yes. It needs to be something that can be used by the team.
過去には様々な取り組みがありましたが、運用が続きませんでした There have been various challenges in the past, but they could not be overcome. #01 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.
solve those problems and provide direction for the team. らしさ像 #01 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . 文 化 ブ ラ ン ド ユ ー ザ ビ リ テ ィ 品 質 マ ー ケ テ ィ ン グ デ ザ イ ン 原 則 ブ ラ ン ド ガ イ ド ラ イ ン e t c ス タ イル ガ イ ド パ タ ー ン ラ イ ブ ラ リ ボ イ ス & ト ー ン プ ロ ダ ク ト デ ザ イ ン シス テム S p i n d l e は プ ロ ダ ク ト の 構 築 に 必 要 な ガ イ ド ラ イ ン や そ れ ら を 効 率 的 に 浸 透 さ せ る た め の 仕 組 み で す Spindle is a system that sets up guidelines for teams to produce products more efficiently.
N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. Spindleで大事にしていること The design system itself has also made open source and branded to ensure consistency and reliability.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . そ の た め に 公 式 サ イ ト 運 営 、 記 事 執 筆 や X 投 稿 も 積 極 的 に 行 な って い ま す For that reason, we are actively managing official websites, writing articles, and making X posts.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Utilize 現場で利用 Web, iOS, Android 利用 Design SpindlerなDesignerが Adobe Illustrator Figma デザイン Publish SpindlerなDesignerとEngineerが 公開 GitHub Actions Build SpindlerなDesignerとEngineerが 生成 Figma Plugin Figma API
I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. We have created guidelines so that the thickness and angle of lines are automatically determined based on calculation results from the custom font, ‘AmebaSans’. Now, anyone can create an icon.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 1 C y b e r A g e n t A l l R i g h t s R e s e r v e d . 書き出す 「heart」を選択 [{“id”: “177:4”, “name”: “heart”}] F i g m a P l u g i n で 書 き 出 す ア イ コ ン を 指 定 し 、 G i t H u b A c t i o n の ワ ー ク フ ロ ー を 実 行 し ま す You can specify the icon to export and to execute a GitHub action workflow in a Figma Plugin.
figma.currentPage.selection.map(node => ({ id: node.id, name: node.name })); ({ type: 'selection', selection }); }); // ui window.addEventListener(‘message’, event => { if (event.origin !== 'https://www.figma.com') return; textField.value = JSON.stringify( , null, 0); }, false); button.addEventListener(click, () => { fetch(' /repos/openameba/spindle/actions/workflows/..., {...}) }, false); selectionchange figma.ui.postMessage event.data.pluginMessage.selection https://api.github.com D E S I G N S Y S T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
from Figma on: workflow_dispatch: inputs: selection: description: type: string default: '[]' required: true jobs: build_icons: runs-on: ubuntu-latest steps: - name: run: | npm run build svgr - name: Stringified array of the selected nodes (id, name) Build Icons Create Pull Request In the Github Action workflow, the icon is exported and a Pull Request is created. #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.
distributed through npm, the official website, and GitHub. They can be used by anyone at any time. ※ The icon is licensed under Creative Commons BY-NC-ND 4 #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.
S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. The purpose is not to create illustrations, but to express our brand values, such as approachability and diversity.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Utilize 現場で利用 Figma 利用 Set Up SpindlerなDesignerとEngineerが 準備 Figma Design SpindlerなIllustratorが Adobe Illustrator デザイン
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . We have set up a playground where anyone can try out combinations of illustrations. Playgroundを用意して 誰でもイラストの組み合わせを 試せるよ うにし ました
S Y S T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Button Background Color Text Color / Font Size / Labeling Height Width
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Suggest 提案 Spindler or 現場から Design SpindlerなDesignerが Figma 要件定義とスタイリング Develop SpindlerなEngineerが 開発 Storybook&App Document SpindlerなDesignerとEngineerが Design Docsを書く GitHub Publish 現場で利用 Spindle.ameba.design 公開 アウトプット
背景・概要 ## 使用例 ## デザイントークン ## プロパティ ## 実装例 ## 関連リンク ## アクセシビリティ The Design Doc contains the background and key design points of the components. During the review process using the doc, we identify areas that have not been considered and also serve the role of forming consensus. #02 D E S I G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved.
G N S Y S T E M S p i n d l e Copyright @2024 CyberAgent All Rights Reserved. Ensure clear information and relationships [Required] Do not communicate only with colors [Required] Ensure text color contrast [Required] Ability to operable with keyboard and touch devices [Required] Ability to confirm current location [If possible]
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . S p i n d l e 使 って い れ ば ア ク セ シ ブル Using Spindle, it becomes accessible.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . We b 向 け の コ ン ポ ー ネ ン ト は デ ザ イ ン ト ー ク ン ( C S S ) と ス タ イ ル ( C S S ) 、 実 装 ( R e a c t ) で 作 ら れ て い ま す C S S を 使 え ば R e a c t で な く て も あ る 程 度 の ス タ イ ル ・ 動 作 の 一 貫 性 は 担 保 で き ま す // Design Tokens (CSS Version) :root { : var(--primary-green-80); } // React < variant=”contained”> Go</Button> <!-- HTML --> <button class=” ” > Go</button> --color-text-accent-primary Button spui-Button spui-Button--large spui-Button--contained The components for the web are created with design tokens (CSS), styles (CSS), and implementation (React). With CSS, we can ensure a certain level of style and behavior consistency, even without React.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . F i g m a や S t o r y b o o k で 公 開 さ れ て い る た め 、 簡 単 に 利 用 で き ま す Spindle is published on Figma and Storybook for ease of use.
S Y S T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . 文章をリセット チェックする チェック結果 あめーば Ameba つくる、つむぐ、つづく つくる、つむぐ、つづく、 一つの文で"、"を3つ以上使用しています “することができます"は冗長な表現です。"することが"を省き 簡潔な表現にすると文章が明瞭になります。 解説: https:// github.com/textlint-ja/textlint-rule-ja-no-redundant- expression#dict2
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Create SpindlerなDesignerとEngineerが 作成 GitHub Utilize 現場で利用 Figma Plugin 利用
2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . デザインシステムSpindle（スピンドル）は"Amebaらし さ"を一貫してユーザーに届けるための仕組みで す。"Amebaらしさ"がユーザーに届き、共感が生まれるこ とで、サービスの信頼へとつながります。 "つくる、つむぐ、つづく、"を体現するために、Spindleを 軸にして"あめーばらしさ"をつくりますすることができま す。 文章をリセット チェックする Ameba Text Linterへようこそ 使い方 ¦ チェックしたいtextレイヤーを選択してください£ 「チェックする」ボタンを押してください£ 結果が出力されるので、必要に応じて本文を修正し てください。 F i g m a で T e x t N o d e を 選 択 す る と プ ラ グ イ ン の t e x t a r e a に 反 映 さ れ ま す W h e n a Te x t N o d e i s s e l e c t e d i n F i g m a , i t i s r e fl e c t e d i n t h e p l u g i n ' s t e x t a r e a .
=> { const TextNodes = figma.currentPage.selection.filter(node => node.type === 'TEXT'); const text = TextNodes.map(node => node.characters).join('\n'); figma.ui.postMessage({type: 'text', text}); } } // ui window.addEventListener(‘message’, event => { if (event.origin !== 'https://www.figma.com') return; if (event.data.pluginMessage.type === 'text') { ; } }, false); selectionchange textarea.textContent = event.data.pluginMessage.text D E S I G N S Y S T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . A Spindle illustration is displayed during the text check. The person who appears is Mr. J, the Creative Director of Spindle. 文章をリセット チェックする Ameba Text Linterへようこそ 使い方 チェックしたいtextレイヤーを選択してください 「チェックする」ボタンを押してください p 結果が出力されるので、必要に応じて本文を修正し てください。 Jチェック中... テキストチェック中には Spindleイラストが表示され ます。 登場するのは Spindleのク リエイティブディレクター Jさんで す
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . このFigma pluginは、 HTML・CSS版のSpindle UIと Lintサーバー(textlint)で作られてい ます。 こだわりポ イントは、 scrollIntoView()メソッド を使った該当箇所の強調表示で す デザインシステムSpindle（スピンドル）は"Amebaらし さ"を一貫してユーザーに届けるための仕組みで す。"Amebaらしさ"がユーザーに届き、共感が生まれる ことで、サービスの信頼へとつながります。 "つくる、つむぐ、つづく、"を体現するために、Spindle を軸にして"あめーばらしさ"をつくりますすることができ ます。 文章をリセット チェックする チェック結果 あめーば Ameba つくる、つむぐ、つづく つくる、つむぐ、つづく、 一つの文で"、"を3つ以上使用しています “することができます"は冗長な表現です。"することが"を省き 簡潔な表現にすると文章が明瞭になります。 解説: https:// github.com/textlint-ja/textlint-rule-ja-no-redundant- expression#dict2 This Figma plugin is made with the HTML/CSS version of the Spindle UI and a Lint server (textlint). The key point is the emphasis of the relevant section using the scrollIntoView() method.
}); } scrollIntoView デザインシステムSpindle（スピンドル）は"Amebaらし さ"を一貫してユーザーに届けるための仕組みで す。"Amebaらしさ"がユーザーに届き、共感が生まれる ことで、サービスの信頼へとつながります。 "つくる、つむぐ、つづく、"を体現するために、Spindle を軸にして"あめーばらしさ"をつくりますすることができ ます。 文章をリセット チェックする チェック結果 あめーば Ameba つくる、つむぐ、つづく つくる、つむぐ、つづく、 一つの文で"、"を3つ以上使用しています “することができます"は冗長な表現です。"することが"を省き 簡潔な表現にすると文章が明瞭になります。 解説: https:// github.com/textlint-ja/textlint-rule-ja-no-redundant- expression#dict2 #02 D E S I G N S Y S T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d .
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Slack版も用意されてお り、 開発者ではない方も活用しています。 Slack上で議論、即改善することもあり ます A version running on slack is also available, which is used by people who are not developers. Discussions are held on Slack, and improvements can be made immediately.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . デ ザ イ ン シス テム が で き た 後 、 品 質 担 保 の た め の 不 必 要 な 実 装 や コ ミ ュ ニ ケ ー シ ョ ン の 時 間 が 減 り ま し た 事 業 的 要 件 体 験 設 計 ク リ エ イ テ ィ ビ テ ィ プ ロ ダ ク ト 品 質 担 保 負 債 解 消 コ ミ ュ ニ ケ | シ ョ ン The design system “Spindle” has reduced unnecessary designing, programming and communication in the team.
T E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . チ ー ム デザインシステム S p i n d l e は F i g m a や O S S 等 コ ラ ボ レ ー シ ョ ン し や す い 方 法 で 作 ら れ て い る た め よ り 生 産 的 に な り 続 け ま す ら し さ Spindle increases the productivity of the team because it works in conjunction with collaborative tools such as Figma and OSS.
E M S p i n d l e C o p y r i g h t @ 2 0 2 4 C y b e r A g e n t A l l R i g h t s R e s e r v e d . 以 上 で 発 表 を 終 了 し ま す 、 ご 清 聴 あ り が と う ご ざ い ま し た Thank you for your attention. If you have any questions or comments, please feel free to ask. @spindle @openameba/spindle S p i n d l e U I の つ く り か た A m e b a ブ ロ グ B r a n d G u i d e l i n e s 「 A m e b a 」 ア イ コ ン 刷 新 一 貫 性 と 再 現 性 追 求 の た め の 設 計 術 事 業 と カ ル チ ャ ー を 進 化 さ せ る 、 A m e b a の ブ ラ ン ド 戦 略 と デ ザ イ ン シス テム
spindle
nathanacurtis
visional_engineering_and_design
amishiratori
kiyoshifuwa
motokoishida
mastervicedesign
thatblue
yuichi_hara7
ashapiro
cyberagentdevelopers
layerx
chriscoyier
addyosmani
denniskardys
jeffersonlam
thoeni
jmmastey
jponch
marktimemedia
bkeepers
![情報や関係性を明確にする[必須] 色だけで伝えない[必須] テキストのコントラストを確保する[必須] キーボード、タッチデバイスで操作できる[必須] 現在位置を確認できる[できれば] #02 D E S I](https://files.speakerdeck.com/presentations/695a9f9eebb0479cab8e31006616f6ff/slide_33.jpg){kind=link}
![// code if (['figma', 'figjam', 'dev'].includes(figma.editorType)) { figma.on(' ', ()](https://files.speakerdeck.com/presentations/695a9f9eebb0479cab8e31006616f6ff/slide_40.jpg){kind=link}
