Shumpei♨️ | webエンジニア

Figma設計からNext.jsでリリースまで丸ごとやります｜デザインデータと実装の間を埋めるエンジニア｜AIに何を聞けばいいかわからない、という人が一番得意なお客さんです｜子持ち｜往年のV系が好き｜

[Shumpei♨️ | webエンジニア @seventhseven]

Figmaプラグイン、承認されました👏👏👏
デザインシステムでカラートークンを構築するときにぜひ使ってみてください！

ーーー

Shumpei O.が@figmaで「Token Bootstrapper/color」を公開しました。 https://t.co/TrXLvo9PVH

[Shumpei♨️ | webエンジニア @seventhseven]

というわけで人生初めて Figma プラグインの公開申請をしてみました。通ればFigma Communityに公開されます。

UIと体験については結構気合いれて作ったので通るといいなぁ...🙏

#Figma #個人開発

[Shumpei♨️ | webエンジニア @seventhseven]

今気付いたんだけど、マサラタウンの「マサラ」って「まっさら」から来てる........?

[Shumpei♨️ | webエンジニア @seventhseven]

Figmaプラグイン、承認されました👏👏👏
デザインシステムでカラートークンを構築するときにぜひ使ってみてください！

ーーー

Shumpei O.が@figmaで「Token Bootstrapper/color」を公開しました。 https://t.co/TrXLvo9PVH

[Shumpei♨️ | webエンジニア @seventhseven]

カラートークンの設計、毎回手で作ってませんか？

Token Bootstrapper/color なら、HEXを1つ入れるだけで
・Primary 50〜900
・Accent（補色）50〜900
・Neutral 50〜950
・Black
が揃います。

Local Variables直登録 or CSS出力対応。無料で使えます。
https://t.co/qep2OWbdIr

[Shumpei♨️ | webエンジニア @seventhseven]

色設計でHSLに限界を感じていた。

HSLは「数値は均等」でも「見た目は均等じゃない」。青の50%明度と黄の50%明度は、明らかに青が暗く見える。

OKLCHはこれを知覚的に補正する。スケール全体が自然に馴染む。

それをFigmaで使えるようにしたのが Token Bootstrapper/color です。

[Alexander 👦 @alexandersstudi]

@seventhseven 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.

[Alexander 👦 @alexandersstudi]

@seventhseven 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.

[Alexander 👦 @alexandersstudi]

@seventhseven 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.

[Shumpei♨️ | webエンジニア @seventhseven]

Figmaプラグインをリリースしました。

「Token Bootstrapper/color」
1つのHEXから、OKLCHベースのカラースケールを生成。

Primary / Accent / Neutral / Black の4種を生成し、Local Variables登録 or CSS出力に対応。

日本語対応・無料プランあり👇
https://t.co/qep2OWbdIr

[Shumpei♨️ | webエンジニア @seventhseven]

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.

[Shumpei♨️ | webエンジニア @seventhseven]

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

https://t.co/qep2OWbdIr

[Shumpei♨️ | webエンジニア @seventhseven]

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.

[Shumpei♨️ | webエンジニア @seventhseven]

@VengeonsP SMART SEO

[Shumpei♨️ | webエンジニア @seventhseven]

今日の Figma Release Notes 配信で @hiloki さんが貼っていたリンク

https://t.co/8UOyEsY5Zt
AIエージェントから直接、UIコンポーネントのデザインシステムドキュメントを生成

https://t.co/mX9G7D0k9v
Demoでは create-voice を使っていましたね

[Shumpei♨️ | webエンジニア @seventhseven]

@ninose07 ですです！
ちょっとした手間で減らせるなら続けてみようと思います

[Shumpei♨️ | webエンジニア @seventhseven]

自分もこの間のワイヤー提出にLoom使って説明するようにしてみました
お互いラリーが極力減るといいなという気持ちです。

[ninose@WEBデザイナー×マンガ家 | Studio Experts【新規ご依頼受付中】 @ninose07]

こちらを導入してから、直近のHP制作案件で
“修正ゼロ”を更新しています…！！！！😂

「責任者の方がかなりこだわり強めで修正多いかもです」と事前に伺っていた案件でも修正ゼロ。

やっぱり、テキストだけで伝えるのと、直接説明するのでは雲泥の差があるなと実感しています。

・好きなタイミングで確認できる
・打ち合わせ日程を調整しなくていい
・意図や温度感が伝わりやすい

ので、かなりの工数削減になっています。

あと個人的に大きいのが、クライアントからの“信用度”もかなり上がっている感覚があること。

テキストだけだと、どうしても事務的で冷たい印象になりがちですが、話し言葉だと人柄や熱量も伝わる。

この辺りは、まだAIには置き換えづらい部分だなと思います。

[Shumpei♨️ | webエンジニア @seventhseven]

@baan_nasebanaru おめでとうございます㊗️

[Shumpei♨️ | webエンジニア @seventhseven]

今日ですね〜
AIまわりのキャッチアップが自分の感覚値としてできるといいな

[こぎそ @kgsi]

Figma Designer Advocateの@hiloki とFigmaのアップデートやMCPとAIエージェントのワークフローなどについて、お話することになりました！

5月20日（水）お昼にオンラインで解説予定です、ご参加お待ちしてます👂🙏

[Shumpei♨️ | webエンジニア @seventhseven]

https://t.co/PK394wXUqw

使っていくうちにブラッシュアップさせていくかなと思います

[Shumpei♨️ | webエンジニア @seventhseven]

Webデザインの目を養うのにブラウザ拡張で簡単にメモれるものを作った。
なぜならスプシやnotionなど別コンテキストに切り替えた瞬間にめんどくささが200倍くらい増幅されるから。

メモ自体はCSV/mdでエクスポートできるようにしたり、自動保存したり。

[Shumpei♨️ | webエンジニア @seventhseven]

昔は違和感あるものに対して気にせず突き進んでみた結果、人生としては面白いけど全体見るとイマイチなことも多かった。

前兆としては、例えば買い物するとしてクレジットカードの認証失敗が2回続くとか。

ちょっとしたことだけど、明らかに普段起きないことが起きている時は立ち止まった方がいい。