{"id":2598,"date":"2022-04-22T19:28:41","date_gmt":"2022-04-22T19:28:41","guid":{"rendered":"https:\/\/sunaonako.my.id\/?p=2598"},"modified":"2022-05-06T07:00:54","modified_gmt":"2022-05-06T07:00:54","slug":"ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma","status":"publish","type":"post","link":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/","title":{"rendered":"UI Tips: Accessible Color Palette, Membuat Kombinasi Warna dengan Figma"},"content":{"rendered":"\n

Selamat datang di tips figma, setelah sebelumnya kita membahas #FivePlanes dalam user experience, kali ini ada tips hack untuk membuat desain sistem warna lebih cepat dan profesional dengan palet warna. Kali ini kita akan belajar cara membuat beragam varian warna dari satu warna yang dipilih berdasarkan kecerahan (kontras warna). Nantinya, kamu akan membuat kombinasi warna yang serupa atau yang disebut accessible colors palette. Kombinasi warna ini nantinya akan membantu generate adaptive color<\/em> berdasarkan warna background sehingga desain sistem warna kamu bakal lebih dinamis. Untuk tutorial kali ini, kita akan membuat palet warna menggunakan Figma.<\/p>\n\n\n\n

Apa itu Accessible Colors Combination atau Variasi Adaptive Colors?<\/h2>\n\n\n\n

Accessible colors palette atau palet warna akses memberikan alternatif warna serupa dengan membuat variasi warna yang sama namun dengan kontras yang berbeda. Bagi kalian seorang UI\/UX designer yang ingin menjual desain sistem atau UI aplikasi, ketersediaan accessible colors atau adaptive colors akan menjadi nilai jual lebih. Ada beberapa yang perlu diperhatikan dalam memilih warna sebagai konten though. Ada kriteria WCAG AA dan AAA, kamu bisa pelajari di sini<\/a>.<\/p>\n\n\n\n

Tujuannya, ketika nanti desainer mendesain UI, desainer tidak terlalu terbaku dengan satu warna aksen saja, sehingga apabila ada case dimana warna aksen tersebut tidak terlihat jelas karena tertutup warna background, desainer bisa menggunakan turunan warna lainnya dengan kontras warna yang lebih sesuai. Dengan ini akan tercipta harmoni dan konsistensi warna karena kita tidak perlu mengarang lagi dalam mengatur kontras warna.<\/p>\n\n\n\n

Optional, Color Palette for Figma How To<\/h2>\n\n\n\n

Sebelumnya, saya sudah menyediakan template color palette for figma<\/a>. Jika mau kamu bisa pakai ini sebagai draft latihan. Untuk penjelasan palet warnanya terbagi menjadi tiga variant.<\/p>\n\n\n\n

\"Tips<\/figure>\n\n\n\n

Variant pertama, mirip seperti variant kedua, namun ada mark dengan lingkaran putih diatas, ini sebagai penanda kalau color switch versi ini digunakan untuk menyimpan salah satu warna utama aplikasi. Sedangkan yang variant kedua, itu digunakan untuk turunan dari warna utama.<\/p>\n\n\n\n

Yang ketiga, digunakan untuk tipe warna gradien.<\/p>\n\n\n\n

Persiapan memulai desain Figma: Install Plugin<\/h2>\n\n\n\n

Kita akan menginstall plugin color foundation figma, klik link ini<\/a>. <\/p>\n\n\n\n

Plugin ini akan otomatis menghasilkan range dan list kombinasi warna yang sesuai standar WCAG AA dan AAA lalu akan dibuat palet warna juga.
Pilih tombol install, jika plugin terinstall, maka teks tombol install akan berubah menjadi uninstall. Kemudian buat File Figma untuk membuat workspace baru. Caranya, pada halaman dashboard figma pilih new design file.<\/p>\n\n\n\n

\"Figma:<\/figure><\/div>\n\n\n\n
(Jika kamu terlanjur membuat design file dan belum install pluginnya, langkahnya tetap sama, buka link plugin lalu pilih install plugin, bisa pula pada menu file -> plugin -> browse plugin cari accessible colors -> install -> menuju tab workspace figma)<\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
<\/p>\n\n\n\n
Tentukan Warna Utama Palet untuk Desain Sistem<\/h2>\n\n\n\n
Oke, langkah pertama, kamu bisa pilih warna utama untuk desainmu. Di sini, saya pakai Huemint, AI untuk generate ide warna untuk desain agar lebih cepat. Di sini, aku pilih mode web dengan 2 warna aksen<\/a>,<\/p>\n\n\n\n
\"Web<\/figure>\n\n\n\n
Kalian lihat diatas ada 4 palet warna. Screenshot palet warna tersebut kemudian masukkan ke Figma. Buat vektor shape untuk menyimpan warna beserta informasi code hex dan valuenya. Kamu bisa memakai color swatch yang sudah disediakan<\/a>.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Membuat Color Styles: Accessible Colors Combination<\/h2>\n\n\n\n
Perhatikan guide berikut ini untuk bagaimana cara memulai dan memasukkan 4 warna utama ke dalam Figma. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Inilah hasil final membuat palet warna di figma.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Selanjutnya pada tab workspace design mu, klik menu logo figma -> plugin => color foundation. Akan muncul jendela foundation: color generator<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Lihat gambar diatas, untuk meng-generate<\/em> kombinasi warna accessible color, cukup masukkan hex code warna dibawah label color. Kamu juga bisa mengganti nama kombinasi warna, disini saya ganti namanya menjadi orange.<\/p>\n\n\n\n
Di sebelah button text palette, ada create styles, ini digunakan untuk menyimpan style warna ke dalam sistem untuk dapat digunakan diseluruh layer atau global.<\/p>\n\n\n\n
\"Figma<\/figure><\/div>\n\n\n\n
Color Foundation Style yang sudah dibuat tadi dapat kamu modif \/ hapus tepatnya di sidebar kanan saat kamu klik background workspace figma<\/p>\n\n\n\n
\"How<\/figure><\/div>\n\n\n\n
Berikut ini tampilan final dari desain sistem warna dengan variant palet warna<\/p>\n\n\n\n
\"Figma<\/figure>\n\n\n\n
Sebenarnya, ada banyak plugin untuk membuat varian dan kombinasi warna di Figma. Misal Color Compas<\/a>s, cara menggunakan pluginnya untuk membuat berbagai tipe adaptive colors cukup mudah. <\/p>\n\n\n\n

Setelah install color compass, pada workspace figma, pilih warna, misal di sini saya multiple klik shape warna biru sampai hanya kotak biru saja yang dipilih<\/p>\n\n\n\n
\"Generate<\/figure><\/div>\n\n\n\n
Selagi shape dalam seleksi, pada menu figma -> menuju plugins -> colors compass<\/p>\n\n\n\n
\"Figma<\/figure><\/div>\n\n\n\n
Di sini ada banyak kombinasi warna, berdasarkan tints, shades, saturasi, complementary, triadic, tetradic, analogous. Untuk menambahkan pilihan kombinasi warna, klik tombol plus pada salah satu kombinasi warna, misal saya ingin blend with previous color, cukup klik plus icon yang sejajar dengan teks blend with previous color.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Itulah tips figma untuk membuat desain sistem warna, kamu tinggal beri penanda misal category color 20, 50, 60, 70, 100, 200, 400 dan seterusnya. Untuk hasil contohnya bisa kamu lihat digambar dibawah ini.<\/p>\n\n\n\n
\"Accessible
Ternyata, ada banyak juga plugin figma untuk membuat styles warna, membuat variasi warna yang bahkan tidak hanya berdasarkan warna kontras saja :\/<\/em><\/figcaption><\/figure>\n\n\n\n
<\/p>\n\n\n\n
Untuk penamaan angka warna pastikan semakin rendah nilai semakin cerah warnanya. Seperti nilai warna 50 di sini kontras warna semakin mendekati putih. Demikian tutorial yang wahaha, untuk tutorial user experience dan user interface lain, silahkan kunjungi link UI\/UX Category.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Selamat datang di tips figma, setelah sebelumnya kita membahas #FivePlanes dalam user experience, kali ini ada tips hack untuk membuat desain sistem warna lebih cepat dan profesional dengan palet warna. Kali ini kita akan belajar cara membuat beragam varian warna dari satu warna yang dipilih berdasarkan kecerahan (kontras warna). Nantinya, kamu akan membuat kombinasi warna…<\/p>\n","protected":false},"author":2,"featured_media":2674,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[459,249],"tags":[466,465,464,461,462,460,463],"class_list":["post-2598","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui","category-ux","tag-accessible-colors","tag-adaptive-colors","tag-color-palettes","tag-colors","tag-design-system","tag-figma","tag-ui-tips"],"yoast_head":"\nTips Figma: Buat Kombinasi Warna Utama | Accessible Colors<\/title>\n<meta name=\"description\" content=\"Tutorial Figma membuat variasi warna serupa dari warna pilihan untuk membuat kombinasi adaptive color palette. Tips buat palet untuk range color serupa di Figma\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Tips: Accessible Color Palette, Membuat Kombinasi Warna dengan Figma\" \/>\n<meta property=\"og:description\" content=\"Tutorial Figma membuat variasi warna serupa dari warna pilihan untuk membuat kombinasi adaptive color palette. Tips buat palet untuk range color serupa di Figma\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Hilarious Developer School\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T19:28:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-06T07:00:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1414\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"nakomin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"nakomin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/\"},\"author\":{\"name\":\"nakomin\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"headline\":\"UI Tips: Accessible Color Palette, Membuat Kombinasi Warna dengan Figma\",\"datePublished\":\"2022-04-22T19:28:41+00:00\",\"dateModified\":\"2022-05-06T07:00:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/\"},\"wordCount\":803,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png\",\"keywords\":[\"Accessible Colors\",\"Adaptive Colors\",\"Color Palettes\",\"Colors\",\"Design System\",\"Figma\",\"UI Tips\"],\"articleSection\":[\"UI\",\"UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/\",\"url\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/\",\"name\":\"Tips Figma: Buat Kombinasi Warna Utama | Accessible Colors\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png\",\"datePublished\":\"2022-04-22T19:28:41+00:00\",\"dateModified\":\"2022-05-06T07:00:54+00:00\",\"description\":\"Tutorial Figma membuat variasi warna serupa dari warna pilihan untuk membuat kombinasi adaptive color palette. Tips buat palet untuk range color serupa di Figma\",\"breadcrumb\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#primaryimage\",\"url\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png\",\"contentUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png\",\"width\":2000,\"height\":1414,\"caption\":\"Figma UI Tips: Generate Color Styles dengan Mudah\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sunaonako.my.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI Tips: Accessible Color Palette, Membuat Kombinasi Warna dengan Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sunaonako.my.id\/#website\",\"url\":\"https:\/\/sunaonako.my.id\/\",\"name\":\"Hilarious Developer School\",\"description\":\"Catatan Developer tentang Kurikulum Dunia Modern\",\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sunaonako.my.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\",\"name\":\"nakomin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"contentUrl\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"width\":\"250\",\"height\":\"250\",\"caption\":\"nakomin\"},\"logo\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\"},\"description\":\"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever\",\"sameAs\":[\"https:\/\/sunaonako.my.id\"],\"url\":\"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tips Figma: Buat Kombinasi Warna Utama | Accessible Colors","description":"Tutorial Figma membuat variasi warna serupa dari warna pilihan untuk membuat kombinasi adaptive color palette. Tips buat palet untuk range color serupa di Figma","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:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/","og_locale":"en_US","og_type":"article","og_title":"UI Tips: Accessible Color Palette, Membuat Kombinasi Warna dengan Figma","og_description":"Tutorial Figma membuat variasi warna serupa dari warna pilihan untuk membuat kombinasi adaptive color palette. Tips buat palet untuk range color serupa di Figma","og_url":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/","og_site_name":"Hilarious Developer School","article_published_time":"2022-04-22T19:28:41+00:00","article_modified_time":"2022-05-06T07:00:54+00:00","og_image":[{"width":2000,"height":1414,"url":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png","type":"image\/png"}],"author":"nakomin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"nakomin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#article","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/"},"author":{"name":"nakomin","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"headline":"UI Tips: Accessible Color Palette, Membuat Kombinasi Warna dengan Figma","datePublished":"2022-04-22T19:28:41+00:00","dateModified":"2022-05-06T07:00:54+00:00","mainEntityOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/"},"wordCount":803,"commentCount":0,"publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png","keywords":["Accessible Colors","Adaptive Colors","Color Palettes","Colors","Design System","Figma","UI Tips"],"articleSection":["UI","UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/","url":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/","name":"Tips Figma: Buat Kombinasi Warna Utama | Accessible Colors","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#primaryimage"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png","datePublished":"2022-04-22T19:28:41+00:00","dateModified":"2022-05-06T07:00:54+00:00","description":"Tutorial Figma membuat variasi warna serupa dari warna pilihan untuk membuat kombinasi adaptive color palette. Tips buat palet untuk range color serupa di Figma","breadcrumb":{"@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#primaryimage","url":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png","contentUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/04\/2.png","width":2000,"height":1414,"caption":"Figma UI Tips: Generate Color Styles dengan Mudah"},{"@type":"BreadcrumbList","@id":"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sunaonako.my.id\/"},{"@type":"ListItem","position":2,"name":"UI Tips: Accessible Color Palette, Membuat Kombinasi Warna dengan Figma"}]},{"@type":"WebSite","@id":"https:\/\/sunaonako.my.id\/#website","url":"https:\/\/sunaonako.my.id\/","name":"Hilarious Developer School","description":"Catatan Developer tentang Kurikulum Dunia Modern","publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sunaonako.my.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a","name":"nakomin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/","url":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","contentUrl":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","width":"250","height":"250","caption":"nakomin"},"logo":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/"},"description":"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever","sameAs":["https:\/\/sunaonako.my.id"],"url":"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/"}]}},"_links":{"self":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/2598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/comments?post=2598"}],"version-history":[{"count":0,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/2598\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media\/2674"}],"wp:attachment":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media?parent=2598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/categories?post=2598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/tags?post=2598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}