図形の辺の長さを8の倍数にしてくれるXDプラグイン「Octify」を作った話

どうもスクアードの松井です。

便利なXDプラグインを作ったからよかったらみなさんどうぞ〜
という旨のnoteです。

作った、と言ってもコーディングしたのは僕ではなく弊社のトップエンジニア柳澤さんです。

SNS嫌いの現代のサムライである柳澤さんは多分noteを書いてくれないだろうと思い、僕が書いている次第ですので開発の具体的な内容はGitHubで直接中身を見てもらうしかありません。すみません。

もっとみる

XD「タブ」の作り方



Step.1
タブメニューを作成してコンポーネント化
(command + K)


Step.2
初期設定のステートの「+」を押して
「新規ステート」を追加


Step.3
「プロトタイプ」に切替え、ボタンの移動先を
追加したステートに設定する


Step.4
「プロトタイプ」に切替え、タブの移動先を追加したステートに設定する

[インタラクション]
・トリガー:タップ
・アクショ

もっとみる

今週の積み上げ(12月25日)

日毎ためになりそうなことをtweetしてますが、1週間ずつnoteにまとめておきます。気になったら、リンク先をみてみてくださいませ

ベイジ枌谷氏に「よいコンテンツの作り方」を聞いた結果……

よいコンテンツの正体とは?どんなマーケティング施策をやるにしても「よいコンテンツを作ることが大事」という結論に至る

自販機を例に、UI/UXについての理解を進める

ECサイト は、この4つに集約されます

もっとみる

【7】ファイルの拡張子

拡張子に注意

Windows、ios別々でイラストや絵を描いて保存すると
拡張子がjpeg、HEICとわかれてしまう事がある。

そもそも拡張子とはimg.jpg/img.heicなどのカンマ以降の事を指し、
カメラで撮影した場合もデバイスに応じて保存されてしまうので
万が一画像を共有する場合はhtmlを書いたり、Googleドライブに保存して共有する場合などはjpgで保存した方が無難。

io

もっとみる

KeepAliveの部活「UI研究部」のご紹介

KeepAliveの加藤です。
今回はKeepAliveの部活「UI研究部」についてお話しさせて頂きます。

UI研究部とは

名前の通り、UIに関して研究する部活です!
現在は、UIに関する最新の動向、UIフレームワーク、プロトタイピングツールなどの調査・研究、スキルアップ勉強会をメインに行っています。基本的に調査・研究報告、スキルアップ勉強会は「Zoom」を使用し毎週木曜18時から行っています

もっとみる

【adobe XD】XDだけで画像をボカす方法

お疲れ様です、どうもアオキタカユキです。

今回はXDだけで画像をボカす方法をご紹介シたいと思います。ぼかしって以外と使ったりするんですよね。ぼかした背景の上にテキストを重ねて奥行きをだしてリッチにさせたり、アンフォーカスな表現につかったり何かと使用頻度は高いとです。

この方法を知る前まではPhotoshopでボカした画像を作成して入れ込んでましたけどそんな必要はなくなりますね!

まずはこのよ

もっとみる

XD「知っておくと便利な小ワザ」

 〜要素間のアキを調べる〜

Step.1
パーツを選択。


Step.2
パーツを選択した状態でアキを調べたい要素にカーソルを合わせ、Optionキーを押す。


Complete!
要素同士のアキの数値(px)が表示される。

Optionキーだけ押した場合は、ボードに対しての上下左右のアキが表示される。

以外に便利な時短テク。

もっとみる

XD「スタック」の使い方



スタックを設定し、各パーツの間隔を一定に保つ。

Step.1
各パーツを作成し、コンポーネントに変換。
(command + K)
もしくは、グループ化だけでもOK。


Step.2
マスターコンポーネントを選択した状態で、
プロパティインスペクター(右側)の「スタック」にチェックを入れて有効化。


Step.3
垂直方向 or 水平方向を選択し、
任意の間隔の値(px)を入力。

もっとみる

XD「パディング」の使い方



パディングを設定し、文字数に応じて横幅を可変させるボタンを作る。

Step.1
ボタンを作成し、コンポーネントに変換。
(command + K)


Step.2
マスターコンポーネントを選択した状態で、
プロパティインスペクター(右側)の「パディング」にチェックを入れて有効化。


Step.3
任意のパディング値(px)を入力。


完成
複製したコンポーネントの文字を変更。

もっとみる

社内でハンズオン形式のオンライン勉強会を実施しました。

社内で参加者を募り、ハンズオン形式の勉強会(オンライン)を実施。
開催までの準備や当日の進め方、実施してみた感想などをまとめました。

開催フロー

1.告知
・勉強会の内容や日時、エントリーフォームのURLを知らせる告知文を作成
・社内で使用しているコミュニケーションツールや告知専用サイトに投稿

使用ツール:Google Forms、Currents、Google sites

↓↓↓
2.連

もっとみる