Figma'dan HTML'eTasarımdan HTML'e Dönüştürme

Figma tasarımınız HTML ve CSS ile hazır: dışa aktarılan karelerden bir sayfa, telefon sürümüyle

Genellikle 15 dakika içinde hazırRevizyonlar dahilKalite kontrolü
Paketler
Ödeme korumasıAyrıntılar
  • Paket kapsamındaki revizyonlar ücretsizdir.
  • Teslimattan sonraki 3 gün içinde yanıt vermezseniz iş otomatik olarak onaylanır.

Para, ödeme yaptığınızda bloke edilir ve yalnızca işi onayladığınızda aktarılır.

Figma tasarımınız HTML ve CSS ile hazır: dışa aktarılan karelerden bir sayfa, telefon sürümüyle

Örnek sonuç

Standart paket için örnek

Dental clinic home page built from its design

Before: the design the client sent

The home page design

After: the working page

Files: a ZIP archive with index.html, the styles and 2 pictures for the page, ready to upload to the client's hosting. The pictures here are screenshots of the page.

Client: Bright Smile Dental. Task: turn the home page design into a working HTML page with the same layout, colours and texts, and booking buttons that call the clinic.

Müşteri ve tüm ayrıntılar kurgusaldır.

Bu hizmet hakkında

Tasarımınız Figma'da hazır ve çalışan bir sayfa olarak ihtiyacınız var. Kareleri 1x veya 2x PNG olarak dışa aktarıp yükleyin, biz de HTML ve CSS ile kuralım: aynı bölümler, ızgara, boşluklar, renkler ve düğmeler; metnin resmi yerine gerçek metinle. Mobil kareniz varsa ona göre ilerleriz, yoksa telefon sürümünü masaüstü karesinden hazırlarız. .fig dosyalarını veya Figma bağlantılarını açamıyoruz; bu yüzden katmanlar, bileşenler, varyantlar ve prototip bağlantıları okunmaz: dışa aktarmada görünmeyen her şey, örneğin üzerine gelme renkleri, brife yazılmalıdır. Fotoğraflar siz yüklemedikçe yeniden çizilir. Animasyon, arka uç, CMS veya barındırma yoktur.

Neler dahil

  • Neler alırsınızSayfaların, stillerin ve görsellerin yer aldığı, barındırma hizmetinize yüklemeye hazır bir ZIP arşivi ve sipariş sayfasında her sayfanın önizlemesi.
  • Karelerinize sadıkBölümler, ızgara, boşluklar, renkler ve yazı boyutları dışa aktarıldığı gibi
  • Telefon sürümüMobil karenizden ya da masaüstü karesinden hazırlanır
  • Gerçek metinArama motorlarının okuduğu HTML olarak başlıklar ve paragraflar
  • Gönderirseniz kendi görsellerinizAyrı dışa aktarılan fotoğraflar ve ikonlar olduğu gibi yerleştirilir; gerisi yeniden çizilir
  • Temiz kodSade HTML ve CSS, çatı yok, başka sitelerden yüklenen hiçbir şey yok

Nasıl çalışır

  1. 1
    Dışa aktarmaKareleri PNG olarak dışa aktarır, yüklersiniz ve görünmeyenleri belirtirsiniz
  2. 2
    HazırlamaSayfaları hazırlar, eksik görselleri çizeriz
  3. 3
    Önizleme ve arşivSayfaları tasarımınızla bilgisayarda ve telefonda karşılaştırır, arşivi indirir ve paketiniz kapsamında değişiklik istersiniz

Sizden neler gerekiyor

PNG, JPEG veya WebP biçiminde en fazla 5 görsel: Figma'dan 1x veya 2x dışa aktarılan kareler (dosya başına bir sayfa) ve isterseniz olduğu gibi kullanılacak, ayrı dışa aktarılmış fotoğraflar, illüstrasyonlar veya logonuz. Hangi karenin hangi sayfa olduğunu, kullandığınız yazı tiplerinin adlarını, dışa aktarmada görünmeyen üzerine gelme veya açık durumlarını ve her düğmenin nereye gittiğini belirtin. .fig dosyaları veya Figma bağlantıları kabul edilmez.

Size soracaklarımız:

  • Hangi kare hangi sayfa?
  • Tasarımdaki yazı tipleri
  • Dışa aktarmada görünmeyen durumlar
  • Her düğme nereye gidiyor?
  • Tasarım size mi ait?

Paketleri karşılaştırın

PaketlerTemel1 Figma karesi, en fazla 5 bölüm$21Standart1 Figma karesi, en fazla 10 bölüm$39PremiumEn fazla 3 Figma karesi$67
Teslim süresi1 gün2 gün3 gün
Revizyonlar123
Sayfalar113
Bölümleren fazla 5en fazla 10sayfa başına en fazla 8
Sayfa için çizilen görseller24—
Telefon sürümüEvetEvetEvet
Ne yüklenecekKarelerin PNG dışa aktarımıKarelerin PNG dışa aktarımıKarelerin PNG dışa aktarımı
Sayfalar için çizilen görseller——6
Sipariş ver TemelSipariş ver StandartSipariş ver Premium

Ödeme koruması

Sipariş verirken ödersiniz, ancak para yalnızca onaylanan iş için aktarılır.

  • Sabit fiyatPaket fiyatı, ödeme yaptıktan sonra değişmez.
  • Para bloke edilirÖdeme yaptığınızda tutar yalnızca bloke edilir. İşi onayladığınızda hizmete aktarılır.
  • Teslimattan önce kontrolHer sonuç size ulaşmadan önce kalite kontrolünden geçer ve onaylamadan önce sipariş sayfasında görürsünüz.
  • Ücretsiz revizyonlarBrifiniz kapsamında, paketin izin verdiği sayıda değişiklik isteyin.
  • 3 gün sonra onayTeslimattan sonraki 3 gün içinde işi onaylamaz veya değişiklik istemezseniz iş otomatik olarak onaylanır. Teslimattan sonra sipariş sohbetine yazarsanız sipariş bekletilir; yanıt verdikten sonra 3 günlük süreyi yeniden başlatabiliriz ve bunu sohbette bildiririz.
  • Yeniden yapım veya tam iadeSonuç brifinize uymuyorsa ve revizyonlar sorunu çözmediyse ya da iş teslim süresinin iki katından uzun sürerse sipariş sohbetine yazın: işi yeniden yaparız veya ödemenin tamamını iade ederiz.
Nasıl çalışır →

Sorular ve yanıtlar

Figma'dan nasıl dışa aktarırım?

Kareyi seçin, sağ panelin Export bölümünde bir dışa aktarma ayarı ekleyin, 1x veya 2x PNG seçin ve Export'a tıklayın. Uzun bir sayfa tek bir uzun kare olabilir; çok uzun kareler 1x'te daha iyi dışa aktarılır.

Doğrudan Figma bağlantımı kullanamaz mısınız?

Hayır, yalnızca yüklenen görsellerle çalışırız; bağlantılar veya .fig dosyaları ile çalışmayız ve hesaplarınıza giriş yapmayız.

Yazı tiplerim kullanılacak mı?

Başka sitelerden hiçbir şey yüklenmediği için sayfalarda sizinkine yakın görünen sistem yazı tipleri kullanılır. En yakınlarını seçebilmemiz için yazı tipi adlarını söyleyin; lisansınız izin veriyorsa web yazı tipi dosyalarını sonra ekleyebilirsiniz.

Tasarımımla piksel piksel aynı olur mu?

Yerleşim, renkler, boyutlar ve bölümlerin sırası bakımından yakın olur, ancak piksel piksel aynı olmaz: yazı tipleri benzer sistem yazı tipleridir ve fotoğraflar siz kendinizinkini yüklemedikçe yeniden çizilir. Revizyonlar sizin için önemli olanları düzeltir.

Prototip etkileşimleri çalışır mı?

Bağlantılar, düğmeler ve telefon menüsü çalışır. Prototip akışları, katman pencereleri, animasyonlar ve geçişler bu hizmetin kapsamında değildir.

Yanıtınızı bulamadınız mı?

Paketler