#Figma

2025年4月15日、FigmaがSEC（証券取引委員会）にS-1ドラフトを提出したことが公表された。この提出により、FigmaはSECの審査を受けた後、株式公開の可能性を検討する選択肢を得ることになった。本発表は、1933年証券法に基づくルール135に従ったものである。Figma, Inc.は、クラスA普通株の新規公開を目的としてForm S-1を提出。株式公開のための株数や価格範囲は未定であり、SECの審査が完了するまで具体的な勧誘や販売活動は行わない方針とのこと。なお、Figmaの公式ブロ

Figmaがデザインシステムの管理と効率を向上させるための新機能を発表した。今回のアップデートにより、ユーザーはデザインプロセスをよりスムーズに進めることが可能になるとのこと。主な機能として、主要コンポーネントへの即時アクセスが挙げられる。この機能により、MacではControl + Option + Command + K、WindowsではControl + Alt + Shift + Kを使用することで、余分なクリックなしでコンポーネントのソースにジャンプできる。さらに、変数の表示と非表示

Figma製品内でカスタマイズ可能な仲間、FigPalsが大きな反響を呼んでいる。FigPalsは、4月1日から2週間限定で利用可能だったが、ユーザーの支持を受け延長された。猫をモチーフにしたものが特に人気であり、FigPalsは1.5百万以上保存され、25万回以上のフィードバックを受けた。FigPalsの開発は、Figmaの年次イベント「Maker Week」での実験から始まった。インターン当時のGalaxia Wu氏が発案したアイデアがもとで、このプロジェクトは成長した。ユーザーはFigPa

株式会社モリサワは、デザインコラボレーションツール「Figma」に対応したフォントプラグイン「PMF by Morisawa Fonts」を発表。これにより、Figma内でモリサワのフォントを利用可能となる。このプラグインはモリサワがFigma向けに初めて提供するものであり、フォントサブスクリプションサービス「Morisawa Fonts」のライセンスがなくても使用できるとのこと。近年、Figmaをはじめとするクラウドベースのデザインツールが普及し、フォントを取り巻くデザインワークフローも変化。

Figmaには複数の要素をまとめる方法に「グループ」と「フレーム」が存在します。今回解説するオートレイアウトは、「フレーム」の中の要素を整列させたり、配置・間隔を自動で調整する機能です。使いこなせるととても便利な機能なので、まずは基本から習得しましょう！最初に、オートレイアウトの適用方法を説明します。適用の仕方は、複数の要素を選択右メニューから「オートレイアウト」を選択（shift+A）次に、要素の間隔、周りの余白（パディング）を指定する方法を説明します。① 要素の間隔を指定する場合② 横の余白

Figmaでデザインをした際に、画面遷移図を作成したい時はありませんか？そんなときは、プラグイン「Autoflow」を使うと簡単に作成が可能です。使い方は、オブジェクトを作成Autoflowのプラグインを選択Shiftを押しながら矢印の始点→終点の順でオブジェクトを選択また、プラグインで矢印の太さなどの調整や説明テキストを追加することが可能です。ちなみに、プラグインを使わなくてもFigJamから矢印をコピー&ペーストしてフローチャートを作ることも可能です。Figma上でフローチャートが作成できれ

Figmaでコンポーネントを解除したい時やインスタンスをフレーム化して編集したい時はありませんか？実はコンポーネントを直接解除する方法はありません。しかし間接的に解除することはできるため、本記事ではその方法を解説します。コンポーネントには、マスターコンポーネントとインスタンスが存在します。マスターコンポーネント（Master Component）：スタイルを編集・変更できるインスタンス（Instance）： マスターコンポーネントのスタイルが自動で同期される（スタイルを上書きすることは可能）マス

Figma社は9月24日のリリースノートライブストリームで、デザイナーやクリエイター向けに多くの新機能を発表した。まず、Figmaに新しいAppleおよびGoogleのデバイスフレームが追加された。これにより、最新のiPhoneやApple Watch、Android端末のデザインを簡単に取り扱うことが可能となる。さらに、オブジェクトの回転と複製機能の改善が行われ、ユーザーがオブジェクトを複製した際に、元の回転を維持したまま続行できるようになった。また、オートレイアウトの操作性が向上し、ユーザー

Figmaでテキストを縦書きにしたい時はありませんか？本記事では、テキストを縦書きにする方法を解説します。フォントは日本語フォントを使用フォントサイズ（Font Size）とテキストオブジェクトの幅（Width）と行間（Line height）を同じ大きさにするテキストのオプション -> 詳細設定からVertical alternatesにチェックをつけるテキストを縦にするだけでは長音符（ー）や句点・句読点（、。）などが横書きの方向になってしまいますが、Vertical alternatesにチ

Figmaが、ユーザーによりコントロールされたエクスポート体験を提供するために、PDFとJPEGのエクスポートクオリティ選択機能を追加しました。これにより、ファイルサイズと画質のバランスを調整しやすくなります。新しいクオリティメニューでは、JPEGやPDFのエクスポート時に「高品質」「中品質」「低品質」の中から選択することが可能です。特に低品質を選択すると画像が最も圧縮され、最小のファイルサイズになります。一方、高品質を選択すると圧縮が避けられ、よりクリアな画像が得られる模様です。デフォルトでは

人気のデザインツール「Figma」が提供するFigJamで、図表作成に欠かせないコネクタ機能が強化されました。今回のアップデートでは、視覚的および機能的な改善が施され、より直感的で使いやすくなっています。具体的なアップデート内容は以下の通りです。コネクタ間のスペーシングが改善され、より整理された外観となりました。必要な時だけ表示される整列インジケーターにより、視覚的な妨げが減少し、デザインに集中しやすくなります。クイッククリエイトが近くのオブジェクトに自動接続するようになり、手動でオブジェクトを

Figmaでデザインする際にグループとフレームの使い分けに迷ったことはありませんか？本記事ではそれらの大きな違いと使い分けのポイントを解説します。グループとフレームの使い分けについて、Figmaの公式記事では以下のように記されています。次の場合にグループを使用します:複数のオブジェクトを1つの管理可能なレイヤーにまとめたい拡大縮小しても固定関係が維持される要素をグループ化したい場合（例：複数の図形で構成されたロゴやシンボル）グループ内のオブジェクトのサイズを変えたときに、グループの枠のサイズも自

Figmaのプロトタイプでカルーセルを作成するときなど、横スクロールさせたいときはありませんか？今回は横スクロールの設定方法を簡単に紹介します。横スクロールさせたい要素をフレーム化フレームをスクロールさせたい範囲に調整するプロトタイプ > スクロールの動作 > オーバーフローにて水平を選択プロトタイプで挙動を確認フレームではなくグループ化をしてしまうと、大きさを調整する際に中の要素も一緒に拡大縮小してしまうので間違えないように注意しましょう。このプロトタイプを活用すると、チームメンバーに実装後の

Figmaでデザインする際、コンテンツの横幅を揃えたり配置を整える基準が欲しい時がありますよね。その際に活用すると良いのがレイアウトグリッドです。レイアウトグリッドは3つの要素で構成されています。赤：Column（カラム：列）緑：Margin（マージン：余白）青：Gutter（ガター：溝）設定方法はレイアウトグリッドの「＋」をクリックグリッドを編集列を選択カラムの数、余白、ガターを設定また、レイアウトグリッドはグリッドスタイルとして保存して置くことで、簡単に再利用することができます。マテリアルデ

2024年6月26、27日にサンフランシスコのMoscone Centerで開催されたFigma主催のデザインカンファレンスConfig 2024に参加し、Config 2024現地レポート速報編では現地の様子を主に紹介しました。Configのメインコンテンツは様々なトピックについてのトークですが、これらは後からオンラインでも視聴可能なので、今回のConfigは世界中から集まるデザイナーと交流することを目的として参加しました。他にも多くの人が同じ目的で参加していたように思えます。本編では、様々な

Figmaで作成したページをグルーピングして管理したいときはありませんか？そんなときは、区切り線（Divider）を使うと便利です。使い方は、Pagesセクションの「＋」を押してページを作成ページ名に「---」または「***」を入力これによって空ページを区切り線（Divider）に変換することができます。ただし、ページ内にオブジェクトがある場合は区切り線に変換されないので注意してください。また、右クリックで区切り線（Divider）の複製と削除をすることができます。画面ごとにデザインを管理したい

Figmaでデザインするときに、FigmaのデザインファイルやFigJamを確認しながら作業したいときはありませんか？そんなときは、2画面表示を活用しましょう！使い方は、タブを右クリック「分割タブで開く」を選択使い方は、分割表示したいファイルを開くどちらかのタブをドラッグすると画面半分が薄紫になるファイルを開きたい方にドロップする2画面表示を解除したい場合は、再度タブを右クリックし「タブに分割」を選択します。他のデザインやFigJamで整理された情報を確認しながら作業をすることができて、作業効率

GmailやOutlookをはじめとした無数のメーラーの挙動の違いや、Webブラウザとは異なるCSSの制約など、実はHTMLメールの実装には多くの知見を要します。例えばレイアウトにはFlexboxを使用できずテーブルタグを使う必要があるなど、Webサービスの実装方法と大きく異なるメールのコーディングは多くのエンジニアを悩ませます。一方でデザイナーの立場からすると、メールのデザインはユーザー体験の重要な要素となるため、見た目にもこだわって作りたいもの。では、実装上の制約に従いながらも多種多様なメー

Figmaでデザイン作成しているときに、文字を曲線にそって配置したりシェイプを曲線に配置したいことはありませんか？そんなときは、プラグイン『To Path』が便利です。使い方は、『To Path』のプラグインを選択沿わせたいテキストと曲線を選択し「Link」をクリックちなみに、波線や曲線を作るプラグインは以下の記事で解説しています。『To Path』では、複数のオプションによってデザインの調整が可能です。Vertical Align：テキストと曲線の距離（0~1）Horizontal Align

みなさんはカラーのティントとシェードの作成はどのように行なっていますか？カラーパレットツールを利用したり、自分で調整して作成している方もいらっしゃると思います。ティント: 純色に白を混ぜた色シェード: 純色に黒を混ぜた色今回ご紹介するのは、Figma上で1色指定するだけで簡単にかつ数学的に複数のティントとシェードを作成してくれるプラグイン『Tints and Shades』です。このように、指定の色（Base）を中心にティントとシェードを5パターンずつ作成してくれます。使い方は、オブジェクトを作

2024年6月26、27日にサンフランシスコのMoscone Centerで開催されたFigma主催のデザインカンファレンスConfig2024に現地参加してきました。今回の速報では、前日に開催されたプレイベントと2日間のカンファレンスの様子をレポートします。サンフランシスコ、シリコンバレーはIT産業の集積地ということもあり、Techの雰囲気を感じる街で、サンフランシスコ空港から街の中心部に向かうまでの高速道路の横にもConfigをはじめとする様々な看板広告があり、最初から最後まで興奮する気持ち

Figmaで波線や曲線を作りたいときはありませんか？そんなときは、プラグイン『Wave & Curve』が便利です！使い方は、『Wave & Curve』のプラグインを選択複数のオプションを活用して波線を作成「Create」をクリック次に、設定可能なオプションについて説明します。左：Height（振幅:px）中央：Height Difference（振幅の高低差のランダム性）右：Distance（波長:px）左の3要素：波線の種類右の4要素：波形の種類Number waves：波の数矢印：リセッ

Figmaは、ベータ版として提供しているAIによるデザイン生成機能の「Make Design」を取り下げました。このツールがAppleのiOS天気アプリと非常に似ているデザインを生成したため、批判が集まったことが原因です。FigmaのCEOであるDylan Field氏は、X（旧Twitter）でこの問題について「期限に間に合うように私が強く促したため、このような事態になった」と述べた上で、同社のAIツール開発のアプローチについて弁明しました。問題の発端は、Not Boring Software

カラーパレットを作成するとき、みなさんはどんなツールを使っていますか？カラーパレットの作成もFimga内で完結できたら便利ですよね。そんなときは、プラグイン『Color wheel palette generator』を使うと簡単にカラーパレットを生成できます。使い方は、『Color wheel palette generator』のプラグインを選択複数のオプションを活用してカラーを調整「Generate palette」をクリックオプションでは、6種類のパレットタイプを選択することができます。