【Figma】オブジェクト内の比率を変えずに拡大・縮小する方法

image

挨拶と本日の内容

こんにちは。可茂IT塾のともやです。

今回は、figmaでオブジェクト内の比率を変えずに拡大・縮小する方法を紹介します。

作成したオブジェクトを拡大・縮小

通常、デザインツールで作成したオブジェクトや図形を拡大縮小するには「shiftキー」を押しながらドラッグして拡大縮小を行います。 図形単体ではこのやり方でも可能ですが、いくつものパーツがあるオブジェクトは全選択してもこのやり方では通用しません。 このようにオブジェクト内の比率が合わず、間隔がバラバラになってしまいます。 image1 image2

オブジェクト内の比率を変えずに、2倍・3倍・0.8倍・0.5倍など自分で設定した数値で拡大縮小できるショートカットキーがあるのでそちらの紹介をしたいと思います。

オブジェクト内の比率を変えずに拡大・縮小する方法

結論「ショートカットキー:k」を使用します。 まずは、作成したオブジェクトを全選択します。 一つ一つのパーツが選択されているか確認ください。 image3

確認ができたら「ショートカットキー:k」をクリックします。 そうすると、右側に「Scale」パネルが出てきます。 image4

「Scale」パネルが出てきたら、このように指定の倍数で選択オブジェクトを拡大・縮小することができます。 もちろん手動設定することも可能です。
image5

こちらは2倍で設定し拡大してみました。 どうでしょうか。比率も変わらず間隔等を維持し拡大することができました。
image6

最後に

今回紹介したfigmaの機能はとても簡単にでき、色々な場面で応用が効くと思いますのでぜひ、オブジェクト内の比率を変えずに拡大・縮小する方法を覚えていただき実際に使ってみてください。

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (105)初心者向け (26)イベント (17)Google Apps Script (15)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)デザイン (5)新卒 (4)就活 (4)vscode (4)Figma (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)DeepLeaning (1)深層学習 (1)Google Colab (1)Git (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More