{"id":4156,"date":"2020-08-15T07:12:37","date_gmt":"2020-08-15T07:12:37","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=4156"},"modified":"2020-10-17T02:59:53","modified_gmt":"2020-10-17T02:59:53","slug":"panduan-lengkap-desain-menggunakan-aplikasi-figma","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma","title":{"rendered":"Panduan Lengkap Desain Menggunakan Aplikasi Figma"},"content":{"rendered":"

Mengenal Apa itu Figma ?<\/h1>\n

Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web serta fitur offline tambahan yang di aktifkan oleh aplikasi dekstop untuk Mac OS\u00a0 dan Windows. Aplikasi pendamping Figma Mirror untuk Android dan iOS memungkinkan untuk melihat prototype Figma pada perangkat seluler. Rangkaian fitur figma berfokus pada penggunaan dalam antarmuka pengguna dan desain pengalaman pengguna dengan penekanan pada kolaborasi waktu nyata (real-time).<\/p>\n

Sederhananya Figma adalah alat prototyping dan desain digital. Aplikasi desain UI dan UX yang dapat digunakan untuk membuat situs web, aplikasi, atau komponen antarmuka pengguna yang lebih kecil yang dapat diintegrasikan ke dalam proyek lain. Dengan berbasis vektor yang hidup di cloud,\u00a0 para pengguna Figma memungkinkan untuk bekerja di mana saja dari browser. Cara ini termasuk alat zippy yang dibuat untuk desain, pembuatan prototipe, kolaborasi, dan sistem desain organisasi.<\/p>\n

Fungsi Menggunakan Figma<\/strong><\/h1>\n

Figma adalah alat\u00a0 yang solid dengan paket gratis yang bisa di coba bagi siapa saja yang bekerja di ruang digital. Alat ini termasuk dalam kemampuannya untuk membantu para desainer dan penggunanya dalam kemudahan pemasaran produk atau desain kepada klien dan calon pemberi kerja.<\/p>\n

Menampilkan keunggulan banyak fitur, alat desain dan prototipe proyek sejenis tidak memiliki fitur kunci serta kemampuan seperti figma sehingga Figma menjadi pilihan utama jika dibandingkan dengan yang lain. Fitur- fitur Figma terbukti dapat menghemat waktu desainer dan membuat proyek serta kerjasama dalam bentuk tim berjalan lebih lancar.<\/p>\n

Fitur-Fitur Figma<\/h1>\n

Fitur- fitur utama Figma yang paling unggul meliputi :<\/p>\n

    \n
  1. Alat pena modern yang memungkinkan menggambar ke segala arah dan desain busur instan.<\/li>\n
  2. Fitur font Open Type.<\/li>\n
  3. Tugas otomatis melalui plugin untuk elemen berulang untuk mempercepat proyek.<\/li>\n
  4. Alat seleksi cerdas dengan penyesuaian otomatis untuk pengaturan jarak, pengaturan, dan pengorganisasian.<\/li>\n
  5. Metode dan cara fleksibel yang menghemat hak untuk proyek.<\/li>\n
  6. Kemampuan membuat sistem dan komponen desain.<\/li>\n
  7. Perpustakaan dan cara drag and drop yang dapat diakses.<\/li>\n
  8. Kemampuan untuk memawadagi banyak audien tanpa batas pada suatu proyek sehingga seluruh pembagian progress kerja tim.<\/li>\n
  9. Kemampuan memeriksa file desain dan grab code sinppets.<\/li>\n
  10. Fitur ekspor mudah yang memiliki tautan langsung (bukan hanya format PDF datar).<\/li>\n
  11. Desain interaksi dan prototipe yang dioptimalkan untuk seluler.<\/li>\n
  12. Animasi cerdas untuk menghubungkan objek dan transisi.<\/li>\n
  13. Komentar tersemat (embedded comment).<\/li>\n
  14. Kemampuan untuk mengedit bersama dengan tim secara waktu nyata (real- time) di ruang desain bersama.<\/li>\n
  15. Riwayat versi yang memungkinkan Anda mengetahui segala sesuatu atau progress yang telah berubah dan siapa saja yang melakukannya.<\/li>\n
  16. Buat sistem desain dengan aset yang dapat dicari, gaya dan desain yang dapat dibagikan dan semuanya dalam satu lokasi.<\/li>\n
  17. Kemampuan membuat komponen yang dapat digunakan kembali dengan kemampuan untuk menimpanya jika diperlukan.<\/li>\n
  18. Satu platform untuk segalanya, mulai dari desain hingga prototipe.<\/li>\n<\/ol>\n

    Harga Dan Paket Pengguanaan Figma<\/h1>\n

    Figma memiliki paket gratis dan berbayar, tergantung pada volume atau banyaknya pekerjaan yang akan dilakukan, serta fitur kolaborasi premium. Berikut detail harga lengkap Figma :<\/p>\n

      \n
    • \n

      Pemula (gratis)<\/strong><\/h4>\n<\/li>\n<\/ul>\n

      Pengguna yang memilih menggunakan paket ini akan mendapatkan dua editor dan tiga proyek dengan riwayat versi 30 hari, serta penyimpanan cloud tanpa batas.<\/p>\n

        \n
      • \n

        Profesional ($ 15 per editor per bulan)<\/strong><\/h4>\n

        Pengguna paket Profesional ini akan mendapatkan banyak keuntungan termasuk proyek tidak terbatas, versi tidak terbatas, file kustom dan izin pengguna, proyek pribadi khusus undangan, dan perpustakaan tim yang dapat dibagikan.<\/li>\n

      • \n

        Organisasi ($ 45 per editor per bulan)<\/strong><\/h4>\n

        Sebagai paket tertinggi dari semuanya, pengguna paket ini berhak dalam banyak kemudahan termasuk semuanya dalam sistem desain profesional plus seluruh organisasi, tim terpusat, plugin pribadi, administrasi plugin, font bersama, sistem masuk tunggal, dan juga keuntungan keamanan tingkat lanjut.<\/li>\n<\/ul>\n

        Selain 3 jenis paket diatas, Figma juga menawarkan potongan harga untuk pembayaran tahunan versus bulanan, potongan harga dan keuntungan tersendiri bagi para penggunanya dalam kategori siswa.<\/p>\n

        Tips dan Trick Cara Kerja atau Menggunakan Figma<\/strong><\/h1>\n

        Berikut ini beberapa tips dan trick yang bisa dicoba atau terapkan jika ingin menggunakan Figma bersama tim, meliputi :<\/p>\n

          \n
        1. Dalam Figma, sebuah simpul pada vektor dapat memiliki banyak segmen yang melekat padanya (lebih dari sekadar dua standar). Bentuk yang lebih kompleks yang dapat dibuat dengan ini disebut jaringan vektor.<\/li>\n
        2. Figma memungkinkan untuk dengan cepat mengimpor banyak gambar sekaligus, menempatkannya tepat di tempat yang diinginkan.<\/li>\n
        3. Saat memindahkan objek di sekitar kanvas di Figma, akan melihat tinggi dan lebarnya tercermin di penggaris.<\/li>\n
        4. Salin kode SVG langsung dari objek dalam Figma dan sebaliknya. Dapat menyalin kode SVG dari editor kode dan menempelkannya sebagai grafik ke kanvas Figma.<\/li>\n<\/ol>\n

          Persiapan Menggunakan Figma<\/h1>\n

          Untuk menggunakan aplikasi figma ada 2 cara yaitu :<\/span><\/p>\n

          1. Klik sign up dan daftar menggunakan email dengan masuk ke figma.com\"\"<\/p>\n

          2. Cara ke 2 dengan install aplikasi figma.com\/downloads dan daftar\"\"<\/p>\n

          Perbedaan cara pertama dan kedua yaitu jika memilih cara pertama maka kalian akan menggunakan tool tersebut melalui web browser sedangkan cara kedua kalian akan menggunakan tool tersebut berbasis desktop application.<\/p>\n

          Setelah registrasi maka tampilan awal akan seperti ini :<\/p>\n

          \"\"<\/p>\n

          Langkah selanjutnya :<\/p>\n

          1. Buat File Baru Figma<\/h3>\n

          klik new file di sebelah kanan atas<\/p>\n

          \"\"<\/p>\n

          Ganti nama Untitled dengan nama yang diinginkan. Sebagai contoh akan membuat Aplikasi Kesehatan<\/p>\n

          \"\"<\/p>\n

          \"\"<\/h3>\n

          2. Buat Halaman Tampilan Awal<\/h3>\n

          Selanjutnya pilih frame<\/p>\n

          \"\"<\/p>\n

          Dan pilih ukuran sesuai dengan jenis aplikasi yang akan dibuat. Di pembahasan kali ini akan memilih Phone \u2013 Android<\/p>\n

          \"\"<\/p>\n

           <\/p>\n

          Mulai mendesain aplikasi. Pertama \u2013 tama buat tampilan awal aplikasi kesehatan, caranya pilih rectangle dan tarik dari atas ke bawah di frame warna putih.\"\"<\/p>\n

          Klik kotak Dan ganti warna disebelah kanan di bagian fill sesuai keinginan. Agar lebih menarik bisa ganti warna dengan linier dan pilih 2 warna yang pas.\"\"<\/p>\n

          Tambahkan tulisan dengan klik tombol T diatas dan drag dari kiri ke kanan. Tulis nama aplikasi, misalnya \u2018DOKTERKU\u2019\"\"<\/p>\n

          Ubah jenis font dan warna di sebelah kanan. Sebelum merubah ukuran ataupun warna pastikan tulisan di blok terlebih dahulu.\"\"<\/p>\n

          Kklik tulisan tersebut dan klik align horizontal centers di paling atas kanan untu rata tengah.\"\"<\/p>\n

          Buat tulisan kecil dibawah seperti ini dan buat berada di tengah juga dengan align horizontal centers.\"\"<\/p>\n

          bisa ubah nama framenya sesuai keinginan, caranya double klik di tulisan tersebut dan ubah namanya misal \u2018Tampilan Awal\u2019\"\"<\/p>\n

          3. Buat Halaman Intro<\/h3>\n

          Selanjutnya buat halaman lain untuk intro. Pilih frame tampilan awal, klik kiri dan tekan tombol CTRL + C lalu CTRL + V. Hasilnya akan ada 2 tampilan yang sama\"\"<\/p>\n

          Ganti nama frame yang kedua menjadi intro dan hapus semua isinya agar menjadi kosong\"\"<\/p>\n

          Setelah itu buat kotak di tengah seperti ini dan kotak memanjang dibawahnya, beri tulisan \u2018skip\u2019 di kanan atas, \u2018live chat\u2019 dan \u2018konsultasi dengan dokter spesialis terbaik\u2019 di bagian bawah\"\"<\/p>\n

          Lalu tambahkan juga button menggunakan rectangle. Agar ujung kotak tersebut melengkung kalian ubah angkanya di corner radius misal 30\"\"<\/p>\n

          Setelah selesai, buat yang seperti itu lagi dengan nama frame intro 2. Rubah tulisannya menjadi \u2018info kesehatan\u2019 dan \u2018artikel tentang kesehatan terpercaya langsung dari ahlinya\u2019\"\"<\/p>\n

          4. Buat Halaman Login<\/h3>\n

          Buat halaman login. Duplicate frame yang sudah ada dan kosongkan. Lalu buat seperti ini menggunakan pen tool. Caranya klik di satu posisi lalu klik tahan di posisi lain dan geser kursornya agar membuat lengkungan\"\"<\/p>\n

          Setelah itu buat rectangle berwarna putih dengan corner radius nya 8 dan menggunakan efek drop shadow lalu tambahkan tulisannya seperti \u2018telepon atau email\u2019, \u2018password\u2019. Buat juga rectangle dengan tulisan diatasnya \u2018masuk\u2019 dan dibawah nya tulisan \u2018lupa password\u2019\"\"<\/p>\n

          Lalu buat juga button \u2018masuk dengan google\u2019\"\"<\/p>\n

          Untuk menambahkan gambar bisa drag gambarnya atau pilih place image seperti ini. Download gambar google dengan format png di Internet\"\"<\/p>\n

          5. Buat Halaman Daftar<\/h3>\n

          Jika sudah selesai dibuat untuk halaman daftarnya seperti ini. Caranya sama seperti diatas\"\"<\/p>\n

          6. Lihat Tampilan Semua Halaman<\/h3>\n

          Setelah selesai bisa melihat tampilannya dengan menekan tombol play\/present di kanan atas<\/p>\n

          Kelebihan Dan Kelemahan Figma<\/h1>\n
            \n
          • Kelebihan:\n
              \n
            • Fitur dan tampilan yang sangat sederhana dan ciamik tapi performa tetap bisa diandalkan untuk mendesain.<\/li>\n<\/ul>\n<\/li>\n
            • Kekurangan:\n
                \n
              • kekurangannya adalah aplikasi ini dalam waktu dekat akan jadi berbayar. Tapi belum tau berapa harganya.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                 <\/p>\n

                Semoga informasi di atas bermanfaat<\/p>\n

                \"\"<\/p>\n

                \n\n\n

                \n \n
                \n \n
                \n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n <\/div>\n \n
                \n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
                \n Jadilah yang pertama untuk memberi nilai<\/span>\n <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

                Mengenal Apa itu Figma ? Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web serta fitur offline tambahan yang di aktifkan oleh aplikasi dekstop untuk Mac OS\u00a0 dan Windows. Aplikasi pendamping Figma Mirror untuk Android dan iOS memungkinkan untuk melihat prototype Figma pada perangkat seluler. Rangkaian fitur figma berfokus pada penggunaan dalam antarmuka […]<\/p>\n","protected":false},"author":7,"featured_media":4188,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[1554,1557,1556,1555],"class_list":["post-4156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-figma-adalah","tag-figma-tutorial-web-design","tag-fitur-figma","tag-kelebihan-figma"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault-1110x624.jpg",792,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault-555x312.jpg",463,260,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault-300x169.jpg",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg",1280,720,false]},"yoast_head":"\nPanduan Lengkap Desain Menggunakan Aplikasi Figma - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Panduan Lengkap Desain Menggunakan Aplikasi Figma - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Mengenal Apa itu Figma ? Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web serta fitur offline tambahan yang di aktifkan oleh aplikasi dekstop untuk Mac OS\u00a0 dan Windows. Aplikasi pendamping Figma Mirror untuk Android dan iOS memungkinkan untuk melihat prototype Figma pada perangkat seluler. Rangkaian fitur figma berfokus pada penggunaan dalam antarmuka […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-15T07:12:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-17T02:59:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Risa Y\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Risa Y\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma\"},\"author\":{\"name\":\"Risa Y\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\"},\"headline\":\"Panduan Lengkap Desain Menggunakan Aplikasi Figma\",\"datePublished\":\"2020-08-15T07:12:37+00:00\",\"dateModified\":\"2020-10-17T02:59:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma\"},\"wordCount\":1248,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg\",\"keywords\":[\"figma adalah\",\"figma tutorial web design\",\"fitur figma\",\"kelebihan figma\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma\",\"url\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma\",\"name\":\"Panduan Lengkap Desain Menggunakan Aplikasi Figma - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg\",\"datePublished\":\"2020-08-15T07:12:37+00:00\",\"dateModified\":\"2020-10-17T02:59:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Panduan Lengkap Desain Menggunakan Aplikasi Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita & Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\",\"name\":\"Risa Y\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"caption\":\"Risa Y\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Panduan Lengkap Desain Menggunakan Aplikasi Figma - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma","og_locale":"en_US","og_type":"article","og_title":"Panduan Lengkap Desain Menggunakan Aplikasi Figma - Hosteko Blog","og_description":"Mengenal Apa itu Figma ? Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web serta fitur offline tambahan yang di aktifkan oleh aplikasi dekstop untuk Mac OS\u00a0 dan Windows. Aplikasi pendamping Figma Mirror untuk Android dan iOS memungkinkan untuk melihat prototype Figma pada perangkat seluler. Rangkaian fitur figma berfokus pada penggunaan dalam antarmuka […]","og_url":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma","og_site_name":"Hosteko Blog","article_published_time":"2020-08-15T07:12:37+00:00","article_modified_time":"2020-10-17T02:59:53+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg","type":"image\/jpeg"}],"author":"Risa Y","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Risa Y","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma"},"author":{"name":"Risa Y","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b"},"headline":"Panduan Lengkap Desain Menggunakan Aplikasi Figma","datePublished":"2020-08-15T07:12:37+00:00","dateModified":"2020-10-17T02:59:53+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma"},"wordCount":1248,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg","keywords":["figma adalah","figma tutorial web design","fitur figma","kelebihan figma"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma","url":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma","name":"Panduan Lengkap Desain Menggunakan Aplikasi Figma - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg","datePublished":"2020-08-15T07:12:37+00:00","dateModified":"2020-10-17T02:59:53+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-desain-menggunakan-aplikasi-figma#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Panduan Lengkap Desain Menggunakan Aplikasi Figma"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita & Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b","name":"Risa Y","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","caption":"Risa Y"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/maxresdefault.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/4156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=4156"}],"version-history":[{"count":0,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/4156\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/4188"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=4156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=4156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=4156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}