Figma do HTMLKodowanie projektu do HTML

Twój projekt z Figmy zbudowany w HTML i CSS: strona z wyeksportowanych ramek, z wersją na telefon

Zwykle gotowe w ok. 15 minutPoprawki w cenieKontrola jakości
Pakiety
Ochrona płatnościSzczegóły
  • Poprawki w ramach pakietu są bezpłatne.
  • Jeśli nie odpowiesz w ciągu 3 dni od dostarczenia pracy, zostanie ona zaakceptowana automatycznie.

Pieniądze są rezerwowane w chwili płatności i przekazywane dopiero po akceptacji pracy.

Twój projekt z Figmy zbudowany w HTML i CSS: strona z wyeksportowanych ramek, z wersją na telefon

Przykładowy rezultat

Przykład dla pakietu Standard

Strona główna kliniki stomatologicznej według jej projektu

Przed: projekt przesłany przez klienta

Projekt strony głównej

Po: działająca strona

Pliki: archiwum ZIP z index.html, stylami i 2 obrazkami do strony, gotowe do wgrania na hosting klienta. Obrazy tutaj to zrzuty ekranu strony.

Klient: Bright Smile Dental. Zadanie: zamienić projekt strony głównej w działającą stronę HTML z tym samym układem, kolorami i tekstami oraz przyciskami umawiania wizyt, które dzwonią do kliniki.

Klient i wszystkie dane są wymyślone.

O usłudze

Twój projekt jest gotowy w Figmie i potrzebujesz go jako działającej strony. Wyeksportuj ramki do PNG w skali 1x lub 2x i wgraj je, a zbudujemy je w HTML i CSS: te same sekcje, siatka, odstępy, kolory i przyciski, z prawdziwym tekstem zamiast obrazka z tekstem. Jeśli masz ramkę mobilną, trzymamy się jej; jeśli nie, tworzymy wersję na telefon na podstawie ramki desktopowej. Nie otwieramy plików .fig ani linków do Figmy, więc warstwy, komponenty, warianty i połączenia prototypu nie są odczytywane: wszystko, czego nie widać w eksporcie, np. kolory po najechaniu, opisz w briefie. Zdjęcia rysujemy od nowa, chyba że je wgrasz. Bez animacji, backendu, CMS i hostingu.

Co obejmuje usługa

  • Co otrzymujeszArchiwum ZIP z podstronami, stylami i ilustracjami, gotowe do wgrania na hosting, oraz podgląd każdej podstrony na stronie zamówienia.
  • Wierne Twoim ramkomSekcje, siatka, odstępy, kolory i rozmiary czcionek jak w eksporcie
  • Wersja na telefonZ Twojej ramki mobilnej lub utworzona na podstawie desktopowej
  • Prawdziwy tekstNagłówki i akapity w HTML, które czytają wyszukiwarki
  • Twoje obrazy, jeśli je przyśleszZdjęcia i ikony wyeksportowane osobno trafiają na stronę bez zmian; resztę rysujemy od nowa
  • Czysty kodZwykły HTML i CSS, bez frameworków, nic nie ładuje się z innych serwisów

Jak to działa

  1. 1
    EksportEksportujesz ramki do PNG, wgrywasz je i opisujesz to, czego nie widać
  2. 2
    BudowaBudujemy podstrony i rysujemy brakujące ilustracje
  3. 3
    Podgląd i archiwumPorównujesz podstrony z projektem na komputerze i telefonie, pobierasz archiwum i zgłaszasz poprawki w ramach pakietu

Czego potrzebujemy od Ciebie

Do 5 obrazów w PNG, JPEG lub WebP: ramki wyeksportowane z Figmy w skali 1x lub 2x, jedna podstrona na plik, a jeśli chcesz, także zdjęcia, ilustracje lub logo wyeksportowane osobno, do użycia bez zmian. Napisz, która ramka to która podstrona, nazwy użytych fontów, stany po najechaniu lub rozwinięciu niewidoczne w eksporcie oraz dokąd prowadzi każdy przycisk. Nie pliki .fig ani linki do Figmy.

Zapytamy Cię:

  • Która ramka to która podstrona?
  • Fonty w projekcie
  • Stany niewidoczne w eksporcie
  • Dokąd prowadzi każdy przycisk?
  • Czy projekt jest Twój?

Porównaj pakiety

PakietyPodstawowy1 ramka z Figmy, do 5 sekcji79 złStandard1 ramka z Figmy, do 10 sekcji147 złPremiumDo 3 ramek z Figmy252 zł
Termin1 dzień2 dni3 dni
Poprawki123
Strony113
Sekcjedo 5do 10do 8 na podstronę
Ilustracje rysowane dla strony24—
Wersja na telefonTakTakTak
Co wgraćEksport ramek do PNGEksport ramek do PNGEksport ramek do PNG
Ilustracje rysowane dla podstron——6
Zamów PodstawowyZamów StandardZamów Premium

Ochrona płatności

Płacisz przy składaniu zamówienia, ale pieniądze są przekazywane tylko za zaakceptowaną pracę.

  • Stała cenaCena pakietu nie zmienia się po zapłacie.
  • Pieniądze są zarezerwowanePrzy płatności kwota jest tylko rezerwowana. Serwis otrzymuje ją dopiero po akceptacji pracy.
  • Sprawdzone przed dostarczeniemKażdy wynik przechodzi kontrolę jakości, zanim do Ciebie trafi, a przed akceptacją widzisz go na stronie zamówienia.
  • Bezpłatne poprawkiProś o poprawki w ramach briefu tyle razy, ile przewiduje pakiet.
  • Akceptacja po 3 dniachJeśli w ciągu 3 dni od dostarczenia pracy ani jej nie zaakceptujesz, ani nie poprosisz o poprawki, zostanie zaakceptowana automatycznie. Jeśli po dostarczeniu napiszesz na czacie zamówienia, zamówienie czeka; po naszej odpowiedzi możemy ponownie uruchomić odliczanie 3 dni i poinformujemy o tym na czacie.
  • Ponowne wykonanie lub pełny zwrot pieniędzyJeśli wynik nie odpowiada Twojemu briefowi, a poprawki tego nie naprawiły, lub praca trwa ponad dwa razy dłużej niż termin, napisz na czacie zamówienia: wykonamy pracę ponownie albo zwrócimy całą płatność.
Jak to działa →

Pytania i odpowiedzi

Jak wyeksportować z Figmy?

Zaznacz ramkę, dodaj ustawienie eksportu w sekcji Export w prawym panelu, wybierz PNG w skali 1x lub 2x i kliknij Export. Długa strona może być jedną wysoką ramką; bardzo wysokie ramki lepiej eksportują się w skali 1x.

Czy możecie po prostu użyć mojego linku do Figmy?

Nie, pracujemy tylko z wgranymi obrazami, nie z linkami ani plikami .fig, i nie logujemy się na Twoje konta.

Czy zostaną użyte moje fonty?

Podstrony używają fontów systemowych zbliżonych do Twoich, bo nic nie ładuje się z innych serwisów. Podaj nam nazwy fontów, a dobierzemy najbliższe; pliki fontów webowych możesz dodać później, jeśli pozwala na to licencja.

Czy strona będzie zgodna z projektem co do piksela?

Będzie bliska pod względem układu, kolorów, rozmiarów i kolejności sekcji, ale nie co do piksela: fonty to podobne fonty systemowe, a zdjęcia rysujemy od nowa, chyba że wgrasz własne. Poprawki dopracują to, co jest dla Ciebie ważne.

Czy interakcje z prototypu będą działać?

Linki, przyciski i menu na telefonie działają. Ścieżki prototypu, nakładki, animacje i przejścia nie wchodzą w zakres tej usługi.

Nie ma tu odpowiedzi?

Pakiety