【Figma】スクロール時のオブジェクトを固定し追従させる方法 | kadomineblog(カドミネブログ)｜グラフィックデザイン・イラスト
スクロール時のオブジェクトを固定する方法 ページ全体 実際に設定していきます。 説明のため事前に簡単なFrameや赤や緑のオブジェクトを用意しました。 レイヤー構成は記事の一番下の画像を参照してください。 Header下の赤いオブジェクトを固定化して下にスクロール中でも常に表示されるような仕様です。 スクロール用に縦を長くしておきましょう。 オブジェクト 今回スクロールした際に、赤いオブジェクトを固定化したいので赤いオブジェクトをクリックし、右側パネルのプロトタイプを選択します。 そこから下にあるスクロール動作から位置を「固定」に変更します。 注意 赤オブジェクトのスクロール動作を固定にしましたが、緑の色のHeader&Footerオブジェクトのスクロール動作を変更する必要があります。 位置を「親とスクロール」に変更しておきます。 こうすることで赤オブジェクトのみがスクロール中に固定され、
Figmaのデザイン制作が楽になる時短プラグイン30選
ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり
【Figma】コメントノートを使ったら、画面が見やすくなりステータス管理しやすくなった
Figmaでワイヤーやモックアップを作成する際に、デザインや仕様のコメントを添えることがあると思うが、こちらのコメントウィジェットが使いやすそうと思ったので備忘録として記載。 https://www.figma.com/community/widget/1168789542647357646 Figmaデフォルトのコメント機能は使いづらいFigmaでワイヤーやモックアップを作成する際に、デザインや仕様のコメントを添えることがあると思うが、Figmaのデフォルトのコメント機能はバルーンのポップアップ表示なので、一覧性に乏しい。 こちらは、方言を話すおしゃべり猫型ロボット「ミーア」のアプリのモックアップだが、Figmaのコメントだと下記のようにバルーン表示になり、hoverして初めて中身のコメントを閲覧できる。 https://mia-cat.com こちらは、メルプの過去のモックアップの画面
アプリのUIをFigmaに移植した話（1/2） ｜みんなの銀行 公式note
こんにちは、みんなの銀行プロダクトデザイナーの中野です。 みんなの銀行ではこの度、デザインツールをAdobe XDからFigmaに全面移行しました。このnoteではその経緯やTipsを2回に分けてご紹介したいと思います。 以前、デザインシステムの構築に取り組んでいる話を綴りましたが、今回はその続編のような内容です。 👇筆者の別のnoteを読む デザインツールの移行という一大事デザイナーであれば経験したことのある方は多いかと思いますが、デザインツールの乗り換えってかなり大変ですよね。 Photoshop、Fireworks、Sketch、XDなどなど、時代の変化とともに新しいデザインツールへの乗り換えは絶えず発生しますが、手間を惜しんでその場しのぎのファイル移行を行なってしまうと、のちにカオスな状況に陥ってしまうことがあります。 よくあるのが、古いツールから新しいツールへの移行に自動変換ツ
［新連載］Figmaを使い始めるUIUXデザイナーのための基礎知識 乗り換え時に知っておくべきポイントとは
本連載では、2021年にFigmaを導入したBASEのデザイナー陣が、Figmaの活用やチームでワークさせるための方法について解説していきます。初回は「Figmaの基本と乗り換え時のポイント」がテーマです。 こんにちは。BASE株式会社の渡邊です。ネットショップ作成サービス「BASE」のUIUXデザインを担当しています。 ネットショップ作成サービス「BASE」は、専門知識がなくてもデザイン性の高いネットショップを誰でもかんたんに無料で開設できるサービスで、個人でもかんたん・スピーディに決済機能を導入できる仕組みを提供しているのが特徴です。 そんなBASEは、ご利用のショップオーナー様の利便性や売上向上などを目的に、常に新しい機能の提供や既存機能のアップデートを実施。プロダクトの規模は年々大きくなっています。そんなBASEという大規模プロダクトのUIUXを支えてくれているデザインツールが「F
Adobe XDユーザーがFigma（フィグマ）でワイヤーフレームを作ってみた【共有編】 | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回はワイヤーフレーム（WF）を作成しながらFigmaの機能についてご説明しました。 今回は作成したWFを他の人と共有する方法についてご紹介いたします。 共有は、WFなどの作成したデザインデータを他者と共同編集ができたり、閲覧ができたりする機能です。また、共有時には欠かせない、コメント機能もありますので、併せてご紹介します。 3つの共有方法と注意点 Figmaを共有する方法は3つあります。 Figmaに直接招待する 共有用リンクを発行する 外部ツールなどに埋め込めるコードを発行する ※ 共同編集をする場合は、共有された側もFigmaアカウントを持っている必要があります。 注意：機密性が高い情報を取り扱う場合 機密性が高い情報を取り扱う場合には、必ず公開範囲を確認してください。 公開範囲を「リンクを知っているユーザー全員」とした場合、リンクの流出により意図しない相手も閲覧や編集ができてしまい
figmaのvariantsの作り方とできること - bagelee（ベーグリー）
はじめに この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay4といつもお世話になっているデザイン女子部さんのデザイン女子部Advent Calendar 2020の４日目の記事です！ 昨日は「【Figma】Auto Layout がアップデートされました！」についての記事でした。 【Figma】Auto Layout がアップデートされました！ 本記事ではFigmaが2020年の11月に新しく発表した Variantsについての使用メリットや使い方をご紹介します！ Variantsは発表された当初から非常に注目されていた機能ですが、今回の記事ではFigmaのVariantsを使うメリットそしてVariantsの作り方や既存のコンポーネントをVariant化する方法を合わせてご説明します。 variantsとは？variantsのメリット Variantsとはコン
Figmaのオートレイアウトを完全に理解した話｜UI/UXデザイナー うっくん
どーもーUI/UXデザイナーのうっくんです。 ちょっと前にFigmaにオートレイアウトという機能が追加されました。 最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。 オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多かったこれがとても実用的で、業務効率も上がりそうなので、すでに実戦投入しています。 かなり使いこなせてきたので、そのポイントを以下の３段階に分けてご紹介していきます。 1. 基本機能, 2. 発展系、そして、3. 現時点ではできないこと これを読めば「オートレイアウト完全に理解した」と言えるようになります。Figmaのオート
Adobe XDとFigmaの違い｜松下 絵梨
Adobe XDとFigma、どちらもよく使う、どっちも好きという人が増えてきましたね。 共通点も多いアプリだからこそ、「どっちがどっちだっけ」と混乱しないように、違いをざっくりまとめました。 気づいたらまた更新します！ よく使うショートカット図形ツールスタックとオートレイアウトリピートグリッドの代わりに・・・Figmaには、Adobe XDのように、リピートグリッドや、シェイプに画像をドラッグして配置する機能がありません。 下記の工程で、「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaですることができます。 （リピートグリッドの便利さにはかないませんが・・・） 「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaでする方法🍀 Illustratorみたいに「⌘ + Dで繰り返し」ができるのが嬉しい😊 画像の配置：shift + ⌘ + Kも早めに覚えてしま
もう困らない！Figmaの共同編集を気持ちよく進める方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのシバです。 今やWebサイト制作には欠かせないツール「Figma」。 スムーズな動きと直感的な操作感で、多くのデザイナーが愛用しているかと思います。 なんといっても、リアルタイムで共同編集ができるのが、魅力の一つではないでしょうか。 しかし、実際に共同編集をすると、目的のデータが探しづらかったり、最新データがわからなくなったり、触ったつもりはないけど、あれ、ずれてる……？ と、困ったことはないでしょうか。 ということで今回は、Figmaでスムーズに共同編集するためのTipsをお話ししたいと思います。 Figmaの共同編集でよくある困りごと 以前、PCデザインだけで100ページ近くある大型案件を担当したときの話です。 納期も考慮しデザイン制作は2人でほぼ同時スタートし、のちほどもう1人デザイナーが参加、計3名で進めていく形になりました。 スタート時はとくにルール等を設
任意のWebサイトを編集可能なFigma用ファイルに変換できる・「html.to.design」 - かちびと.net
html.to.designは任意のWebサイトを編集可能なFigma用ファイルに変換できるサービスです。 手順も簡単で、専用のChrome拡張をインストールし、変換したいWebサイトで実行すると、全ページか部分的かの選択が出ますので選択。すると.h2dという拡張子のファイルをDL出来るようになります。 Figmaにてhtml.to.designを使用し、.h2dファイルをインポートすればFigmaで任意のWebサイトを編集できるようになります。手軽でとても良いですね。 実際何度か試しましたが、精度としては100%ではないものの特に問題なさそうでした。無料プランは30日に12回まで、有償プランは無制限且つ一度に複数編集可能になるなどの特典があるそうです。 html.to.design
非デザイナーがFigmaでデザインの確認時に抑えておきたいポイント
非デザイナーがFigmaでデザインの確認時に抑えておきたいポイント人気ですよね、Figma。デザイナーではないけど、デザインのレビューをする立場の人も、この頃何かと話題のFigmaが気になっているのではないでしょうか。今回はデザイナーからFigmaのファイルが共有されたけど、何をすればわからない！という人向けに、デザインのレビュー時にこれだけは抑えておきたいというFigmaの設定の流れや機能を紹介します。 Figma を使うメリットFigmaは世界的にも大人気の、無料で使えるデザインツールです。人気の理由は、主に以下のような共同作業のしやすさがあげられます： インストールする必要がないコメントの共有がしやすいバージョン管理ができるデザイナーであれば自分の持っている PC や Mac に Figma のアプリをインストールして利用したほうが使いやすいかな、と思いますが、サクッと確認するだけで
Figma + STUDIO で新規事業のLPを作ったので、プロセスを公開します。｜スマートキャンプ デザインブログ
スマートキャンプのハグリです。 弊社では、Biscuet（リリース後BALES CLOUDに名称変更）という新サービスの事前登録を6月5日(水)に開始しました！ Biscuet（BALES CLOUD）とは？ 営業活動を効率化する、インサイドセールスの最適化を実現するツールです。詳しくはLPをご覧ください。 本記事では、新規事業のLP作成時に考えていたことやプロセスを、Biscuet（BALES CLOUD）のデザインを担当している葉栗が紹介していきます。 LP作成の目的今回は新規事業のLPであるため、サービスの紹介と同時に市場のニーズを確かめる目的がありました。そのために、工数を最小限に早く作る必要がありました。 そこで、LP作成はコーディングをせず、STUDIOで作成することにしました。 STUDIOとは コードを書かずにマウス操作でWebサイトを作成できるサービス LPの作成プロセス
FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう - ICS MEDIA
徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実装しやすいFigmaファイルの作り方
Mockup Plugin – Devices Mockups, Print Mockups, AI Mockups | Figma
【Figma入門】Figmaの作業を効率的に行う便利なショートカット - Qiita
EightShapes Specs | Figma
Convertify Sketch/Adobe/Google | Figma
Figmaコミュニティアワード2022を受賞したプラグイン7選 - Workship MAGAZINE(ワークシップマガジン)
