Figma Learning

Figma の Dev Mode で UI の確認を楽にする

こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。公式のチュートリアルはこちら↓ Dev Mode とは？Dev Mode はデザインデータを実装担当者が見るときのモードです。

デザイン作業をもっと快適にするFigmaのテクニック集

はじめにこんにちは！i3DESIGNデザイナーチームです。今回は、チームでFigmaを使ってデザインしている方に向けた実務で活かせるFigmaのノウハウをお届けします！ポイントを押さえて、作業のスピードをアップしましょう！ 1. ComponentVariant properties と Component propertiesの使い分け FigmaのComponentには「Variant properties」と「Component properties」の2種類のプロ

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

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

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

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

Figma のVariants 機能でコンポーネントの管理を最適化する

こんにちは！　UIデザイナーのmarinです。 2020年10月末にFigma に搭載されたVariants 機能、便利ですね〜！　Figma はこんなことができたらいいのになぁと思うことをどんどん実現してくれるので大好きです。早速スペースマーケットでもVariants 機能を活用しているので、そもそもVariants 機能とは何か・何が便利なのかという簡単なおさらいと、実際の適用に至るまでを紹介します。 Variants 機能とは？複数のコンポーネントをひとつにまとめる

Figma のAuto Layout機能を適応して楽をする

こんにちは！　UIデザイナーのmarinです。 2019/12/6 にFigma がアップデートし、Auto Layoutという機能が搭載されました。このAuto LayoutをFigma ユーザーの皆様がどう活用しているか知りたくて、まずは自分から紹介してみようとこの記事を書いています。 Auto Layoutとはその名の通りなのですが、UI上のサイズ変更やオブジェクト等の入れ替えを自動的に調整してくれる機能です。Sketch にもSmart Layout というよく似

Figmaのオートレイアウトを完全に理解した話

どーもーUI/UXデザイナーのうっくんです。ちょっと前にFigmaにオートレイアウトという機能が追加されました。最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多

フォローしませんか？

#figma入門