Opastan sinut oman käytännön kokemukseni läpi: mitä Framerin tekoäly todellisuudessa rakentaa, miten suunnittelutyökalut vertautuvat kilpailijoihin, kannattaako alustan lukittuna pysyminen ja kenelle Framer on parempi valinta kuin vaihtoehdot kuten Webflow tai Wix. Loppuun mennessä tiedät, sopiiko Framer projektiisi vai kannattaako katsoa muualle.
Mikä on Framer?
Framer on visuaalinen verkkosivustojen rakentaja, joka yhdistää tekoälygeneroinnin ammattimaiseen suunnittelun hallintaan.
Sen sijaan, että joutuisit valitsemaan nopean tekoälyn luoman sivuston ja vaivalloisen manuaalisen suunnittelun välillä, Framer antaa tehdä molemmat: aloita tekoälyllä ja luo responsiivinen viivapiirros sekunneissa, ja viimeistele sitten jokainen pikseli Figma-tyyppisten muokkaustyökalujen avulla.
Tämä toimii käytännössä näin:
- Tekoälygenerointi (Wireframer): Kirjoita yksityiskohtainen pyyntö, kuten “asiakasportaali kotipalveluille kirjautumisella, tilauslomakkeella ja kojelaudalla”, ja Framerin tekoäly luo alle 60 sekunnissa monisivuisen, mobiiliystävällisen viivapiirroksen, jossa on oikea teksti ja ehdotetut asettelut.
- Manuaalinen hienosäätö: Vaihda ammattimaiselle canvas-työskentelyalueelle, jossa voit säätää asetteluja, korjata mobiilikohtia, lisätä animaatioita, sitoa sisältö sisäänrakennettuun CMS:ään ja muokata jokaisen suunnitteludetaljin ilman koodin kirjoittamista.
- Yhden klikkauksen julkaisu: Julkaise välittömästi live-osoitteeseen, kun Framer hoitaa hostingin, optimoinnin ja responsiivisen toimituksen automaattisesti.
Kun alustat kuten Wix keskittyvät yksinkertaisuuteen ja Webflow tähtää kehittäjiin, jotka tuntevat olonsa mukavaksi CSS-tyyppisten kontrollien kanssa, Framer asemoituu sillaksi: tarpeeksi nopea ei-koodareille, jotka haluavat tekoälyapua, mutta tarpeeksi tehokas suunnittelijoille, jotka tarvitsevat Figma-tason tarkkuutta.
Kompromissi? Framer on suljettu ekosysteemi. Et voi viedä raakaa HTML-/CSS-koodia muualle isännöitäväksi, mikä tarkoittaa, että olet sidottu heidän alustaan niin kauan kuin sivustosi on toiminnassa.
Kenelle Framer on tarkoitettu?
Framer toimii parhaiten suunnittelijoille ja markkinoijille, jotka haluavat tekoälyn tuoman nopeuden ilman, että luopuvat suunnittelun hallinnasta. Jos olet valmis oppimaan kohtalaisen jyrkän oppimiskäyrän ja arvostat pikselintarkkaa lopputulosta, työkalu ei petä. Seuraavat hyötyvät eniten:
Startup-perustajat, jotka rakentavat markkinointisivustoja tai asiakasporttaaleja: Tarvitset ammattimaisen näköisen verkkosivun nopeasti, mutta haluat myös brändin yhdenmukaisuuden ja mobiilisuorituskyvyn. Framerin tekoäly luo rakenteen sekunneissa, minkä jälkeen voit mukauttaa värejä, fontteja ja asetteluja vastaamaan brändiäsi ilman kehittäjän palkkaamista.
Freelance-suunnittelijat ja toimistot, jotka rakentavat asiakkaille: Olet kyllästynyt kirjoittamaan käsin vastaavia kohtakohtia koodissa tai taistelemaan kömpelöiden drag-and-drop -rakentajien kanssa. Framer tarjoaa sinulle:
- Figma-tyyppisen tarkkuuden räätälöityihin suunnitelmiin
- Todellisen CMS:n dynaamiselle sisällölle (blogipostaukset, portfoliot, tapaustutkimukset)
- Nopeat iterointisyklit, kun asiakkaat pyytävät muutoksia
- Ammattimaiset animaatiot ja vuorovaikutukset ilman JavaScriptiä
Markkinoijat, jotka ajavat laskeutumissivukampanjoita: Tarvitset laskeutumissivuja tuotelanseerauksia, liidien keräämistä tai A/B-testejä varten. Framerin tekoäly luo perustan, sisäänrakennettu CMS antaa päivittää tekstiä ilman suunnittelun koskettamista, ja julkaisu vie kolme sekuntia.
Ei-tekniset käyttäjät, joilla on perussuunnittelutaitoja: Olet kokeillut Canvaa tai perussuunnittelutyökaluja ja ymmärrät käsitteitä kuten kohdistus ja välistys. Framerin oppimiskäyrä on hallittavissa, jos käytät tunnin opastusten katsomiseen, ja palkintona on täydellinen suunnittelun hallinta ilman koodausta.
Framer ei ole ihanteellinen täydellisille aloittelijoille, jotka odottavat Wix-tason yksinkertaisuutta, tai kehittäjille, joilla on tarve viedä koodi ja isännöidä itse. Alustan lukittautuminen on todellinen, joten varmista, että olet valmis pysymään heidän ekosysteemissään pitkällä aikavälillä.
Framerin hyvät ja huonot puolet
- Tekoäly luo responsiiviset viivapiirrokset sekunneissa
- Figma-tason tarkkuus manuaalisiin suunnittelumuutoksiin
- Todellinen CMS dynaamisen sisällön hallintaan
- Kolmen sekunnin julkaisu automaattisen hostauksen kanssa
- Sivu vierekkäin -muokkaus työpöytä-, tabletti- ja mobiilinäkymissä
- Yleiset tyyli-muuttujat päivittävät koko sivuston
- Ei tekoälykrediittirajoituksia ilmaisessa paketissa
- Kuvakekirjastot sisäänrakennettuina suoraan editoriin
- Yksityiskohtainen versiohistoria jokaiselle julkaisulle
- Google Analytics -integraatio yksinkertaisella liittämisellä
- Oma verkkotunnustuki maksullisissa paketeissa
- Jyrkkä oppimiskäyrä suunnittelun aloittelijoille
- Tekoäly luo viivapiirroksia, ei viimeisteltyjä sivustoja
- Alustan lukkiutuminen, ei HTML/CSS-vientiä
Valmiina näkemään, sopiiko Framerin tekoäly todella työskentelyprosessiisi? Aloita ilmaiseksi ja luo responsiivinen viivapiirros alle 60 sekunnissa. Viimeistele sitten jokainen pikseli itse. Sillä Framerissa et jää jumiin tekoälyn antamiin ratkaisuihin. Olet itse ohjaksissa.
Framerin ominaisuudet
- Tekoälypohjainen viivapiirrosten luonti tekstikäskyistä
- Figma-tyylinen visuaalinen canvas pikselitarkkuudelle
- Sisäänrakennettu CMS taulukkomaisella käyttöliittymällä
- Responsiivisten kohdan muokkaus (työpöytä/tabletti/mobiili)
- Yhden klikkauksen julkaisu automaattisella hostauksella
- Mukautetun koodin lisääminen analytiikkaa varten
- Lomakeintegraatiot (Formspark, sähköpostien kerääminen)
- Kuvakekirjaston haku ja vedä&pudota
Omakohtainen kokemukseni Framerista
Framer ei ole pelkästään tekoälyllä toimiva verkkosivukone tai pelkkä visuaalinen suunnittelutyökalu; se yhdistää molemmat. Voit:
- Aloita tekoälyllä: Kirjoita käsky kuten “Luo palvelupyyntöportaali kodinpuhdistusyritykselle” ja saat täysin responsiivisen, tekstillä täytetyn kotisivun alle 30 sekunnissa Framerin Wireframerilla.
- Muokkaa manuaalisesti: Viimeistele jokainen pikseli Figma-tyylisessä canvasissa (säädä asetteluja, hienosäädä animaatioita, määritä kohdat tai liitä suunnitelmia suoraan Figmasta). Koodia ei tarvita.
Testasin molempia tiloja.
1. Rekisteröityminen: Tilin luominen
Aloitin matkani Framerin etusivulta. En halunnut viipyä markkinointitekstien parissa liian pitkään, joten suuntasin suoraan näytön oikeassa yläkulmassa olevaan “Sign up” -painikkeeseen.
Kun klikkasin sitä, tummaa taustaa vasten keskelle ilmestyi puhdas valkoinen laatikko. Framer tarjosi muutaman vaihtoehdon aloittamiseen:
- Continue with Google: Tavallinen “yhden klikkauksen” vaihtoehto.
- Email: Manuaalinen syöttö niille, jotka haluavat pitää tilinsä erillään.
Päätin valita sähköpostivaihtoehdon, koska halusin nähdä, ilmenisikö mitään ärsyttäviä vahvistussilmukoita. Syötin sähköpostiosoitteeni ja klikkasin “Continue”. Näyttö päivittyi välittömästi ja kehotti “Check your inbox.”
Siirryin sähköpostitiliini. Sekuntien sisällä saapui sähköposti.
Linkki avasi uuden välilehden ja pyysi “Link confirmation”. Minun piti klikata “Confirm” todistaakseni, että olin oikea henkilö, joka pyysi linkkiä. Kun tein niin, olin virallisesti sisällä, mutta en ollut vielä kojelaudassa.
Minun piti luoda profiili. Kirjoitin etunimeksi “Angus” ja sukunimeksi “Lazan”.
Näkyvissä oli valintaruutu sähköpostipäivityksille, jonka jätin valituksi, koska halusin oikeasti nähdä, millaisia vinkkejä he lähettäisivät minulle.
Seuraavaksi tuli kysely. Tämä on nykyisin yleistä kaikissa työkaluissa, ja se on yleensä vähiten suosimani osa. Framer kuitenkin piti sen verrattain lyhyenä. Se kysyi minulta:
- Mihin aiot käyttää Frameria? Valitsin “Business”, koska halusin simuloida todellista käyttötapausta.
- Kuinka suuri yrityksesi on? Valitsin “Just me”.
- Mikä on roolisi? Valitsin “Marketer”.
- Mitä aiot rakentaa? Valitsin “Agency or professional services website”.
- Kuinka paljon kokemusta sinulla on suunnittelutyökaluista? Valitsin keskimmäisen vaihtoehdon: “I use them for basic tasks now and then”.
- Miten kuulit Framerista? Klikkasin “Google Search”.
Kun klikkasin “Get Started”, sain vielä yhden ponnahdusikkunan. Siinä kehotettiin lataamaan “Desktop App”.
Se lupasi paremman kokemuksen, mukaan lukien ominaisuuksia kuten “image exporting”. Päätin jättää sen väliin ja klikkasin “Continue in Browser”. Halusin nähdä, onko verkkoversio itsessään tarpeeksi tehokas.
Mielipiteeni rekisteröitymisestä:
Rehellisesti sanottuna tämä oli erittäin sujuva kokemus. Olen kokeillut muita työkaluja, joissa vahvistussähköposti saapuu vasta kymmenen minuutin kuluttua, tai joissa kysely on kolmenkymmenen kysymyksen mittainen. Framer päästi minut sisään alle kolmessa minuutissa.
2. Ensivaikutelma: ‘Manuaalinen’ reitti ja mallikirjasto
Kun rekisteröitymisen haasteet olivat takana, löysin itseni pääkojelaudasta. Se oli erittäin selkeä. Vasemmalla oli sivupalkki, jossa näkyi käyttäjänimi ja “New”-painike. Keskellä oli suuri “Pick a Template” -ikkuna.
Päätin aloittaa katsomalla manuaalista reittiä ennen tekoälyyn hyppäämistä. Halusin nähdä, miltä Framer-sivuston “luuranko” näytti.
Selailein malligalleriaa, joka oli jaettu useisiin loogisiin osioihin:
- Portfolio: Suunnittelijoille ja valokuvaajille.
- Business: Startupeille ja pienyrityksille.
- Agency: Erityisesti palveluntarjoajille.
- Resume: Yksinkertaiset yhden sivun mallit.
Huomasin malleja kuten “Nitro”, “Stad” ja “Akio”. Useimmat niistä näyttivät hyvin “techy”. Lopulta päätin klikata “Dreelio”-nimistä mallia.
Pidin nimestä, ja esikatselussa näkyi kattava kojelaudan tyyppinen asettelu, joka tuntui läheltä sitä, mitä halusin Service Request Portaliini.
Kun malli latautui, hämmästyin siitä, kuinka paljon käyttöliittymä muistutti Figmaa. Jos olet koskaan käyttänyt ammattilaissuunnittelutyökalua, tunnet olosi heti kotoisaksi.
Jos et ole, saatat kokea pieniä paniikin tunteita. Näin näyttö oli jaettu:
- Vasen sivupalkki: Siinä oli kolme välilehteä: Pages, Layers ja Assets. “Pages” näytti sivuston rakenteen (Home, Pricing, Blog). “Layers” näytti jokaisen laatikon, tekstirivin ja kuvan nykyisellä sivulla. “Assets” oli globaalien tyylien, kuten värien ja fonttien, hallintaan.
- Ylärivi (Top Bar): Siinä oli työkaluja “Insert”, “Layout”, “Text”, “CMS” ja “Actions” varten. Lisäksi siellä oli “Play”-painike live-esikatselua varten.
- Keskellä oleva canvas: Se näytti varsinaisen verkkosivuston. Parasta oli, ettei se näyttänyt vain yhtä näkymää; se näytti kolme “Breakpointia” vierekkäin: Desktop (1200px), Tablet (810px) ja Phone (390px).
- Oikea sivupalkki: Tämä oli “Properties”-paneeli. Aina kun klikkasin jotain canvasilla, paneeli täyttyi asetuksista, kuten “Size”, “Position”, “Styles”, “Effects” ja “CMS”.
Vietin noin kymmenen minuuttia pelkästään klikkailen elementtejä. Klikkasin tekstilohkon kotisivulla, ja oikea sivupalkki antoi vaihtaa fontin “Interistä” “Satoshihin”.
Klikkasin painiketta, ja pystyin lisäämään “Hover”-efektin, joka sai sen hehkumaan, kun hiiri liikkui sen päällä. Se tuntui todella “aidolta”, ikään kuin muokkaisin sivuston todellista koodia visuaalisesti.
Mielipiteeni käyttöliittymästä:
Käyttöliittymä on massiivinen. Se ei ole “helppokäyttöinen” samalla tavalla kuin perus drag-and-drop -työkalu. Katselemista riittää. Se on kuitenkin uskomattoman tehokas. Huomasin, että kaikki oli oletuksena “responsiivista”.
Jos siirsin jotain työpöytänäkymässä, näki heti, miten se vaikutti mobiilinäkymään. Tämä on valtava askel eteenpäin vanhemmista rakennustyökaluista, joissa mobiilisivusto täytyy suunnitella täysin erillisenä tehtävänä. Tuntui siltä, että olin hallinnassa jokaisen pikselin suhteen.
3. Datan hallinnan perustaminen: CMS ja backend-logiikka
Koska rakensin Service Request Portalia, tiesin, ettei pelkkä staattinen teksti riitä. Klikkasin ylärivillä olevaa “CMS”-painiketta. Uusi näkymä avautui, ja se tuntui yksinkertaistetulta Airtablen tai Google Sheetsin versiolta.
Näin vasemmalla “Collections”. Mallissa oli jo valmiina “Blog”- ja “Features”-kokoelmat. Klikkasin “Featuresiin” ja näin kentät “Title”, “Slug”, “Date”, “Summary” ja “Author”. Jokainen rivi edusti eri sovelluksen ominaisuutta.
Yritin lisätä uuden kohteen (“New Item”) nähdäkseni, kuinka vaikeaa se oli. Kirjoitin “Plumbing Service” ja tallensin. Se tapahtui välittömästi. Siistiä on, että voit palata suunnitteluusi, valita tekstilaatikon ja “sitouttaa” sen kyseiseen CMS-kenttään.
Tämä tarkoittaa, että jos päivitän palvelun hinnan CMS:ssä, se päivittyy joka kerta, kun hinta esiintyy verkkosivustolla.
Tutkin myös CMS:n “Settings”-asetuksia. Se antoi mahdollisuuden:
- Lisää kenttiä: Voin lisätä kytkimiä, numeroita, kuvia tai jopa muotoiltua tekstiä.
- Suodata ja lajittelu: Voin valita näyttäväni kotisivulla vain “Featured”-kohteet.
- Pluginit: CMS:n yläreunassa oli “Plugins”-valikko. Siellä oli vaihtoehdot tuoda dataa Google Sheetsistä tai CSV-tiedostoista. Lisäksi löytyi “CMS Expert” -plugin, joka näytti auttavan migraatiossa.
Mielipiteeni CMS:stä:
CMS on yllättävän monipuolinen. Se on oikea tietokanta. Sen käyttö on paljon helpompaa kuin Webflow’n CMS, joka voi muuttua hyvin sekavaksi.
Tässä se tuntuu vain taulukkolaskelmalta.
4. Tekoälykokemus: Koneen ohjaaminen käskyllä
Kun tunsin hallitsevani manuaaliset työkalut, päätin kokeilla ominaisuutta, joka herätti eniten mielenkiintoani: Framer AI:ta. Palasin pääkojelaudalle ja klikkasin “Start with AI” -painiketta.
Tämä vei minut hyvin erilaiselle näytölle. Se oli lähes kokonaan musta, ja keskellä oli yksi suuri tekstiruutu, jossa luki “Never start from scratch. Create a landing page for…”
En halunnut antaa laiskaa käskyä, kuten “a site for a plumber”. Halusin nähdä, ymmärtääkö se rakennetta ja logiikkaa. Olin valmistanut yksityiskohtaisen käskyn “Service Request Portalille”. Kirjoitin:
“A client portal where homeowners can request home services like plumbing, electrical, and landscaping. It needs a login page, a service request form with dropdowns for different service types, a dashboard for tracking the status of submitted requests, and a user profile page. Use a clean, professional blue and white color scheme.”
Etsin merkkirajaa, mutta en sellaista nähnyt. Liitin tekstini, ja kaikki meni sisään. Klikkasin “Generate”-painiketta, ja tunsin oikeasti pienen innostuksen nähdäkseni, mitä tapahtuisi.
Näyttö muuttui työtilaksi, ja yläreunaan ilmestyi violetti edistymispalkki. Se ei kuitenkaan ollut vain latauspalkki.
Näin tekoälyn oikeasti “ajatustelevan”. Se alkoi luoda oikealle “Site Palettea”, valiten eri sinisen ja harmaan sävyjä. Sitten se alkoi “piirtää” viivapiirrosta.
Mielipiteeni käskyjen antamisesta:
Käskykenttä on hyvin selkeä, mikä miellytti minua. Se ei häiritse tarjoamalla kasapäin asetuksia tai “AI Styles” -vaihtoehtoja.
Se antaa vain sinun ilmaista ajatuksesi. Olin vaikuttunut, ettei se kompastellut pidempään, teknisempään käskyyni. Tuntui siltä, kuin olisin oikeasti kommunikoimassa suunnittelijan kanssa sen sijaan, että täyttäisin jonkin lomakkeen.
5. Katsoessani tekoälyn rakentamista
Seuraava oli koko testin vaikuttavin osa. Nojauduin taaksepäin ja katselin, kuinka tekoäly rakensi kolmea versiota sivustosta (Desktop, Tablet ja Mobile) täsmälleen samaan aikaan.
Se aloitti luomalla “Skeletonin”. Näin laatikoita ja viivoja ilmestymässä paikkoihin, joissa otsikot ja painikkeet olisivat.
Sitten se alkoi “lihakkeittemaan” niitä. Laatikkoihin ilmestyi tekstiä. Se ei ollut vain paikkatekstiä, vaan oikeaa markkinointitekstiä. Se kirjoitti otsikoita kuten:
- “Create Your Account”
- “Signup to request services and track status”
- “Your Submitted Service Requests”
Tekoäly ei luonut vain yhtä kotisivua. Se yritti luoda eri “osioita”, joita pyysin. Näin sen rakentavan taulukon kojelautaasi varten. Näin sen rakentavan login-lomakkeen mallin. Se lisäsi jopa paikkakuvia nykyaikaisista taloista ja ammattimaisilta näyttävistä työkaluista.
Tarkistin “Credit”-tilanteen. Olin ilmaisessa paketissa, enkä nähnyt mitään varoituksia “AI credits”ista tai “Tokenseista”. Pystyin suorittamaan koko generoinnin ilman, että minulle sanottiin, että minun pitäisi päivittää. Se oli miellyttävä yllätys, sillä monissa tekoälytyökaluissa saat noin kolme yritystä, ennen kuin sinulta aletaan pyytää luottokorttia.
Mielipiteeni rakennusprosessista:
Tekoälyn työskentelyn seuraaminen on kokemus sinänsä. Se on paljon nopeampaa kuin manuaalinen rakentaminen. Noin 45 sekunnissa minulla oli moniosainen, responsiivinen verkkosivusto. Se säästi tuntikausia laatikoiden hinauksesta ja siitä yrittämisestä, mihin “Home”-painike pitäisi sijoittaa.
Huom: Framerin tekoäly generoi viivapiirroksia, ei täysin suunniteltuja sivustoja. Mitä näet, on rakenteellinen luonnos. Asettelua ja sisällön sijoittelua ilman lopullista visuaalista viimeistelyä.
6. Manuaalinen hienosäätö: Tekoälyn virheiden korjaaminen
Kun tekoäly oli valmis, minulla oli näytöllä elävä, muokattavissa oleva sivusto. Se näytti kauempaa katsottuna hyvältä, mutta lähempi tarkastelu paljasti muutamia ongelmia.
Huomasin kolme pääongelmaa:
- Mobiiliesiintymät päällekkäin: Puhelinnäkymässä (390px) otsikko “Service Request Dashboard” oli aivan liian suuri. Se ulottui näytön oikean reunan yli. Minun piti klikata tekstilohkoa ja pienentää fonttikokoa manuaalisesti mobiilikohtaan.
- “Nested Link” -virhe: Pieni punainen huutomerkkikuvake ilmestyi yläriville. Klikkasin sitä, ja se antoi virheilmoituksen: “Nested Link. You have a link inside another link. This will break in some browsers.” Kävi ilmi, että tekoäly oli lisännyt linkin kehykseen (‘Frame’) ja sitten linkin nappiin (‘Button’) kehyksen sisällä. Minun piti avata ‘Layers’-paneeli, löytää vanhempi kehys ja poistaa linkki.
- Yleiset lomakkeet: Pyysin käskyssäni “dropdowns”, mutta tekoäly antoi vain tavallisia tekstinsyöttökenttiä. Se ei rakentanut itse pudotusvalikon logiikkaa. Minun piti klikata lomaketta, avata “Insert”-valikko, etsiä “Input”-komponentit ja vetää pudotusvalikko manuaalisesti lomakkeeseen.
Vietin myös aikaa leikkimällä oikeanpuoleisella “Styles”-paneelilla. En ihastunut tekoälyn valitsemaan sinisen sävyyn, joten siirryin “Assets”-välilehdelle ja muutin “Primary Color” -muuttujaa.
Välittömästi jokainen painike ja otsikko koko sivustolla vaihtui uudeksi värikseni. Se oli erittäin tyydyttävää.
Mielipiteeni hienosäädöstä:
Tekoäly vie sinut noin 70%:iin valmiudesta, ja manuaaliset työkalut antavat viimeiset 30%, joka todella merkitsee. Jos käyttäisin yksinkertaisempaa tekoälytyökalua, en pystyisi korjaamaan mobiiliesiintymiä päällekkäin tai vaihtamaan pääväriä yhtä helposti.
7. Integraatioiden ja ulkoisten yhteyksien tutkiminen
Portaali ei ole paljoakaan hyödyksi, jos se ei keskustele muiden työkalujen kanssa. Klikkasin ylärivillä olevaa “Insert”-painiketta ja etsin “Plugins”- ja “Integrations”-osiot.
Tässä mitä löysin markkinapaikalta:
- Lomakkeet: Voin yhdistää tilauslomakkeeni palveluun nimeltä “Formspark” tai saada tulokset sähköpostiin.
- Kuvakkeet: Saatavilla oli FontAwesome-, Lucide- ja Feather-kuvakekirjastoja. Käytin näitä korvaamaan joitain tekoälyn antamia yleiskuvakkeita.
- Media: Näin integraatiot YouTubeen, Vimeoihin ja Spotifyhyn.
- Sosiaaliset: Voin lisätä suoria syötteitä Instagramista tai X:stä (Twitter).
- Seuranta: Siirryin “Site Settings” -osioon “Analytics”-välilehdellä. Näin kentän “Google Analytics Measurement ID”. Minun piti vain liittää koodini sinne aloittaakseni kävijöiden seurannan.
Huomasin myös asetuksista “Custom Code” -välilehden. Tämä on valtava lisäys edistyneemmille käyttäjille, sillä sen avulla voit lisätä mukautettua CSS:ää tai JavaScriptiä sivustollesi.
Mielipiteeni integraatioista:
Framerilla on vankka ekosysteemi. Se ei ole yhtä massiivinen kuin WordPress, mutta se kattaa kaikki olennaiset. Pidin siitä, miten kuvakkeet olivat rakennettu suoraan “Insert”-valikkoon.
Minun ei tarvinnut mennä ulkopuoliselle sivustolle lataamaan SVG:tä; kirjoitin vain “Plumbing” kuvakehaussa ja vedin sen canvasille. Tämä tekee työnkulusta erittäin sujuvan.
8. Julkaisu: Portaalin julkaiseminen
Viimeinen testi oli nähdä, voinko oikeasti julkaista tämän sivuston verkkoon. Siirsin kohdistimeni näytön oikeaan yläkulmaan ja pidin hiiren sinisen “Publish”-painikkeen päällä.
Kun klikkasin sitä, ilmestyi pieni ikkuna, jossa oli muutama vaihtoehto:
- Domain: Se tarjosi satunnaisen URL-osoitteen: cheerful-confidence-550172.framer.app. Voin klikata “Custom Domain” -painiketta, jos haluan liittää oman URL:n (vaatii kuitenkin maksullisen paketin).
- Staging: Näin kytkimen “Staging”. Tämä on “Pro”-ominaisuus, jonka avulla voit testata muutoksia yksityisellä linkillä ennen kuin julkaiset ne julkisesti.
- Näytä muutokset (View Changes): Klikkasin tätä, ja se näytti luettelon kaikista muokkauksista, jotka olin tehnyt viime julkaisun jälkeen. Se näytti jopa profiilikuvani muokkausten vieressä.
Klikkasin “Update”. Kolmen sekunnin kuluttua ilmestyi viesti: “Your site is live!”
Klikkasin linkkiä, ja Service Request Portalini avautui uudessa selainvälilehdessä. Olin hämmästynyt, kuinka nopeasti se latautui.
Tein nopean testin puhelimellani, ja mobiilisivu näytti täydelliseltä nyt, kun olin korjannut fonttikoot. Kokeilin klikata “Request Service” -painiketta, ja se toimi täsmälleen niin kuin olin suunnitellut editorissa.
Mielipiteeni julkaisemisesta:
Yleensä on pitkä “buildaus”-vaihe, jossa alusta optimoi kuvat ja valmistaa tietokannan. Framer näyttää hoitavan kaiken taustalla. Tuntuu siltä, kuin kääntäisit vain katkaisijaa.
9. Versionhallinta: Voinko todella omistaa työni?
Yksi asia, joka huolestuttaa minua näissä “all-in-one” -alustoissa, on se, olenko lukittuna. Palasin asetuksiin tutkiakseni “Versions” -välilehden.
Framer pitää yksityiskohtaista historiaa jokaisesta “Publish”-painikkeen painalluksesta. Näin tarkalleen, milloin olin tehnyt muutokseni, ja pystyin jopa “Restore”:maan vanhan version, jos vahingossa poistin jotain tärkeää.
Kuitenkin etsin “Export” -painiketta. Halusin nähdä, voisinko ladata raakat HTML-/CSS-tiedostot ja isännöidä niitä omalla palvelimellani.
Ilmaisessa paketissa tämä ei ollut vaihtoehto. Framer on “Closed Loop” -järjestelmä. He haluavat, että suunnittelet heidän työkalullaan ja isännöit heidän palvelimillaan.
Tutkin myös “GitHub”-integraation. Huomasin, että erittäin korkean tason “Enterprise”-tileillä voit synkronoida GitHubin kanssa, mutta tavalliselle käyttäjälle jää mahdollisuus käyttää Framerin ekosysteemiä.
Mielipiteeni omistajuudesta:
Tämä on se alue, jossa tulee olla varovainen. Et “omista” koodiasi perinteisessä mielessä. Et voi vain siirtää sivustoasi eri isännöintipalveluun, kuten Bluehostiin tai SiteGroundiin. Olet sitoutunut Frameriin.
Monille käyttöystävällisyys on kaupan arvoinen, mutta tämä on hyvä pitää mielessä, jos haluat täyttä riippumattomuutta.
Lopuksi: Hyvä, huono ja rehellinen totuus
Useiden tuntien testauksen jälkeen tässä rehellinen arvioini Framerista.
Hyödyt:
- Tekoäly on oikea työkalu, ei lelu. Se ei vain luo “sivua”; se rakentaa responsiivisen, hyvin suunnitellun rakenteen, joka säästää tuntikausia työtä.
- Manuaalinen editori on uskomaton. Figma-käytön teho osana verkkosivuston rakentajaa on täysin uudella tasolla. Se antaa hallinnan tason, jota Wix tai Squarespace eivät yllä.
- Nopeus on vaikuttava. Rekisteröitymisestä lopulliseen julkaisuun kaikki on nopeaa. Ei viiveitä, ei pitkiä latausruutuja.
- CMS on helppo ymmärtää. Se tuntuu taulukkolaskelmalta, mikä tekee siitä hyvin lähestyttävän ei-teknisille käyttäjille.
Harmit:
- Oppimiskäyrä on jyrkkä. Jos et ole koskaan käyttänyt suunnittelutyökalua, olet hukassa ensimmäisen tunnin ajan. Se ei ole “drag-and-drop” yksinkertaisessa merkityksessä; se on “koordinaattipohjainen” suunnittelutyökalu.
- Tekoälyvirheitä tulee väistämättä. Sinun täytyy silti osata korjata päällekkäin menevä teksti ja tekniset virheet, kuten “nested links”.
- Alustan lukkiutuminen. Olet sidottu heidän hostaukseen ja hinnoitteluun. Jos he muuttavat ehtojaan, olet jumissa.
Framerin hinnoittelu ja paketit
Framer tarjoaa ilmaisen paketin, joka on aidosti käyttökelpoinen testaamiseen ja ei-kaupallisiin projekteihin.
Saat käyttöösi 10 CMS-kokoelmaa, 1000 sivua, 5 Mt tiedostojen latauksia ja tekoälypohjaiset suunnittelutyökalut ilman luottokorttitietoja.
Koukku? Et voi liittää omaa verkkotunnusta. Sivustosi pysyy yoursite.framer.app-alidomainissa.
Maksullisten pakettien erittely
| Paketti | Hinta | Parhaiten sopii | Keskeiset ominaisuudet | Rajoitukset |
|---|---|---|---|---|
| Basic | $10/kk (vuosilaskutus) | Freelance-käyttäjät, henkilökohtaiset portfoliot |
|
|
| Pro | $30/kk (vuosilaskutus) | Toimistoille, startupeille, asiakasprojekteihin |
|
|
| Scale | $100/kk (vuosilaskutus) | Paljon liikennettä kerääville sivustoille, markkinointitiimeille |
|
|
| Enterprise | Mukautettu hinnoittelu | Suuret tiimit, jotka tarvitsevat mukautettuja rajoituksia, turvallisuutta ja omistettua tukea |
| Ota yhteyttä myyntiin |
Lisäosat (kaikki paketit)
- Translation locales: $20/kieli (enintään 2 Basicissa, 10 Prossa, 20 Scalessa)
- A/B-testaus (vain Scalessa): $50 per 500 000 tapahtumaa
- Custom proxy (vain Scalessa): $300/kk
Maksutiedot
Framer hyväksyy luottokortit ja PayPalin (aluekohtaisesti). Enterprise-paketit tukevat rahansiirtoa pankkisiirrolla.
Palautuskäytäntö: Jos olet EU:ssa tai Turkissa, voit pyytää hyvitystä 14 päivän kuluessa ostopäivästä ottamalla yhteyttä tukeen.
Vaihtoehto Framerille: Webflow
Jos tavoitteesi on rakentaa sisältöpainotteisia sivustoja kehittyneellä SEO:lla, vankalla CMS-toiminnallisuudella tai sisäänrakennetulla verkkokaupalla, vahva vaihtoehto on Webflow.
Webflow keskittyy skalautuvuuteen, puhtaaseen koodiin ja yritystason ominaisuuksiin.
| Ominaisuus | Framer | Webflow |
|---|---|---|
| Käytön helppous | Intuitiivinen Figma-käyttäjille; vapaamuotoinen canvas tuntuu tutulta suunnittelijoille. Ei-suunnittelijoille jyrkkä oppimiskäyrä. | Aluksi jyrkempi oppimiskäyrä; strukturoitu flexbox-/grid-järjestelmä vaatii CSS-käsitteiden tuntemusta. |
| Parhaiten sopii | Suunnittelijoille, startupeille ja toimistoille, jotka rakentavat markkinointisivustoja, portfolioita tai interaktiivisia prototyyppejä runsailla animaatioilla. | Markkinointitiimeille, kehittäjille ja yrityksille, jotka tarvitsevat skaalautuvan CMS:n, kehittyneitä SEO-työkaluja, verkkokaupan ja sisältöpainotteiset sivustot. |
| Mobiilisovellukset | Pelkkä verkkoversio; ei sisäänrakennettua mobiilisovellusten rakentajaa. Responsiivinen suunnittelu työpöytä-/tabletti-/mobiilikohdissa. | Pelkkä verkkoversio; ei sisäänrakennettua mobiilisovellusten rakentajaa. Edistynyt responsiivinen suunnittelu mukautetuilla kohdilla ja CSS-grid-hallinnalla. |
| Tausta ja data |
|
|
| Suunnittelun joustavuus |
|
|
| Suorituskyky | Optimoitu Google Core Web Vitalsille. Nopeat latausajat. Suljettu alusta. Ei koodin vientiä. | Puhtaat, semanttiset HTML/CSS/JS-tiedostot. Nopeat sivut edistyneellä optimoinnilla. Koodin vienti saatavilla (korkeammilla paketeilla). |
| Hinnoittelu | Ilmainen paketti saatavilla. Maksulliset paketit: Basic ($10/kk), Pro ($30/kk), Scale ($100/kk). | Ilmainen paketti saatavilla. Maksulliset paketit: Basic ($14/kk), CMS ($23/kk), Business ($39/kk). |
Valitse Framer, jos: olet suunnittelija, jolle Figma on tuttu, tarvitset upeita animaatioita ja haluat käynnistää markkinointisivustoja tai prototyyppejä nopeasti ilman koodausta.
Valitse Webflow, jos: rakennat sisältöpainotteisia sivustoja (blogeja, portfolioita yli 100 sivulla), tarvitset kehittyneitä SEO-työkaluja, haluat verkkokauppaominaisuuksia tai tarvitset mahdollisuuden viedä puhdas koodi itseisännöintiä varten.
Lopullinen tuomio Framerista
Framer on nopein tapa päästä ideasta esitettävään prototyyppiin, ja joskus se on kaikki, mitä tarvitset. Sitä kutsua “verkkosivuston rakentajaksi tuotantosovelluksille” on kuitenkin harhaanjohtavaa. Se on huippuluokan suunnittelun prototyyppityökalu, johon julkaisu on liitetty.
Käytä sitä sellaisena, ja olet tyytyväinen. Odota liikaa, ja tulet törmäämään rajoihin.
