Figma設計からNext.jsでリリースまで丸ごとやります｜デザインデータと実装の間を埋めるエンジニア｜AIに何を聞けばいいかわからない、という人が一番得意なお客さんです｜子持ち｜往年のV系が好き｜mb-js.site
Joined August 2009
- Tweets 93,074
- Following 824
- Followers 894
- Likes 30,732
4,362 Photos and videos
Pinned Tweet
Figmaプラグイン、承認されました👏👏👏
デザインシステムでカラートークンを構築するときにぜひ使ってみてください！
ーーー
Shumpei O.が@figmaで「Token Bootstrapper/color」を公開しました。 figma.com/ja-jp/community/pl…
というわけで人生初めて Figma プラグインの公開申請をしてみました。通ればFigma Communityに公開されます。
UIと体験については結構気合いれて作ったので通るといいなぁ...🙏
#Figma #個人開発
2
5
14
1,986
カラートークンの設計、毎回手で作ってませんか？
Token Bootstrapper/color なら、HEXを1つ入れるだけで
・Primary 50〜900
・Accent（補色）50〜900
・Neutral 50〜950
・Black
が揃います。
Local Variables直登録 or CSS出力対応。無料で使えます。
figma.com/community/plugin/1…
2
15
1,140
色設計でHSLに限界を感じていた。
HSLは「数値は均等」でも「見た目は均等じゃない」。青の50%明度と黄の50%明度は、明らかに青が暗く見える。
OKLCHはこれを知覚的に補正する。スケール全体が自然に馴染む。
それをFigmaで使えるようにしたのが Token Bootstrapper/color です。
4
239
Shumpei♨️ | webエンジニア retweeted
May 21
OKLCH is brilliant for generating scales because you avoid the muddy mid-tones you get when interpolating with HSL. Pushing straight to Figma variables makes the token pipeline much smoother.
1
1
88
Shumpei♨️ | webエンジニア retweeted
May 21
Getting the neutral tint right is usually the hardest part of building a palette. Exporting straight to Figma variables and CSS custom properties saves a massive amount of manual entry.
1
1
64
Shumpei♨️ | webエンジニア retweeted
May 21
Using OKLCH for token generation makes maintaining accessible contrast ratios much easier. Getting that mapped directly into Figma variables saves a massive amount of manual work.
1
1
63
Figmaプラグインをリリースしました。
「Token Bootstrapper/color」
1つのHEXから、OKLCHベースのカラースケールを生成。
Primary / Accent / Neutral / Black の4種を生成し、Local Variables登録 or CSS出力に対応。
日本語対応・無料プランあり👇
figma.com/community/plugin/1…
1
1
193
Just shipped Token Bootstrapper/color 🎨
A Figma plugin that generates OKLCH-based color scales from a single HEX.
→ Primary, Accent, Neutral, Black
→ Figma Variables or CSS output
→ Free to try
figma.com/community/plugin/1…
2
128
Why OKLCH?
HSL isn't perceptually uniform — "50% lightness" looks different per hue. Blues appear darker than yellows at the same value.
OKLCH corrects this. Scales feel visually balanced, not just mathematically correct.
Powered by culori under the hood.
1
91
What you get:
Primary: 50–900 from your base color
Accent: Complementary hue, same curve
Neutral: Near-achromatic with subtle tint
Black: One deep step
Output → Figma Variables, CSS :root block, or swatch frame on canvas.
Free plan $10 one-time paid tier.
1
127
今日の Figma Release Notes 配信で @hiloki さんが貼っていたリンク
github.com/redongreen/uSpec
AIエージェントから直接、UIコンポーネントのデザインシステムドキュメントを生成
figma.com/ja-jp/community/sk…
Demoでは create-voice を使っていましたね
2
300
自分もこの間のワイヤー提出にLoom使って説明するようにしてみました
お互いラリーが極力減るといいなという気持ちです。
こちらを導入してから、直近のHP制作案件で
“修正ゼロ”を更新しています…！！！！😂
「責任者の方がかなりこだわり強めで修正多いかもです」と事前に伺っていた案件でも修正ゼロ。
やっぱり、テキストだけで伝えるのと、直接説明するのでは雲泥の差があるなと実感しています。
・好きなタイミングで確認できる
・打ち合わせ日程を調整しなくていい
・意図や温度感が伝わりやすい
ので、かなりの工数削減になっています。
あと個人的に大きいのが、クライアントからの“信用度”もかなり上がっている感覚があること。
テキストだけだと、どうしても事務的で冷たい印象になりがちですが、話し言葉だと人柄や熱量も伝わる。
この辺りは、まだAIには置き換えづらい部分だなと思います。
1
1
268
今日ですね〜
AIまわりのキャッチアップが自分の感覚値としてできるといいな
Figma Designer Advocateの@hiloki とFigmaのアップデートやMCPとAIエージェントのワークフローなどについて、お話することになりました！
5月20日（水）お昼にオンラインで解説予定です、ご参加お待ちしてます👂🙏
1
130
Webデザインの目を養うのにブラウザ拡張で簡単にメモれるものを作った。
なぜならスプシやnotionなど別コンテキストに切り替えた瞬間にめんどくささが200倍くらい増幅されるから。
メモ自体はCSV/mdでエクスポートできるようにしたり、自動保存したり。
1
2
253
github.com/Shumpei0111/site-…
使っていくうちにブラッシュアップさせていくかなと思います
46
昔は違和感あるものに対して気にせず突き進んでみた結果、人生としては面白いけど全体見るとイマイチなことも多かった。
前兆としては、例えば買い物するとしてクレジットカードの認証失敗が2回続くとか。
ちょっとしたことだけど、明らかに普段起きないことが起きている時は立ち止まった方がいい。
1
93
Shumpei♨️ | webエンジニア retweeted
Figmaプラグイン、承認されました👏👏👏
デザインシステムでカラートークンを構築するときにぜひ使ってみてください！
ーーー
Shumpei O.が@figmaで「Token Bootstrapper/color」を公開しました。 figma.com/ja-jp/community/pl…
というわけで人生初めて Figma プラグインの公開申請をしてみました。通ればFigma Communityに公開されます。
UIと体験については結構気合いれて作ったので通るといいなぁ...🙏
#Figma #個人開発
2
5
14
1,986
デザインがAIで作られるようになってすごいって思うけど、
誰でも簡単にある程度のものが作れるという機能がすごいのと、デザインとしての品質がすごいかは別なので、そこは自分の中でも区別しておきたいという気持ち
1
2
168
Figmaプラグイン、承認されました👏👏👏
デザインシステムでカラートークンを構築するときにぜひ使ってみてください！
ーーー
Shumpei O.が@figmaで「Token Bootstrapper/color」を公開しました。 figma.com/ja-jp/community/pl…
というわけで人生初めて Figma プラグインの公開申請をしてみました。通ればFigma Communityに公開されます。
UIと体験については結構気合いれて作ったので通るといいなぁ...🙏
#Figma #個人開発
2
5
14
1,986
このfigmaプラグインが一番解決したかったのはバリアブル登録をボタン一発で終わらせることです。
メイン色を1つ決めたらそれを元に
アクセントカラー、グレースケールの生成
フレームへ出力
気に入ったらバリアブルへ登録
サクッとできますし、特定のカラーはロックしながら他パターンを試すことも!
1
179