figma関係
FigmaのVariablesは、Min width（最小幅）やMax width（最大幅）にも設定できるので、画面幅に応じたフレキシブルなカラムデザインも（ある程度）数値制御できるようになります。コーダーの気持ちに寄り添ったデザイン！#Figma pic.twitter.com/JIvCWnGFW0
— けんじ / UX Designer (@kenji_clown5) July 6, 2023
DeepLのFigmaプラグインを使って、#Variables チュートリアルの日本語版を作りました！！
— てっちゃん / Designer (@tetchann) July 2, 2023
まだ試してない方はぜひこちらで遊んでみてください🙌https://t.co/blRKaf8Hee
🥳 Our LottieFiles for @Figma plugin just got an upgrade: we added vector mask support!
— LottieFiles (@LottieFiles) June 29, 2023
Now you can hide or reveal selected contents of your layers with the Figma to Lottie feature, allowing you to create complex visual effects & apply selective visibility to your animations. pic.twitter.com/0esRcxF65A
https://twitter.com/buninux/status/1672891376009183239?s=20
Finally, Figma is a capable tool for works-like-real prototypes. https://t.co/e8OOcJtz9Q
— Dmitry Novikov (@novikoff) June 26, 2023
Limitless possibilities with @figma Variables. I could do this for hours. pic.twitter.com/GHniUNYxPI
— Maher Sinjary (@mahersinjary) June 26, 2023
Working on super robust chart components in Figma.#uidesign #buildinpublic pic.twitter.com/EYSYVuxTjC
— Dmitriy Bunin (@buninux) June 25, 2023
Figma Genius: "Copilot" for design@Figma is now challenging @NotionHQ to be the most perfectly positioned generative AI company:
— swyx 🤖🥚 (@swyx) June 22, 2023
- rabid 4m designer fanbase with the most pain translating thought to product
- already owns your design system
- @zoink never misses
- just… https://t.co/O7UxuPMHUM pic.twitter.com/ionvS3TaT2
AutoLayoutに追加された折返しと、最小幅を組み合わせるとレスポンシブなカードのレイアウトが作れるのか。画像の縦横比固定のオプションが追加されれば完璧じゃないか。 #config2023 pic.twitter.com/v1SKQAS1gJ
— 鈴木慎吾 / TSUMIKI INC. (@shingo2000) June 23, 2023
Dang! @figma 's new variables and advanced prototyping are so freaking awesome 🎉! Look what I can make with only 1 frame, 2 components. Goodbye noodles! My next wish is animation responses to when changing variables 🙏 pic.twitter.com/g4Usrc8smH
— Duy Luong (@duyluongdesign) June 22, 2023
variablesの説明 3:50くらいから
figmaのmin-maxためした。ハレルヤ pic.twitter.com/zsb0U5oCyn
— こびと (@kobitoCode) June 22, 2023
Figmaに搭載される、テキスからUI 生成するGeniusのデモ動画を見るに...
— しょーてぃー / Experience & Prompt Designer (@shoty_k2) June 22, 2023
競合サービスと違い、チャットインターフェースで段階的にパーツレベルで生成することができるのがとても良い。pic.twitter.com/Ch4MxmWdEC https://t.co/y4dSoq1OEC
Figmaのアップデートで追加された、Auto Layout「wrap」、Min widthを使うことで、3列→2列→1列のレスポンシブデザインができるようになったよ！さらにLocal variablesと組み合わせることで、配置した画面によって自動的に幅を変えることもできるよ！#Figma pic.twitter.com/gJ4gGyapER
— けんじ / UX Designer (@kenji_clown5) June 22, 2023
Apple's visionOS design kit for Figma is out 🔥https://t.co/UMtgybIybH pic.twitter.com/zjBlPJ2orA
— Andreas Storm (@avstorm) June 21, 2023
プラグインでは無いが
全デザイナーの教科書みたいな感じだ。永久保存版。
— しん🐣PdM (@U2Qshinshiro) June 20, 2023
想像以上に凄かったhttps://t.co/yuY1elbfM8 https://t.co/A9lctCLuBM pic.twitter.com/V7DViAxzaH
Apple公式のデザインリソースがFigmaで提供されている。 https://t.co/Bry3exCwsc
— 鈴木慎吾 / TSUMIKI INC. (@shingo2000) June 7, 2023
■Figmaプラグイン17選。Webデザイナーが使い続けているプラグインを紹介
https://buildstd.com/figma-plugins/
■DeNAのMiyamoto sanがまとめているサイト
https://masanori.notion.site/d75c1dad4f53488fb6c5db21225cc4f8?v=10059b0c06a84aa580c00707a22c1193
■
アイソメトリックな画像をサクッと作れるFigmaプラグインを紹介します。
— Miyamoto | DeNA Design (@motomiya333) February 28, 2023
レイヤーを選択して向きを選択するだけで立体感のある画像を作れます。https://t.co/s24QLVqcta pic.twitter.com/2xgwsgIDra
画面遷移図を簡単に書けるFigmaの定番プラグインを紹介します📐
— Miyamoto | DeNA Design (@motomiya333) February 6, 2023
プラグインを起動してSHIFTを押しながらフレームやオブジェクトをクリックするだけで線が繋がり画面遷移図がすぐにできちゃいます。
しかもオブジェクトを動かしても追従するのが👍👍👍https://t.co/qtWICGhrG6 pic.twitter.com/LXEfX1Xb01
Figmaでレスポンシブ対応レイアウトを再現できるプラグインを紹介します。
— Miyamoto | DeNA Design (@motomiya333) March 9, 2023
サイズ別に画面を作成してブレイクポイント設定すると、実装に近いファイルを作ることができます。https://t.co/VUBJl4wU7l pic.twitter.com/f0CSfTTqns
👇プラグインの使い方https://t.co/K0AFgAr6bt
— Miyamoto | DeNA Design (@motomiya333) March 9, 2023
👇サンプルファイルhttps://t.co/lR2Sh1gUu5
以前紹介したアイソメ加工プラグインが、もしかしたらAuto Layoutを適応したテキストに対しても編集機能が生きたままで加工できるかも？と思って試してみたらできた〜😄
— Miyamoto | DeNA Design (@motomiya333) March 15, 2023
非破壊編集だからガンガン応用できそう。https://t.co/s24QLVqcta pic.twitter.com/i1PaBQbIrG
Figmaで作るのが難しいウェーブを簡単に作れるプラグインを紹介します。
— Miyamoto | DeNA Design (@motomiya333) March 17, 2023
波形から直線的なものまで豊富なプリセットが用意されており、調整次第でかなり面白いシェイプが作れます👍
作ったシェイプをイラレに持っていくのもアリですね。https://t.co/CwjiBNbwZV pic.twitter.com/NO9yxQd1ew
デザインの設計書を一瞬で作れるFigmaプラグインを紹介します。
— Miyamoto | DeNA Design (@motomiya333) April 10, 2023
コンポーネントに適応したオートレイアウトの間隔やパターン・スタイルなど、設計の詳細が全て自動生成されます👏👏👏（泣けるほど素晴らしい🥹）
Figmaを使い慣れていない開発者に渡す際にも役立ちます。https://t.co/rMH4GHIW5u pic.twitter.com/V9Aae0JQTa
地味に時間のかかるデザイン素材の整列を一瞬で終わらせるFigmaプラグインを紹介します。
— Miyamoto | DeNA Design (@motomiya333) April 27, 2023
好きな数値でグリッド列・間隔・並び替えを設定するだけで綺麗に整列してくれます👍
継ぎ足して作ることが多いアイコンなどの整理にオススメです。https://t.co/yrzzvIRdtm pic.twitter.com/KUgEh8nY7r
デザインのマージンを整えるFigmaプラグインの紹介。
— Miyamoto | DeNA Design (@motomiya333) January 30, 2023
間隔がマチマチなデザインは実装しづらいので、ルールを持たせたスペーサーを利用することでデザインにルールを持たせることができます📐
カスタムショートカットに設定するぐらい愛用しています。https://t.co/dlvhK5Nvw8 pic.twitter.com/uGmVsgz6nb
作るのが難しいグリッチノイズを1クリックで作成できるFigmaプラグインを紹介します。
— Miyamoto | DeNA Design (@motomiya333) May 9, 2023
グリッチの幅や乱れ具合を調整でき、カラーもプリセットから選べるので、誰でも高いクオリティで作れます👍
作成後に編集できるのも素晴らしい。https://t.co/5HPK4QwSBb pic.twitter.com/B0emcTpSRr
1
Figmaのプロトタイプ機能で作ったアニメーションをプラグイン経由でLottieに書き出せるようになったので試してみた。
— 鈴木慎吾 / TSUMIKI INC. (@shingo2000) May 18, 2023
- アニメーション作成
- 実装用にLottie書き出し&WebプレビューURL発行
- Figmaに配置する用のGifアニメの生成
これらがすべてFigma上で完結するのが最高。https://t.co/wL9XMqkS2k pic.twitter.com/uusfv2zm4J
https://twitter.com/shoty_k2/status/1651724647342432257?s=20
地味に面倒なロングドロップシャドウを一瞬で作れるFigmaプラグインを紹介します。
— Miyamoto | DeNA Design (@motomiya333) February 27, 2023
角度と距離を入力してprojectボタンを押すだけで完成。シェイプで出力されるので後から色の調整も可能です👍https://t.co/pEQecZg00D pic.twitter.com/O4M7f3NjtJ