デザインサプライ-DesignSupply.-※当ウェブサイトを快適に閲覧して頂くためにブラウザのjavascriptを有効にしてください0%DesignデザインワークショップPosted:2019.08.14ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみるFigmaFigmaUIデザインWebデザインモックアップ今回はブラウザで操作できるUIデザインツールであるFigmaを導入するまでの流れをまとめてみたいと思います。昨今では様々なデザインツールが登場し、日々いろんな機能が増えてきており、現場でのデザインワークフローにも大きな影響を与えています。そんな中でもFigmaは着実にユーザー数が伸びてきており、導入しているという声もよく聞きます。ブラウザで利用できるという手軽さが大きな特徴で、そういった点も人気の理由ではないでしょうか。Figmaには有料プランと無料で使えるフリープランも用意されています。一人がメインで制作を行うようなケースであれば、フリープランでも十分に使えるかと思います。Figmaでブラウザ上でのデザイン制作を行うまずは公式サイト(https://www.figma.com/)にアクセスします。アカウントさえ作ってしまえば、ブラウザでこちらにアクセスするだけでデザインを作成することができます。free」のボタンをクリックします。アカウントのメールアドレスとパスワードを設定します。account」のボタンをクリックします。続いて簡単なアンケート画面が表示されますので、アカウントに使う名前などを入力し、先へと進めていきます。すると、そのままログインが完了し、プロジェクト一覧が表示されたダッシュボードが表示されます。Figmaではデフォルトでいくつかのサンプルが用意されているので、すぐに確認してみることができます。ブラウザ上でデザインデータを開けますので、早速確認してみましょう。左側にレイヤーパネル、右側にオブジェクトの操作パネルと中央にアートボードなどが表示される、お馴染みのレイアウトが表示されます。XDを使っているユーザーであれば、そんなに違和感なく触ることができるのではないでしょうか。デスクトップアプリとしてのFigmaFigmaはこのようにブラウザ上で利用できますが、同じ機能を搭載したデクストップアプリも用意されています。ズームなどの操作はブラウザの場合ですと少し重たい感じがあったりと気になる方はデスクトップアプリの方うも用意しておくといいでしょう。デスクトップアプリは公式サイトのダウンロードページ(https://www.figma.com/downloads/)からインストールができます。OSにあったものを選択します。Installers」からフォント読み込みができるようにしておきます。デスクトップアプリであればフォントインストーラーは不要とのことです。インストールパッケージがダウンロードされたら、そのまま立ち上げて、画面の案内に沿ってインストール作業を進めていきます。in」ボタンをクリックします。ログインするとブラウザと同じく、プロジェクト一覧画面のダッシュボードが表示されます。見た目はブラウザとほぼ同じですね。同じようにプロジェクトを選択し、デザインデータを見てみます。デスクトップアプリの方が少し動作が軽やかな印象ですね。使える機能はブラウザと同じようですね。Figmaの大きな特徴として、同時に複数人で一つのデザインデータを編集することができ、リアルタイムでデザインに反映されるようになっています。軽いデザイン修正などは打ち合わせしながらブラウザで完結するので、とてもスピーディーなワークフローが実現します。このように該当するデザイン編集点には他ユーザーを示す矢印が表示され、リアルタイムでデザインデータが複数のユーザーから更新できるようになります。今回はブラウザとデスクトップアプリでFigmaを導入する流れをまとめてみました。個人的にもFigmaはプロジェクトでも使っていたりしますが、とても便利で、本格的にデザインツールとしての移行も検討できるくらいの使いやすさですね。デザイナーだけでなくディレクターやエンジニアでも業務で使うことも増えてくるのではないでしょうか。チームの開発にとても効果的なツールなのでぜひ試してみてください。ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちらデザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。コメントをキャンセル記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。メールアドレスは公開されませんのでご安心ください。付いている欄は必須項目となります。コメント内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。javascriptで配列を扱う時によく使うメソッド#10【配列を文字列にする・多次元配列をフラットにする。