マガジンのカバー画像

figma

54
本
運営しているクリエイター
megumi_s

#figma入門

コンポーネントの使い方 - 応用編

前回の記事の続きです。 今回は、応用編なので「コンポーネントが使える」から「コンポーネントを使いこなせる」までレベルアップする人のための内容にしていきたいと思います。 それでは早速! インスタンスを切り離すコンポーネントを一度作ったら二度と変更しないと言うことはほぼあり得なくて、細かい変更を繰り返しながら実用的なコンポーネントを定義していくと言うのが基本的なワークフローになると思います。 そこで、「インスタンスを切り離す（Detach Instance）」と言う操作が

UI/UXデザイナー …

Chapter 5: プロトタイピング

はじめにこの記事は、UIデザインツール「Figma」の解説記事の第5章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はFigmaのプロトタイピングについて紹介します。 前回は記事はこちら プロトタイピングとはアプリやWebなどのUIデザインではプロトタイピングは非常に重要です。 プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移を体験したり、周りの人にデザインを共有してデザインを練り直したりするための素晴ら

ふじけん / kens…

【動画で解説】Figmaの使い方

最近、Periscopeの生配信でFigmaなどツールの説明をするのにハマっています。 自分の場合、最初にツールをざっくり覚えるときは動画がわかりやすいので利用するのですが、英語の配信者が多いので日本語でやったら良いんじゃないかと思いやっています。 それらの生配信動画を集めておきます。 決定版長いですが、これだけ見れば基本は完璧というやつ Frameの使い方Auto Layoutの使い方AutoLayoutがかなり進化しました！！Auto Layout2.0（勝手に命

UI/UXデザイナー …

Chapter 1: Figmaの概要とセットアップ

はじめにSketchやAdobeXDなど、様々なUIデザインツールが業務の中に取り入れられている中で、Figmaの登場によってデザイン環境がガラッと変わりつつあります。 従来のデザイン製作フローとは異なる同期的なスピード感のある開発環境へと変化し、ディレクターやエンジニアによるUIデザインレビュー、デザインスプリントでの複数人によるプロトタイプ作成など、デザイナー以外の方や様々な状況で大きなメリットがあり、他のツールと一線を画する存在となっています。 この記事では、これから

ふじけん / kens…

figmaで使えるサービス資料テンプレート配布します

お金の健康診断の資料を (パワポがあまりにも無理すぎて）Figmaで作り直したんですが、tweetしたら需要がありそうだったのでベースとして使えそうなテンプレート配布しますね。 ・同じソフトウェアを使うことでデザインファイルと連携しやすい ・デザイナーが見た目を調整しやすい ・ソフトウェア自体が無料、GoogleFontが使える ・オンラインで共有可能、コメントによるレビュー可能 あたりの理由が導入の根拠です。大したファイルではないのですが、何かの役に立てば幸いです。

あか理＠デザイナー

【2019年】私的ベストFigma Plugins

こんにちは！ Figma Advent Calendar 2019 11日目担当のデザイナーをしているトリバコです。 もう今年も残りあとわずかとなりましたね。 そんな年末ということで、使ってきたツールの整理も兼ね、私の仕事に大きく影響を与えてくれた「Figma」のお気に入りプラグインを利用頻度が高かったものから順に今回ご紹介していきたいと思います！ Nisa Text Splitter テキストの改行位置で分割やソート、結合などをワンクリックで実行できるプラグインです。

トリバコ

Figmaのオートレイアウトを完全に理解した話

どーもーUI/UXデザイナーのうっくんです。 ちょっと前にFigmaにオートレイアウトという機能が追加されました。 最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。 オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多

UI/UXデザイナー …

【Figma】入れておくと便利なアセットまとめ

こんにちわ！現在大学３年でモスティープレイスという会社でデザイナーのインターンをしています、田島美鈴 @abcmisuzuです。 この記事では、Figmaというツールで使える便利なデザインのアセットを紹介していきます。 最近UIツールをSketchからFigmaに移行し、情報収集をしていたのですが、日本語のプラグインなどのまとめ記事はあってもアセットの記事は見つけられなかったのでまとめてみました。 ↓　Figmaの使い方について -------- まず、Figmaに

田島 美鈴

FigmaのコンポーネントをVariantsで状態管理する

こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。 例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使う

ふじけん / kens…

【2020年版】リアルに作業を超効率化してくれたFigmaの必須プラグイン10選！！

今回は年末ということもあり、2020年に仕事でリアルに使い倒しまくったFigmaのプラグインを10個に絞ってまとめてみました！ こちらの記事はデザインの制作スピードをあげたい人向けに書いています。そのため一見面白そうだし革新的だけど実際コレどこで使うの？みたいなプラグインは今回あえて紹介してません。全てリアルに仕事の中で使い倒しているスタメンのプラグインのみに絞っています。 では早速紹介していきます！ 01：Unsplash もはや言わずもがな、有名なフリー写真素材サ

もち | CDO・デ…

【2020年 総復習】Figmaに関するツイートまとめました！

今年はFigmaに関するツイートやコンテンツをいっぱい発信しました！一気にまとめて見たいというお声もチラホラもらっていたので、2020年のうちに記事としてまとめてみました。是非年末年始の空いた時間に復習がてら見てもらえると嬉しいです♪ ⭐2020年リアルに使いまくったプラグイン10選⭐figmaのショートカット早見表（完全版DLリンク付き） ▼完全版のDLはこちらからどうぞ！ ⭐figmaのブレンドモード適用一覧イマイチブレンドモードを使いこなせていない方に、ひと目で効

もち | CDO・デ…

Figma でモーダルやポップアップ等の状態変化をプロトタイプする

こんにちは！　UIデザイナーのmarinです。 1年半前にメインデザインツールをFigma に移行した際の記事を書いたのですが、理由のひとつにプロトタイピングがしやすいことを挙げていました。 今回はその件についての深堀りを、Figma のプロトタイプを実際の業務でどのように用いているのか例を挙げて書きます。 ※Figma のプロトタイプが初見の場合は、公式のFigma Tutorial: Prototyping を見ておくのをおすすめします。 Figma のプロトタイプの

marin

「Figmaガチでわからない」者同士で勉強会を開いたら、メリットだらけだった話

今やプロトタイピングツールとしては、XDよりもシェアのあるFigma。 私の会社でも、UI/UXに関わるデザイナーは全員Figmaアカウントを持ち、日々業務に活用しまくっているわけなのですが。 が！ 私を含め、「実はFigmaわからないんす…」という人が一定数いることが判明いたしまして。 今回、ガチで「Figmaわからない」デザイナーたちが集まって、勉強会を開いてみたら、えらいよかった！！というお話しをさせていただきます。 　　 そもそもFigmaは使えていると錯

kyomiya

非デザイナー向けFigma勉強会プログラムをCommunityに公開しました！

こんにちは。ハイジ・インターフェイス株式会社デザイナーの本多と申します。早速ですが、今朝Figma勉強会用のプログラムをFigma Communityで公開しました！ Figma勉強会用プログラム(日本語) 今回の記事では、このプログラムの概要と、実際にこのプログラムを使ってワークショップをする際の進め方などをさくっと紹介したいと思います。 ​4/22 追記 昨晩(今晩)の大幅アップデートでFigJam機能が公開されたことで、もしかしたらワイヤーフレーム作成もある程度の

Miyu Honda