In 11 Minuten: Framer - Grundlagen für Anfänger | Robert Mion | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

In 11 Minuten: Framer - Grundlagen für Anfänger

teacher avatar Robert Mion, Put Mion your team

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

12 Einheiten (11 Min.)
    • 1. Einführung und wie du Framer installieren

      0:59
    • 2. Neues Dokument erstellen

      0:49
    • 3. Neue Ebene einfügen und bearbeiten

      1:04
    • 4. Hintergründige Farbe hinzufügen

      0:56
    • 5. Lage Schicht horizontal

      1:03
    • 6. Position vertikal

      0:41
    • 7. Eigenschaften der Ebene aktualisieren

      0:56
    • 8. Zustand zur Ebene hinzufügen

      0:41
    • 9. Eigenschaften in den Zustand bringen

      0:55
    • 10. Ereignis hinzufügen und konfigurieren

      1:08
    • 11. Spielzeit und Überprüfung

      0:45
    • 12. Bonus: Framer Dokumente

      1:07
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

154

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Spiele mit Formen, füge Eigenschaften und Interaktionen hinzu Gestalten Sie optisch und durch das Schreiben einiger Codezeilen.

Triff deine:n Kursleiter:in

Teacher Profile Image

Robert Mion

Put Mion your team

Kursleiter:in

Designer, coder and problem solver.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung und wie du Framer installieren: Hallo und willkommen in 11 Minuten auf Robert Me auf. Hier dauert es etwa 10 Minuten, bis Sie in einer Minute etwas lernen, damit wir zusammen lächeln können . Und es dauert ungefähr so lange, um diese zu machen, wie du sie beobachtest. So wird Qualität wahrscheinlich nicht großartig sein. Ich muss Mops im Hintergrund schnarchen, aber wir werden es durchstehen. Die heutige Lektion ist also alles über Framer Prototyping Tool für Design. Alles, was du nach Herzenslust designen willst, und wir werden das bauen. Es sieht vielleicht nicht nach viel aus, aber Sie werden einige Codespiele mit einigen Ebenen schreiben. Du wirst ein paar Zustände und Ereignisse hinzufügen. Alles macht Sinn in ein bisschen. Wenn Sie noch keinen Framer haben, können Sie von Framer Js dot com geben Es ist eine achtstündige Testversion. Fühlen Sie sich frei, um danach zu Siri zu spielen, aber es kostet 130 Dollar zu kaufen, also schlage ich vor, es danach zu schließen und für den nächsten Elternteil zurückzukommen. Also, was ist los? 2. Neues Dokument erstellen: erste Dinge zuerst, lassen Sie uns ein neues Dokument erstellen, so öffnen Framer gehen, dass von Max Spotlight zu tun. Ich mag das in der Presse eingegebenen offenen Rahmen. Hier ist der Begrüßungsbildschirm. Zuerst möchten wir eine neue Dokumente erstellen, so dass Sie Datei neue tun können. Ich werde Befehl drücken und weil ich Tastenkombinationen liebe. Also hier sind wir in einem neuen Dokument. Ich muss eine Leinwand fertig machen, damit wir gezeichnet werden müssen. Etwas könnte auf einer Uhr, einem Telefon, einem Tablet, Yada, Yada zeichnen einem Telefon, einem Tablet, Yada, . Lasst uns Telefon wählen, denn das ist normalerweise, was das ist. Vier. Das gibt uns also ein iPhone und wir sind bereit, es rassistisch, erstellen neue Ebenen, fügen Zustände hinzu und haben so viel Spaß mit Framern. Also sollten Sie genau hier sein und in der nächsten Lektion beginnen, Dinge auf dem Bildschirm hinzuzufügen. 3. Neue Ebene einfügen und bearbeiten: es ist an der Zeit, die erste Ebene hinzuzufügen. Kommen Sie hier oben links, wo Sie einfügen und ein Pluszeichen sehen. Wir gehen. Teoh, wähle diese erste Option. Beachte die Tastenkombination für später. Klicken Sie also darauf und wir haben unsere erste Schicht. Wir sehen es hier drüben am Telefon erscheinen. Wir sehen einige Code bereits für uns und linke Seite hinzugefügt. Also lasst uns diese Ebene ein wenig ändern. Kann einen dieser Kontrollpunkte greifen und ich werde den unteren rechten greifen. Ich ziehe es so, dass es beginnt, die Höhe und Breite dieser Ebene anzupassen. Ich möchte es so bekommen, dass die untere rechte Ecke mit der Mitte des Bildschirms ausgerichtet ist. Also, wenn Sie hier sind, sollten Sie den Punktfang sehen. Und das bedeutet, dass du bereit bist, die Maus loszulassen. Und wir haben später mit einem Code begonnen, der hier drüben geschrieben wurde, genau wie wir es hier wollten. Und das werden wir tun. Eine weitere Sache ist, den Grenzradius zu modifizieren, damit ich diesen kleinen Kreis hier greifen und dasselbe tun kann. Ziehen Sie es nach links nach oben nach unten. Es spielt keine Rolle. Wir wollten nur G o so weit wie möglich, um den Radius so groß wie möglich zu machen. Also, wenn du da bist, lass los. Und das ist alles für diese Lektion. 4. Hintergründige Farbe hinzufügen: Hoffentlich folgen Sie mit, und dies wird später noch mit drei Eigenschaften ausgewählt. Wenn es nicht selektiv und sieht so aus, Sie können es erneut auswählen, indem Sie auf dieses kleine, Hamburger suchen Symbol links online. 14. Gehen wir und greifen das zurück im Bearbeitungsmodus, und ich möchte die Hintergrundfarbe ändern. Der Große tut es nicht für mich. Vielleicht eine schöne rote Farbe. Also lasst uns auf dieses Schachbrettaussehende Rechteck im Einklang mit dem Hintergrund klicken, um einen Farbwähler zu erhalten , und ich liebe dieses nicht so sehr. Ich würde lieber RGB gehen. Lassen Sie uns also die zweite Option wählen, die Farbschieber genannt wird und erhalten bereits Simcoe generiert. Ich möchte Graustufenschieber auf RGB ändern, die mir meine rot, grün und blau und Amish Männer geben Sie hier eine Hex-Farbe ein, so doppelklicken Sie, um es auszuwählen, und wir geben FF 0000, die uns eine schöne drücken Geben Sie schöne rote Farbe, und das ist alles, was für diesen ist 5. Lage Schicht horizontal: bisher Framer Code für uns geschrieben. Es ist an der Zeit, dass wir etwas von uns selbst schreiben, also lasst uns dieses Element auf dem Bildschirm positionieren. Um das zu tun, wollen wir X und A Y Eigenschaft Toe geben, drücken Sie es auf seine jede Achse. Also lassen Sie uns irgendwo klicken, um aus diesem Farbregler zu kommen. Und ich bin am Ende der Hintergrundfarbe angekündigt. Also habe ich gestoßen. Geben Sie es automatisch in dichte eine neue Zeile für mich und bereits Framer, die darauf hinweisen, was es nicht von mir erwarten würde. Also möchte ich eine Ex-Eigenschaft und eine Y-Eigenschaft hinzufügen, damit ich einfach nach unten drücken und eingeben konnte. Und es wird mir den Anfang einer Ex-Eigenschaft geben, Also möchte ich es an der Mitte entlang X ausrichten. Also lasst uns anfangen, ein l für eine Zeile zu tippen und wir können es sehen. Es erwartet, dass also drücken Sie die Eingabetaste und dann die Punkt-Eigenschaft, die wahrscheinlich in ein anderes Siri gelangen wird. Aber es punktet und dann wollen wir, dass es in der Mitte ist. Also fangen Sie an zu tippen, sehen Sie, und wir sind schon, wir bekommen Framer, die es uns bereits geben. Also beenden Sie eingeben und es ist zentriert entlang der X-Achse 6. Position vertikal: Nun, das war nicht so schlimm. Lassen Sie uns das Gleiche entlang der y-Achse machen. Drücken Sie also erneut die Eingabetaste und es hatte früher X dort. Jetzt tut es nicht, weil wir es bereits nächste Eigenschaft gegeben haben. Also lassen Sie uns mit weise nach unten gedrückt gehen, um zu bekommen, Warum geben Sie das zu akzeptieren, und wir werden das gleiche tun. Nehmen Sie ein l für eine Linie und drücken Sie die Eingabetaste, damit es automatisch diesen anderen Punkt und statt der Mitte vervollständigt . Lassen Sie uns unten gehen, damit ich vier Mal nach unten drücken kann, wie Sie hier sehen. Aber ich werde nur Typ B und noch einmal die Zehenposition in die untere Mitte der Leinwand eingeben . Und Sie haben gerade schon zwei Codezeilen geschrieben. Super einfach, richtig? Lasst uns weitermachen. 7. Eigenschaften der Ebene aktualisieren: Bisher haben Sie zwei Codezeilen geschrieben. Gehen wir wieder rein. Wechseln Sie einen Mantel. Also möchte ich vier Werte ändern. Der Name des Layers, die Breite des Layers, erhöhte Ebene und der Randradius des Layers. Also, wie Sie gerade gesehen haben, habe ich doppelt geklickt. Jeder von ihnen. Sie können klicken und ziehen, um sie auszuwählen, sowieso, dass Sie alle diese Zahlen greifen können. Also für mich ist der schnellste Weg, zu doppelklicken, und ich möchte die Breite von 3 75 auf etwas Gleichmäßiges und einfach nur schön für mein Gehirn ändern. Also lassen Sie uns tun 200 eso wir sehen es sofort die richtige dort geändert, was große DoubleClick Höhe für Änderung ist, dass. Also lassen Sie uns das auf etwa 6 50 ändern und ändern den Randradius in etwas wie 40, nur um die Ecken weniger abgerundet zu machen. Und schließlich geben wir diesem einen weniger generischen, aber immer noch irgendwie generischen Namen von nur Box. Also wieder, doppelklicken Sie auf Ebenen, die Ihre Werte eingeben, und Ihr Layer sollte jetzt so aussehen, als Box 8. Zustand zur Ebene hinzufügen: Framer ist ein Prototyping-Tool, und aus diesem Grund erwarten Sie, dass Sie in der Lage sein, Dinge wie Interaktionen und in der Regel Interaktionen beteiligt Übergänge und Animationen und Dinge, die sich im Allgemeinen ändern Zustand und und aus diesem Grund erwarten Sie, dassSie in der Lage sein, Dinge wie Interaktionen und in der Regel Interaktionen beteiligt Übergänge und Animationen und Dinge,die sich im Allgemeinen ändern Zustand und -Zustand basierend auf etwas, das ein Benutzer tut, und Framer ruft jene Layer mit Zuständen und solchen Zuständen zurück, die sich über Ereignisse ändern. Also lassen Sie uns einen Zustand hinzufügen. Gerade jetzt tun wir die gleiche Art und Weise, wie wir auf der Ebene hinzufügen, kommen Sie hier oben links schnell segnen Symbol und werden hier nach ST kommen. Und da es nur eine Ebene gibt, ist das das einzige, was wir einen Zustand so schnell auf Box hinzufügen können. Und hier haben wir einen neuen Zustand Unbox, und es ist nur so genannt ein. 9. Eigenschaften in den Zustand bringen: lassen Sie uns drei Eigenschaften zu diesem Zustand hinzufügen, der auf diese Weise als On Box bezeichnet wird. Schließlich, wenn wir diese ändern, ändern wir diese Zustände mit den Ereignissen, die wir sehen können, wie sich diese Eigenschaften ändern. Also drei Eigenschaften, wir werden unsere Kapazität, Skalierung und Rotation hinzufügen . Beginnen wir mit Schuppen schwächen. Sehen Sie ein paar coole Sachen hier. Jeder von ihnen hat also einen Schieberegler, den wir benutzen werden, um ihn zu ändern. Also werden wir Maßstab machen, auf das Maximum gehen, das ist zwei. Und dort können wir bereits sehen, wie es sich auf dem rechten Code ändert, der links hinzugefügt wird, wie wir es erwartet haben. Nun, das Gleiche, was wir für die Rotation fällig sind. Wir werden es bis zu 360 Grad kurbeln und schließlich Deckkraft. Wir werden das bis auf Null fallen lassen, damit es mehr oder weniger verschwindet. Also wieder, wir haben gerade drei Eigenschaften zu diesem Zustand der späteren hinzugefügt, die wir bereits Box genannt hatten . Und bald werden wir in der Lage sein, zwischen diesen Staaten zu übergehen 10. Ereignis hinzufügen und konfigurieren: Also haben wir zwei Zustände auf Box, den Standardstatus und den Zustand namens A und wir wollen in der Lage sein, zwischen diesen Zuständen zu wechseln , basierend auf etwas, das wir tun oder etwas, was der Benutzer tut. Normalerweise ist es ein Klick. Oder vielleicht ist es ein Schweben. Wer weiß was in diesem Fall, wir werden es auf einen Klick stützen. Wenn der Benutzer klickt, möchten wir zwischen diesen Zuständen wechseln. Also lassen Sie uns wieder hinzufügen. Komm hier rauf, genau wie wir es vorher getan haben, für Schichten und Staaten. Und wir werden ein Ereignis hinzufügen und wir wollen ein Ereignis zu Box hinzufügen, das ist ein Klick, und wir wollen ein paar schnelle zwei Dollar hinzufügen. Also gehen Sie weiter und klicken Sie auf schnell, und wir werden ein wenig Code hier, und es ist sehr einfach. Wir wollen Feld Ziel, wenn Sie darauf klicken und Property Box, die wir Art von Trigger wollen ist Zustand Zyklus, und wir können tatsächlich sehen, es ein wenig hier. Wenn wir zu Zeiten gehen, können wir sehen, dass das eine Funktion ist, und wenn Sie eingeben, bekommen wir diese Funktion und wir müssen sie jetzt aufrufen und ein Job-Skript. Sie nennen es, indem Sie eine Klammer eingeben und automatisch für mich geschlossen. Also hier haben wir den fertigen Code. 11. Spielzeit und Überprüfung: wie im Intro versprochen Hier, 10 Minuten von Ihnen arbeiten in einer Minute von uns, zusammen lächelnd. Also hier haben wir diesen Code entweder selbst erzeugt oder geschrieben. Mal sehen, was es tut. Also lassen Sie uns über die Blöcke gehen, klicken Sie darauf in einem wirbelt und verschwindet. Ist das nicht schick? Also machen wir es noch einmal und Zykluszustände, genau wie wir es erwarten würden. Klicken Sie auf, klicken Sie auf, klicken Sie auf alles nach Herzenslust. Also, was machen wir? Wir haben eine Ebene erstellt. Wir haben dynamisch Eigenschaften hinzugefügt, die wir Code für Eigenschaften geschrieben haben. Wir haben einen Zustand dynamisch erzeugt diese Eigenschaften und wieder hier bei einem Ereignis und erzählten, was Toe passieren sollte, was passieren sollte, wenn dieses Ereignis ausgelöst wird. Herzlichen Glückwunsch. Und ich hoffe, Sie genießen. 12. Bonus: Framer Dokumente: Sie fragen sich vielleicht ähnlich wie ich, wenn ich diese Videos ansehe, wie ich über Dinge wie einen Linienzustands-Zyklus wusste. Es ist eine gute Frage. Und ich wollte dir die Docks in Framer zeigen, weil du dort eine Menge von diesem Zeug herausfinden wirst . Also sagen wir, wir wollen lernen, was eine Zeile tut, so kann ich doppelklicken, kopieren Sie es und Computer Icons als Docks und Framer Fantastisch für wirklich gut geschriebene Docks. Also fügen Sie Aiken eine Linie hier rein und drücken Sie, geben Sie ein und es wird mich Saw blinkt gelb genau dort, wo eine Linie ist. Und wenn ich nach unten scrolle, kann ich alles darüber lesen, was eine Zeile tut und die gleiche Sache mit dem Zustandszyklus-Typ, der in und drücken Sie die Eingabetaste Geben Sie uns sechs Übereinstimmungen. Die 1. 1 ist nicht großartig. So viel drückte diesen Pfeil nach rechts und cool. Es hat uns direkt dorthin gebracht. Also hier ist, wo Sie alles über die Dinge, die ich in diesem Kurs verwendet haben, lernen und irgendwie beginnen, diese Dinge auf der linken Seite zu erkunden, um herauszufinden, wo Sie über eine ganze Reihe von anderen coolen Sachen lesen können . Das sind also die Docks und der Framer. Sehr hilfreich, um weiterzugehen und mehr über Framer zu erfahren