タグ デザインツール
人気順 5 users 50 users 100 users 500 users 1000 usersAdobe競合のAffinity、クレカ情報登録不要、半年間無料のトライアル開始
デザインツール「Affinity」シリーズを手掛ける英Serifは7月8日(現地時間)、Mac、Windows PC、iPad向けの「Affinity Photo」「Affinity Designer」「Affinity Publisher」を6カ月(半年)間無料で使えるトライアルを開始したと発表した。メールアドレスを入力するだけでダウンロードでき、トライアル後購入する義務は... 続きを読む
【乗り換え】Adobeソフトに代わるベストな代替ツールはこれ【早見表つき】
Adobeツールの乗り換えを検討し始めたけど、 「どこで見つければいいの?」「どんなツールを選べば後悔しない?」「代替ツールのいいところって何だろう?」「乗り換えのタイミング今なのか?」「費用の違いはどのくらい?」 普段から利用するツールだからこそ、自分にとって最適なデザインツールを知りたい方向けのリス... 続きを読む
Figmaは多大なアクセスをさばくためにどのようにデータベースのスケーリングを行ったのか?
ブラウザベースのデザインツール「Figma」のデータベース(DB)は2020年以来100倍に拡大しました。当初は単一のPostgreSQLで構築されていたDBをどのようにして分散システムへと移行したのかについて、公式ブログで詳しく説明されています。 How Figma's Databases Team Lived to Tell the Scale | Figma Blog https://www.... 続きを読む
Canva、Affinityを買収 Adobe対抗のデザインツール大手
オンラインデザインツール「Canva」を手掛ける豪Canvaは3月26日、プロフェッショナル向けデザインツール大手の英Affinityを買収すると発表した。取得額など詳細については明かしていない。 Canvaは2013年に設立。オンライン上でアクセスできる統合型のデザインツールで、スライドやポスター、SNS用のバナーといったデザ... 続きを読む
OpenAIが「ChatGPT」をコード不要でカスタマイズできる「GPTs」をリリース開始/「Plus」および「Enterprise」ユーザーにデザインツール「Canva」などのサンプルも公開
Figma でデザイン、そのままデモ、そのまま実装! - Qiita
みなさん、デザインツールの Figma を使っていますか? 私はまだ「使っている」と言えるほど使えていません というわけで勉強会を開催して勉強します Figma とは 公式の紹介文は以下のとおりです デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するための... 続きを読む
Figma for VS Codeを使ってCSS実装する時のおすすめポイント - Goodpatch Tech Blog
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev Modeや... 続きを読む
Adobeによるデザインツール「Figma」買収についてEUが独占禁止法違反の調査実施へ
2022年9月にAdobeが発表したデザインツール「Figma」の買収案件について、EUが独占禁止法違反ではないか調査する準備をしていることがわかりました。 Adobe’s $20bn deal to acquire Figma under threat from EU investigation | Financial Times https://www.ft.com/content/d041351e-0974-4a27-ada2-7c026f67e765 Adob... 続きを読む
AIでイメージ素材を自動生成できるMSのデザインツール「Microsoft Designer」を使う
マイクロソフトは2022年10月、PowerPointのデザイン機能を切り出し、クラウドベースで「Microsoft Designer」を公開した。当初は利用するのに待機リストへ申請する必要があったが、現在はMicrosoftアカウントを持っていれば誰でも無料で利用できるようになっている。 OpenAIの画像生成AI「DALL·E 2」を利用し、イメージ... 続きを読む
Figmaの作業を効率化! 知らないと損するショートカット集 - ICS MEDIA
ウェブ制作における定番になりつつあるデザインツール「Figma」。本記事では、Figmaの知らないと損するショートカットキーを紹介します。 よく使う便利な機能を呼び出すショートカットキーを覚えておくことで、作業効率が上がるのでしっかり覚えていきましょう。 本記事では基本機能のショートカットキーだけでなくマニ... 続きを読む
第175回 Figma買収から見えてきた、Adobeが向かう目的地 | gihyo.jp
「Adobeが、Figmaを200億ドル(約2兆8,700億円)で買収する」。Adobeの四半期決算が発表される2022年9月15日の朝(日本時間9月14日深夜)、海外の経済ニュースから驚くべき速報が飛び込んできました。 Adobeが200億ドル(約2兆8,700億円)で買収したFigmaが提供するクラウドベースのデザインツール「Figma」のウェブ... 続きを読む
Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 - ICS MEDIA
ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードル... 続きを読む
AdobeのFigma買収で登録者数は月次で56倍、Googleも使うデザインツール「Penpot」 | DIAMOND SIGNAL
Adobeによるコラボデザインツール運営のFigma買収の報を受けて、劇的にユーザーを増やした企業がある。スペイン発のスタートアップ、Penpotだ。 Figmaが展開する「Figma」はブラウザベースのデザインツール。デザイナーや開発者を含むチームでのコラボレーションに最適化されており、アプリのUIのデザインやワイヤーフレ... 続きを読む
「Excel」はデザインツールだ! という人に便利なコマンド集「かんたんレイアウト 5.0」/以前「Excel」をアイコンエディターにしてしまった人の新作
エンジニアのためのFigma超入門
エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの... 続きを読む
知っておくと便利! CSSでUIデザインを微調整する時短テクニックとプロセスを解説
WebサイトやアプリのUIデザインで欠かせないのが、FigmaなどのデザインツールとChromeなどのデベロッパーツールです。この2つをどのように使い分けるとよいのか、デザインツールでやるよりもブラウザ上でCSSでやった方が便利な時短テクニック、UIデザインを微調整するプロセスを紹介します。 Tweaking In The Browser by... 続きを読む
FigmaのVariants入門 - さらにコンポーネントを使いこなそう
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variant... 続きを読む
デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ
デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッド... 続きを読む
文章の品質向上に役立つ! Figmaのプラグイン「テキスト校正くん」を公開
ウェブ制作の現場で一般的に使われるようになってきたデザインツール「Figma」。そのFigma上で動作する文章校正支援プラグイン「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん for Figma 本プラグインを利用することで、画面内の文章を手軽に校正でき、テキストの品質を高める... 続きを読む
エンジニアのための Figma 知識
エンジニアにデザインツールの知識・習熟は必要か? しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 記事中のショ... 続きを読む
Chrome95で追加された画面上の色を取得するEyeDropper APIについて | サイボウズ フロントエンドエキスパートチーム
Chrome 95 がリリースされ、新機能として EyeDropper API が追加されました。(Edge 95 にも追加されました) EyeDropper API とは EyeDropper API は画面上から色情報を取得するスポイトツールをブラウザ上で実現する API です。スポイトツールはデザインツールなどに搭載されていることが多いかと思います。 Chrome の D... 続きを読む
エンジニアに伝わるデザインを作るためのFigmaのAuto Layout入門
徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳... 続きを読む
Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 - JMDC TECH BLOG
JMDCでアプリのデザインを5月から担当しているはんざわです。 Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか? JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。 乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく... 続きを読む
グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法 | コリス
グラデーションに美しい色を選んだのに、なぜかくすんでいることはありませんか? 真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です。 美しいグラデーションを作成するためにどうすればよいのか、紹介します。 Photoshopなどのデザインツールだけでなく... 続きを読む
最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分... 続きを読む