github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
67 lines
4.4 KiB
Plaintext
67 lines
4.4 KiB
Plaintext
---
|
|
title: Työskentele Figman kanssa
|
|
info: Opi, miten voit tehdä yhteistyötä Twentyn Figman kanssa
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
|
|
Tämä opas selittää, kuinka voit tehdä yhteistyötä Figman kanssa.
|
|
|
|
## Käyttöoikeus
|
|
|
|
1. **Access the shared link:** You can access the project's Figma file [here](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
|
2. **Kirjaudu sisään:** Jos et ole vielä kirjautunut sisään, Figma pyytää sinua tekemään niin.
|
|
Avainominaisuudet ovat käytettävissä vain kirjautuneille käyttäjille, kuten kehittäjätila ja mahdollisuus valita erillinen kehys.
|
|
|
|
<Warning>
|
|
|
|
Et voi tehdä yhteistyötä tehokkaasti ilman tiliä.
|
|
|
|
</Warning>
|
|
|
|
## Figman rakenne
|
|
|
|
Vasemmassa sivupalkissa pääset Twentyn Figman eri sivuille. Näin ne on järjestetty:
|
|
|
|
- **Komponenttisivu:** Tämä on ensimmäinen sivu. Suunnittelija käyttää sitä luodakseen ja organisoidakseen uudelleenkäytettävät suunnitteluosat, joita käytetään läpi koko suunnittelutiedoston. Esimerkiksi painikkeet, kuvakkeet, symbolit tai muut uudelleenkäytettävät komponentit. Se auttaa säilyttämään johdonmukaisuuden suunnittelussa.
|
|
- **Pääsivu:** Toinen sivu on pääsivu, joka näyttää projektin täydellisen käyttöliittymän. Voit painaa _**Play**_ käyttääksesi koko sovellusprototyyppiä.
|
|
- **Ominaisuussivut:** Muille sivuille on yleensä omistettu työn alla olevia ominaisuuksia. Ne sisältävät sovelluksen tai verkkosivun tiettyjen ominaisuuksien tai moduulien suunnittelun. Ne ovat yleensä vielä keskeneräisiä.
|
|
|
|
## Hyödyllisiä vinkkejä
|
|
|
|
With read-only access, you can't edit the design, but you can access all features that will be useful to convert the designs into code.
|
|
|
|
### Käytä Dev mode -tilaa
|
|
|
|
Figma's Dev Mode enhances developers' productivity by providing easy design navigation, effective asset management, efficient communication tools, toolbox integrations, quick code snippets, and key layer information, bridging the gap between design and development. Voit oppia lisää Dev Mode -tilasta [tästä](https://www.figma.com/dev-mode/).
|
|
|
|
Vaihda oikean työkalupalkin "Kehittäjä"-tilaan nähdäksesi suunnittelun yksityiskohdat, kopioidaksesi CSS-koodia ja käyttääksesi resursseja.
|
|
|
|
### Käytä prototyyppiä
|
|
|
|
Click on any element on the canvas and press the “Play” button at the top right edge of the interface to access the prototype view. Prototyyppitila sallii sinun olla vuorovaikutuksessa suunnittelun kanssa ikään kuin se olisi lopullinen tuote. Se havainnollistaa ruutujen välistä virtausta ja kuinka käyttöliittymän elementit, kuten painikkeet, linkit tai valikot, käyttäytyvät vuorovaikutuksessa.
|
|
|
|
1. **Siirtymien ja animaatioiden ymmärtäminen:** Prototyyppitilassa voit katsella suunnittelijan lisäämiä siirtymiä tai animaatioita ruutujen tai käyttöliittymäelementtien välillä, tarjoten kehittäjille selkeitä visuaalisia ohjeita suunnitellusta toiminnallisuudesta ja tyylistä.
|
|
2. **Toteutuksen selkeytys:** Prototyyppi voi myös auttaa vähentämään epäselvyyksiä. Kehittäjät voivat olla vuorovaikutuksessa sen kanssa saadakseen paremman käsityksen tiettyjen elementtien toiminnallisuudesta tai ulkonäöstä.
|
|
|
|
Lisätietoja ja ohjeita Figman oppimisesta löydät virallisesta [Figman Dokumentaatiosta](https://help.figma.com/hc/en-us).
|
|
|
|
### Mittaa etäisyyksiä
|
|
|
|
Valitse elementti, pidä `Option`-näppäintä (Mac) tai `Alt`-näppäintä (Windows) ja osoita toista elementtiä nähdäksesi niiden välinen etäisyys.
|
|
|
|
### Figma-laajennus VSCodeen (suositeltu)
|
|
|
|
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
|
lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving your text editor.
|
|
Se on osa suositeltuja laajennuksiamme.
|
|
|
|
## Yhteistyö
|
|
|
|
1. **Kommenttien käyttö:** Olet tervetullut käyttämään kommentointiominaisuutta napsauttamalla kuplakuvaketta työkalupalkin vasemmasta osasta.
|
|
2. **Cursor chat:** A nice feature of Figma is the Cursor chat. Paina vain `;` Macilla ja `/` Windowsilla lähettääksesi viestin, jos näet jonkun muun käyttävän Figmaa samaan aikaan.
|