デザインツールを使いこなす｜かやま

【Figma公式推奨】使い方ではなく、運用方法マニュアル2024年版

2024年リリースのMulti-Editに対応しました。 Figmaconfig2023にリリースされたVariables,Developer mode,NestedComponentに対応しました。 Figmaconfig2022で発表されたComponent PropertyとAutoLayoutについても追記しました。世の中のFigmaの日本語ドキュメントがショートカットや基本機能の解説に終始していることで、毎回チームに運用マニュアルをインストール必要が出てきて

Figmaの新しいプロトタイピング「variables」を触ってみた話

公式ドキュメント課題プルダウンメニューをクリックしたら、非活性状態のボタンをアクティブにする。フレーム1つで。完成品変化させたい対象の設定このマークをクリック新しいvariableを作成変化のトリガーの設定Interactionの追加変化後のpropertyを書き込むこうなるプルダウンが複数ある場合など、複雑な機能だと重宝しそう。

FigmaのVariablesを使用してダミーコンテンツを管理する

Figmaの新機能としてVariables（変数）が追加されました。Variablesにカラー、数値、テキストを定義しておき、アートボード上のレイヤーの各種プロパティに適用して利用することができます。公式のPlaygroundを見ると、ダークモードとライトモードなど、複数のモードを持つデザイントークンを管理するような使い方が想定されているようですが、これをデザイン内で使用するダミーコンテンツの管理に使用してみたいと思います。ダミーコンテンツとは？ダミーコンテンツとは実

FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話

いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。改めて軽く自己紹介昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。（ここに関しては入社半年エントリー記事で詳しく書く予定）普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でも

Figmaでここまで！？ゼロからはじめるUIアニメーションデザイン

クックパッドデザイナーのよーた（@yotaszk）です。突然ですが、あなたは「Figma」にどんなイメージをもっていますか？ UIデザインツール？、プロトタイプングツール？・・・もしそのイメージだけに留まっているなら、めっちゃ勿体無い。めっちゃ勿体無いです（本当に勿体無いので2回）。もちろん基本的な機能は、UIデザインやプロトタイピングです。ただし、Figma Communityのプラグインを活用することで、3Dデザイン・アニメーションなど、ハイクオリティなデザインを

Figma で作る、アイコン

突然ですがアイコン作ってますか🤤 最近は Material Symbols やその他無料のアイコンセットも多いので、イチから作ることも少なくなったように思います。そのせいか、まとまった記事が観測できなかったのでまとめてみました。本記事の作り方については必ずしも正解とは限りませんが、書いてある操作を大体覚えとけば一通りのアイコンが作れるようになる、的なものを目指します。アイコンの品質の上げ方に関してはこういう note もあるみたいですね。またこの記事を通じて、「〇〇

Figmaのプラグインを使って、ノーコードでHTMLメールを生成する

こんにちはフロントエンドエンジニアの峯です。 HTMLメール用の作成をHTMLコードベースで作成する場合、想像以上に課題が多くあります。通常のWeb上で利用するマークアップ手法では、デザイン崩れなどが発生してしまいます。また、デザイナーがデザインしたものをエンジニアマークアップするため、もちろんその分の工数が発生します。主な課題Tableレイアウトを使ったレイアウトが基本通常のWebページ開発で利用するような<header>や<footer>、<div>などを利

Figmaでフォント選びが簡単にできるプラグイン【Better Font Picker】

※この記事は以前ちょっと株式会社社員ブログで公開していたものです。こんにちは。デザイナーのyuiです。今回はFigmaでフォント選びが簡単にできるプラグイン【Better Font Picker】を紹介します。 Better Font Pickerとはフォントを反映した状態で一覧表示してくれるプラグインです。フォントの形を確認しながら選ぶことができます。（インストール済みのフォントに限ります。）インストール方法 CommunityのPluginsから「

Figmaがもっと楽しくなる！プロトタイプでアコーディオンUIを表現する方法〈応用編〉

こんにちは。 株式会社アジケでUIデザイナーをしているやまもとです。先日「Figmaがもっと楽しくなる！プロトタイプでアコーディオンUIを表現する方法」を投稿したのですが、今回はさらにリアルな動きに近づけるため応用編を書いていきたいと思います！前回の記事を読んだ方も、今回が初めてという方も是非最後までお付き合いください！前回の振り返り前回のゴールは1つずつ開閉する動きをプロトタイプで制作しました。今回はこの応用編として全てのアコーディオンが同時に開閉できる動きを

Figma Config 2022 で新登場した機能のショートカット・テクニックまとめ

Figma Config 2022 でも様々な機能が出ました。 Individual Stroke, Absolute positioning, Component Properties… これに付随してチュートリアルを見ただけでは分からない隠れたショートカットなどもたくさんあります。この記事ではそんなテクニックたちをガッと紹介していきます。パディングを昔ながらの一つの入力欄で操作する方法 Padding は今回の Auto Layout の変更で Vertical

フロントエンドの開発を少し楽にするFigmaでのコンポーネントデザイン

こんにちは。株式会社Caratでロボキャリアアドバイザーアプリ「GLIT」のUIデザインとフロントエンド開発を担当している北國です。プロダクトを成長させる過程で日々機能の追加・変更・削除があるわけですが、UIデザイナーとしてはそれらの変更に強いFigmaファイルを作り、できるだけ無駄なUIデザインの工数(※1)を削減したいという想いがあります。また、UIデザイナー目線だけではなく、フロントエンドエンジニアが開発しやすいFigmaファイルを作り、開発の効率を良くしたい

Figmaのすごい新機能7選｜最新32アップデート情報より厳選（2022.1.27時点）

こんにちは！スマートキャンプデザイナーの柿澤です。 1月26日にFigmaから機能アップデートの発表がありました！今回は32ものマイナーアップデートがあり、前回に引き続き痒いところに手が届くようなプチ嬉しい内容がありました。この記事ではその32個の新機能の中でも特にいいなと思った7つのアップデートについて紹介していきます！前回のアップデート内容についてはこちらをご覧ください！ ▼公式Twitterでのアップデート発表 ①HEIC形式の画像の取り込みが可能にiP

みんなFigmaの運用どうやってる？ REALITYの運用方法を公開しちゃうよ！

運用方法が変わったので新しく記事を書きました↓↓ UIデザイナーの超簡単です。最近は、インド亜大陸のムスリムにその起源を持つ混ぜご飯料理「ビリヤニ」作りにハマっています。 REALITYではデザインツールとしてFigmaを使っているのですが、運用方法を公開している企業や個人が少なく、「これって本当に効率的なんだっけ？」と思うことがあります。そこで、まずは自分たちのやり方を公開して、「こっちの方がいいよ！」「うちはこうしてるよ！」みたいな人がもっと増えてくれるといいなー

色のコントラスト比をグリッド表示で一覧化できるFigmaプラグイン「Contrast Grid」をつくりました

ダウンロードはFigma Comminityから。どういう動作をするものかは下記の動画でご覧ください。このプラグインの元はEightShapes社が数年前につくったContrast Gridです。背景色と前景色を入力すると、それらの組み合わせとそのコントラスト比をグリッドで表示してくれるツールです。 WCAGの達成基準1.4.3にある4.5:1というコントラスト比を保てる色の組み合わせを探すのに使えるひとつの方法とツールではあるんですが、Figmaでの作業で効率的に

デザインツールを使いこなす

記事一覧