Customize Sketch with plugins & software extensions
search#resize" data-search-filters-value="" data-search-show-recommendations-value="true" data-search-recommendations-heading-value="Popular Searches" data-search-show-inline-recommendations-value="false" data-search-index-name-value="prod_extensions" data-search-show-headings-value="false" data-search-limit-results-value="5" data-search-dropdown-position-value="absolute" data-search-keep-results-
AdobeXDにGoogleスプレッドシートからテキスト情報を流し込むプラグインが便利すぎる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
そのデザインを確かめよう！ユーザーのフィードバックを得るための6つのAdobe XDプラグイン
そのデザインを確かめよう！ユーザーのフィードバックを得るための6つのAdobe XDプラグイン デジタルデザインは試行錯誤の繰り返しです。デザインの過程で、フィードバックを取り込みみながら数十の異なるバリエーションをつくるUI/UXデザイナーは珍しくありません。ビジョンを明確にしたいデザイナーは、Adobe XDのようなツールを使えば、本物のように感じられるインタラクティブなプロトタイプを作成できます。それを共有すればチーム全体の認識を揃えられるでしょう。しかし、これはまだほんの始まりです。 プロトタイプを最大限に活かすには、実際のユーザーにそれを試してもらう機会を持つことです。プロトタイプを使ってユーザーテストを行うと、開発に実際に着手する前に、デザインについての洞察を得られます。ユーザーがどのようにデザインを使おうとするのか確認して、後になってから修正するとコストがかかる潜在的な問題点
Accessibility In Chrome DevTools — Smashing Magazine
This article will demonstrate some useful features in DevTools which can help you improve the accessibility of your website. For many websites, things like performance and accessibility are an afterthought. But as web developers, it’s best to strive to create the best possible experience we can for our users, regardless of their abilities. I spend a lot of time in DevTools, and in doing so, I’ve c
[Adobe XD]プラグインを使って・作ってクリエイティブな時間を増やそう｜Risa Yuguchi｜note
この記事はデザインツールAdvent Calendar 2018の12日目の記事です。 日本で最近人気が上がってきているAdobe XD(以下XD)は、シンプル・軽い・速い動作が特徴。「考える速さでデザインする」そのテーマを体現する機能がいっぱいあります。 繰り返しのデザインを簡単に作れる「リピートグリッド」 一瞬で画像にマスクした状態にできる「画像の挿入」機能 位置の修正も レスポンシブリサイズにも対応 かつては時間をかけてやっていた作業がXDでは簡単です！クオリティアップのためのテクノロジーは役に立ちます。どんどん発展していってほしいものです。 そんな便利なXDですが、それでも何かを作るときにはXDの機能を使うにしても面倒な単純作業が出てしまいます。 それを解決してくれるのがプラグインです。 プラグイン例その1:自分の作業のちょこっとを解決 拙作のプラグインになりますが、微妙なサイズ調
![[Adobe XD]プラグインを使って・作ってクリエイティブな時間を増やそう｜Risa Yuguchi｜note](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d4bf90d97b035f49dd73ad3d1dcc79e8db76087/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F8901443%2Frectangle_large_type_2_e6a49d84a8a9ba8d1a2123aead4fdaff.jpg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
OverflowがAdobe XDと連携したようなので利用してみました。｜Koushi Kagawa 😎｜note
簡単にいうと、『Adobe MAX 2018でAdobe XD とOverflowの連携が発表されたよ！』ということですね。 Check our how-to guide for more detailed information.↑に記載ある通り、『詳しくはハウツーガイドを読んでくれ！』と書いてあるので、こちらも読んでみることに。 こちらに連携の方法が書いてありました。以下にまとめます。 Adobe XDとOverflowの連携方法上記ハウツーガイドを参考に連携方法を記載します。 1. Adobe XDとOverflow を最新バージョンにバージョンアップする 古いバージョンだと連携できないようなので、どちらも最新のバージョンにアップデートしましょう。 参考： Adobe XD バージョンアップ方法 Overflow 2. Adobe XDで、Overflowプラグインのインストール A
Web制作で役立つAdobe XDの「神プラグイン10選!!」導入方法からおすすめポイントまで徹底解説!! | 株式会社ウェブ企画パートナーズ
Web制作で役立つAdobe XDの「神プラグイン10選!!」導入方法からおすすめポイントまで徹底解説!! シェア つぶやく ブックマーク LINE Pocket 颯爽とAdobe界に登場し、我々制作者のフローをより便利にしてくれるステキな「Adobe XD」。 XDは日々アップデートが行われ、便利な機能追加が進んでいます。しかし、まだまだ「この機能があったらいいな！」が絶妙に無かったりで、本格的に稼働させようと思うと、歯がゆい思いをするデザイナーさんも多いのではないでしょうか。 XDでもプラグインが可能に！ そんなXDですが、2018年10月のアップデート（バージョン 13.0）より、プラグインの使用・開発が可能になりました！ XDのプラグインはPhotoshopなどと同様にHTML・JavaScriptなどの技術で開発できるため、フロントエンドの知識があれば(比較的)手軽に作成可能です
Apple、SafariでJavaやSilverlightなど、ほとんどのインターネットプラグインのサポートを終了したと発表。
AppleがSafariでJavaやSilverlightなど、ほとんどのインターネットプラグインのサポートを終了したと発表しています。詳細は以下から。 Appleは現地時間2019年04月19日、Safariのサポートページを更新し、ほとんどのインターネットプラグインのサポートを終了し、インターネットプラグインを必要としないHTML5スタンダードのコンテンツに最適化していると発表しています。 Safari no longer supports most plug-ins. To load webpages more quickly, save energy, and strengthen security, Safari is optimized for content that uses the HTML5 web standard, which doesn’t require a p
プラグインでWordPressを楽々お引っ越し！duplicatorならサーバー移転も簡単。
WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 💬 𝕏（twitter）はよくフリーランスの人たちにフォローされてるようです。 Follow @websae2012 WordPressの移転／バックアップ／複製に最適な「duplicator」とは？ WordPress › Duplicator « WordPress Plugins 『duplicator』は、WordPressサイト
LINE、Web/アプリ上でLINEの友人へのシェアなどが簡単にできるソーシャルプラグインを刷新 | ニュース | LINE株式会社
新たに、「友だち追加ボタン」・「いいねボタン」も追加 LINE株式会社（本社：東京都渋谷区、代表取締役社長：出澤 剛）は、コミュニケーションアプリ「LINE」において、Webサイト／アプリを対象に、簡単にLINEの友だちへのシェアなどができるソーシャルプラグインを刷新いたしましたので、お知らせいたします。 ■LINE Social Plugins公式サイト https://media.line.me/ja/ LINEが提供するソーシャルプラグインは、企業や一般のWebサイトおよびiOS・Androidアプリに設置し、当該Webサイトやアプリ上でLINEと連携したアクションをサポートする機能です。2012年12月より、LINEで他のユーザーに情報を送ったり、LINEのタイムラインに情報を投稿したりすることができる「LINEで送るボタン」を提供していましたが、この度デザインを刷新すると共に、新
FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
aishipRに高機能スライダー「slider pro」を入れてみる
aishipRは、レスポンシブECカートをもった国内唯一のASPです。aishipRにjQueryライブラリである高機能スライダー「slider pro」を入れてみたいと思います。 aishipRの簡単な紹介 aishipRでは、通販サイト運営の方が簡単にECサイトを立ち上げることができ、サポート体制やマニュアルもしっかりとしているので、初心者でも安心してサイト構築と運営ができるASPとなっています。 Slider Proとは？ 「Slider Pro」はシンプルなスライダーとしても利用可能ですが、 何と言ってもこのスライダー最大の魅力がオプションの多さです。 レスポンシブ対応 タッチデバイス対応 Retina用画像の出し分け対応 IE8以上で動作 キャプションのアニメーション表示対応 縦カルーセル、横カルーセル対応 画面サイズによってレイアウト変更可能 MITライセンス などなど。一番あ
【jQuery】今こそマスターしたい高機能スライダー［Slider Pro］の使い方
数あるjQueryスライダーの中から目的の用途に合ったものを探すのはちょっとした手間ですが、今日紹介する［Slider Pro］は完成度も高く機能も豊富なので、一度試してみることをオススメします。 名前に「Pro」と付きますがMITライセンスで基本的に個人でも商用でも無料で利用できるのでご心配なく。 特筆すべき機能としては以下のようなものがあります。 レスポンシヴ対応 ブレイクポイント設定可能 スワイプ操作、タッチ操作に対応 サムネイル設定 縦・横、両方のカルーセルに対応 フルスクリーン・モードが可能 Retinaディスプレイ用の画像の切り替えが可能 MITライセンス ……などなど。 文字通り「痒い所に手が届く」素晴らしいjQueryプラグインです。 実際に使ってみるとスグにその便利さを感じることができるはず。 試しに実装したサンプルは以下のURLからどうぞ。 ［Slider Pro］：実
jQueryスライダー Slider Pro の使い方｜Gimmick log
公開日：2015.11.20 更新日：2020.05.20 jQuery, カルーセルスライダー Slider Proは多様なオプションで痒いところに手が届くスライダーです。 ざっと概要をまとめると。。 レスポンシブ対応タッチデバイス対応Retina用画像の出し分け対応IE8以上で動作キャプションのアニメーション表示対応縦カルーセル、横カルーセル対応画面サイズによってレイアウト変更可能MITライセンス などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。 まずはデモページをご覧ください。 Slider Pro 配布元 デモページ 必要なファイルを読み込む Slider Pro 配布元からファイルをダウンロードし、読み込みます。 今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。 slider-pro-master ├
Bracketsの7つ道具的エクステンション Brackets Tools - Qiita
Brackets Toolsとは Bracketsのエクステンションの1つで、これを入れるだけでコーディングやプログラミングが捗る様々な機能が使えます。 派手なものではありませんが、どれも使えると何気に便利なものばかりですので、ぜひ試してみてください。 それぞれ、GIFアニメで解説して参ります。 →エクステンション公式GitHub →基本的な使い方 →他のエクステンション 機能紹介 一部を除き、各機能へはメニューバーの「Tools」またはエディタ欄で右クリックでアクセス出来ます。 空白行の削除 英名：Remove Empty/Blank Lines 改行の削除 英名：Remove Break Lines 行頭の連番を削除 英名：Remove line numbers 重複行の削除 英名：Remove duplicate lines 単語リストを配列に変換 英名：Word To Array
Brackets × "スニペット管理" で爆速コーディングを実現する - Qiita
こちらの記事ではBracketsのエクステンションを用いてスニペット管理を行い、コーディングを効率化する方法をご紹介いたします。 基本的な使い方はこちら→Bracketsの機能紹介、使い方解説 その他の便利エクステンション集はこちら→ Brackets おすすめエクステンション集・解説 使用するエクステンション Brackets Snippets (by edc) デフォルトでスニペットが豊富に用意されており、スニペット展開後のカーソル位置等も細かく調整できます。 また既存のスニペットの編集や新規追加も容易に行うことができ、設定ファイルをインポート/エクスポートすることにより他環境にも設定を引き継ぐことが出来ます。 デモ 基本的な使い方 起動 インストールが完了するとツールバーに電球のアイコンが追加され、こちらをクリックすると下部にスニペット管理画面が表示されます。 スニペットを展開する
Brackets おすすめエクステンション集・解説 - Qiita
Qiita上の内容を集約し、大幅に修正・加筆したものを本として出版しました。 →ブログ：Bracketsの解説書を出版しました 基本的な使い方 こちらにて別途紹介しています。 →Bracketsの機能紹介、使い方解説 →Bracketsショートカット集 カテゴリ一覧 必ず入れておきたいもの ソースコード関連-全般 ソースコード関連-HTML/CSS ソースコード関連-JS/PHP、その他 画像・デザインデータ連携系 挙動改善系 機能拡張系 という形でカテゴリ分けをしています。 ※各エクステンションまだまだ機能をフルに使い切れてないところもありますので、何卒ご容赦ください。。。 必ず入れておきたいもの Extensions Rating 拡張機能一覧画面において、ソート可能にしたり各エクステンションの作者のアイコン・DL数・スター数等の情報を表示してくれます。 これにより、拡張機能がとても探
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Zoomと連携するAdobe XDプラグインでリアルタイムコラボレーションをもっと便利に
http://chromelens.xyz/
SVG LAYERS for Photoshop | Open SVG files as Editable Vector Layers