FigmaのAsset libraryを常にインポート状態にする

FigmaのTeam設定。
大きな組織になるとアセットライブラリでコンポーネントを用意し、UIファイルにインポートして使うケースがよく発生すると思いますが、その際毎回手動でアセットライブラリを繋ぎ直すのってめんどくさいですよね。

そんなとき常に新規のページを作成したときに自動でアセットライブラリをつなげた状態にしておく方法があります。

ただしこちらはAdmin userの権限がないとできないの

Token(トークン)とDesign System(デザインシステム)の違いとは？

Design token(デザイントークン)という名前が普及してからしばしの時は経ちますが、いまだによくトークンを理解しきれていません。

そんなデザイナー歴18年目になる私なりに、Tokenを理解し、わかりやすく伝えようと思い記事を書いています。

どこまで正確かはわかりませんが、今現在の私の理解を書き綴りますので、解釈は自己責任でお願いします。

トークンの必要性

さて、デザイントークンとは

[Web] 規律性のあるマージンルールを定めてみる〜Design system Figma Variable マージン編〜

今までアプリのデザインをメインで携わることが多かったのですが、現在はWebサイトの開発に関わる機会が多く色々発見と注意すべき点がありました。

その中でも今回はマージンルールについてここ数ヶ月で試している内容をシェアしようと思います。

WebとAppで大きく違う点マージンルールの前に、一度WebとAppでの大きな違いについて記載しておきます。
当たり前のことではありますが、慣れていると制作が漏れ

IllustratorのTipsまとめ

Figma tips〜インポートしたインスタンスが壊れる〜

Figmaで外部ライブラリをインポートして使うことはよくあると思いますが、その際インポートしたインスタンスのレイアウトが崩れたり壊れていることがあります。

Figmaのバグらしいので、治ることを祈るしかないのですが、データの作り方で解消する方法もあるようなのでシェアしておきます。

よくあるケースで、テーブルのような上下のマージンがおかしくなっていて、Enterや編集をすると元に戻るけど、リロー

Figma tips〜コンポーネント一括解除〜

Figmaで作ったコンポーネントインスタンスでデザインを組んでいく際、古いデータと最新データを見比べたいときや、インスタンスに変更を加えたくない時があります。

そんな時は右クリックで「Detach instance」でポイント解除はできますが、ページ全体を一括で解除したいこともありますよね。

そんな時に使えるTipsを２つ紹介します。

Figmaの標準機能を使う

ひとつめはFigmaに標準

【命名規則】コンポーネントの名前はどうつけるべき？

はじめにアプリ開発に携わってから10年以上の月日が経ちましたが、思い返すと数年前はこんな課題がありました。

Design Systemやコンポーネントを使わない場合、開発面でも、対象範囲の把握が難しかったり、一括変更できなかったりなど、課題が多くありました。

上記の課題は、UI制作が成熟してきていて、Design Systemを作成することで解消できるようになりました。

Design Sys

Figmaで個別URLの該当箇所に飛ばない現象〜原因と解決策〜

最近よく起こっていた事象で、Figmaの共有URLをクリックしても、ファイルは開くけど該当箇所に飛ばない現象。
修正箇所の共有時にとても困っていましたが原因がわかったので記載しておきます。

その前に念の為個別リンクの説明を載せておきます。

Figmaの個別リンクとは

Figmaはオンライン上でアクセスと管理が可能なデザインツールです。
オフラインデザインツールとは違い、URLを共有することで

Figma玄人向け 痒い所に手が届くTips　〜便利な設定〜

FigmaはUI設計で欠かせないツールになりました。
UI設計で必要なさまざまな機能が盛り込まれています。

主要機能でもかなり多くのことができるのですが、使っていなかった、知らなかった、新しい機能を駆使したデザイン作成について、私が知って作業スピードが倍増したTipsを紹介します。
知らなかった人はこれをすることで、作業効率がかなり上がること間違いなしです。

Auto Layout編▼ テキス

Design Systemの作り方シーズン3〜透過を駆使しよう〜

Design Systemをどう作っていくかは、色々試行錯誤があります。
シーズン1とシーズン2を経て、プラスこんなことも考慮すると作りやすくなっていくという小技編のご紹介です。

今回は色について。
シーズン1で触れた、色のスタイルは設定しておきましょうというお話で、小さく「透過も一緒に作っとくと良い」という一文を書いていました。

なぜ透過があると良いのか、

例えばですが、背景色やテキストフ

Design Systemの作り方シーズン2〜コンポーネントの作り方〜

シーズン2です。
Desigh Systemって作るのめんどくさいですよね。(再)

シーズン1で紹介した最低限これだけやっとこう編から一歩踏み込み、
実際コンポーネントを作っていく時ってどうしたらいいんだっけ？
というところを紹介していsきます。

Atomic Design思考を取り入れようまずはAtomic Designというのをご存知でしょうか？
ご存知ない方はこちらをご覧ください。

A

Design Systemの作り方〜とりあえずこれだけやろう〜

Design Systemは近年Figmaの登場により飛躍的に注目を浴びていると思います。
でもDesign System って作るの難しくないですか？

色々な悩みがありますが、筆者も日々試行錯誤して何が一番良いんだろうと考えています。

結論、完璧なものを短期間では作れない。というところに落ち着きました。

まだDesign Systemは確立した絶対的ルールがあるわけではなく、各社色々と作っ