Genki — A Design Developer System | IMG.LY Blog
AEUX
Real layers Build visual design layers in After Effects as editable as possible with shape and text layers. Images will be exported and built as files when needed –even from Figma in the browser. Grouping/Ungrouping In Ae, a layer exists either in the current comp or somewhere else –which is very different from the grouping in most design apps. It is now possible to group and ungroup precomped lay
Sketch移行とUIコンポーネント化で、良いことしかなかった話
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
SketchでレスポンシブなWebサイトが作れる！「LaunchPad」の実力をチェック
人気のUIデザインツール「Sketch」で作ったデザインを静的なHTML/CSSに展開できる便利なプラグイン。レスポンシブWebデザインにも対応できる「Launchpad」はかなりおすすめです！ Animaは便利なSketchのプラグインを2つ作っています。Auto Layoutは、Sketchでレスポンシブなレイアウトを作るのに使い、Launchpadは出来上がったレスポンシブなデザインを、ほぼ完成版と言えるぐらいのまともな品質のコードに変換し、HTML/CSS Webサイトとして出力します。まずは、ビデオを見てください。 「えっ？ また別のサイトビルダーですか？ 」 そう言わずに聞いてください。Launchpadは単なるHTML/CSSエクスポーター以上のものです。デザインはSketchを使うので、WYSIWYGエディターとも違います。4つ星のコード出力を5つ星のWebサイトにしたいな
How to control shadow spread and blur?
I have designed UI elements in sketch, and one of them has a shadow with blur 1 and spread 0. I looked at the doc for the views layer property and layer doesn't have anything named spread or blur, or anything equivalent (the only control was merely shadowOpacity). How can control things like blur and spread? Here are my settings in Sketch: And here is what I want my shadow to look like: And here i
Sketch Plugin Manager
Sketch Plugin Manager Keeping your Sketch plugins up to date. Download .zip View on GitHub Sketch Plugin Manager Sketch Plugin Manager uses the power of Git to keep all of your installed plugins up to date. Supported Operating Systems Sketch Plugin Manager is currently only supported on OS X 10.12 Sierra. A build for 10.11 El Capitan is in the works. To get notified of changes, watch this project
AnimateMate - Animation Plugin for Sketch
What is AnimateMate? Haha, is this joke or what?! Why the heck do I need animation tools in Sketch. You know feeling when you just need a simple animation for your awesome concept and you realize that it's a huge process to move all assets into some other application? That’s a lot of hassle! Like this example. I know the feeling! That's why I created AnimateMate in order to produce and export simp
Share, Organize, handoff and collaborate.
Bridge between designers and developers Import Sketch design files into Markly with one click, and share with developers or clients. Developers can inspect design specs, copy layer info, export and save assets, generate CSS, JavaScript, Sass, Less, etc. code. The developer / design handoff workflow helps your team deliver product faster. Realtime visual design collaboration Any project member can
Slicer
Presets woot! Select a preset (or customize one) and your slices are named and sorted by folders neatly Repeat! Setup your slices once and hit ⌘ + E endlessly to export again using the same settings 9-patch the world! Draw 4 black rectangles (i.e. patches) once and watch them exported into all Android sizes Some 9-patch guidance In order for the dark arts of 9-patch to work please follow these: Dr
iOSDCで『Sketchからアイコン切り出し ⇒ Asset Catalogを自動生成 ⇒ 差分があればPullRequest』という流れをCIで自動化する話をしました - Konifar's WIP
2ヶ月くらい前にiOSDC 2017のプロポーザルを出したんですが、2つ出したうちの1つが採択されたので登壇してきました。 speakerdeck.com サンプルリポジトリはこちらです。資料だけだとわかりにくい部分もあると思うので、少し補足しておこうと思います。 Import Sketch Icons to Asset Catalog on CI Sketchからアイコンを切り出して、Asset Catalogを生成して、差分があったらiOSのリポジトリにPull Requestを出すというのをCIで自動化している話です。 私の所属するQuipper Limited.で実際に運用している知見です。 @konifar konifarという名前で、TwitterやGitHubをやっています。 プライベートで、専業主婦の嫁さんとエンジニアリングやエンジニアの仕事に関する雑談をするyome.fm
GoogleスライドにSketchのデザインをアップできるプラグイン「Sync to Slides」
みなさん、デザイン共有してますか。Sketch共有してますか。 共有はPDFで？InVisionで？このプラグインを使えばみんな大好きGoogleスライドで共有できるみたいですよ。 Sync to Slides むずかしいことは一切なし。プラグイン入れてSyncするだけ まずはプラグインをインストール。 おなじみのプラグイン管理ツールSketchpacksで「Sync to Slide」を検索すれば見つかります。 適当にサンプルの画面を作ってみました 次にブラウザでGoogleスライドを立ち上げて新しいスライドを作成します。 作成したらURLをコピーしましょう。 Sketchに戻ってプラグインからSync to Slideを選択するとこんな感じに。 さっきコピーしたURLをぺたっと貼り付けます。こうなる 画面を選んでSyncしてみる。 できました。こんな感じ。 ちゃんと要素ごとにパーツが分
Painting with Code
Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents. If you’re a designer or an engineer familiar with React, you should feel right at home with the new library, and you can play with it right now. H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Toybox welcome to Miruni
Supernova Studio
Flawless App
Sketchpacks - Sketch plugin manager for teams. Manage and sync your Sketch plugins across machines and teams.
Anima: AI Design to Code | Figma to React | Figma to HTML | XD to HTML | XD to React
Sketch Toolbox
Photopea | Online Photo Editor
サービスの一貫性と高速開発をもたらす「動くスタイルガイド」 | Visional Designer Blog
