Figmaでデザインを起こしてみよう – 2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現 Part2
これは「Vektor WordPress Solution Advent Calendar 2020」10日目の記事です。 日本語圏のWEBデザイナーやWEBデザインに興味がある人、とりわけFigmaに興味があるけれどちゃんと触ったことが無い方に向けて書いています。デザイン用語がいくつか出てきます。 この「2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現してみよう」というシリーズではFigmaといったデザインツールの使い方のヒントや、デザインを考えるための参考資料のリンク集、Lightningのカスタマイズのヒントなどが得られます。 前回の記事で、再現してみたいサイトは決まりましたので早速作業に入りましょう！ と言っても、いきなりWordPressは立ち上げません。 もちろんLightningとVK Blocksがあればブロックを組み合わせるだけでサイ
なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える｜osanai / ui designer
カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページやコンポーネントにもっと素早くアクセスしたい」などです。 運用方法に関する課題に対して少しずつ改善に取り組み続け、徐々にですが Figma でのデザインシステムの管理が効率化されつつあります。今回はこれまでに実施した Figma の運用効率化の取り組みをご紹介します。 プラグインで解決編目的のページやコンポーネントに素早く
Figmaで簡単にフローチャートや画面遷移図をつくる方法 | wentz-design.com
今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 この記事では、大きくプラグインを使う方法と、FigJamを応用する方法の２つを紹介します。 この記事のターゲットFigmaで画面や図形をなめらかに矢印でつなぎたい方 Figmaで遷移図やフローチャートを書きたい方 Figmaで情報設計やWebデザイン用の資料を作りたい方 プラグイン「Autoflow」を使う方法 図形やフレームなどを、簡単に矢印で接続できるプラグインを利用する方法です。 プラグインの導入方法が知りたい方は、以下の記事を参考にしてください。 Figmaのプラグインのインストール方法と使い方今回はFigmaでプラグインをインス
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
Figma SVG形式のリストアイコンの作成・適用させる方法 | logsuke
無料で誰にでも手軽に導入でき、利便性が高くチーム体制での作業にも向いているデザインツールFigma（公式サイト）。この記事ではFigmaを使ってwebサイトで使えるSVG形式のリストアイコンの作成していきます。 よく使うコマンドや操作 ショートカットや操作方法を覚えるとfigmaを快適に使うことができます。 画面操作 マウスのホイールを上下に回転 → 画面を上下にスクロール shift + ホイール → 画面を左右にスクロール Space + ドラッグ＆ドロップ※1 → 画面を自由にスクロール command/Ctrl + ホイール → 画面を拡大縮小 Shift + 1 → 全てのオブジェクトが画面に入るまで拡大縮小 オブジェクトを選択 + Shift + 2 → オブジェクトが画面に入るまで拡大縮小 Shift + 0 → 100％に拡大縮小 ※1 左ボタンを押したままマウスを動かす。
ウェブ・アプリエンジニアのためのFigma入門 (2) Figmaのキホン | さくらのナレッジ
前回はFigmaを使うべき理由を説明しました。連載の2回目となる本記事では、Figmaの基本的な使い方を説明します。 今回の記事ではデザインツールを使ったことのない人向けに知ってほしいこと、Figmaの画面説明やレイヤーの設置・編集方法といったFigmaでUIモックを作るための機能について説明します。 SketchやAdobe XDのようなデザインツールの基本的な使い方に慣れている方は、この記事を飛ばして次回の記事を読み進めることをおすすめします。 UIモックを作るにあたって 本連載は主にソフトウェアエンジニアを対象にしています。そこで、UIデザインツールを使ったことのない人に知ってほしいことをお伝えしておきます。 基本的に（凝ったデザインでなければ）UIモックはシェープとテキストといったレイヤーで構成されています。シェープは四角形や円形などの形状をもつもの、テキストは文字通り文字を示して
作ろう！自分だけの Figma コード生成機✨
こんにちは。Figma プラグインを愛し、Figma プラグインに愛された男、そう、我こそは seya と申します。 先日 Figma から React のコードを生成するプラグインを公開しました。 そして、これのソースコードをこちらのレポジトリにて公開しています。 面白いと思ったらぜひ Star お願いします！⭐️ 上記レポジトリは React を生成するためのものですが、React 以外にも色々な形で View を書いているところがあるでしょう。なのでこの記事では、上記レポジトリのコードを拡張・編集して「自分だけの Figma コード生成機」を作れるための解説を書きます。 ちなみにですが、 Fork して作っていただいたものでもご自由に Figma Community に publish などいただいて大丈夫です。何か文句を言うことは一切ありません。ただ「作ったよー」とご報告いただける
あの Sketch ファイルをFigma にインポートしてみた｜hikarutayama｜note
----- 以下読まなくて大丈夫です ----- Figmaの主な弱点をあげるなら、プラグインやUI kitが少ない点でしょう。 いくら同時編集機能がすごいとはいえ、実際Figmaを使おうと思ったら 「iOSの標準パーツ使いたいだけなのにイチイチ書きたくない」とか 「仮にSketchから移行したら、昔のファイル使いたい時トレースするの？」 というようなUI作成時の効率性や互換性に不満/疑問が残ります。 一方Sketchには世界中の有志が作ったUI Kitが数え切れない程あります。 必要以上にデザイン？したダイアログ等を見て「これ実装するほどの優位性があったのか？」と発狂する私にとって、そのようなOS UI KitがあるSketchは最高でした。 しかし後になって知ったのですが、 実はFigma、Sketchファイルのインポートをサポートしています。 プラグインに関してはどうしようもありませ
Sketchを超える無料デザインツール「figma」でノンデザイナがロゴを作ってみた – Be full stack
この記事のまとめ ✔ figmaは無料で使える点でSketchより優れている（機能制限あり） ✔ なんとなくPaintを使ったことがある人なら感覚で使えちゃう 今回やったこと 現在作っている「morning | 朝活を応援」というアプリのロゴを作りました。 普段はデザインを全くやらないので、優しい目で読んで下さい Sketchか、figmaか とりあえず、何かを比較するときはGoogle Trendを見てみるのですが、トレンドの線自体は拮抗していました。 Sketch vs Figma figmaは割と最近のツールなのにやるじゃん！と思ったのですが、内訳を見ると、どうやら別のfigmaで検索ボリュームが出ているようです。なので、比較になりませんでした。 アニメのフィギュアを調べるための検索キーワードたち じゃないほうのfigma（おそらく世間的にはこちらがマジョリティ） 自分のSketch
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figma for UIデザイン アプリ開発のためのデザイン、プロトタイプ、ハンドオフ | 翔泳社
サクッと始めるウェブデザイン【Figma】
はじめに｜サクッと始めるウェブデザイン【Figma】
Ms.Engineer 0期生体験談Naoさんの場合
Material Design Icons | Figma
GitHub - Lona/figma-jsonrpc: Leverage JSON-RPC to communicate between your Figma plugin and your Figma UI.
UI/UXデザインツール『Figma』入門 | chot.design
Anima App - Product Information, Latest Updates, and Reviews 2024 | Product Hunt