フロントエンドエンジニア目線で Web のデザインには Illustrator や Photoshop ではなく Figma を使ってほしい理由｜seya
フロントエンドエンジニア目線で Web のデザインには Illustrator や Photoshop ではなく Figma を使ってほしい理由 こんにちは。Figma 大好きフロントエンドエンジニア、seya と申します。 最近大きくシェアを伸ばしている Figma ですが、デザインが Figma で作られていると Illustrator (以下イラレ)や Photoshop などと比較してかなり実装しやすいと言う実感があります。個人的には後者のツール群はグラフィックのデザインツールであって Web のデザインツールとしては適していないと考えています。 なので、この記事ではフロントエンドエンジニア目線で Figma の何が嬉しいのかを語っていきます。 また、若干片方の群を落とすような主題で予防線はるのアレなのですが、イラレなどをデザインカンプとして実装に取り組んだ経験が3サイトくらいしか
FigmaのコンポーネントをVariantsで状態管理する｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。 例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使うことでひとつのコンポーネントで整理できるようになりました。 チュートリアル公式がチュートリアルを用意しているので、実際に触って試したい方はこちらをどうぞ。 Variantsの使い方(準備) Variants は複数のコンポーネントに対して使うことができます。状態の違うコンポーネントまとめてくれるので、複数のコンポーネント
Figmaが目指すデザインのあり方｜ふじけん / kenshir0f
2020年1月に行われた Design Matters Tokyo のセッションでデザインの変化について、Figmaの発表を聞いたのでまとめます。 時代とともにデザインがどう変化してきたのか、とても分かりやすく解説されていたので共有したいと思います。 Figma社の Yuhki Yamashita さん デザインの大きな3つの変化今まではデザインは基本デザイナーが取り組むものとして扱われていましたが、インターネットや技術の発展とともにデザインの取り組み方は大きく変化してきました。 具体的には以下の3つの変化があります。 1. 「ピクセル作業」から「アイデアを動かす」へ 2. 「完成品」から「永遠の未完成」へ 3. 「デザイナーのもの」から「みんなのもの」へ ひとつずつご紹介します。 1. 「ピクセルの作業」から「アイデアを動かす」へ 1つ目の変化は、ピクセル作業の時代が終わったということで
Figmaチーム来日！Figma Meetup レポート | CyberAgent Developers Blog
UXエンジニアの谷です。 初来日のFigmaチームを招いてのFigma Meetupが、Abema Towersで開催されました。 このMeetupでは、Figmaの開発に関わるメンバーによるFigmaのショーケースやロードマップ、新機能のお披露目がありました。その後は熱いQ&Aや、ネットワーキングでFigmaづくしの時間を過ごしました。 こちらのMeetupのレポートのハイライトと、私の所感を交えて書いていきます。 Figmaについては、過去の記事「Figmaを導入してコマースサイトを制作してみた話」でFigmaを取り上げているので、そちらもご覧ください。 目次 オールインワンで、コラボレーティブなデザインツール Figmaの特徴的な機能 Figmaに直接質問できる機会 チームとしてのFigmaの素晴らしさ オールインワンで、コラボレーティブなデザインツール デザインプロセスにおける、ワ
CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集｜seya
こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ
FigmaのAuto Layoutにまだ出来ないこと｜といとい
こんにちは。@toi_toi_yです。ついにFigmaにAuto Layoutが搭載されましたね！ やったー！ よしFigmaのAuto Layout完全に理解した。 注: 完全に理解した 【エンジニア用語解説】 「完全に理解した」 製品を利用をするためのチュートリアルを完了できたという意味。 「なにもわからない」 製品が本質的に抱える問題に直面するほど熟知が進んだという意味。 「チョットデキル」 同じ製品を自分でも１から作れるという意味。または開発者本人。 — 伊藤 祐策(パソコンの大先生) (@ito_yusaku) September 20, 2018 中身の幅 / 高さに応じて親要素の大きさを変えることができます。 アイコン付きテキストやボタンなどに使うと超便利です。 ここで重要なのは要素の大きさは全て「中身」に依存するということです。 Auto Layoutの方向がVertica
Figma：クリエイティブなものづくりを応援するクリエイティブなソフトウェア
The Collectiveは、世界中のサービス先進企業のデザインプロセスやDesign Operationsなどの情報を日々収集しています。そして自分たちでもこれぞと思うツールを選定し、実際に使用することで、ワークフローに適したプロセスを確立しています。実際に使用して使い勝手が良いだけでなく、今後のポテンシャルにも期待が持てる優秀なツールをご紹介します。 The CollectiveのDesignOps のツールとして何度も紹介し、日本におけるコミュニティのエバンジェリストも務めるデザインツール「Figma」。Figmaは、Dylan FieldとEvan Wallaceの二人が共同開発した、リアルタイムコラボレーションができる初のデザインツールです。 オフィスワーカーは、GoogleドキュメントとOffice 365のおかげで、クラウドでの作業に移行し、共有ドキュメントで同僚と簡単に共
Redesigning Design
Today is my first day at Figma. For those who are unfamiliar: Figma is a cloud-based design tool built entirely around collaboration. It’s essentially done to interface design what Google Docs did to word-processing — take it online to enable real-time, “multiplayer” creation. I’m joining Figma today because of my love for design. It’s a love I know I share deeply with the rest of the Figma team;
スクラムのKPTふりかえりをデザインツールのFigmaでデジタル化した話 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。デザイナー兼プロダクトオーナーの上田です。 プロダクトオーナーを兼任して半年ほど経ちまして、ふりかえってみれば、事業KPIの向上に向けたチーム運営やデータ分析など、事業目線を少しずつ持てるようになってきたことが自分の中でいちばんの変化でした。 定期的にふりかえりの機会をつくって、よかった点や反省点を踏まえ、自分なりに次の行動に繋げるのって大事ですよねぇ。 さて今回は、わたしの所属するカイゼンチームのスクラムの「KPTふりかえり」*1 をデザインツールのFigmaを使ってデジタル化するという新しい取り組みについて紹介したいと思います。 *1 KPTふりかえりとは、アジャイル開発のスクラムにおける代表的な取り組みの1つです。Keep、Problem、Tryという3テーマについてメンバー間で意見を出し合うことで、チーム運営をよりよいプロセスに改善するのがKPTふりかえりの主な目的です
Figma FAQ 、 よくある質問 #01｜HikaruTayama
どうもです、Figma が気になるみなさん。 Figma コミュニティで色々質問 & 回答いただきました。 なんと約 60 種類！知らなかった解決策とか発見できて楽しいですね。 Slack だと流れていってしまうので、よくある質問や便利と思った解決策をまとめていこうと思います。 今回のテーマは始めたてに引っかかる『意外と知らないこと 10 選』です。 Q1. オブジェクトとオブジェクトの隙間を知りたい ・オブジェクトを選択 ・知りたいものにマウスカーソルを重ねて option を押すZeplin などにもある隙間の距離を表示する機能です。Photoshop もあるんですがわざわざ押さないので、知られてなかったりしますね。 Q2. ネスト化されたファイルの中からダイレクトで選択したい ・Command 押しながら選択意外と知られてないシリーズ、Frame や Group 内でも直接選択できま
Figmaにおけるコンポーネントとバージョンの管理について考える｜Nao Komura｜note
まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変わってくるように思います。 そもそもコンポーネントという概念が開発にほぼ必要ない普通のWebサイトなどであれば、多少実装しにくいと思われるかもしれませんが、あまりデザイナー側が気にする事ではないかなとも思います。 ただ、今回はReact.jsやVue.jsなどのフレームワークを使ったWebアプリケーション/サービス、また
FigmaにPluginがついに来たのでよさそうなものをご紹介｜ふじけん / kenshir0f
こんにちは。 Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉 これを書いているのはプラグインローンチ時刻の深夜2時なので、朝起きて仕事でちょっと触ってみたいという方に向けて、いくつか良さそうなプラグインを紹介したいと思います。 Pluginのインストール方法Figmaのデスクトップアプリをアップデートし、画面左上のPluginsを選択します。 あとはPlugin一覧から入れたいプラグインの Install を押すだけです。 あまりにもインストールが速いし、簡単にアンインストールできるので気軽にトライできます。 Autoflow画面遷移図を自動で書き出してくれるプラグインです。 シンプルな一本の線のみで描画されますが、Frameを追従することはありません。よくFrameを移動するときに重宝され
figmaで使えるサービス資料テンプレート配布します｜あか理＠デザイナー
お金の健康診断の資料を (パワポがあまりにも無理すぎて）Figmaで作り直したんですが、tweetしたら需要がありそうだったのでベースとして使えそうなテンプレート配布しますね。 figmaでサービス資料作るとこういう感じ。一覧性もあるし、誰でも編集できるし、メンバーが気軽にコメントも書ける。オンラインで共有もできる。便利では？？？ pic.twitter.com/lG7GZewSko — 山下 あか理 (@AkrYmst) July 19, 2019 ・同じソフトウェアを使うことでデザインファイルと連携しやすい ・デザイナーが見た目を調整しやすい ・ソフトウェア自体が無料、GoogleFontが使える ・オンラインで共有可能、コメントによるレビュー可能あたりの理由が導入の根拠です。大したファイルではないのですが、何かの役に立てば幸いです。
Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方｜スマートキャンプ デザインブログ
まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP）の作成プロセスも過去に紹介しています。気になる方はあわせてお読みください。 Figma と Atomic Design の採用デザインツールは「Figma」、考え方は「Atomic Design」を採用しました。 Atomic Designをデザインに落とし込む際、コンポーネント単位での管理がしやすいFigmaが便利だと考えました。 Figmaに関する記事には、チュートリアルやテンプレートなどの内容は多く見かけますが、実務での採用・運用を主にした記事は少ないため、スマートキャンプでの例を紹介します。 ※本記事内で紹介する画面キャプチャは開発中のものや、記事用に独自に編集したものも含まれます。 Atomic Design についてAtomic Desig
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figma Android UI kit - UXCrush.com
Auto Layout Button bug · Figma
【2019年】私的ベストFigma Plugins｜トリバコ / Nanomedia
【随時更新予定】推しのFigma Pluginまとめ｜三上蒼太 / Sota Mikami
Figma のまとめ｜HikaruTayama｜note
Every shortcut for designers, centralized and searchable
