Claude Code × Figma – kun koodi ja design puhuvat samaa kieltä, saat nopeammin tuloksia

Design ja koodi eri maailmoissa

Kuinka monta palaveria teillä tarvitaan siihen, että kehittäjä saa tehtyä juuri sen, mitä suunnittelija tarkoitti? Useimmissa tiimeissä vastaus on: liian monta.

Tämä ei johdu huolimattomuudesta tai osaamattomuudesta. Useimmissa organisaatioissa design ja koodi yksinkertaisesti asuvat eri paikoissa — designtiimi Figmassa, kehitystiimi koodieditorissa —  ja niiden välissä kulkee jatkuva virta palavereita, kommentteja ja tikettejä. Hidasta ja usein valitettavan tehotonta molemmille osapuolille.

Pilotti suomalaisessa suuryrityksessä

Teimme tekoälypilotin suomalaiselle suuryritykselle, jonka tilanne oli tuttu: design eli Figmassa ja toteutus koodissa, eikä näiden välillä ollut sujuvaa yhteyttä. Iteraatiot tehtiin hitaasti ihmisten välityksellä palaverista toiseen.

Lähdimme testaamaan yhtä konkreettista kysymystä: voisivatko Claude Code ja Figma yhdessä lyhentää tätä välimatkaa?

Käytännössä tämä tarkoitti seuraavaa: veimme olemassa olevan näkymän koodista Figmaan ja suunnittelimme sen pohjalta uuden näkymän, jota ei vielä ollut koodattu. Figman MCP Serveriä hyödyntäen Claude Code generoi siitä toimivan React-toteutuksen. Validoimme ratkaisun yhdessä asiakkaan kanssa käymällä läpi koodin, toteutukseen kuluneen ajan ja sen tuomat hyödyt.

Ilmeisten asioiden, kuten lisääntyneen nopeuden ja lyhentyneen suunnittelu-kehitys-syklin lisäksi syntynyt lopputulos vastasi täydellisesti designia ilman tyypillisiä muutoksia, joita koodauksen aikana tapahtuu. Välimatka designin ja koodin välillä lyheni ja lopputulos vastasi oikeasti suunniteltua designia.

Miten työnkulku toimii käytännössä?

Prosessi voi lähteä liikkeelle koodista tai designista. Tyypillisesti koodista: Claude Code rakentaa näkymän React-toteutuksena karkeasti mutta toimivasti. Figman integraatioiden kautta se tuodaan Figmaan, jossa suunnittelija näkee oikean näkymän eikä erillistä mockupia.

Figmassa muokataan layoutia, typografiaa ja värejä ilman, että koodiin tarvitsee koskea. Muutokset kulkevat takaisin Claude Codeen, joka päivittää toteutuksen. Kehittäjä ei jää arvailemaan, mitä designer on tarkoittanut, vaan hän näkee sen suoraan.

Ponnistuslauta, ei vallankumous

Vaikka työnkulku on kieltämättä todella vaikuttava, ei se silti tule muuttamaan kaikkea. Suunnittelijoiden ja kehittäjien työt ovat siis jatkossakin turvattuja, vaikka yhteistyön nopeutuessa varmasti aikaa säästyy ja työ tehostuu.

Tämä prosessi on kuitenkin askel kohti tilannetta, jossa design ja koodi eivät ole toisistaan irrallisia tiedostoja. Yhteinen kieli löytyy ilman, että kenenkään tarvitsee opetella uutta työkalua tai luopua vanhasta.

Haluaisin haastaa erityisesti ne tiimit, joissa raja designin ja koodin välillä on aina ollut selkeä ja olemassa. Kokeilkaa, mitä tapahtuu, kun suunnittelija ja kehittäjä voivat katsoa ja puhua samasta asiasta ilman kuilua välissä.

Missä tämä toimii parhaiten?

Meillä Identiolla on huomattu, että parhaiten Clauden ja Figman välinen työnkulku toimii tilanteissa, joissa design- ja kehitystiimit ovat tottuneet toimimaan erillään. Myös design systemin tai komponenttikirjaston rakentaminen on luonteva lähtökohta, joskin ymmärrys siitä, kenellä design systemin omistajuus on, tulee olla kirkkaana mielessä näin tehdessä.

Ja toimiihan kyseinen työnkulku myös silloin, kun suunnittelija sattuu olemaan se henkilö joka vastaa sekä designista että toteutuksesta – rooli, jossa teknisesti pätevät designerit tulevat jatkossa olemaan yhä useammin.

Reunaehtoja

Claude Coden generoimaa koodia pitää käydä läpi. Se ei aina tiedä, milloin se on väärässä — ja se voi olla väärässä hyvin vakuuttavasti. Figman ja koodin välinen synkronointi ei toimi saumattomasti joka tilanteessa, ja saavutettavuutta tai muuta tarkkuutta vaativissa kohdissa käsityötä saatetaan edelleen tarita.

Tämä ei kuitenkaan poista sitä tosiasiaa, mitä AI pilotissakin huomattiin: kynnys päästä liikkeelle on matalampi kuin koskaan, ja se on loistava lähtökohta uusien tekoälyavustettujen työnkulkujen käyttöönottoon.

Kokeillaan yhdessä

Meillä on kokemusta tästä työnkulusta sekä asiakasprojekteista että omista piloteistamme. Jos haluat selvittää miten se istuisi teidän tilanteeseenne, ota yhteyttä — mietitään yhdessä!