UIデザイナーのための、開発用語カンペ📝（デザイン・画像ツール系）

IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『開発チームで働くUIデザイナーのための、開発用語カンペ』としてざっくりとまとめました。（追記：note用語で分類分けました✍️）

📝デザイン・画像ツール系

Zeroheight

FigmaやSketchのデザイントークンやコンポーネントを簡単に取り込むことができる。UIコンポーネントをドキュメントと共に残し、デザイン本心やルールを残すようなもの。Do/Don'tの記載も残せる。

デザイントークン
色、タイポグラフィ（font-family、size、Weight、letter-spacing、line-height ）、余白（padding）、shadow、角丸、アニメーション、アセットなどのUI値データ。

Lottie Files

CSSやJavascriptを使用せずに作成できる、オープンソースのWebアニメーションファイル形式です。Adobe AEで作成したベクターアニメーションから、拡張機能(Bodymovin)を使ってJSONファイルを書き出せる。JSONファイルをサイトに組み込むだけで、Webアニメーションの実装が可能。

デザイナーこそ知っとこ
デザイナーでもノーコードでアニメーションが作成できる。AdobeCCからプラグインをダウンロード。
参考：Lottieを使ったコード不要のロゴアニメーション制作をしてみた。
参考：3ステップで完成 LottieFiles for FigmaでLottieを作る。（youtube）

ついでに、Json

JSON (JavaScript Object Notation)。JavaScriptのオブジェクト記法を用いたデータ交換フォーマット。 Python、PHP、JavaScript、C++、Javaなど様々な言語で使用できる。

Adobe Firefly

言語のプロンプト入力で、画像の生成が行える。商用利用可（2023.9〜）。
Google Bardと統合予定。生成AIの利用には「クレジット」という概念があり生成するたびに消費される。

デザイナーこそ知っとこ
実際に生成してみるのが良い。https://firefly.adobe.com/

年始にAdobefirefly勉強会をやってみました🐱使用感など詳しくはこちら↓

その他の用語カンペ

その他、デザイン関する情報を「ハードル低く、分かりやすく」をモットーにnoteにまとめています。よかったら他の記事も読んでみてください。