マガジンのカバー画像

Figma Learning

24
本
運営しているクリエイター
akihiro

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

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

ふじけん / kens…

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

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

i3DESIGN De…

Variants と Variables を組み合わせて色々モード切り替えできるようにする

昨日ワクワク機能である Variables がリリースされました。 https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma Variables では標準で色、数字、文字列、真偽値の4種類の値が指定できますが、Variants と組み合わせることでより色々なものをモードと共に切り替えられるようになります。 下記は画像を切り替えている例です。 が、まあこれが中々

seya

FigmaのVariablesを実際にプロジェクトに導入してみるなら、どこから使うか

Figmaの新機能のVariablesは、これまでの機能に比べるとできることが多く、今運用しているプロジェクトに何から導入していったらよいか模索している方が多いと思います。 Flappy Birdが作れたり、ポケモンを進化させることができたりと、Variablesの活用事例は多岐に渡りますが、実際のWeb・アプリのUIデザインにおいて、自分ならまずどこから導入してみるかをご紹介します。 一番手軽に導入でき、威力を発揮できるのはNumberのGapとRadius色々なことが

kiiita