Figma, UX/UI ve web tasarımcıları arasında hızla favori haline gelen harika bir araçtır. Bu ücretsiz tarayıcı tabanlı aracı kullanarak hızlı ve kolay bir şekilde yanıt veren web tasarımları oluşturabilirsiniz.
Figma'da çoğu kişi tasarımlarını sıfırdan oluştururken, siz gerçek web sitelerinden ilham alarak doğrudan mevcut bir HTML sayfasından kolayca bir Figma tasarımı oluşturabilirsiniz. İşte nasıl yapılacağı.
Neden HTML'den Figma Tasarımları Oluşturmalısınız?
Mevcut bir web tasarımını Figma tasarımı olarak çoğaltmak isteyebileceğiniz birçok neden vardır. Bunu Figma eklentisi aracılığıyla yapmak zamandan tasarruf ederek tasarımınızda ince ayarlar yapmaya odaklanmanızı sağlar.
Mevcut web sayfalarını yeniden oluşturarak web tasarımı yapmak, ustalardan öğrenmenin harika bir yoludur. Daha önce erişiminizi kaybettiğiniz bir web sayfası tasarlayıp yayınladıysanız, HTML to Figma tasarım aracını da kullanabilirsiniz. Sıfırdan yeniden tasarlamak yerine, üzerinde tekrar çalışmak için tekrar Figma'ya dönüştürerek zaman kazanabilirsiniz.
Artık bu aracın neden kullanışlı olabileceğini bildiğinize göre, nasıl çalıştığını öğrenmenin zamanı geldi.
Herhangi Bir Web Sitesini Figma Tasarımına Dönüştürme
Figma tabanlı herhangi bir tasarım çalışmasına başlamak için Figma'yı açmanız ve oturum açmanız veya kaydolmanız gerekir. Tarayıcı sürümünü kullanabilirsiniz, figma, veya masaüstü uygulamasını indir; ikisi de bu proje için aynı şekilde çalışıyor.
bir aç Yeni tasarım dosyası HTML to Figma tasarım projenize başlamak için.
Adım 1: html.to.design Eklentisini İndirin
Canlı bir web sitesini doğrudan bir Figma tasarımına dönüştürebilmek için bir eklentiye ihtiyacınız olacak. Figma'da tasarımlarınıza yardımcı olacak sayısız eklenti vardır. telefonlar ve cihazlar için örnekler oluşturmak için eklentiler. İsterseniz dönüştürülmüş web sitesi tasarımınızı daha sonra bir mockup'a ekleyebilirsiniz.
Eklentiyi indirmek için figma menüsü (Figma logosu) > Eklentiler > Daha fazla eklenti bul. Alternatif olarak, seçebilirsiniz Kaynaklar > Eklentiler. Her iki seçenekten de arama çubuğuna yazın html.to.design.
divRIOTS tarafından sağlanan seçeneği bulun ve seçin Koşmak. Bu, eklentiyi Figma tuvalinizde bir iletişim kutusu olarak açar.
2. Adım: Web Sitesi URL'sini yapıştırın
html.to.design eklentisi ücretsizdir, ancak profesyonel bir sürüm sunar. Tasarım sürecinizi tamamen ücretsiz sürüm ile tamamlayabilirsiniz.
Figma tasarımı yapmak istediğiniz web sitesini bulun. Yalnızca oturum açarak erişilebilen bir web sayfası değil, herkese açık bir web sitesi kullanmalısınız. Ana sayfamız olan MakeUseOf.com'u kullanacağız.
Tam URL'yi kopyalayın ve Apple web sitesi yer tutucusunu değiştirerek Figma'daki içe aktarma kutusuna yapıştırın.
3. Adım: Tasarımınızı Yükleyin
Web sitesinin URL'sini yapıştırdıktan sonra açın Ayarlar Tasarımın boyutunu seçmek için içe aktar kutusunun altındaki Çeşitli cihazlar için tasarımı içe aktarabilirsiniz, ancak bir masaüstü URL'si kullandıysanız ve mobil cihazlar için bir mobil URL kullanarak daha başarılıysanız, bir masaüstü cihaz seçerken daha başarılı olursunuz.
Cihazlar veya boyutlar için varsayılan seçenekler olarak bulunmayan özel seçenekler de vardır. seçiyoruz MacbookPro 14” Birlikte Işık tema.
Cihazınızı ve görünüm ayarlarınızı belirledikten sonra, İçe aktarmak HTML tasarımınızı Figma'da hayata geçirmek için. Figma tasarımının doldurulması için yük çubuğunun tamamlanmasını bekleyin.
Kullandığınız web sitesine bağlı olarak, bazı yazı tiplerinin değiştirilmesi gerektiğini açıklayan bir açılır kutu fark edebilirsiniz. Bu, lisanslı yazı tiplerinin telif hakkı nedeniyle olacaktır. Figma bunları erişiminiz olan yazı tipleriyle değiştirecektir.
Herhangi bir açılır pencereden çıkın, ardından yeni tasarımınızı tam haliyle görmek için eklenti iletişim kutusundan çıkın.
Adım 4: Figma Tasarımınızı Düzenleyin
Buradan Figma web sayfanızı istediğiniz şekilde düzenlemeye başlayabilirsiniz. Bahsedildiği gibi, bu HTML'den Figma'ya işlevi, mevcut web sayfalarının sıfırdan kendi sayfanızı oluşturmanız için size ilham verecek şekilde nasıl tasarlandığını öğrenmenize olanak tanır. Temel tasarımı web sitesinden kullanabilir ve Figma'da geçişleri kullanarak bir sunum oluşturunveya web sayfalarının diğer tasarımcılar tarafından nasıl kurulduğunu öğrenin.
Soldaki menüde katmanları bulacaksınız. Bu, doğrudan HTML'den dönüştürüldüğünden, katmanlar, kendinizi tasarlarken alışık olduğunuzdan daha ayrıntılı, hatta kafa karıştırıcı olabilir. Soldaki menüde vurgulanan katmanları bulmak için tasarımda bir bölüm seçin.
Tasarım yönüne çift tıklayarak görüntüleri değiştirebilir, başlıkları ve gövde metnini yeniden yazabilir veya düzen içindeki şeyleri taşıyabilirsiniz. html.to.figma eklentisi, bağlantıları tıklatırken veya sayfaları değiştirirken animasyon veya geçiş ayarlarını kopyalamaz. Bunları kendinize göre ekleyebilirsiniz.
Özel Bir Web Sayfası Nasıl Dönüştürülür?
Erişmek için bir hesap gerektiren özel bir web sitesi oluşturma sürecinin çoğu, genel bir web sayfasıyla aynıdır. Ancak, URL'yi yapıştırmak yerine dosya oluşturan bir Chrome uzantısı kullanmanız gerekir.
Başlamak için, Figma'yı ve html.to.figma eklentisini öncekiyle aynı şekilde açın.
1. Adım: Chrome Uzantısını İndirin ve Çalıştırın
Bu uzantıyı yalnızca Google Chrome ile kullanabilirsiniz, bu nedenle başlamak için Chrome'u açın. Figma eklentisi iletişim kutusundan şunu seçin: Chrome uzantısı-veya uzantıyı burada aç Chrome tarayıcınızda.
Seçme Chrome'a ekle > Uzantı eklemek Uzantıyı tarayıcınıza eklemek için.
Uzantı eklendiğinde, tasarımını çoğaltmak istediğiniz özel web sitesine veya sayfaya gidin - bir Instagram sayfası kullanıyoruz - ve uzantıyı seçin. Daraltılmış uzantılar, tarayıcınızdaki yapboz parçası simgesinin altında bulunur.
Tüm sayfayı mı yoksa sadece görüneni mi yakalamak istediğinizi soracaktır. Seçiminizi yapın ve ardından yakalama, indirmelerinizde bir .h2d dosyası olarak görünecektir.
Adım 2: Oluşturulan Dosyayı Figma Eklentisine Sürükleyin
Tarayıcınızda Figma uygulamanıza veya Figma sitesine gidin ve indirdiğiniz .h2d dosyasını kutuya sürükleyin. Dosya, genel web sitesi seçeneğiyle aynı şekilde yüklenir ve oluşturulur.
Herkese açık web sayfası sürümünde olduğu gibi, tasarımın yönlerine çift tıklayarak bunları düzenleyebilir veya soldaki menüye tıklayarak düzende nerede göründüklerini görebilirsiniz.
Web sayfası tasarımına aşağıdakiler gibi yeni tasarım öğeleri eklemek isteyebilirsiniz: Figma buzlu cam efektiveya web sayfası tasarımının bazı bölümlerini kopyalayabilirsiniz. Figma sunumları için ana şablon. 2022'de Adobe, Figma'yı satın aldı, böylece gelecekte Figma'yı kullanmanın daha eğlenceli yollarını bekleyebiliriz.
Figma Tasarımlarınızda İlham Almak İçin Herhangi Bir Web Sitesini Kullanın
Figma, öncelikle web sitelerini veya UX/UI sayfalarını sıfırdan tasarlamak için olsa da, nasıl oluşturulduklarını görmek için mevcut web sayfalarını doldurmak için harika bir fırsat. Boş bir sayfadan nereden başlayacağınızdan emin değilseniz, web tasarımınızı mevcut bir sitenin kopyası da yapabilirsiniz.
Html.to.figma eklentisini kullanmanızın bir başka harika nedeni de, halihazırda bir web sitesi tasarlamış olmanız ve erişiminizi kaybetmiş olmanızdır. Sayfayı Figma'da doldurabilir ve gerçekten yeniden başlamak zorunda kalmadan yeniden başlayabilirsiniz.