|| Social Media Sizes 2023 + Templates ||Image and Video sizes for Social Media.Templates for Sketch, Figma, XD, Photoshop & Illustrator.
もうUIデザインのバージョン管理をサボるのはやめよう | Web Design Trends
UIデザインツールで作ったファイルのバージョン管理をきちんと行っていますか？バージョン管理を行うことによって、作業の内容が明確になり、チームでのデザイン制作が効率的になるというメリットがあります。 ツールの料金を払いたくないから見送っていたという人も、Githubを使えば無料でバージョン管理が行えます。 エンジニアはGitによるバージョン管理がすでに一般的な習慣として定着していますが、UIデザイン制作でも同様にバージョン管理を行うことが一般的になりつつあります。 今回は、デザイン制作の主要バージョン管理ツールとその特徴についてご紹介したいと思います。 バージョン管理ツールとは バージョン管理ツールとは、デザインツールなどでデザインを制作したり編集した時に、それぞれの変更内容を管理するためのツールです。 エンジニアは当たり前のようにプログラムのコードのバージョン管理を行っていて、それによって
Sketchを使ったAtomic Designのワークフロー
SketchとAtomic Designという強力なツールと方法を組み合わせれば、デザイナーはデザインシステムを作成して、ワークフローを標準化し効率化することができます。 デザインシステムとは デザインシステムとはチームがプロダクトを制作し運用する際に共通の言語で繋がれるように、再利用できるコンポーネントとガイドラインをまとめたものです。 ほとんどの場合、デザインシステムはスタイルガイドとコンポーネントライブラリから構成されています。加えて、ブランドバリューや、口調や雰囲気といった要素を含めることもあります。デザインシステムを導入する際のポイントは、プロダクトやブランドについての唯一の正しいソースとして運用される基準を作ることにあります。 Googleのマテリアルデザインは構築されたUIデザインシステムの一例です。マテリアルデザインは2014年に、一貫したAndroidアプリをデザインし開
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識｜平田 / U-NEXT
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識 平田です。普段は個人のブログに記事を書いているので、ちゃんとしたnoteを書くのはこれが初めてです。 Sketch, Adobe XD, Figma, InVision Studio について徹底的に比較を行ったので、知見をまとめたいと思います。量がかなり多いので、いくつかの記事に分けて紹介します。 1. 導入と背景知識 ◀イマココ 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回はこの連載記事の導入と、各ツールを比較する上での背景的な情報をまとめます。 概要## この記事に含まれる内容 🙆♀️ - Sketch, Xd, Figma, Studio の選定基準 - Sketch, Xd, F
2018年版：おすすめの人気UIデザインツール徹底比較 | Web Design Trends
日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。 Adobe XDの正式リリース、Figma3.0のリリース、InVision Studioのベータ版公開など、2017年の終わりから2018年にかけて多くのUIデザインツールが登場しました。 今回は、2018年8月現在で公開されているUIデザインツールの中から、特に人気のツールについて機能や特徴を比較していきたいと思います。 最新の情報はこちら 2020年版：おすすめの人気UIデザインツールを徹底比較！【Figma / XD / Sketch】 現在は、デザインツール戦国時代とも言われるように、様々なデザインツールが競争を繰り広げています。 UIデザインを作るための「UIデザインツール」もどんどん進化していて、個性的なツールが多数登場していま... Web Design Trends UI
Sketch はもういらない？デザインツール Figma｜hikarutayama｜note
※本noteはQiitaの記事をデザイナー向けに編集した転載です。 https://qiita.com/hikaru_tayama/items/49373412ec1a515ff05d （QiitaではGIFをつけていますのでGIFだけそっちで見てください。） はじめにデザイナーのみなさん、わりと海外では話題（のはず）のFigmaをご存知でしょうか。昨日チームメンバーにnoteで紹介している人がいるよと共有されて『 Figmaというデザインツールがすごい 』を拝読し、嬉しくなりました。 noteで検索してもフィギュアばかりで上記以外ぱっと見当たりません。 Adobe XDが正式リリースされてから『 比べてわかったSketchとAdobe XDの違い 最高のUIデザインツールはどっち？ 』や『 XD vs Sketch みたいな比較は意味がない理由 』のような良記事をネットやSNSでしばしば
Introducing Exciting New Tools from Ceros: Farewell to Avocode Products
Goodbyes aren't our thing, but exciting new tools are! 🙌 “Avocode” was sunset on October 1st, 2023 Here at Ceros, we're no good at goodbyes. But one thing we've always excelled at? Embracing new beginnings and creating awesome new solutions. That's why we're kicking off a new era of tools crafted just for you: This transition means we’ve bid a fond farewell to all products offered by the Avocode
10 tricks & techniques to make the most out of Sketch
Learning Sketch is a lot like learning how to drive. It’s relatively easy to take the first steps, but mastering the skill is a completely different animal. As always in design, devil’s in the details. Becoming a Sketch pro is pretty much about clever workarounds and nasty little tricks. Today I’d like to share a few of them — ones that I personally like most. Some of them are pretty basic, some a
デザインコラボレーションの最前線（Design & Collaboration イベントレポート）｜のっち Ryosuke Inoue
こんにちは。のっちです。 現在デザインツールが世の中に溢れていますが、その中でも特に注目されているのがデザインと他分野のコラボレーション。 今回は、デザインツールの最新事情やそのコラボレーションについて、各分野の有識者たちがお話ししてくださった『Design & Collaboration』に参加しました。どれもこれから伸びそうだなと思わせてくれるものばかりでした。今回はそちらのイベントレポートです。 （ちなみにトップ画像の文字の周りの円たちは、色々なツールのテーマカラーを散りばめたものとのこと。どれがどれだかわかりますか？） InVision Studioが誰でもアクセス可能にまずはInVision Studioについて、Sketchの書籍でも有名な吉竹さん（@ryo_pan）にお話いただきました。 InVision Studioは、InVision社が新しくリリースするデザインツールで
基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選｜Goodpatch Blog グッドパッチブログ
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基本機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
[sketch] Prottyping機能を試してみました #sketch | DevelopersIO
デザイナーの たなか ゆきこ です。 デザインを行うときにかかせないのが、プロトタイピング。 2018年3月、sketch にとうとうプロトタイピングがやってきましたので、早速試してみたいと思います。 公式：https://sketchapp.com/ https://sketchapp.com/docs/prototyping/ Sketch の version を確認 プロトタイピングは、Sketch 49 のアップデートで使えますので、ご自分の Sketch バージョンを確認しましょう。 Sketch 上部メニューの【About & Registration...】を選ぶと確認できます。 プロトタイピングでは、以下ができるようになっています。 オブジェクトを選択しての画面遷移指定 ホットスポット（エリア）を作成からの遷移 プロトタイプを開始するアートボードを指定 プレビュー確認 他に
![[sketch] Prottyping機能を試してみました #sketch | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/9107e74b02d950e01c757f911caa1a9b0799d7e5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F03%2Fsketch4icon.png)
Sketchにインストールしておくと便利なプラグインのまとめ
Sketchはそのままでも利用できますが、プラグインをいれると更に便利になります。 Webページやスマホアプリの制作に便利なSketchのプラグインを紹介します。 Paddy 文字数を変更したり、子要素のサイズを変更すると、親要素のレイアウトが崩れてしまうことがあります。そんな時は、このプラグインが便利です。 要素にpaddingを指定したら、それを保ったままレイアウトを変更できます。機能は他にもあり、要素間のスペースを保持する、複数の要素のツラを左・中央・右・上・中央・下で揃えるなど、要素を配置するための便利な機能が備わっています。 ガイドラインの作成が簡単になるSketchのプラグイン -Measure Measure デザインのガイドラインを作成する時に面倒なのが、サイズやスタイルを調べてそれを記述することです。Measureは指定した要素のサイズやカラーなど、要素のスペックが記述で
Q&A おすすめSketchプラグイン
使用されているSketchのPluginを教えてほしいです！ しゅんさん どんなUIデザイナーかで決まります Sketch は UI デザインツールとして優秀なアプリです。日本ではまだまだ Photoshop が有力な現場が少なくないですが、欧米では Sketch が過半数以上を占めている状態です。およそ 2000 人のデザイナーを対象にしたデザインツールの調査によると、UIデザイン、ワイヤーフレームの定番は Sketch になっています（2018年1月現在）。 私の仕事でも欠かせないツールではあるものの、プラグインの組み合わせ次第でまったく違う使い方になる場合があります。定番と呼べるプラグインはありますが、それ以外は自分の役割や仕事現場によって大きく変わります。Airbnb のようにオリジナルのプラグインを開発して、自分たちのワークフローを最適化しているところもあります。 よって、自分が
チームの課題から考える、Adobe XDとSketchの導入メリット | PSYENCE:MEDIA
この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2017 の投稿記事です。 こんにちは！現在キッズリーのデザインを担当しているデザイナーの町田（@macheri_me）です。 今年で中途入社３年目となりました。本日は弊社の制作事例をもとに、AdobeXD・Sketchの活用法についてご紹介します。 【この記事を読んでもらいたい人】 これからAdobe XD、Sketchどちらを導入しようか悩んでいる人 デザイン制作フローの中で課題を抱えており、解決したい人 Adobe XDとSketch。自分のチームにはどちらが最適か サービスのデザインを制作する際、何のツールを使っていますか？少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。しかしながら、これらはUIデ
2017年、デザインガイドラインについて考える。｜Yuya Furusato｜note
株式会社rootのUIデザイナー 古里祐哉です（@remmyfurusato）。 rootでは、サービスの立ち上げやリニューアルに伴う、UI/UXデザインをご支援しています。 さて、今年を振り返えると「デザインガイドラインに注力した」年でした。デザインガイドラインを必要とされるクライアント様には共通点があります。 ・レイアウトパターンやパーツの使い方が定義されていないで、設計者やエンジニアが迷う。 ・結果、サービス全体の一貫性がなく使いづらい。 このような課題を抱えるクライアント様からのご依頼を多くいただきました。サービス開発の現場で、徐々にデザインガイドラインの重要性が広まってきているのではないでしょうか。 デザインガイドライン作成を通して考えたことをまとめたいと思います。 デザインガイドラインとは？ デザインガイドラインの定義は「サービスやプラットフォームのデザイン方針を示したドキュメ
Sketchのデザインリソースがダウンロードできたりまとめられているサイトのまとめ - NxWorld
Sketchのデザインリソースをダウンロードできたり、様々なところで配布・公開されているものをまとめているサイトのまとめです。 中には素材に限らずちょっとしたテクニックやチュートリアルを紹介したり、便利なツールやプラグインの紹介をしているサイトもあるので、普段からSketchを多用している人はもちろん、これから使ってみようと思っている人もぜひチェックしてみてください。 紹介しているサイトの多くはフリーの素材を中心にまとめてはいますが、サイトでは特にライセンスの記載がなくても配布・公開元では制約がある可能性もあるので、利用する場合はそちらも併せて確認することをおすすめします。 Sketch App Sources ひとつ目からここだけ覚えておけば十分なレベルのサイトですが、Sketchのデザインリソースを数多くまとめているサイトで、現時点（当エントリー公開時点）でも2800以上がまとめられて
Sketch3で軽量なスライドを作るポイント【実証実験データ付き】
このブログでは告知をしていませんでしたが（facebookページでのみ告知してました）、3/7にふくい産業支援センターで行われる「アップグレードふくい＋プラス ～Web制作者のための仕事の作り方・向き合い方～」というイベントで登壇する事になりました。 そこで発表に使うスライドをSketch3で作っていたのですが、内容が完成してからとある事に気付きました。 今回の問題点と仮説と解決策 スライドが出来て練習も一通り出来て、主催の方にファイルを送ろうとした時に気付いてしまいました。 「ファイルサイズが大きすぎる」 という事に。 何という事でしょう。 何か重いなくらいで特に気にせず作っていたら71枚のスライドで690MBにもなっていたんです（笑） 今回のスライドはしゃべるベースなので特に配布する予定はなかったんですが、参加いただいた方には特典としてスライドデータを差し上げようと思っていまして、その
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketch tools and plugins [updated for 2020] 🚀🌈✨
デザイン制作時短術！デザインを制作する際に有用なツール14選【UI/ワイヤーフレーム/デザイン/コーディング】
最近のWebサイトで使われているレイアウト・コンポーネント全102種類が揃ったデザイン素材 -Frames
