マガジンのカバー画像

figma

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

#UI

Figma でざっくり作るプロトタイピング

こんにちは、スペースマーケット デザインチームの伊東です。 現在スペースマーケットの UI デザインは Figma で行っています。以前は Adobe XD や Sketch を使っていたのですが、わりと最近になって移行しました（デザインツールに関して、導入を決めたきっかけやメリットに関しては改めて記事として投稿できれば幸いです）。 私自身、スペースマーケットに入社してから初めて Figma を触ったのですが、あまりドキュメントを読み込まなくてもすぐに使える（≒ Ske

Spacemarket…

Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。 ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。（スマートキャンプでもまだまだ模索中......） スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet（ビスケット）」という新サービスを発表をしました。 まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP

スマートキャンプ　デザ…

XD→Figmaに変えた理由とその運営方法やメリットについて

こんにちは、COUNTERWORKSの駒ヶ嶺(@Koma_Studio)です。 弊社では今までXDを用いたUI制作を行っていましたが、今年の3月に入ってからFigmaの試験運用を始め、現在は本格運用を始めました。 今回はどのような背景がありXDからFigmaに移行したのかを紹介するとともに、どのように導入を進め、現在はどのように運営をしているのか書いていこうと思います。 導入背景1. デザインシステムをアップデートした時の更新コストFigmaを導入する前の話ですが、弊社

駒ヶ嶺 亮一

【まずやること編】 #Sketch から #Figma にお引越し

すでにお引越しした方、もう少し深く知りたい方は 【チームライブラリ活用編】デザインシステムをFigmaでもっと強くする もあわせてドウゾ〜 ・・・ ノゾエ（@conoito）です。 今日は、みてねのデザインデータが移行されるまでをご紹介します。 移行完了までのイメージを掴むための参考にどうぞ！ ・・・ 今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。 あれから半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができて

nozoe | con…

【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【まずやること編】 デザインデータをSketchからFigmaにお引越ししよう もあわせてドウゾ ・・・ ノゾエ（@conoito）です。 今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。 約半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。 今日は、Figmaに移行してから行なった、 コンポーネントの整備からスタイルの最適化、 さらには、最適化したデザインシステムをアプリに適用するまでを、もりっとお話

nozoe | con…

FigmaのコンポーネントをVariantsで状態管理する

こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。 例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使う

ふじけん / kens…

Figma でモーダルやポップアップ等の状態変化をプロトタイプする

こんにちは！　UIデザイナーのmarinです。 1年半前にメインデザインツールをFigma に移行した際の記事を書いたのですが、理由のひとつにプロトタイピングがしやすいことを挙げていました。 今回はその件についての深堀りを、Figma のプロトタイプを実際の業務でどのように用いているのか例を挙げて書きます。 ※Figma のプロトタイプが初見の場合は、公式のFigma Tutorial: Prototyping を見ておくのをおすすめします。 Figma のプロトタイプの

marin

Figma便利プラグインまとめ

★5のプラグイン　▼Text Styles Generator登録済みのテキストStylesを別ファイルに移植できる テキストスタイルを保存しているファイルから Plugin > Text Styles Generator > Draw current styles　で登録済みのスタイルをテキストで書き出してくれる そのまま別ファイルに移動させ　Generate Text Styles をするとスタイルを移植できる Chroma Colorsカラーを一括でColor S

Nviveto

プロダクトデザイナーがオススメするFigmaプラグインまとめ

こんにちは。Sansanでプロダクトデザイナーをしているごあんです。 最近、チームでより快適にFigmaを運用するためにあれこれ整備を進めています。その１つとして、各メンバーがよく使うプラグインを共有し合い、 💡 より多くのメンバーが使っている 💡 業務効率がアップする（弊社の場合） 　 ex) 仕様検討やデザインパターンの量産など といった視点で、簡単な概要や「新入社員に対するオススメ度」を付けて管理しているものがあります。これには、新しいメンバーを迎え入れた際のオンボ

Natsuki Goan

モバイルアプリ日本語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…