Getting to the bottom of line height in Figma | Figma Blog
We’re altering the way we handle text in Figma. Join me on the journey we took to get there — through type history and into the modern times. At Figma, we try to strike a balance between historic design principles, forged through the centuries, and new practices. Today marks another step on that journey: we’re altering the way we handle text. Figma will now distribute extra line height above and b
【初心者向け】Atomic Design っぽい、Figma の使い方 - Qiita
はじめに みなさま、いかがお過ごしでしょうか。Figma 流行ってきてますね〜。 他にも Framer X や STUDIO 、そして Figma の上位互換かもしれない Phase が盛り上がりを見せています。 導入記事も増えてきているので、具体的な 作成フロー を紹介したいと思います。 作成済みのファイルは探せばいっぱいあるので、Atomic Design ぽいプロセスで、よく使う UI パーツを作るところまでハンズオン形式で書いてみます。 ただし、原理主義的なプロセスや理論 ではなく、誰でも順を追って Figma を使える状態を目指します。 ストラテジストとエンジニア、そしてデザイナの作業が分断されている時点でイノベーティブではありません。 この三者が統合的にデザインできること、すなわち ワークフローそのものを最適化することが目標 です。 Figma と Atomic Design
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
Figma3.0リリースでFigmaがDOPEなデザインツールになった｜SketchでもAdobe XDでもない選択肢｜Nao Komura｜note
みなさんはFigmaというデザインツールをご存知でしょうか。 正直な所、Adobe XDやSketchなどと比べると知名度も低いし、それらのツールと比べても機能は充実しているのですが使い所が微妙。 (ちなみに、Figmaの公式サイトにもXD、Sketch、Invision Studio、Framerと比較したページはあるのですが全部同じ内容で肩透かしをくらいます。) という具合に個人的に推しているデザインツールではあるものの、惜しい部分が多くまだ布教できる段階では無いな、という印象も持っていました。 しかし...... バージョン3.0のリリースでその印象が大きく変わり、最強のデザインツールFigmaを布教するぞ、という気持ちになりました(謎の使命感) ということで、Figmaの機能の紹介をメインに主要なUIデザインツールであるSketchとAdobe XDとの比較なんかも合間合間していこ
CI&UIリニューアルしながらデザインシステムを作った話｜Yoko Nishida
「コデアル」という求人サービスのデザインシステムを作ってみました。CIリニューアルに伴う全スタイル＆コンポーネントの刷新、エンジニア＆デザイナー間の協業、そして約3ヶ月運用してみた感想をつづってみます。 実際に使っているドキュメント、Sketchファイルはこちら↓ ・Codeal Design Guideline ・Codeal UI Kit.sketch ・Sketch Tips for Codeal Design Guideline Codeal Design Guidelineの中身はこんな感じ。 1. デザインシステムとは組織やサービスの形態によって解釈は分かれると思いますが、私はデザインシステム＝ブランド、設計、開発をつなげるガイドラインだと認識しています（引用：結局デザインシステムは何なのか） スタイルガイドやテンプレートだけではなく、それらをチームでどう活用するかを言語化して
細かすぎて伝わらないかもしれない、Figmaの良いところ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Figmaといえばコラボレーション機能（ですよね…） Figmaを他のUIデザインアプリと比較するとき、もっともわかりやすいポイントは「Webサービスで複数人で同時編集できる」ということだと思います。 この点は、まだFigmaを使っていない人にとってもわかりやすいポイントですし、Figmaも早い段階からそういうコラボレーション機能に力を入れてプロモーションしてきた感があるので、そういう印象を持っている人が多いと思います。 でも実は、UIデザインツールとしての基本機能が優秀👍 1年以上Figmaを使ってきた自分としては、そういう他にはな
Figmaで使える！スタイルガイドテンプレートのつくりかた (テンプレートのみ有料)｜Chizuru Kamisono
こんにちは、かみそるです。 noteでファイルアップロードができるようになったので、さっそくずっと育ててきたスタイルガイドのテンプレートを販売してみようと思います！ このノートでは、テンプレートのつくりかたを解説しています。テンプレートデータのダウンロードは有料ですが、命名規則などのノウハウはすべて無料で読めるのでぜひ参考にしてみてください！ はじめに🌟 UIをスクラッチで作るときに向いているスタイルガイドです 🌟 表現の幅が狭まらない設計を心がけています 🌟 テンプレート（.fig）のダウンロードのみ有料 🌟 アップデート（カイゼン、バリエーション追加）があった場合も無料で再ダウンロード可能 なんのためにテンプレートをつくるの？ 1️⃣ 効率化のため 命名規則、文字周りの定義などを一瞬で決めてデザインに入りたい。 2️⃣ 拡張性担保のため 複数のデザインデータに展開できるようにカ
Sketch から Figma への移行Tips｜といとい｜note
こんにちは。@toi_toi_y です。最近 Sketch から Figma に移行したのですが、これから移行する人も多そうなので、移行した時に学んだTipsをここにメモっておきますね。 ※ Mac版デスクトップアプリをベースにした説明です。適宜読み替えてくれると嬉しいです。 目次 - Sketch からインポートしたデータはどうなる？ - Symbol はどうなる？ - Override の仕方がわからない - Shared Libraries はどうなる？ - Layer Styles と Text Styles はどうなる？ - Artboard はどうなる？ - プラグインはどうなる？ - フォントはどうなる？ - オフラインの場合はどうする？Sketch からインポートしたデータはどうなる？Figmaを起動するとSketchのデータをインポートしてねと案内がでます。わかってますね
Figmaを使って開発チームの生産性をあげるプロダクトマネジメント｜坪田 朋
開発現場に Figma を導入してチームの生産性が上がった話です。 デザインドリブンで、プロセスを可視化しながら進める僕の開発スタイルと相性が良いので、最近はクライアントワークでも啓蒙しています。 Figmaは平たく言うとデザインコラボレーションツールですが、こちらのリンクから動画をみると雰囲気が伝わると思います。 https://www.figma.com/ UIデザインツールのリッチ化ではなく、開発チームとコミュニケーションのしやすさが強みで、1人でUIを作るならSketchの方が使いやすいかもしれません。エンジニアやプロダクトマネージャーとガンガン議論して仕様を詰めていくスタイルを好む人はFigmaと相性良いです。 デザインプロセスが可視化されるためプロダクトマネージャー、エンジニア視点でも有用なツールだと思います。 Figmaを使ってよかった点まとめ・「デザインをみんなのモノに」を
XD使いがアトミックデザインを始めるならUI/UXデザインアプリのFigmaがよさそう | スターフィールド株式会社
最近、WEBページのデザインで、ページを構成するパーツから先にデザインを始める必要のある案件に初めて携わったのですが、 これまでページ全体のレイアウト→各セクションのレイアウト→各部品のレイアウトというふうに、どちらかというと大きなところからデザインを進める方法をとっていたため、 若干戸惑ってしまいました。 しかし、レスポンシブデザインでは、PC、タブレット、スマホでそれぞれ適したページレイアウトが異なっており、ページのレイアウトからデザインを進める方法が適さない場合が少なくありません。 そんな中、最近ではパーツやそれらの集まりであるコンポーネントからデザインし、それらを組み合わせてページを作っていく方法が広がりつつあります。 そこでパーツからデザインする方法を調べたところ、アトミックデザインという方法に行き着きました。 アトミックデザインとは、部品の最小単位を原子（Atom）と位置づけ、
Figmaでアイデア発散会をやったら盛り上がった件 - 弥生開発者ブログ
こんにちは、デザイナーのとりみずです。 最近Misocaでは全社的にデザインツールにFigmaを導入しました。 Misocaではリモートの社員も多く、モバイルアプリを開発しているチームは 東京…デザイナー 名古屋…サーバサイドエンジニア 京都…デザイナー 鳥取…Androidエンジニア 福岡…iOSエンジニア という日本各地の集まりになっています。 このメンバーで、とある価値仮説に対して「俺の考える最強のアイデアぶつけあい大会」をすることになりました。 そこでFigmaを活用したところ、リモートでのアイデア発散会にとても向いていたので、その様子を紹介したいと思います。 当日までの準備 課題とターゲットをすり合わせを行い、当日のアイデア発散会までの準備に下記を宿題としました。 アイデア発散会の日までに各自手書きでアイデアイメージをA1の紙に書く 匿名性を考慮してアイデアに考えた人の名前はつけ
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
Figmaでできること【これからはじめるFigma】 - bagelee（ベーグリー）
はじめに 前回の記事ではFigmaとはどういうツールなのか、どういった方に向けたツールなのか、というのと Figmaの基本的な設定についてご紹介しました。 もう一度復習されたい方はこちらからご覧ください！ Figmaの基本【これからはじめるFigma】 今回の記事では、Figmaでできることやツールを一通りざっくりとご紹介します。Figmaの機能はもちろん、Sketchとの違いなども取り上げていきます。 まずは、前回同様Figmaを開き、最初からすでに入っている「Sample File」を開いてください。今回はこのSample Fileに沿ってFigmaでできることをご紹介します。 検索メニュー まずは、左上のハンバーガーメニューをクリックしてみてください。 ここにはSketchと似たようなメニューが格納されています。 新しいファイルを作ったり、フォントサイズをあげたり、レイヤーの上下の位
開発スピードを上げるため、Sketchを辞めてFigmaに移行した話 - fujiken design blog
こんにちは、ふじけん (@kenshir0f) です。 普段はモバイルアプリを主としたサービス開発のデザイナーを担当しております。 業務ではSketchを使ってアプリのUIを組んでいるのですが、 先日チームの開発体制を見直すときにFigmaというデザインツールに移行しました。 Figmaに乗り換えるに至った経緯やプロコンなど、ざっくりまとめてみます。 なぜsketchから乗り換えたのか 今まで他の人と共同で同じsketchデータを作業することがなかったのですが、メンバーが増えてからはabstractで共同で作業していました。 ライブラリを分けたりbranchを切ったりしながらデザインを行っていたのですが、しばらく経つと不満点がいくつか見えてきます。 影響範囲がでかいライブラリを更新するとコンフリクトしやすい branchを切って作業してマージするなどスピードが遅くなりやすい デザイナーにb
Sketch はもういらない？ デザインツール Figma の紹介
Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） ##Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DesignSystems.com
Flowchart Kit for Figma - Freebie Supply