CSSフレームワークやライブラリを素振りするためのFigmaファイルを作った - Qiita
この記事の概要 筆者はCSSフレームワークやCSS in JSのライブラリを素振りすることが多いです。 その際、それなりに精度の高いモックアップを組んでみないと使用感が掴めません。 しかし毎回1からモックアップを用意するのも時間がかかるので、さっと検証するためのデータを作りました。 せっかく作ったので公開します。 見本 desktop mobile 実物 FigmaのCommunity fileとして公開しています。 以下のような要素を盛り込んでいます。 色やタイポグラフィー、グリッドなど最低限のデザイントークン VariantsやComponent propを用いたComponent ある程度状態が変化するPrototype desktop, mobileそれぞれのビュー flex, gridを用いそうなレイアウト positionを用いそうな要素 header, nav, footer
コーディングしやすいFigmaデータの作り方 - Qiita
これは何 UIモックアップデータを作る際、少しでもコーディングが楽になるように作る方法を書いた記事です 大抵のWebサイトやアプリ制作においては、UIのモックアップデータを作り、その後コーディングをすると思います そのため、見た目が同じでもデータの作り次第で作業効率が大きく違います この記事で取り扱うツールはFigmaですが、本筋はSketchでもXDでも変わりません ツール名称などを適宜読み替えていただければSketchやXDでも使える考え方だと思います 対象読者 コーディングを依頼する人 主にUIデザイナー チームによってはディレクターやプロダクトオーナーも該当するかもしれません 作業しやすいデータ作成を理解するために読んでもらえたら嬉しいです コーディングをする人 フロントエンドエンジニア・マークアップエンジニア チームによってはデザイナーも該当するかもしれません 余りにもコーディン
2022年5月現在 Figmaで実施しない方が良いハック - Qiita
この記事の概要 Figmaは最近注目を集めているデザインツールです。 アップデートが早いのも特徴の1つなのですが、結果的に「以前は有用だったハックが今ではアンチパターン」になり得ます。 2022年5月11日に実施されたアップデートを踏まえ、それ以前に紹介されていたテクニックのうち、今はもう実施しない方が良いものをまとめました。 将来、ここで紹介したようなハックが検索でヒットして「なんだこれ？不要では？」と感じる人も出てくるでしょうから、経緯を知れるための記事になれば良いなと思っています。 一辺だけのborderを再現するのにDrop shadowを使う これまでFigmaでborderを指定する場合、四辺すべてに一律で適用されていました。 そのため、一辺だけにborderを指定したい場合はBlurやSpreadを0にしたDrop shadowをかけて再現しているケースがありました。 アップ
Figmaの新機能まとめ #Config 2022｜Naoki Hashimoto
2. オートレイアウトアップデート ・プロパティパネルのUIアップデート ・Absolute Positioning (絶対位置)：オートレイアウトの指定を無視して要素を自由に配置できる ・Negative Spacing：余白をゼロ以下(マイナス)に指定できる ・テキスト省略設定できる 等々https://t.co/qTG2DQ1omB — ❖ ken｜旅するデザイナー (@ken_tbdz) May 10, 2022 今回の変更の目玉はAutoLayoutのリデザインでしょう。 Auto Layoutは便利ながらも、その機能性質上デザイン変更の自由度が低いところがありました。チームで「こうしたらどうかな？」と言われたときにAuto Layoutだとこの要素はここには置けないから一旦解除するか、みたいなことがありました。 今回の変更でそのあたりが解消されて、使いやすくなった印象です。 A
はじめてのFigma使い方ガイド 基本からプロトタイプ共有まで完全デザイン
Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。 この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。 コンテンツ目次 1. Figmaを使う前準備 2. Figmaの基本的な使い方について 3. 背景デザインの作成 4. グリッドレイアウトの追加 5. 基本ツールでロゴの作成 6. ナビメニューの作成 7. ヒーローセクションの作成 8. 3カラムレイアウトの作成 9. プロトタイプ機能の使い方 10. Figmaの使い方はアップデート継続中 Figmaを使う前準備
FigmaのSmart Animateを活用したプロトタイプ入門 - ICS MEDIA
新進気鋭のデザインツール「Figma」。オンラインの共同編集やデザインシステムの構築機能などで人気を集めていますが、実は強力なアニメーション機能も搭載されています。 前回の記事『最新版で比較するAdobe XDとFigmaの違い - プロトタイプ機能編』でAdobe XDとFigmaの機能の違いを紹介しましたが、本記事では改めてFigmaの「Smart Animate」について詳しく紹介します。 「Smart Animate」を使うことで、簡単にアニメーションを実現でき、インタラクションのイメージの共有が可能です。これからFigmaを触り始めようと思っている方や、どのデザインツールを使うべきか具体的な機能を知ってから判断したいという方は是非ご覧ください。 Smart Animateとは 「Smart Animate」とは、アートボード間の差分をアニメーションでつないでくれる機能です。2つの
2022年、Figmaで特にお勧めしたいプラグインのまとめ
Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 特にお勧めしたいFigmaのプラグイン 終わりに はじめに 私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。 私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良
Figmaで線と線を結合する
Figmaで線と線を結合する方法を説明します。 まずは線を２本用意します。 Penツールを選択します。 ２本の線を書きました。 Shiftを押しながら２つの線をクリック(選択)し、ctrl+Eを押します。 ２つの線が１つのグループにまとめられます。 線をダブルクリックすると各点を編集できるモードになります。 その状態で、Shiftを押しながら２本の線の下の点をクリック(選択)します。 Ctrl+Jで２点を結合します。 以上で線を結合できました。 結合した線を曲線にする ここからは余談になりますが、結合した線を曲線にしてみます。 結合した線の真ん中あたりにカーソルを持っていくと点が表示されます。 この点をドラッグすると線の折り目(?)が増えます。 ベンドツールを選択します。 （線をダブルクリックして各点を編集するモードにしていないと表示されないので注意してください） 増やした点をドラッグする
高度なモーションデザインを無料で作成できるWebエディタ「Jitter」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webデザインに活用できるモーションデザインをブラウザ上のエディタから誰でも簡単に作れるWebサービスをご紹介します。 手軽に高度なアニメーションを実現できる機能が豊富に提供されており、簡単なものならマウスで数回クリックするだけで完成してしまいます。無料で書き出しにも対応しており、記事後半ではFigmaとの連携方法についても解説しています。 Webのアニメーションにご興味ある方はぜひ参考にしてみてください！ 【 Jitter 】 ■「Jitter」の使い方 それでは、「Jitter」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Try it now】ボタンをクリックして無料のユーザー登録を済ませておきます。 メールアドレスや名前などを入力するだけなので簡単です。 登録したメールアドレス宛にログイン用
Figmaの権限と課金の仕組みで注意することおよび対策｜enpipi_work
Figmaはオンラインで共同編集ができるデザインツールです。無料から気軽に利用することができ、Web上で利用できるため便利な一方で課金や権限の仕組みを正しく理解しないと意図しない過払いやインシデントが発生してしまいます。 この記事では課金と権限の仕様について述べ、気をつけるべきポイントについて記します。 前程 Professional Planでの調査結果です。 Organization Planでは仕様が異なるところがあるかもしれません。 もし誤りがあった場合は、フィードバックいたただければと思いますmm 権限の全体像Figmaの構成はFile, FileをまとめるProject（フォルダのようなもの）, ProjectをまとめるTeamで成り立っています。 Team, Project, Fileにはそれぞれ下記のような権限があります。 Figmaの公式ヘルプページより抜粋 ユーザーはT
【2021/4/21〜】Figmaの無料プラン内容の変更まとめ｜スマートキャンプ デザインブログ
スマートキャンプデザインブログ、haguriです。 先日、Figmaの料金プラン内で無料プランである『Starter』の内容が変わると発表がありました。 https://help.figma.com/hc/en-us/articles/360061769534 無料プラン（Starter）でFigmaを運用している方も多いと思うので、どのような変更があるのかを紹介します。 Figmaの料金プランFigmaには3つの料金プランが存在しています。 Starter 料金：無料 対象：個人、小規模プロジェクト向け Professional 料金：有料（月15＄/エディター） 対象：中小企業/チーム向け Organization 料金：有料（月45＄/エディター） 対象：大企業/チーム向け ※料金は月払いの場合です。年払いにすると変わります。 無料プラン（Starter）と有料プランの大きな違いは、
Figmaのプランを理解せずに契約すると多分困るので解説｜Nao Komura｜note
2019/02/26 追記 Figmaのプラン内容少しづつ更新されています。この記事の内容は現行プランとは少しズレている部分があるので、公式サイトでの内容の確認は必須です！ 例えば、フリープランでは2メンバー以上招待できない（editor/viewer関係なく）とこの記事にはあるのですが、現行のプランだとeditorが2名以上招待できないだけで、viewerは制限なく招待できます。こちらの記事でFigmaをべた褒めしたのですが、プランについては少し複雑なので別記事に分けました。 べた褒めしてる記事を読んでいない方は先にそちらを読んだほうが良いかもしれません。そもそもFigmaが使いたくないのにプランを理解した所でアレですし......。 プラン自体はそんなに難しくない 前の記事で書いたようにFigmaは基本的には無料です。 ただ、プロジェクトを増やしたいとか、編集できるメンバーを増やしたい
最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
Figmaのオートレイアウトを完全に理解した話｜UI/UXデザイナー うっくん
どーもーUI/UXデザイナーのうっくんです。 ちょっと前にFigmaにオートレイアウトという機能が追加されました。 最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。 オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多かったこれがとても実用的で、業務効率も上がりそうなので、すでに実戦投入しています。 かなり使いこなせてきたので、そのポイントを以下の３段階に分けてご紹介していきます。 1. 基本機能, 2. 発展系、そして、3. 現時点ではできないこと これを読めば「オートレイアウト完全に理解した」と言えるようになります。Figmaのオート
チームとプロジェクト【これからはじめるFigma】 - bagelee（ベーグリー）
はじめに 前回の記事ではFigmaでできることやツールを一通りざっくりとご紹介しました。また、FigmaとSketchとの違いなども取り上げました。 もう一度復習されたい方はこちらからご覧ください！ Figmaでできること【これからはじめるFigma】 今回の記事では、Figmaで新しいチーム、プロジェクト、そしてファイルを作っていきます。そもそもこの３つの違いはなんなのか？どういった時にチームを作ったら良いのか、プロジェクトを作ったら良いのか、どういう設定ができるのかなどしっかりとご紹介します。 ただし、完全に個人で気軽にデザインする、という方に関しては、本記事の「チーム」と「プロジェクト」部分は簡単に読む程度で十分でしょう。 1人以上の方とデザインする可能性がある方は、「チーム」と「プロジェクト」の内容も理解しておくと良いでしょう。 チームを作る まずは、前回同様Figmaを開いてくだ
FigmaのコンポーネントをVariantsで状態管理する｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。 例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使うことでひとつのコンポーネントで整理できるようになりました。 チュートリアル公式がチュートリアルを用意しているので、実際に触って試したい方はこちらをどうぞ。 Variantsの使い方(準備) Variants は複数のコンポーネントに対して使うことができます。状態の違うコンポーネントまとめてくれるので、複数のコンポーネント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルなパターンがたくさん揃ってる！商用無料で使えるSVGの背景素材 -Basic Pattern Repository
https://www.designencyclopedia.io/
Open design systems from the Figma Community
Figma Variants Playground | Figma