❖ ken|旅するデザイナー's banner
❖ ken|旅するデザイナー's profile picture

❖ ken|旅するデザイナー

@ken_tbdz12,474 subscribers

フリーランスデザイナー|FigmaやNotionのTipsを発信してます|南米で2年半バンライフ旅してました|1月にパパになりました|UI / UX / Design System / Yolotabi / 🇯🇵×🇬🇧

Videos

ken_tbdz's profile picture

FigmaのSlots(スロット)クイック解説💫 Slots(スロット)とは? ・コンポーネント内に作れる「自由に中身を変えれる領域」 ・インスタンスを解除しなくても、コンポーネントの構造を保ったまま中身を柔軟に変更できる。 どんな時に使う? ・例えばこの動画のように、リストやフォームなど 繰り返し使う要素の一部だけレイアウトを変えたいとき。 ・モーダルやカードのように、ベースは決まってるけど中身のレイアウトパターンがたくさんあるとき。 今まではどうしてた? 今までは複数パターンを含んだマスターコンポーネントを作って、表示させたくないレイヤーを隠したり、全パターンのバリアントを作って切り替えていた。 こうした複雑な管理を減らすことができる。 何が期待できる? 1. コンポーネントを解除しなくて済む レイアウトを変えたいがためにコンポーネントを解除する必要がなくなる。 2. デザインシステムがシンプルになる バリアント数を大幅に減らせるため、ライブラリが整理できる。 3. コード構造に近くなる Reactなどのslots構造に近い設計になるため、開発との対応が取りやすくなる。 スロットの追加方法 コンポーネント内のフレームを選択して、 1. 画面右上「フレーム」横の「+」→ プロパティを作成 または 2. 右クリック → スロットに変換 または 3. ショートカット ・Mac:Command + Shift + S ・Windows:Ctrl + Shift + S でも自由度が高すぎて何を入れたらいいか分からない... その場合は「Preferred instances(優先されるインスタンス)」を設定して、スロット内で使う要素を指定することもできる。 いつから使える? ・今週からオープンベータとして順次ロールアウト予定。 ・フルシートユーザーであれば利用可能。 --- 以上です。 役に立ったら、いいねや保存してもらえると嬉しいです!

❖ ken|旅するデザイナー

29,166 views • 3 months ago

ken_tbdz's profile picture

南米で宿泊代の代わりに宿のホームページ作った話。 南米バンライフ旅しながら息抜きに宿に泊まることも多いんだけど、田舎の宿だとホームページがないこともしばしば。 宿のオーナーと話してる内に「何の仕事をしてるんだ?デザイナー?そしたらうちホームページないから作ってくれないか?」という話題になることも多い。 ただ普段の料金表だと到底高すぎて払えない。 でも素敵な宿だしせっかくだから作ってあげたい。 なので今回はwixのテンプレートをベースにサクッとサイトを作ってあげることにした。 普段サイト作るならStudio使うけど、ダッシュボードをスペイン語にできるという理由でwixにした。 テンプレートベースなのでそこまで時間かからないのと、ドメインも別にこだわらないのであれば無料で作ることができる。 部屋や外観の写真はiPhoneで撮って、自分らで修正/編集できるようにダッシュボードの使い方もつたないスペイン語で教えた。 これが実際に今回作ったサイト。大した事ないけど、何十年か宿を運営してて初めてホームページができたみたいで、心から喜んでくれた。 お金いらないので代わりに宿泊代安くしてもらった。そうしたら相手も出費ないしこちらもタダで宿泊まれるし、お互いwin-win。 海外でも地元の人にスキルで貢献できてよかった、という話でした。

❖ ken|旅するデザイナー

10,492 views • 1 year ago

No more content to load