マガジンのカバー画像

figma

54
本
運営しているクリエイター
megumi_s

FigmaのEffect〜FrameとObjectでエフェクト効果が違う件〜Spreadの罠

Figmaには色やテキストをデザインシステムとしてファイルごとに登録できる便利な機能があります。 ガイドやEffectsも登録できるのがありがたい！ 例えばホバーした時の影をEffects Stylesに登録しておけば このように一発でホバー状態を表現できます。 が、 この機能を使い出してハマったことがあるのでここで紹介しようと思います。 このように、登録している同じEffect Stylesをかけても明らかに濃度が違うものができてしましました。 ちなみに左はF

Nviveto

Figma操作でムダな時間を費やしていませんか？Figmaの生産性up術6選

寒気がするタイトルですみません。 1年以上前からFigmaでバナー作成していましたが、UIデザインを学ぶ上でFigmaの使い方を再学習しました。再学習するまで無駄な動きをしていたことを認識し、過去の自分に悔やんでいました（心情としてはスラムダンクの三井寿のような気持ちです）。 そこでこの記事では、before→afterの流れで、ムダな動きをしていないか問いかけながら、生産性向上のために動きをまとめました。またbefore→afterでGIFを使っていますが、どちらも7秒

ゆん

Figmaで既に作ってしまったフレーム(Frame)をコンポーネント(Component)に置き換える方法

Figmaでデザインを作る際、例えばサイトの設計をしている場合、ワイヤーをどんどん作っていって、いざ形が決まったのでコンポーネント化（ライブラリ化）しようと思ったら後戻りがえらいことになっている！！ ちゃんと最初から設計して、最小限のコンポーネントを整理してから始めればこんなことにはならないかもしれませんが、プロジェクトやUIを考える際に適時適切なデザインで作り直しちゃうとこういう問題がよくでてきます。 例えば、 この画像のように、結構項目が多いものをコンポーネント化せ

Nviveto

【永久保存版】 デザインシステム「カラーパレット」を徹底調査しました

サービスのカラーパレットをバージョンアップさせるべく、デザインシステム「カラーパレット」を調べることになりました。 開発チームからの要望としては「どうせ新しくするなら、漏れのない状態を目指したいね」ということで、iOS/Androidのガイドラインから始めて、話題になっていたAmebaスピンドル、さらに他社のデザインシステムも含めて徹底的に調査しました。 先に調査結果ですが、大枠でまとめるとこのような形となりました。 ・色は、明度差も含めたトーンをパレットとして持ってお

Akinosuke

モバイルアプリ日本語UIキットの公開

この記事では、三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（JDD）において、体験デザインを担うExperience Design Team（デザインチーム）の研究活動で作成したFigma用日本語UIキットについて紹介します。 JP + UI Kit とは？JP + UI Kitは、iOSとAndroidのモバイルアプリに対応したFigma用日本語UIキットです。AppleのHuman Interface Guidelines

Japan Digit…