4009 Designer's Book

378

本

株式会社FORKのデザイナーたちが普段考えてる事や、デザインへの取り組みなど、多種多様なテーマで発信しております！

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

#figma

Figma基礎編:Part1 「ワークスペースについて」

今回は自分自身の復習も兼ねて、Figmaについて記事を書きます！基礎編・応用編をそれぞれ2記事ずつ、計4記事構成で進めていけたらと思ってます。まずは基礎編:Part1 「ワークスペースについて」についてです。 1．ワークスペースの構造Figmaのワークスペースは「チーム」>「プロジェクト」>「ファイル」>「ページ」という構造になっています。 1．チームとはチームはワークスペースの中で一番大きな単位で、組織ごとに作成するものです。またプロジェクトの作成やチームに参

Figma新機能「マルチ編集」を使ってみる

こんにちは、nabeです！ Figmaでは3月に新機能「Multi-edit playground」がリリースされました🎉 理解するのが少々難しく、苦戦ながらも機能について整理してみたので、今回はその内容を書いていければと思います！ 1.特徴わかったようで、よくわからないような…。まずは編集に入る前に共通レイヤーのルールを整理したい思います。 2.「Matching layer」とはMacting layerとはframeを越えて共通するレイヤーのことを指します。共

Figmaでマイクロインタラクションを作成する

こんにちは！nabeです。今回はFigmaで「マイクロインタラクション」を作成するにあたって、例を用意し簡単な手順についてご紹介できればと思います。そもそもマイクロインタラクションって何？DanSaffer氏の書籍「マイクロインタラクション－UI/UXデザインの神が宿る細部」より、以下が記されているようです。ちょっと難しいですが、ユーザーとのコミニケーションの一つで、ユーザーが行った動作をわかりやすく伝えることことができます。例としては、ハートのいいねボタンを押

【Photoshop・Figma】まぜこぜショートカットを再確認しよう

こんにちはnagamです。 PhotoshopとFigma、日々の使用率が同じぐらい、いやFigmaの方が高くなりつつあるなかで、困っていることがあります。ショートカットまぜこぜ問題です🌀 『移動ツール／V』や『テキストツール／T』が同じだったので、 Figmaを触り始めた頃はすんなり馴染めそうだなあと思っていたのですが、使っているうちにちょいちょいある違いに悩むようになりました。同時に使っている時なんてパニックです。手当たり次第に押してしまい、見に覚えがない変更が

Figmaでアニメーションが作れる！？「Motion」レビュー

こんにちは、WEBデザイナーのdanです。突然ですが、Figmaをお使いの皆様Figma pluginの「Motion」をご存じでしょうか？ Figmaでアニメーションが作れてしまう、そんな便利なプラグインがあるなんて！早速、触ってみました。プラグインをインストールメニューバーの　Plugins　→　Motion　を選択するとMotionのパネルが表示されます。タイムラインにキーフレームを打つパネルで表示され画面に置いて使用します。動画編集でよく見かけるパネル

Figma plugins.3[LottieFiles]のご紹介

こんにちは、株式会社フォーク WEBデザイナー在住の4009_danです。 Figma pluginのご紹介です！ Lottieとは？Lottieアニメーションをご存じでしょうか？ Lottie（ロッティー）は民泊サービスなどを展開している会社・Airbnbが作ったアニメーションライブラリです。高い解像度を保ったまま、サイズの拡大・縮小ができ、GIFやMP4よりもファイルが軽いため使いやすさが特徴です。使い方はLottieアニメーションを検索し、「Insert as

Figma plugins.2[Material Design Icons]のご紹介

こんにちは、株式会社フォーク WEBデザイナー在住の4009_danです。今回もFigma pluginのご紹介です！今回のご紹介はGoogleが提供している「Material Design Icons」です。便利なアイコン素材集もご紹介します。 Material Design Iconsとは？2,000以上ものアイコンが、バリエーション豊富に５種類で展開されています。ライセンスはクリエイティブコモンズ（CC BY 4.0）で、クレジットとライセンスへのリンクがあれ

Figma plugins.1[Unsplash]のご紹介

こんにちは、株式会社フォーク WEBデザイナー在住の4009_danです。今回はFigma pluginのご紹介です！ Unsplashとは？弊社はFigma推奨で制作を進めているため絶賛Figmaを勉強中です。そんな中でpluginは大きな味方だと感じています。ご紹介するUnsplashは無料で300万点以上の高解像度写真を使うことができるpluginです。こちらのプラグインを使うことで直接Unsplashの素材にアクセスすることができます。ライセンスに関してU

AE&Figma 5月おぼえがき

こんにちは。もう月末…！GWがあるとはいえ、5月ってあっという間ですね。子どもの頃理解できなかった「大人の1年はあっというま」が最近わかってきて、成長を喜ぶべきか切なくなるべきか迷いどころのnagamです。ちょっとした宣言あれしろこれしろと強制されるのは苦手ですが、ある程度道を塞いでおかないと「まあ…（やらなくても）いいか」と逃げ腰になるのも事実。前回の「HTML5プロフェショナル認定試験」も、周囲に受けてみますと言ったことでゴールに諦めることなくたどり着けたと思っ

Figmaをもっと活用したい！そんな社内共有用のFigmaファイルを作ろう！

こんにちは！株式会社フォークでWEBデザイナーをしているoyamadaと申します。今回は、社内でFigmaの活用を促進するために、デザイナー7名で取り組んできた社内活動に関してと、半年間の活動の集大成として、アウトプット用の資料に関してのまとめた内容を投稿させていただこうかと思っておりますm(_ _)m フォーク社内でのFigmaチームの活動についてまずは、Figmaチームの活動内容の振り返り近年、業界標準にもなりつつある、ブラウザ上で簡単にデザインができるツール

Figma オートレイアウト 02

今日は前回に引き続きオートレイアウト機能をつかって、可変できるリストの作り方を説明していきたいと思います！やりたいこと文章量に合わせて、指定した余白を維持してラインを可変 1.要素をフレーム化し、オートレイアウトを適用日付と文章をフレーム化し、一つにまとめます。まとめたフレームにオートレイアウトを適用し、リサイズ設定を下記に設定します。横：Fixed Width 縦：Hug contents 2.要素をコンポーネント化フレーム化した要素とラインを含めコン

社内のデザイナーでFigmaについて考えるチームを結成して取り組んだ内容の振り返り＆アウトプットについて考える

こんにちは！WEB制作会社で働くデザイナーoyamadaです。期末でなかなか忙しく、今月も投稿がギリギリ末日となってしまいました（＞＜）という状況で、仕込んでいたネタがまとまらなかったので、本日はちょっと社内の活動記録的な内容をアップさせて頂こうかと思いました。社内のデザイナーさんには、近況共有として、社外の方々には、社内でこんな活動してます！といったちょっとしたご紹介になったら嬉しいです。さて、振り返りますこと昨年2021年の11月頃、社内のFigmaに興味のある

Figma オートレイアウトについて

今回はオートレイアウト機能を使って可変できる見出しの作り方を説明していきたいと思います！やりたいこと1.矩形を縦幅に合わせて可変させたい 2.テキストエリアとコンポーネントを要素に合わせて可変 1.矩形を縦幅に合わせるまずは、上図のように矩形横に1行のテキストを入れたコンポーネントを作成してみてください。その後、テキストを2行に変更すると下記のようになると思います見出しは、基本的には文字量は多くしたくない要素ですが、それでも仕方ない事情などで多くなってしまうこ

Figmaのエフェクト効果

こんにちは！ fork_494です。今回はFigmaでつくれる簡単なエフェクトの効果についてまとめました。エフェクトの効果についてエフェクト効果を付けたいレイヤーを選択して Effectsの「+」をクリックするとInner shadow、Drop shadow、Layer blur 、Background blurの4つを選ぶことができます。 Inner shadow、Drop shadow、Layer blurについて各効果は下記のとおり、 Inner sha