Figma Config 2023 まとめ

3
Figma Japan @FigmaJapan

#Config2023 でデザインと開発を橋渡しする機能が登場しました。 開発者のためのスペース、開発モード バリアブル 高度なプロトタイピング オートレイアウトのアップデート フォントピッカー ファイルブラウザーのリデザイン そしてAIによるFigmaの未来を見据え、@Diagram の買収を発表しました。 pic.twitter.com/haKSZVxJZm

2023-06-22 03:30:36

1. 開発者のためのスペース、開発モード

Figma Japan @FigmaJapan

#Config2023 発表その1:開発モード デザインをコードに素早く変換するための機能を備えた、開発者のためのFigmaの新しいスペースです。 詳しくは、figma.com/blog/introduci…をご覧ください。 開発モードの使い方は以下の通りです👇。 pic.twitter.com/dDRmPqwtu9

2023-06-22 04:47:48
Figma Japan @FigmaJapan

🏃‍♂️ 素早くコーディングに取り掛かる 開発モードは、デザイン用のブラウザ・インスペクタのようなものです。 ファイルをナビゲートしてコード、仕様、デザインシステムのドキュメントを簡単に見つけることができ、より速くビルドを開始できます。 help.figma.com/hc/en-us/artic… pic.twitter.com/959oCAMoyv

2023-06-22 04:47:49
Figma Japan @FigmaJapan

👀 デザインのステータスや変更を常に把握 開発者は、セクションラベルで開発準備中のものを確認できるようになりました。これにより、フレームのバージョン間の変更を比較しやすくなり、ビジュアルや仕様のわずかな違いも見つけやすくなります。 pic.twitter.com/B3gW2Qzzxy

2023-06-22 04:47:50
Figma Japan @FigmaJapan

🛠 毎日使用するツールとの連携を維持 Jira、@storybookjs@GitHub などのツールを開発ワークフローに統合したり、組織用のカスタムプラグインを構築できます。 また、ビューアクセスでプラグインを使用できるようになりました。 pic.twitter.com/LjfxGhUbfc

2023-06-22 04:47:51
Figma Japan @FigmaJapan

👩‍💻 VS CodeにFigmaを VS Code 用の拡張機能によりアプリを切り替えることなく、デザインに基づくコードのサジェストで、より速く作業を進められます。 →Figmaファイルのインスペクト →デザイナーとのコラボレーション →エディタ上の通知 help.figma.com/hc/en-us/artic… pic.twitter.com/K2QveuZAMj

2023-06-22 04:47:52
Figma Japan @FigmaJapan

開発モードは現在ベータ版として利用可能で、2023年中は無料で利用できます。 最新のPlaygroundファイルで、すべてをお試しください! figma.com/community/file…

2023-06-22 04:47:53

2. バリアブル

Figma Japan @FigmaJapan

#Config2023 発表その2:バリアブル 変数を使用して、さまざまなブランドテーマやデバイスフォーマットなど、適応可能なデザインを作成できるようになりました。また、変数はトークンとしてエクスポートできます。 👇 バリアブルの実際の操作をみる pic.twitter.com/ZQWPutRb32

2023-06-22 05:11:01
Figma Japan @FigmaJapan

🌈 変化への対応 変数には色、数値、文字列を指定することができ、複数のモードで異なる値を持つことができます。ライトモードとダークモード、その他諸々が可能です。 help.figma.com/hc/en-us/artic… pic.twitter.com/bNYyogIQqE

2023-06-22 05:11:05
Figma Japan @FigmaJapan

📏 別次元(Another Dimension)のデザイン 数値の変数を使用すると、幅/高さ/パディングなどに適用して、異なるレイアウトを実際に切り替えることができるようになりました。 pic.twitter.com/JFzlwycwNg

2023-06-22 05:11:06
Figma Japan @FigmaJapan

🌎 ワンクリックでローカライゼーション また、文字列の変数を使えば、複数の言語のコンテンツを取り込んだり、入れ替えたりと、本当にグローバルなデザインを実現できます。 pic.twitter.com/0QY4X3X7tE

2023-06-22 05:11:07
Figma Japan @FigmaJapan

👩‍💻 API で本格的に デザインシステムをスケールアップするためのAPIドキュメントを更新しました。 👉 Variables プラグイン API: figma.com/plugin-docs/wo… 👉 Variables REST API(ReadとWrite、Enterpriseプランのみ): figma.com/developers/api… pic.twitter.com/BIrwRfi8wK

2023-06-22 05:11:10
拡大
Figma Japan @FigmaJapan

😎 プラグインがお手伝いします 私たちのDeveloper Advocateである@jak___eと@actuallyakbarは、あなたが始めるのに役立つ多くのプラグインを公開しています。 👉 変数インポート/エクスポートプラグイン: github.com/figma/plugin-s… 👉 スタイルから変数への変換: github.com/figma/plugin-s… pic.twitter.com/YAx6brAxWW

2023-06-22 05:11:18
拡大
Figma Japan @FigmaJapan

デザインのスケーリングを開始し、Playgroundファイルでバリアブルを試してください!プランによって利用可能な機能は異なります。 figma.com/community/file…

2023-06-22 05:11:19

3. 高度なプロトタイピング

Figma Japan @FigmaJapan

#Config2023 発表その3: 高度なプロトタイピング より少ないステップ/フレーム/接続で、よりリアルなプロトタイプを作成するための新機能を追加しました。 より少ない作業で、より多くのイテレーションが可能になります。 👇 プロトタイピングの良さに飛び込もう pic.twitter.com/MlpnAzrC6M

2023-06-22 05:26:20
Figma Japan @FigmaJapan

🄧 バリアブル再び 今日、デザインだけでなくプロトタイピングにも使えるバリアブルを発表しました。バリアブルを使用することで、「バリアブルを設定」という新しいアクションタイプのロックを解除することができ、インタラクションがよりダイナミックになります。 help.figma.com/hc/en-us/artic… pic.twitter.com/C1ufnjrC7D

2023-06-22 05:26:21
Figma Japan @FigmaJapan

➕ 自分を表現する 変数の作成と割り当てができるようになったので、足し算や引き算のように「バリアブルを設定」アクションで式を使うことで、1フレームにさらに多くのアニメーションを詰め込むこともできます! pic.twitter.com/5f26i1b1xk

2023-06-22 05:26:22
Figma Japan @FigmaJapan

☝️ もし条件分岐があれば 複数のアクションを作成することができ、その上よりカスタマイズ可能なフローを作成するために条件分岐でインタラクションを作成できるようになったので、とても便利です。 pic.twitter.com/rwr5ikpvLC

2023-06-22 05:26:23
Figma Japan @FigmaJapan

🤩 すべてを一緒に見る これらのアクションをすべて積み重ね、新しいインラインプレビューを使用して、デザインとともにプロトタイプをプレビューすることで、反復し続けることができます。 pic.twitter.com/h26BKxbpxo

2023-06-22 05:26:23
Figma Japan @FigmaJapan

高度なプロトタイピング機能をすべて備えたPlaygroundファイルで、実際にやってみましょう!プロフェッショナルプラン以上でご利用いただけます。 figma.com/community/file…

2023-06-22 05:26:24

4. オートレイアウトのアップデート